Upload
keiichi-kobayashi
View
1.449
Download
3
Embed Size (px)
DESCRIPTION
秋のJavaScript祭りLT向け
Citation preview
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();
デモ
デバッグ用ツールを活用しましょう
ご清聴ありがとうございました