Chromeデベロッパーツールを使ってみる

@kobayan_tokyo

自己紹介

@kobayan_tokyohttp://blog.clock-up.jp/フリーランス。プログラマ。講師。

最近作ったもの：http://filydoc.net/最近作っているもの：http://stat.mx/

最近（今朝）作ったもの

https://github.com/kobake/amazon-shop-toolAmazon注文履歴を表示するもの（PhantomJS）

Chromeデベロッパーツールを使おう

とりあえずF12押そう (Chromeの場合)

Developer Tool が出る

Developer Tool とは

今表示しているページの

・DOMを解析したり

・DOMを変更したり

・スクリプトを解析したり

・スクリプトを実行したり

等々できるもの。

どこで使う？

・自分のページを解析

　・サイズおかしい → Padding とか確認

　・CSSクラス名忘れた → マウスで要素選択して表示

・他人のページを解析

　・「ここの見た目」のHTMLってどうなってる？

要素選択

これだけでも強力

HTMLにマウスをかざして要素選択

HTMLにマウスをかざして要素選択

HTMLにマウスをかざして要素選択

Ctrl+F で検索ボックスが出る

HTML内検索もできるよ

HTML内検索もできるよ

見た目を右クリックして要素選択

見た目を右クリックして要素選択

見た目にマウスをかざして要素選択

左上の虫眼鏡アイコンをクリック

見た目にマウスをかざして要素選択

左上の虫眼鏡アイコンをクリック

見た目にマウスをかざして要素選択

見た目にマウスをかざして要素選択

要素の解析

スクリプト実行等

要素のHTMLをコピー

「Copy as HTML」

要素のHTMLをコピー：結果

<li id="mhi2nd"><a title="ヤフオク!" href="http://rdsig.yahoo.co.jp/_ylt=A2RhOA4IvQtU_xUAgx2JBtF7/RV=1/RE=1410141832/RH=cmRzaWcueWFob28uY28uanA-/RB=aV3FjoKnMhe.sE0moujdMVVQRL8-/RU=aHR0cDovL2F1Y3Rpb25zLnlhaG9vLmNvLmpwLw--/RS=^ADA7zjRp66Jz3a1OAXQ.Yj5LjaC9Vk-">ヤフオク!</a></li>

要素のCSSパスをコピー

「Copy CSS Path」

要素のCSSパスをコピー：結果

#masthead > h1 > a > img

コンソール

スクリプト実行等

Consoleタブ

jQuery導入

if(!window['jQuery']){ !function () { var script = document.createElement("script"); script.setAttribute("src", "//code.jquery.com/jquery-2.0.0.min.js"); document.body.appendChild(script); }(); setTimeout(function(){ jQuery.noConflict(); }, 800);}

jQuery導入

実行したいコードを貼り付けてEnter

セレクタで要素取得

セレクタで要素取得

要素の属性を取得

要素の属性を取得

要素の属性を変更

fadeOut()呼んでみる。

要素の属性を変更

fadeOut()呼んでみる。

応用：フォーム入力とか

キーワード

入力

応用：フォーム入力とか

ボタン

クリック

応用：フォーム入力とか

実行結果

よくわからないけど、とりあえず遊びたい

jQuery('img').fadeOut();

jQuery('div').fadeOut();

デモ

デバッグ用ツールを活用しましょう

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