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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 選択要素を確認する

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

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

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

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

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

おまけ

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

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

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

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

参考コマンドライン 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

Chrome DevTools の Console を使いこなす/Using the Chro...

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

howdy39

More Decks by howdy39

Other Decks in Programming

Featured

Transcript

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

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

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

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

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

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

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

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