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
開運研修_2020Chrome Developer_Toolsの使い方 / How_to_us...
Search
Cybozu
PRO
August 19, 2020
Technology
5
60k
開運研修_2020Chrome Developer_Toolsの使い方 / How_to_use_Chrome_Developer_Tools_Training_2020
Cybozu
PRO
August 19, 2020
Tweet
Share
More Decks by Cybozu
See All by Cybozu
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
44k
テクニカルライティング
cybozuinsideout
PRO
4
260
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
3
230
モブに早く慣れたい人のためのガイド2024
cybozuinsideout
PRO
3
290
モバイル
cybozuinsideout
PRO
3
160
ソフトウェアライセンス
cybozuinsideout
PRO
4
140
ソフトウェアテスト
cybozuinsideout
PRO
3
230
自動テスト
cybozuinsideout
PRO
3
240
Docker入門2024
cybozuinsideout
PRO
3
400
Other Decks in Technology
See All in Technology
SREの前に
nwiizo
8
1.2k
コンテンツを支える 若手ゲームクリエイターの アートディレクションの事例紹介 / cagamefi-game
cyberagentdevelopers
PRO
1
140
Platform Engineering ことはじめ
oracle4engineer
PRO
5
510
最速最小からはじめるデータプロダクト / Data Product MVP
amaotone
5
770
株式会社ドクターズプライム 会社紹介資料 - エンジニア向け
drsprime
0
160
Jr. Championsになって、強く連携しながらAWSをもっと使いたい!~AWSに対する期待と行動~
amixedcolor
0
260
大規模データ基盤チームのオンプレTiDB運用への挑戦 / dpu-tidb
cyberagentdevelopers
PRO
1
110
AWS CDKでデータリストアの運用、どのように設計する?~Aurora・EFSの実践事例を紹介~/aws-cdk-data-restore-aurora-efs
mhrtech
4
720
RAGのためのビジネス文書解析技術
eida
3
410
使えそうで使われないCloudHSM
maikamibayashi
1
240
ExaDB-D dbaascli で出来ること
oracle4engineer
PRO
0
3.7k
Mini Tokyo 3D × PLATEAU - 公共交通デジタルツインにリアルな風景を
nagix
1
140
Featured
See All Featured
How to Ace a Technical Interview
jacobian
275
23k
Documentation Writing (for coders)
carmenintech
65
4.4k
BBQ
matthewcrist
85
9.3k
GraphQLとの向き合い方2022年版
quramy
43
13k
The Language of Interfaces
destraynor
154
24k
A Tale of Four Properties
chriscoyier
156
23k
Designing for Performance
lara
604
68k
What’s in a name? Adding method to the madness
productmarketing
PRO
22
3.1k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
664
120k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
31
2.7k
Bash Introduction
62gerente
608
210k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Transcript
開運研修 2020 Chrome Developer Toolsの使い⽅ 2020/5/14 フロントエンドエキスパートチーム 外松 俊尚
この講義について ▌ 【概要】 l Webの開発に関わっていくうえで無くてはならない「Developer Tools」につ いての講義です。Chromeをベースに紹介。 l 全体の使い⽅や今後の開発に役⽴つ機能を紹介します。 l
知っている/知ってないで⼤きく変わるので、知るにフォーカス ▌ 【ターゲット】 l ブラウザで動くものの開発に関わっていく⼈ l Developer ToolsはElementパネルくらいしか知らない⼈ 2
⽬次 ▌Chrome Developer Toolsについて/全体像/各パネルについて ▌困った時は編 ▌UI/デザイン編 ▌Webアプリ開発編 ▌JavaScript編 ▌パフォーマンス編 ▌その他便利な機能編
3
Chrome Developer Toolsについて/全体像 /各パネルについて 4
Chrome Developer Tools ▌Google Chromeに組み込まれた開発者向けツール ▌Web開発を⾏う上で便利な機能がたくさん実装されている ▌使いこなすとDX(Developer Experience)が爆上げする 5
https://cybozu.co.jpにアクセスするとブラウザは︖ ▌HTMLやCSS, JavaScript, 画像などのリソースをサーバーから取 得 ▌取得したリソースのパースから始まりブラウザがWebページを 表⽰する ▌その他にも、StorageやCacheなどWebの技術を使うはず 6
Developer ToolsはブラウザがWebページを表⽰する上での、 様々な情報を確認、変更することができる 7
Developer Toolsを使うタイミング(経験談) ▌JavaScriptのコードをちょっと試してみたい ▌⾃分が書いたJavaScriptコードのデバッグ ▌画⾯のデザインの調整/表⽰が崩れた時の調査 ▌いまどんなCSSが適⽤されているか調べる ▌Webアプリ開発中、いまどんなAPIが叩かれているのか調べる ▌パフォーマンスのボトルネックを探す ▌etc… 8
Developer Toolsを起動してみよう ▌Mac l Command + option + i or
F12 ▌Windows/Linux l Ctrl + Shift + i or F12 ▌右クリック→検証 9
Chrome以外のDeveloper Toolsは︖ ▌もちろんSafariやFirefoxなどのブラウザにもDeveloper Toolsはある ▌各ブラウザによってできることが若⼲違う ▌ChromeのDeveloper Toolsが機能が豊富で⼈気な印象 ▌例) l Firefox
l CSS Flexboxのレイアウトを調べられるFlexBox Inspector l Safari l html Canvasについて調べられるCanvas Debugging 10
細かい機能の差異はあるけど、主に使う機能は、どのブラウザ でも可能。 今⽇知る内容は、Chrome以外のブラウザユーザーでも約に⽴ つはず 11
ChromeのバージョンとCanary ▌開発者向けに毎⽇更新されるChrome Canaryを使えば最新の 機能を使える ▌https://www.google.com/intl/ja/chrome/canary/ Stable v81 Canary v84 12
2020/5/14時点
基本機能はパネルを切り替えて使います パネルを切り替える 13
よく使うパネル ▌Elements l DOMツリーやCSSのスタイルについて知りたい時など主にUI/デザイン 周り ▌Console l JavaScriptコードを試したり、ログを出⼒して情報を収集 ▌Sources l
JavaScriptコードのデバッグ ▌Network l APIやJSや画像ファイルなどのリクエストを知る 14
困った時は編 15
各機能が⾒つけられない ▌「Command Menu」 ▌Cmd/Ctrl+Shift+pでコマンドメニューを表⽰できる ▌以降のスライドで紹介する機能は⼀部デフォルトで表⽰されな いパネルがあるので、コマンドメニューを利⽤すると便利 16
なんかいろいろ編集しちゃって戻したい ▌リロードしてください ▌DevTools上の変更はリロードするとリセットされます 17
UI/デザイン編 18
いま適⽤されているCSSを調べたい ▌Elementsパネル > StylesやCommuted ▌⾒たいUIにフォーカスを当てると適⽤されているCSSがStylesに表⽰ される ▌適⽤されているスタイルを⼀覧で⾒たい場合はComputedを⾒る ▌値を変更すると画⾯に反映される 19
要素をホバーされている状態にしておきたい ▌Elementsパネル > Styles > :hover ▌適⽤したい状態にチェックを⼊れると、要素がその状態になる ▌hover時のスタイルや挙動を確認したい時に便利 20
モバイル・レスポンシブ対応のチェック ▌Elementパネルなどの機能⼀覧にあるDevice Modeボタン ▌モバイル時の表⽰やレスポンシブに画⾯サイズを切り替えれる 21
DOM要素の調整 ▌Elementsパネル > DOMツリー l 表⽰されているDOM要素はドラッグ&ドロップで移動できる ▌Document.designMode l Consoleパネルで「document.designMode =
“on”;」と⼊⼒ l ⽂書全体が編集可能になるので、ちょっとした修正をする ときに便利かも 22
様々な視覚障害の⾒え⽅をエミュレート(v83-) ▌Renderingタブ > Emulate vision deficiencies ▌様々な種類の視覚障害の⾒え⽅をエミュレートできる ▌あくまでエミュレーションなので、視覚的に近似したものを表 ⽰してるという点を注意 23
Webアプリ開発編 24
いまどんなファイルがブラウザに読み込まれてるか知りたい ▌Sourcesパネル > Pageタブ ▌そのページが読み込んでいるリソースのツリーが表⽰される ▌HTMLやCSS、JavaScript、画像ファイルなど読み込んでいる ファイルの中⾝も確認できる 25
あのファイルを開きたい ▌Windows/Linux l Control + o ▌Mac l Command +
o ▌検索窓が表⽰されるので、ファイル名を⼊⼒する ▌ブラウザに読み込まれているファイルにアクセスできる 26
いまどんなリクエストが送られているのか知りたい ▌Networkパネル ▌いまブラウザがリクエストを送信した内容が⼀覧で表⽰される ▌リクエストの種類やキーワードで絞り込みができる ▌どんなAPIが投げられているのか知りたい時によく使う 27
特定のリクエストをブロックした動作を⾒たい ▌Networkパネル > リクエストを右クリック > Block request URL ▌ブロックするリクエストは編集可能で、ワイルドカードも利⽤ 可能
▌特定のリクエストが無い場合に、Webページがどうなるか確認 したい場合など 28
ネットワークリクエストと同等のコードを知りたい ▌ 「Copy as Fetch」 ▌ Networkパネル > リクエストを右クリック >
Copy > Copy as Fetch ▌ ネットワークリクエストと同等のfetch()のコードを⽣成 29
特定のリクエストがあった時のブレイクポイント ▌「 XHR/Fetch Breakpoints 」 ▌Sourcesパネル > XHR/Fetch Breakpoints >
「+」 ▌URLを指定して、そのURLへのリクエストを引き起こすコードに Breakpointsを張れる ▌例えば、誤ったリクエストを実⾏しているコードをすばやく⾒つける事 ができる 30
値を常に監視したい ▌「 Live Expressions」 ▌Consoleパネル > Live Expressions(⽬のアイコン) ▌リアルタイムで指定した値を監視できる ▌スクロールやDOMの状態など画⾯操作中に動的に変わる値を
リアルタイムで確認したい時に便利 31
CookieやLocal Storageにどんなデータが⼊っているか ▌Applicationパネル ▌Local StorageやCookieに値がちゃんと⼊っているか確認 32
デバッグするときにCookieやCacheを⼀括で消したい ▌ 「Clear Site Data」 ▌ 実⾏したページの以下データを⼀括で削除してくれる(個別指定もできる) l Cookies l
WebSQL l Service Workers l Cache Storage l IndexedDB l Local Storage l Application Cache 33
JavaScript編 34
ちょっとJavaScriptのコードを試したい ▌Consoleパネル or SourcesパネルのSnippetsタブ ▌Consoleで複数⾏書く場合はShift + Enterで改⾏ ▌JavaScriptのコードを書くと実⾏結果が取得できる 35
DevToolsのConsoleはちょっと便利 ▌Chrome 80からConsoleでのletは再宣⾔できる ▌consoleでさくっと試してるときに、「already been declared」って怒られるの⾟かったから嬉しい 通常のJavaScriptだと以下のコードはエラーになる let x =
5; let x = 6; 36
console.logしたい ▌Logpoints ▌Sourcesパネル > ⾏番号 > 右クリック > Add logpoint
▌console.log()呼び出しでコードを乱雑にすることなく、 Devtoolsからconsole.logへの出⼒を仕込むことができる 37
JavaScriptコードのデバッグをしたい ▌Sourcesパネル > ⾏番号 > クリック ▌ステップ実⾏などでコードがどのように動くのか、変数の中⾝ などを確認できる ▌JavaScriptのコードはブラウザで実⾏しないと挙動がわからな いので開発中よく使う
38
特定の条件でだけbreakpointを貼りたい ▌Conditional Breakpoint ▌Sourcesパネル > ⾏番号 > 右クリック > Add
conditional breakpoint... ▌毎回⽌めるのは⾯倒で、特定の条件の時だけ⽌めたい場合など 39
JSによるDOMへの参照コードを知りたい ▌ 「Copy JS Path 」 ▌ Elementsパネル > DOM要素を右クリック
> Copy > Copy JS Path ▌ DOMノードへのJSによる参照を取得できる l Shadow DOMも対応 ▌ 例) l document.querySelector ('body > label:nth-child(2)') l document.querySelector('#demo1') .shadowRoot .querySelector('p:nth-child(2)') 40
ブラウザからJavaScriptやCSSを上書きしたい ▌「Local Overrides」 ▌Sourcesパネル > Overrides > Select folder for
overrides ▌Devtools上で変更したJSやCSSをファイルとして保存しておける l リロードしても変更が残る ▌ローカルにファイルを持っていない場合や変更した内容によるリ ロード後の挙動を確認したい場合などに便利 41
JavaScriptやCSSのカバレッジを知りたい ▌「 Code Coverage 」 ▌CSS/JSの使⽤されたコード/使⽤されてないコードが分かる ▌ページ読み込みや特定の操作を⾏った際のコードカバレッジが ⾒れる 42
パフォーマンス編 43
オフライン/低スペックな環境ではどんな⾵に動作するのか ▌オフラインでの動作を確認 l Networkパネル > Offlineにチェック ▌低スペック/遅い回線での動作を確認 l Performanceパネル >
Network/CPUドロップダウン l 低スペック l Slow 3G l 遅い回線 l 6x slowdown 44
とりあえずサイトの品質を計測してみたい ▌Auditパネル(v83からはLighthouceパネル) l LighthouseというWebアプリの品質を計測するツールを使っ て以下の項⽬をチェックできる l Performance l PWA l
Best practices l Accessibility l SEO 45
パフォーマンスのボトルネックを探したい ▌Performanceパネル > Start Profiling ▌⾚くなっている箇所は怪しい l ボトルネックになる原因を教えてくれるものも ▌どの項⽬に時間がかかっている︖ l
Loading l Scripting l Rendering l Painting 46
その他便利な機能編 47
スクリーンショットが撮りたい ▌「Screenshots」 ▌エリア選択 ▌特定の要素 ▌全画⾯ 48
Devtoolsの拡張(ReactやRedux) ▌React Developer Tools ▌Redux DevTools ▌ReactやReduxといったライブラリに特化した機能をDevtoolsに 追加できるChrome拡張があるのでおすすめ ▌拡張機能をインストールするとパネルが追加される 49
さいごに 50
まずは⾊々試してみる ▌機能が豊富過ぎて難しそうに感じるけど、まずは⾊々試してみ るのがおすすめ ▌普段から使うのは数個なので、それは使っていると⾃然に覚え る ▌新しく知ったTipsは是⾮周りの⼈に教えてあげて 51
時間があれば試してみてください(好きなサイト) ⾃分が好きなサイトをブラウザで開いて ▌⾃分が好きなサイトをブラウザで開いて ▌ElementパネルでDOM構造や適⽤されてるStyleを⾒る ▌Networkパネルでページ読み込み時にどんなリクエストが発⽣ しているのか︖特定のリクエストはどんなリクエストで、どん なレスポンスが返ってきてるのか︖ ▌Audits/Lighthouseパネルの「Generate report」ボタンでサイト の品質を確認
52
時間があれば試してみてください(難読化されてないサイト) ⾃分がローカルで開発しているようなソースコードが難読化され ていないサイトを開く ▌DevTools上で特定のJSファイルを開く ▌任意の⾏でブレークポイントを貼って、JSの実⾏を⽌めてみる ▌Step overでJSの実⾏を観察してみたり、変数にどんなデータが ⼊っているのかを確認する 例) https://googlechrome.github.io/devtools-
samples/debug-js/get-started 53
Tools for Web Developers ▌公式の開発者向けドキュメント ▌各種機能についての詳しい説明 ▌Tools for Web Developres
> Chrome DevTools l https://developers.google.com/web/tools/chrome-devtools/ 54
Devtoolsの便利な機能をもっと知りたい What's New In DevTools https://developers.google.com/web/updates /dev tips https://umaar.com/dev-tips/ 55