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_use_Chrome_Developer_Tools_Training_2020
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
40k
テクニカルライティング
cybozuinsideout
PRO
2
43
サイボウズのアジャイルクオリティ2024
cybozuinsideout
PRO
2
58
モブに早く慣れたい人のためのガイド2024
cybozuinsideout
PRO
2
44
モバイル
cybozuinsideout
PRO
2
42
ソフトウェアライセンス
cybozuinsideout
PRO
2
32
ソフトウェアテスト
cybozuinsideout
PRO
2
41
自動テスト
cybozuinsideout
PRO
2
30
Docker入門2024
cybozuinsideout
PRO
2
54
Other Decks in Technology
See All in Technology
わたしの業務の中に住み着いたCacoo/Cacoo has taken up residence in my work routine
yukihirochiba
0
590
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
18
6.7k
Re: スタートアップ企業が実践する「身の丈スクラム」の現在地 / Re: Current State of 'Right-Sized Scrum' Practices in Startups
ar_tama
5
1.6k
React 研修 (2024)
recruitengineers
PRO
33
12k
從大學到出社會,這十年的參與和維護的開源專案
tjjh89017
0
950
20240811_若手エンジニアふんわりLT資料
tomi_t0mmy
0
260
実践データベース設計サブ資料:➁論理データモデリング
recruitengineers
PRO
1
300
技術広報経験0のEMがエンジニアブランディングを始めてみた
coconala_engineer
2
160
データ基盤の負債を生まない技術と技術以外の話
ikkimiyazaki
4
1.3k
2024年における生成AIエンジニアとは何者か
yyo616
9
2.8k
約10年間MIXIのインフラを 支えてきたPagerDutyの活用事例 / PagerDuty on Tour 2024
isaoshimizu
6
770
エンジニアリングが好きな私たちのためのエンジニアリングマネジャー入門 / Engineering management for the rest of us
iwashi86
21
3.9k
Featured
See All Featured
Code Reviewing Like a Champion
maltzj
518
39k
Product Roadmaps are Hard
iamctodd
PRO
48
10k
Typedesign – Prime Four
hannesfritz
37
2.3k
Making the Leap to Tech Lead
cromwellryan
128
8.8k
Practical Orchestrator
shlominoach
185
10k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
27
2.1k
KATA
mclloyd
26
13k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
20
3.9k
Code Review Best Practice
trishagee
60
16k
Navigating Team Friction
lara
182
13k
Building Your Own Lightsaber
phodgson
101
5.9k
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