Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Chromeデベロッパーツール

3,180 views

Published on

秋のJavaScript祭りLT向け

Published in: Technology
  • Be the first to comment

Chromeデベロッパーツール

  1. 1. Chrome デベロッパーツール を使ってみる @kobayan_tokyo
  2. 2. 自己紹介 @kobayan_tokyo http://blog.clock-up.jp/ フリーランス。プログラマ。講師。 最近作ったもの:http://filydoc.net/ 最近作っているもの:http://stat.mx/
  3. 3. 最近(今朝)作ったもの https://github.com/kobake/amazon-shop-tool Amazon注文履歴を表示するもの(PhantomJS)
  4. 4. Chrome デベロッパーツール を使おう
  5. 5. とりあえずF12押そう (Chromeの場合) Developer Tool が出る
  6. 6. Developer Tool とは 今表示しているページの ・DOMを解析したり ・DOMを変更したり ・スクリプトを解析したり ・スクリプトを実行したり 等々できるもの。
  7. 7. どこで使う? ・自分のページを解析  ・サイズおかしい → Padding とか確認  ・CSSクラス名忘れた → マウスで要素選択して表示 ・他人のページを解析  ・「ここの見た目」のHTMLってどうなってる?
  8. 8. 要素選択 これだけでも強力
  9. 9. HTMLにマウスをかざして要素選択
  10. 10. HTMLにマウスをかざして要素選択
  11. 11. HTMLにマウスをかざして要素選択
  12. 12. Ctrl+F で検索ボッ クスが出る HTML内検索もできるよ
  13. 13. HTML内検索もできるよ
  14. 14. 見た目を右クリックして要素選択
  15. 15. 見た目を右クリックして要素選択
  16. 16. 見た目にマウスをかざして要素選択 左上の虫眼鏡アイ コンをクリック
  17. 17. 見た目にマウスをかざして要素選択 左上の虫眼鏡アイ コンをクリック
  18. 18. 見た目にマウスをかざして要素選択
  19. 19. 見た目にマウスをかざして要素選択
  20. 20. 要素の解析 スクリプト実行等
  21. 21. 要素のHTMLをコピー 「Copy as HTML」
  22. 22. 要素のHTMLをコピー:結果 <li id="mhi2nd"><a title="ヤフオク!" href="http://rdsig.yahoo. co. jp/_ylt=A2RhOA4IvQtU_xUAgx2JBtF7/RV=1/RE=14101418 32/RH=cmRzaWcueWFob28uY28uanA- /RB=aV3FjoKnMhe.sE0moujdMVVQRL8- /RU=aHR0cDovL2F1Y3Rpb25zLnlhaG9vLmNvLmpwLw-- /RS=^ADA7zjRp66Jz3a1OAXQ.Yj5LjaC9Vk-">ヤフオク! </a></li>
  23. 23. 要素のCSSパスをコピー 「Copy CSS Path」
  24. 24. 要素のCSSパスをコピー:結果 #masthead > h1 > a > img
  25. 25. コンソール スクリプト実行等
  26. 26. Consoleタブ
  27. 27. 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); }
  28. 28. jQuery導入 実行したいコードを 貼り付けてEnter
  29. 29. セレクタで要素取得
  30. 30. セレクタで要素取得
  31. 31. 要素の属性を取得
  32. 32. 要素の属性を取得
  33. 33. 要素の属性を変更 fadeOut() 呼んでみる。
  34. 34. 要素の属性を変更 fadeOut() 呼んでみる。
  35. 35. 応用:フォーム入力とか キーワード 入力
  36. 36. 応用:フォーム入力とか ボタン クリック
  37. 37. 応用:フォーム入力とか 実行結果
  38. 38. よくわからないけど、とりあえず遊びたい jQuery('img').fadeOut(); jQuery('div').fadeOut();
  39. 39. デモ
  40. 40. デバッグ用ツールを 活用しましょう
  41. 41. ご清聴 ありがとうございました

×