Chrome DevTools の Console を使いこなす/Using the Chrome dev tool

Transcript

1. 1.

   Chrome DevTools の Console を使いこなす 2018/05/18 第6回 TG社フロントエンド勉強会 Tatsuya Nakano(howdy39)

2. 2.

   データ抽出に便利！ その場で簡易スクレイピングをして画面情報を抽出 APIを使うまでもないけど、画面のこの部分が欲しい時とかに使う

3. 3.

   Chrome Extension を作るときに便利！ Chrome Extension 開発は、実際に動いているサイトを開いて Dev Console で開発をしていくと効率が良い 愚直にやると次の手順（とてもめんどくさい）

   1. ソース変更 2. Extensionのビルド 3. Extensionのリロード 4. 画面のリロード 5. 動作確認
4. 4.

   コマンドライン API を ちょっとだけ覚えよう

5. 5.

   document.querySelectorAll と似ているけど配列を返すのがポ イント 1. $$('.menu-button') // Array 2. document.querySelectorAll('.menu-button') //

   NodeList $$(selector)
6. 6.

   $(selector) document.querySelector と似ている 1. $('.docs-title-input') 2. document.querySelector('.docs-title-input') 上の２つは同じ結果 ※$が既に定義されているサイトがよくある(jQuery) 　その場合、$$()[0]で代用

7. 7.

   $$, $ を使うことで入力文字数が減らせる！ とくに $$ は配列に変換するのがめんどくさいので必須 1. $$().map 2. Array.from(document.querySelectorAll()).map

   3. [...document.querySelectorAll()].map $$,$ を使う
8. 8.

   $_ 直前の実行結果が格納されている $$('title') // <title>​Qiita​</title>​ console.log($_) // <title>​Qiita​</title> ※$_が既に定義されているサイトがたまにある 　その場合、1行で書いてしまうか、var

   で退避させる
9. 9.

   copy(object) クリップボードに実行結果をコピーする copy($('title'))

10. 10.

    clear() Console をクリアする `Ctrl + L` または `Cmd + K`

    で消せるので出番はない
11. 11.

    table(data[, columns]) console.tableのエイリアス 配列をテーブル表示する columns パラメータで絞り込みが可能

12. 12.

    inspect(object/function) Elements パネルの当該要素を選択状態にする inspect($('title'))

13. 13.

    dir(object) オブジェクトのプロパティを表示する dir($('title'))

14. 14.

    例）Qiitaのトレンド記事一覧のタイトルと URLを取得する手順

15. 15.

    1. 取得したい画面項目を Webインスペクタで選択

16. 16.

    2. クラスやタグ名であたりをつける $$('.tr-Item_title')

17. 17.

    3. 選択要素を確認する

18. 18.

    4. 選択要素のプロパティを確認する

19. 19.

    5. Array.mapでプロパティを絞った結果を確認 $$('.tr-Item_title') .map(e => ({textContent: e.textContent, href: e.href}))

20. 20.

    table()でも確認できる table( $$('.tr-Item_title') .map(e => ({textContent: e.textContent, href: e.href})) )

21. 21.

    6. JSONでコピーする copy( $$('.tr-Item_title') .map(e => ({textContent :e.textContent, href: e.href}))

    )
22. 22.

    7. TSVでコピーしてそのまま貼り付け copy( $$('.tr-Item_title') .map(e => [e.textContent, e.href].join('\t')) .join('\n') )

23. 23.

    おまけ

24. 24.

    コーディングのコツ 画面の要素を探したり、結果を変換したりという操作を繰り返して 調整していくため次の2点を守ると効率が良い 1. var はなるべく使わない ※ let, const は再定義できないので使わない

    2. ワンライナーで書く for や if は使わずに、Array.map や Array.filter のメソッド チェーンを使って絞っていく
25. 25.

    Snipets Sources パネルの Snipets によく使うコード（スニペット）を保存す ることができる 定期的に行う処理がある場合は保存しておくと便利

26. 26.

    Snipets 実装例 ※URL遷移もセットで保存しておくと Good

27. 27.

    Eager evaluation Google IO 2018 で発表された新機能 リアルタイムで結果を下部に表示する Canary に搭載済み(Eager evaluation

    を ONにすること）
28. 28.

    参考 コマンドライン API リファレンス https://developers.google.com/web/tools/chrome-devtools/console/command-line-r eference コンソール API リファレンス https://developers.google.com/web/tools/chrome-devtools/console/console-referen

    ce Array https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Ar ray