狠狠撸

Google devtools
活用術
@tan_yuki
13年5月25日土曜日

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

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

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

かくみる

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

起動してみましょう
Cmd + Shift + I
( Windows: Ctrl + Shift + I )

Elements

できること
?現在のHTML構造の確認
?CSSの確認
?簡単なスタイルの微調整

?Double Click
→編集
?Tab
→次の要素へ移動

右クリック
メニュー

便利機能たち

ブレークポイント

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

右サイドバー

スタイル編集
?Click
→編集
?Tab
→次の要素へ移動
スタイル追加

色変更パレット

数値の位置で編集モードの時
↑：1px Up
↓：1px Down
Shift + ↑：10px Up
Shift + ↓：10px Down

Sources

できること
?JS、CSSの閲覧
?JSブレークポイント
?変数の値の参照
?あといろいろ

これだけは覚えて
?Cmd + Alt + F
?( Windows: Ctrl + Shift + F )
?Cmd + O
( Windows: Ctrl + O )

覚えておいて損はない
?Cmd + L
?( Windows: Ctrl + G )

全てはこの中に

注目！

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

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

JavaScriptを整形してくれる

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

クリック！

パカッ！

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

まとめ

ちょろめたんはできるこ

最後に
https://www.facebook.com/groups/443380692411788/

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

Google devtools活用術