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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. 参考
    コマンドライン 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 full-size slide