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日土曜日

Google devtools活用術