Tweet
Tweet

Slide 1

Slide 1 text

開運研修 2019 Chrome Developer Toolsの使い⽅ 2019/6/13 フロントエンドエキスパートチーム 外松 俊尚

Slide 2

Slide 2 text

この講義について ▌【概要】 l Webの開発に関わっていくうえで無くてはならない「Chrome Developer Tools」についての講義です。 l 全体の使い⽅や今後の開発に役⽴つ機能を紹介します。 l 知っている/知ってないで⼤きく変わるので、知るにフォーカス ▌【ターゲット】 l ブラウザで動くものの開発に関わっていく⼈ l Developer ToolsはElementパネルくらいしか知らない⼈

Slide 3

Slide 3 text

⽬次 ▌Chrome Developer Toolsについて/全体像/各パネルについて ▌困った時は編 ▌UI/デザイン編 ▌Webアプリ開発編 ▌JavaScript編 ▌パフォーマンス編 ▌その他便利な機能編

Slide 4

Slide 4 text

Chrome Developer Toolsについて/全体像 /各パネルについて

Slide 5

Slide 5 text

Chrome Developer Tools ▌Google Chromeに組み込まれた開発者向けツール ▌Web開発を⾏う上で便利な機能がたくさん実装されている ▌使いこなすとDX(Developer Experience)が爆上げする

Slide 6

Slide 6 text

Developer Tools ▌もちろんSafariやFirefoxなどのブラウザにもDeveloper Toolsはある ▌各ブラウザによってできることが若⼲違う ▌ChromeのDeveloper Toolsが機能が豊富で⼈気 ▌例） l Firefox l CSS Flexboxのレイアウトを調べられるFlexBox Inspector l Safari l html Canvasについて調べられるCanvas Debugging

Slide 7

Slide 7 text

Developer Toolsを使うタイミング(経験談) ▌JavaScriptのコードをちょっと試してみたい ▌⾃分が書いたJavaScriptコードのデバッグ ▌画⾯のデザインの調整/表⽰が崩れた時の調査 ▌いまどんなCSSが適⽤されているか調べる ▌Webアプリ開発中、いまどんなAPIが叩かれているのか調べる ▌パフォーマンスのボトルネックを探す etc…

Slide 8

Slide 8 text

ChromeのバージョンとCanary ▌開発者向けに毎⽇更新されるChrome Canaryを使えば最新の機 能を使える l https://www.google.com/intl/ja/chrome/canary/ Stable v75 Canary v77

Slide 9

Slide 9 text

Developer Toolsを起動してみる ▌Mac l Command + option + i or F12 ▌Windows/Linux l Ctrl + Shift + i or F12 ▌右クリック→検証

Slide 10

Slide 10 text

パネル切り替え

Slide 11

Slide 11 text

まずはいくつかデモを⾒せます ▌DOMの操作やデザイン調整 ▌CSSの確認 ▌モバイルでのデザインチェック ▌JavaScriptを試す ▌ネットワークリクエストの調査 ▌パフォーマンスの計測

Slide 12

Slide 12 text

よく使うパネル ▌Elements l DOMツリーやCSSのスタイルについて知りたい時など主にUI/デ ザイン周り ▌Console l JavaScriptコードを試したり、Logを出⼒して情報を収集 ▌Sources l JavaScriptコードのデバッグ ▌Network l APIやJSや画像ファイルなどのリクエストを知る

Slide 13

Slide 13 text

困った時は編

Slide 14

Slide 14 text

各機能が⾒つけられない ▌「Command Menu」 ▌Cmd/Ctrl+Shift+pでコマンドメニューを表⽰できる ▌以降のスライドで紹介する機能は⼀部デフォルトで表⽰されな いパネルがあるので、コマンドメニューを利⽤すると便利

Slide 15

Slide 15 text

なんかいろいろ編集しちゃって戻したい ▌リロードしてください ▌DevTools上の変更はリロードするとリセットされます

Slide 16

Slide 16 text

UI/デザイン編

Slide 17

Slide 17 text

いま適⽤されているCSSを調べたい ▌Elementsパネル > StylesやCommuted ▌⾒たいUIにフォーカスを当てると適⽤されているCSSがStylesに表⽰ される ▌適⽤されているスタイルを⼀覧で⾒たい場合はComputedを⾒る ▌値を変更すると画⾯に反映される

Slide 18

Slide 18 text

要素をホバーされている状態にしておきたい ▌Elementsパネル > Styles > :hover ▌適⽤したい状態にチェックを⼊れると、要素がその状態になる ▌hover時のスタイルや挙動を確認したい時に便利

Slide 19

Slide 19 text

モバイル・レスポンシブ対応のチェック ▌Elementsパネル左のDevice Modeボタン ▌モバイル時の表⽰やレスポンシブに画⾯サイズを切り替えれる

Slide 20

Slide 20 text

DOM要素の調整 ▌Elementsパネル > DOMツリー ▌表⽰されているDOM要素はドラッグ&ドロップで移動できる

Slide 21

Slide 21 text

Webアプリ開発編

Slide 22

Slide 22 text

いまどんなファイルがブラウザに読み込まれてるか知りたい ▌Sourcesパネル > Page ▌HTMLやCSS、JavaScript、画像ファイルなど読み込んでいる ファイルを確認できる

Slide 23

Slide 23 text

あのファイルを開きたい ▌Windows/Linux l Control + o ▌Mac l Command + o ▌ブラウザに読み込まれているファイルにアクセスできる

Slide 24

Slide 24 text

いまどんなリクエストが送られているのか知りたい ▌Networkパネル ▌いまブラウザがリクエストを送信した内容が⼀覧で表⽰される ▌リクエストの種類やキーワードで絞り込みができる ▌どんなAPIが投げられているのか知りたい時によく使う

Slide 25

Slide 25 text

ネットワークリクエストと同等のコードを知りたい ▌ 「Copy as Fetch」 ▌ Networkパネル > リクエストを右クリック > Copy > Copy as Fetch ▌ ネットワークリクエストと同等のfetch()のコードを⽣成 ▌ 例） l fetch("https://ssl.gstatic.com/gb/images/i1_1967ca6a.png", {"credentials":"omit","referrer":"https://www.google.co.jp/","referrerPolicy":"origin","body":null," method":"GET","mode":"cors"});

Slide 26

Slide 26 text

特定のリクエストがあった時のブレイクポイント ▌「 XHR/Fetch Breakpoints 」 ▌Sourcesパネル > XHR/Fetch Breakpoints > 「+」 ▌URLを指定して、そのURLへのリクエストを引き起こすコードに Breakpointsを張れる ▌例えば、誤ったリクエストを実⾏しているコードをすばやく⾒つける事 ができる

Slide 27

Slide 27 text

値を常に監視したい ▌「 Live Expressions」 ▌Consoleパネル > ⽬のアイコン ▌リアルタイムで指定した値を監視できる ▌スクロールやDOMの状態など画⾯操作中に動的に変わる値を リアルタイムで確認したい時に便利

Slide 28

Slide 28 text

CookieやLocal Storageにどんなデータが⼊っているか ▌Applicationパネル ▌Local StorageやCookieに値がちゃんと⼊っているか確認

Slide 29

Slide 29 text

デバッグするときにCookieやCacheを⼀括で消したい ▌「Clear Site Data」 ▌実⾏したページの以下データを⼀括で削除してくれる(個別指定もできる) l Cookies l WebSQL l Service Workers l Cache Storage l IndexedDB l Local Storage l Application Cache

Slide 30

Slide 30 text

JavaScript編

Slide 31

Slide 31 text

ちょっとJavaScriptのコードを試したい ▌Console or Sources/Snippets ▌Consoleで複数⾏書く場合はShift + Enterで改⾏ ▌JavaScriptのコードを書くと実⾏結果が取得できる

Slide 32

Slide 32 text

console.logしたい ▌Logpoints ▌Sourcesパネル > ⾏番号 > 右クリック > Add logpoint ▌console.log()呼び出しでコードを乱雑にすることなく、 Devtoolsからconsole.logへの出⼒を仕込むことができる

Slide 33

Slide 33 text

JavaScriptコードのデバッグをしたい ▌Sourcesパネル > ⾏番号 > クリック ▌ステップ実⾏などでコードがどのように動くのか、変数の中⾝ などを確認できる ▌JavaScriptのコードはブラウザで実⾏しないと挙動がわからな いので開発中よく使う

Slide 34

Slide 34 text

特定の条件でだけbreakpointを貼りたい ▌Conditional Breakpoint ▌Sourcesパネル > ⾏番号 > 右クリック > Add conditional breakpoint... ▌毎回⽌めるのは⾯倒で、特定の条件の時だけ⽌めたい場合など

Slide 35

Slide 35 text

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)')

Slide 36

Slide 36 text

ブラウザからJavaScriptやCSSを上書きしたい ▌「Local Overrides」 ▌Sourcesパネル > Overrides > Select folder for overrides ▌Devtools上で変更したJSやCSSをファイルとして保存しておける l リロードしても変更が残る ▌ローカルにファイルを持っていない場合や変更した内容によるリ ロード後の挙動を確認したい場合などに便利

Slide 37

Slide 37 text

JavaScriptやCSSのカバレッジを知りたい ▌「 Code Coverage 」 ▌CSS/JSの使⽤されたコード/使⽤されてないコードが分かる ▌ページ読み込みや特定の操作を⾏った際のコードカバレッジが ⾒れる

Slide 38

Slide 38 text

パフォーマンス編

Slide 39

Slide 39 text

オフライン/低スペックな環境ではどんな⾵に動作するのか ▌オフラインでの動作を確認 l Networkパネル > Offlineにチェック ▌低スペック/遅い回線での動作を確認 l Performanceパネル > Network/CPUドロップダウン l 低スペック l Slow 3G l 遅い回線 l 6x slowdown

Slide 40

Slide 40 text

とりあえずパフォーマンスを計測してみたい ▌Auditsパネル l LighthouseというWebアプリの品質を計測するツールを使っ て以下の項⽬をチェックできる l Performance l PWA l Best practices l Accessibility l SEO

Slide 41

Slide 41 text

パフォーマンスのボトルネックを探したい ▌Performanceパネル > Start Profiling ▌⾚くなっている箇所は怪しい l ボトルネックになる原因を教えてくれるものも ▌どの項⽬に時間がかかっている？ l Loading l Scripting l Rendering l Painting

Slide 42

Slide 42 text

その他便利な機能編

Slide 43

Slide 43 text

スクリーンショットが撮りたい ▌「Screenshots」 ▌エリア選択 ▌特定の要素 ▌全画⾯

Slide 44

Slide 44 text

Devtoolsの拡張(ReactやRedux) ▌React Developer Tools ▌Redux DevTools ▌ReactやReduxといったライブラリに特化した機能をDevtoolsに 追加できるChrome拡張があるのでおすすめ ▌拡張機能をインストールするとパネルが追加される

Slide 45

Slide 45 text

さいごに

Slide 46

Slide 46 text

まずは⾊々試してみる ▌機能が豊富過ぎて難しそうに感じるけど、まずは⾊々試してみ るのがおすすめ ▌普段から使うのは数個なので、それは使っていると⾃然に覚え る ▌新しく知ったTipsは是⾮周りの⼈に教えてあげて

Slide 47

Slide 47 text

Tools for Web Developers ▌公式の開発者向けドキュメント ▌Tools for Web Developres > Chrome DevTools ▌各種機能についての詳しい説明 ▌https://developers.google.com/web/tools/chrome-devtools/

Slide 48

Slide 48 text

Devtoolsの便利な機能をもっと知りたい What's New In DevTools /dev tips https://developers.google.com/web/updates/2019/ 01/devtools https://umaar.com/dev-tips/