Google devtools活用術

Google devtools活用術

@tan_yuki

13年5月25日土曜日

自己紹介・田中佑樹・Chatwork・JavaScript / PHP / Vim・twitter @tan_yuki

13年5月25日土曜日

ブラウザ何使ってますか？突然ですが

13年5月25日土曜日

13年5月25日土曜日

Chromeちょろめたん

　　　　　　　 　∧＿∧　　　┌────────────　　　　　　 ◯（ ´∀｀ ）◯ ＜ 僕は、ちょろめたん！　　　　　　　 ＼　　　 ／　　└────────────　　　　　　　_／ ＿＿ ＼_

　　　　　　（＿／　　 ＼＿）

13年5月25日土曜日

why?

13年5月25日土曜日

13年5月25日土曜日

かくみる13年5月25日土曜日

利点

・直感的なUI・ソース追いやすい・充実したショートカットキー

13年5月25日土曜日

起動してみましょうCmd + Shift + I

( Windows: Ctrl + Shift + I )

13年5月25日土曜日

13年5月25日土曜日

13年5月25日土曜日

Elements

13年5月25日土曜日

できること

・現在のHTML構造の確認・CSSの確認・簡単なスタイルの微調整

13年5月25日土曜日

13年5月25日土曜日

・Double Click

→編集・Tab

→次の要素へ移動

13年5月25日土曜日

右クリックメニュー

13年5月25日土曜日

便利機能たち

13年5月25日土曜日

ブレークポイント

13年5月25日土曜日

http://backbonejs.org/examples/todos/

Test page

13年5月25日土曜日

右サイドバー

13年5月25日土曜日

スタイル編集・Click

→編集・Tab

→次の要素へ移動

スタイル追加

13年5月25日土曜日

色変更パレット

13年5月25日土曜日

数値の位置で編集モードの時 ↑：1px Up

↓：1px Down

Shift + ↑：10px Up

Shift + ↓：10px Down

13年5月25日土曜日

Sources

13年5月25日土曜日

できること

・JS、CSSの閲覧・JSブレークポイント・変数の値の参照・あといろいろ

13年5月25日土曜日

これだけは覚えて

・Cmd + Alt + F　( Windows: Ctrl + Shift + F )・Cmd + O ( Windows: Ctrl + O )

13年5月25日土曜日

覚えておいて損はない

・Cmd + L　( Windows: Ctrl + G )

13年5月25日土曜日

全てはこの中に

13年5月25日土曜日

13年5月25日土曜日

注目！

13年5月25日土曜日

例外が投げられた時にその場所で止まってくれる

13年5月25日土曜日

Test page

http://www.tan-yuki.info/practice/cmujp/chrome_devtools/

13年5月25日土曜日

JavaScriptを整形してくれる

13年5月25日土曜日

Test page

https://www.google.co.jp/

13年5月25日土曜日

クリック！

13年5月25日土曜日

パカッ！

13年5月25日土曜日

ブレークポイントまでおける！

13年5月25日土曜日

まとめ

13年5月25日土曜日

これだけは覚えて

・Cmd + Alt + F　( Windows: Ctrl + Shift + F )・Cmd + O ( Windows: Ctrl + O )

13年5月25日土曜日

ちょろめたんはできるこ

13年5月25日土曜日

最後に

https://www.facebook.com/groups/443380692411788/

13年5月25日土曜日

ご清聴ありがとうございました

13年5月25日土曜日