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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

3. 選択要素を確認する

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

おまけ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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