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
サイボウズフロントエンドエキスパートチームについて / FrontendExpert Team
cybozuinsideout
PRO
5
39k
2024/11/25 ReDesigner Online Meetup 会社紹介
cybozuinsideout
PRO
0
320
サイボウズ 開発本部採用ピッチ / Cybozu Engineer Recruit
cybozuinsideout
PRO
9
47k
テクニカルライティング
cybozuinsideout
PRO
4
460
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
3
380
モブに早く慣れたい人のためのガイド2024
cybozuinsideout
PRO
3
510
モバイル
cybozuinsideout
PRO
3
270
ソフトウェアライセンス
cybozuinsideout
PRO
4
240
ソフトウェアテスト
cybozuinsideout
PRO
3
390
Other Decks in Technology
See All in Technology
開発生産性向上! 育成を「改善」と捉えるエンジニア育成戦略
shoota
2
820
The future we create with our own MVV
matsukurou
0
1.1k
型情報を用いたLintでコード品質を向上させる
sansantech
PRO
2
220
PHP ユーザのための OpenTelemetry 入門 / phpcon2024-opentelemetry
shin1x1
3
1.6k
Denoで作るチーム開発生産性向上のためのCLIツール
sansantech
PRO
0
130
NOT VALIDな検査制約 / check constraint that is not valid
yahonda
1
110
AWS re:Invent 2024 Recap in ZOZO - Serverless で好きなものをしゃべってみた
chongmyungpark
0
1k
The key to VCP-VCF
mirie_sd
0
150
rootful・rootless・privilegedコンテナの違い/rootful_rootless_privileged_container_difference
moz_sec_
0
100
Alignment and Autonomy in Cybozu - 300人の開発組織でアラインメントと自律性を両立させるアジャイルな組織運営 / RSGT2025
ama_ch
1
1.3k
[トレノケ雲の会 mod.13] 3回目のre:Inventで気づいたこと -CloudOperationsを添えて-
shintaro_fukatsu
0
120
信頼されるためにやったこと、 やらなかったこと。/What we did to be trusted, What we did not do.
bitkey
PRO
0
1.3k
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
222
9k
The Invisible Side of Design
smashingmag
299
50k
Speed Design
sergeychernyshev
25
720
Typedesign – Prime Four
hannesfritz
40
2.5k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
490
Unsuck your backbone
ammeep
669
57k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
29
2k
Intergalactic Javascript Robots from Outer Space
tanoku
270
27k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
365
25k
Agile that works and the tools we love
rasmusluckow
328
21k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
GitHub's CSS Performance
jonrohan
1030
460k
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