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
280
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
530
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
170
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.5k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
630
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
660
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.6k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.4k
Promise
howdy39
1
370
カラーユニバーサルデザイン / color universal design
howdy39
0
910
Other Decks in Programming
See All in Programming
Cursor Meetup Tokyo ゲノミクスとCursor: 進化と制約のあいだ
koido
2
1k
Javaに鉄道指向プログラミング (Railway Oriented Pro gramming) のエッセンスを取り入れる/Bringing the Essence of Railway-Oriented Programming to Java
cocet33000
2
570
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
4
3.1k
ktr0731/go-mcpでMCPサーバー作ってみた
takak2166
0
170
Bytecode Manipulation 으로 생산성 높이기
bigstark
1
340
社内での開発コミュニティ活動とモジュラーモノリス標準化事例のご紹介/xPalette and Introduction of Modular monolith standardization
m4maruyama
1
120
Julia という言語について (FP in Julia « SIDE: F ») for 関数型まつり2025
antimon2
3
960
Java on Azure で LangGraph!
kohei3110
0
130
人には人それぞれのサービス層がある
shimabox
3
680
try-catchを使わないエラーハンドリング!? PHPでResult型の考え方を取り入れてみよう
kajitack
3
510
Go1.25からのGOMAXPROCS
kuro_kurorrr
1
700
Using AI Tools Around Software Development
inouehi
0
1.2k
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Gamification - CAS2011
davidbonilla
81
5.3k
Automating Front-end Workflow
addyosmani
1370
200k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.8k
Code Reviewing Like a Champion
maltzj
524
40k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
KATA
mclloyd
29
14k
Rebuilding a faster, lazier Slack
samanthasiow
81
9k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
4
170
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Done Done
chrislema
184
16k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
45
7.3k
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