すごいぞ!Google Chrome!

Creator’s village in EHIMEVol.3

12年12月17日月曜日

自己紹介

株式会社アイムービック

Webシステムの構築が主なお仕事

GDG(Google Developer Group)四国所属

2008年に愛媛へ移住

12年12月17日月曜日

おはなしすること

Google Chrome とは？

拡張機能のススメ

開発ツールでスピードアップ

まとめ

12年12月17日月曜日

Google Chromeとは?

12年12月17日月曜日

の前に！

ブラウザ戦争を引き起こすつもりは

ありません。

他のブラウザをディスるつもりもないです。

できるだけ心おだやかに

12年12月17日月曜日

ブラウザ遍歴

12年12月17日月曜日

Google Chromeとは？

Googleが開発しているブラウザ

Chromiumをベースに開発

2008年に公開

カナリア、開発版、ベータ版、安定版

安定版の最新バージョンは、「22」

12年12月17日月曜日

いったいどれくらいつかわれてるの？

12年12月17日月曜日

ブラウザシェア

http://gs.statcounter.com/#browser-ww-monthly-201110-201210

12年12月17日月曜日

ブラウザシェア(国内)

http://gs.statcounter.com/#browser-ww-monthly-201110-201210

12年12月17日月曜日

世界で１番！日本で２番！

12年12月17日月曜日

使いたくなりませんか？

12年12月17日月曜日

使ってみませんか？

12年12月17日月曜日

拡張機能のススメ

12年12月17日月曜日

拡張機能とは？

ブラウザをカスタマイズできる

追加機能

Firefox、Safari、Operaにもあるよ

Chrome ウェブストアからダウンロード

HTML、CSS、JavaScriptで作れます

12年12月17日月曜日

効率化のための10の拡張機能

12年12月17日月曜日

Fire Mobile Simulator

12年12月17日月曜日

Google Quick Scroll

12年12月17日月曜日

Image Properties Context

12年12月17日月曜日

Mobile Barcoder

12年12月17日月曜日

JavaScript Errors Notifier

12年12月17日月曜日

PageSpeed Insights

12年12月17日月曜日

JSON Formatter

12年12月17日月曜日

XV - XML Viewer

12年12月17日月曜日

ColorZilla

12年12月17日月曜日

Cybozu Live Checker

12年12月17日月曜日

この他にもいっぱいあります。

12年12月17日月曜日

Chrome ウェブストア

12年12月17日月曜日

開発ツールでスピードアップ

12年12月17日月曜日

Developer Tool

12年12月17日月曜日

実は、Webの開発にめっちゃ使えます

12年12月17日月曜日

Ver.22になります

12年12月17日月曜日

起動方法

Windows

「Ctrl」+「Shift」+ i

Mac

「Cmd」+「option」+ i

もしくは、メニューから

12年12月17日月曜日

画面の説明

12年12月17日月曜日

メニューエリア

12年12月17日月曜日

機能エリア

12年12月17日月曜日

コンソールエリア

12年12月17日月曜日

フッターエリア

12年12月17日月曜日

なにができるのか？

12年12月17日月曜日

８つの機能

Elements

Resources

Network

Sources

Timeline

Profiles

Audits

Console

12年12月17日月曜日

Elements

DOMツリーの確認

要素の持つCSSスタイルの確認

Boxモデルの確認

DOMブレイクポイント

12年12月17日月曜日

Resources

対象ページに読み込まれている

リソースを確認

HTML、画像、CSS、JavaScript

ローカルストレージ、Cookie etc...

12年12月17日月曜日

Network

ネットワークを介してダウンロードされたリソースを確認

12年12月17日月曜日

Sources

JavaScriptのコードデバッグ

12年12月17日月曜日

Timeline

ページの描画に費やされる時間の概要を確認

12年12月17日月曜日

Profiles

CPUの実行時間やメモリ使用量を確認

12年12月17日月曜日

Audits

ページを解析し、読み込み時間を短縮するための最適化を方法を確認

12年12月17日月曜日

Console

ページと対話的にJavaScriptを使える

12年12月17日月曜日

Console API

あわせて覚えて欲しい

もともとはFirebugが持っていた機能

便利すぎてChromeでも使えるように

12年12月17日月曜日

console.log/debug/info

コンソール上にログを表示する

本来は動作が異なるが、Chrome上では

同じ

12年12月17日月曜日

console.warn/error

console.logに比べて、コンソール上

での表示が強調される

12年12月17日月曜日

console.time/timeEnd

コンソール上にtimeからtimeEndまでの

経過時間を表示することができる

12年12月17日月曜日

詳細はこちら

12年12月17日月曜日

もっと詳しく知りたい

12年12月17日月曜日

Google Developers

12年12月17日月曜日

Google Developers

12年12月17日月曜日

Google Developers

12年12月17日月曜日

Google Developers

12年12月17日月曜日

Google Developers

12年12月17日月曜日

これでもいいです

12年12月17日月曜日

まとめ

12年12月17日月曜日

手に馴染んだ工具を作るように、一番好きなブラウザを作ってください

一番好きなブラウザのあらゆる機能を使って、作業効率を上げてみましょう

12年12月17日月曜日

ありがとうございました。

12年12月17日月曜日