Embed Size (px)
DESCRIPTION
Citation preview
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日土曜日
クリック！
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日土曜日
