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

Transcript

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

   View Slide

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

   View Slide

3. Chrome Extension を作るときに便利！
   Chrome Extension 開発は、実際に動いているサイトを開いて
   Dev Console で開発をしていくと効率が良い
   愚直にやると次の手順（とてもめんどくさい）
   1. ソース変更
   2. Extensionのビルド
   3. Extensionのリロード
   4. 画面のリロード
   5. 動作確認
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

10. clear()
    Console をクリアする
    `Ctrl + L` または `Cmd + K` で消せるので出番はない
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. 3. 選択要素を確認する
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

23. おまけ
    

    View Slide

24. コーディングのコツ
    画面の要素を探したり、結果を変換したりという操作を繰り返して
    調整していくため次の2点を守ると効率が良い
    1. var はなるべく使わない
    ※ let, const は再定義できないので使わない
    2. ワンライナーで書く
    for や if は使わずに、Array.map や Array.filter のメソッド
    チェーンを使って絞っていく
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide