Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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

howdy39

May 18, 2018
Tweet

More Decks by howdy39

Other Decks in Programming

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')
    上の2つは同じ結果
    ※$が既に定義されているサイトがよくある(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