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
290
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
560
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
180
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.6k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
670
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
670
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.7k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.4k
Promise
howdy39
1
380
カラーユニバーサルデザイン / color universal design
howdy39
0
940
Other Decks in Programming
See All in Programming
The State of Fluid (2025)
s2b
0
200
AIコーディングAgentとの向き合い方
eycjur
0
240
Google I/O recap web編 大分Web祭り2025
kponda
0
2.9k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
110
私の後悔をAWS DMSで解決した話
hiramax
4
170
AWS発のAIエディタKiroを使ってみた
iriikeita
1
100
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
350
Jakarta EE Core Profile and Helidon - Speed, Simplicity, and AI Integration
ivargrimstad
0
230
旅行プランAIエージェント開発の裏側
ippo012
1
470
TanStack DB ~状態管理の新しい考え方~
bmthd
2
350
testingを眺める
matumoto
1
120
Microsoft Orleans, Daprのアクターモデルを使い効率的に開発、デプロイを行うためのSekibanの試行錯誤 / Sekiban: Exploring Efficient Development and Deployment with Microsoft Orleans and Dapr Actor Models
tomohisa
0
220
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6k
Raft: Consensus for Rubyists
vanstee
140
7.1k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
126
53k
Side Projects
sachag
455
43k
Mobile First: as difficult as doing things right
swwweet
224
9.9k
How GitHub (no longer) Works
holman
315
140k
BBQ
matthewcrist
89
9.8k
Automating Front-end Workflow
addyosmani
1370
200k
4 Signs Your Business is Dying
shpigford
184
22k
How STYLIGHT went responsive
nonsquared
100
5.8k
Speed Design
sergeychernyshev
32
1.1k
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