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
210
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
420
AI新時代 情シスが向き合うべきAI活用戦略
howdy39
0
67
GAS x スプレッドシート x Looker Studio を組み合わせたデバイス管理 / DeviceMangent with GAS, SpreadSheet, Looker Studio
howdy39
0
1.1k
ChatGPTを使った 社内アシスタントBOTを作りました / ChatGPT Assistant Bot
howdy39
0
560
WebPagetestで始めるパフォーマンス計測 / Performance measurement starting with WebPagetest
howdy39
4
580
Storybookを用いたVue.js共通コンポーネント開発との戦い / stores-fights-storybook
howdy39
5
8.4k
gas-webpagetestで パフォーマンス計測を始めよう / get-started-measuring-performance-with-gas-webpagetest
howdy39
0
2.3k
Promise
howdy39
1
310
カラーユニバーサルデザイン / color universal design
howdy39
0
790
Other Decks in Programming
See All in Programming
Refactor your code - refactor yourself
xosofox
1
250
フロントエンドのディレクトリ構成どうしてる? Feature-Sliced Design 導入体験談
osakatechlab
8
4.1k
useSyncExternalStoreを使いまくる
ssssota
6
1k
これが俺の”自分戦略” プロセスを楽しんでいこう! - Developers CAREER Boost 2024
niftycorp
PRO
0
190
Cloudflare MCP ServerでClaude Desktop からWeb APIを構築
kutakutat
1
530
なまけものオバケたち -PHP 8.4 に入った新機能の紹介-
tanakahisateru
1
120
急成長期の品質とスピードを両立するフロントエンド技術基盤
soarteclab
0
920
talk-with-local-llm-with-web-streams-api
kbaba1001
0
170
Effective Signals in Angular 19+: Rules and Helpers @ngbe2024
manfredsteyer
PRO
0
130
ソフトウェアの振る舞いに着目し 複雑な要件の開発に立ち向かう
rickyban
0
890
rails stats で紐解く ANDPAD のイマを支える技術たち
andpad
1
290
[JAWS-UG横浜 #76] イケてるアップデートを宇宙いち早く紹介するよ!
maroon1st
0
450
Featured
See All Featured
Done Done
chrislema
181
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
44
9.3k
Music & Morning Musume
bryan
46
6.2k
Visualization
eitanlees
146
15k
Practical Orchestrator
shlominoach
186
10k
Faster Mobile Websites
deanohume
305
30k
Designing for Performance
lara
604
68k
The Cult of Friendly URLs
andyhume
78
6.1k
Building an army of robots
kneath
302
44k
Scaling GitHub
holman
458
140k
Thoughts on Productivity
jonyablonski
67
4.4k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
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