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
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
howdy39
May 18, 2018
Programming
0
300
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
620
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
200
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
3
1.7k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
750
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
720
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.8k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.5k
Promise
howdy39
1
400
カラーユニバーサルデザイン / color universal design
howdy39
0
990
Other Decks in Programming
See All in Programming
公共交通オープンデータ × モバイルUX 複雑な運行情報を 『直感』に変換する技術
tinykitten
PRO
0
200
AI前提で考えるiOSアプリのモダナイズ設計
yuukiw00w
0
220
dchart: charts from deck markup
ajstarks
3
980
開発者から情シスまで - 多様なユーザー層に届けるAPI提供戦略 / Postman API Night Okinawa 2026 Winter
tasshi
0
180
Implementation Patterns
denyspoltorak
0
270
Basic Architectures
denyspoltorak
0
640
MUSUBIXとは
nahisaho
0
110
LLM Observabilityによる 対話型音声AIアプリケーションの安定運用
gekko0114
2
410
The Art of Re-Architecture - Droidcon India 2025
siddroid
0
170
AIフル活用時代だからこそ学んでおきたい働き方の心得
shinoyu
0
120
2年のAppleウォレットパス開発の振り返り
muno92
PRO
0
190
CSC307 Lecture 07
javiergs
PRO
0
530
Featured
See All Featured
Navigating the Design Leadership Dip - Product Design Week Design Leaders+ Conference 2024
apolaine
0
170
Dominate Local Search Results - an insider guide to GBP, reviews, and Local SEO
greggifford
PRO
0
50
Public Speaking Without Barfing On Your Shoes - THAT 2023
reverentgeek
1
300
Navigating Algorithm Shifts & AI Overviews - #SMXNext
aleyda
0
1.1k
How to Ace a Technical Interview
jacobian
281
24k
Large-scale JavaScript Application Architecture
addyosmani
515
110k
So, you think you're a good person
axbom
PRO
2
1.9k
Side Projects
sachag
455
43k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
122
21k
AI Search: Implications for SEO and How to Move Forward - #ShenzhenSEOConference
aleyda
1
1.1k
Thoughts on Productivity
jonyablonski
74
5k
Neural Spatial Audio Processing for Sound Field Analysis and Control
skoyamalab
0
160
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