Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Chrome DevTools の Console を使いこなす/Using the Chro...
Search
howdy39
May 18, 2018
Programming
0
240
Chrome DevTools の Console を使いこなす/Using the Chrome dev tool
howdy39
May 18, 2018
Tweet
Share
More Decks by howdy39
See All by howdy39
Slackbot × RAG で実現する社内情報検索の最適化
howdy39
2
460
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
84
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1.2k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
590
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
610
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.5k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.3k
Promise
howdy39
1
340
カラーユニバーサルデザイン / color universal design
howdy39
0
840
Other Decks in Programming
See All in Programming
もう僕は OpenAPI を書きたくない
sgash708
5
1.9k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
210
「個人開発マネタイズ大全」が教えてくれたこと
bani24884
1
190
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.5k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
140
Rails 1.0 のコードで学ぶ find_by* と method_missing の仕組み / Learn how find_by_* and method_missing work in Rails 1.0 code
maimux2x
1
190
From the Wild into the Clouds - Laravel Meetup Talk
neverything
0
140
AIプログラミング雑キャッチアップ
yuheinakasaka
17
4.2k
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
300
もう少しテストを書きたいんじゃ〜 #phpstudy
o0h
PRO
17
3.9k
データの整合性を保つ非同期処理アーキテクチャパターン / Async Architecture Patterns
mokuo
54
19k
第3回関東Kaggler会_AtCoderはKaggleの役に立つ
chettub
3
1.2k
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
10
510
Bash Introduction
62gerente
611
210k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Rails Girls Zürich Keynote
gr2m
94
13k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Designing on Purpose - Digital PM Summit 2013
jponch
117
7.1k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
28
9.3k
How STYLIGHT went responsive
nonsquared
98
5.4k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Designing for humans not robots
tammielis
250
25k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Transcript
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') 上の2つは同じ結果 ※$が既に定義されているサイトがよくある(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