開運研修_2020Chrome Developer_Toolsの使い方 / How_to_use_Chrome_Developer_Tools_Training_2020

Transcript

1. 開運研修 2020 Chrome Developer Toolsの使い⽅ 2020/5/14 フロントエンドエキスパートチーム 外松 俊尚

2. この講義について ▌ 【概要】 l Webの開発に関わっていくうえで無くてはならない「Developer Tools」につ いての講義です。Chromeをベースに紹介。 l 全体の使い⽅や今後の開発に役⽴つ機能を紹介します。 l

   知っている/知ってないで⼤きく変わるので、知るにフォーカス ▌ 【ターゲット】 l ブラウザで動くものの開発に関わっていく⼈ l Developer ToolsはElementパネルくらいしか知らない⼈ 2

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

   3

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

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

6. https://cybozu.co.jpにアクセスするとブラウザは︖ ▌HTMLやCSS, JavaScript, 画像などのリソースをサーバーから取 得 ▌取得したリソースのパースから始まりブラウザがWebページを 表⽰する ▌その他にも、StorageやCacheなどWebの技術を使うはず 6

7. Developer ToolsはブラウザがWebページを表⽰する上での、 様々な情報を確認、変更することができる 7

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

9. Developer Toolsを起動してみよう ▌Mac l Command + option + i or

   F12 ▌Windows/Linux l Ctrl + Shift + i or F12 ▌右クリック→検証 9

10. 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

11. 細かい機能の差異はあるけど、主に使う機能は、どのブラウザ でも可能。 今⽇知る内容は、Chrome以外のブラウザユーザーでも約に⽴ つはず 11

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

    2020/5/14時点

13. 基本機能はパネルを切り替えて使います パネルを切り替える 13

14. よく使うパネル ▌Elements l DOMツリーやCSSのスタイルについて知りたい時など主にUI/デザイン 周り ▌Console l JavaScriptコードを試したり、ログを出⼒して情報を収集 ▌Sources l

    JavaScriptコードのデバッグ ▌Network l APIやJSや画像ファイルなどのリクエストを知る 14

15. 困った時は編 15

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

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

18. UI/デザイン編 18

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

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

21. モバイル・レスポンシブ対応のチェック ▌Elementパネルなどの機能⼀覧にあるDevice Modeボタン ▌モバイル時の表⽰やレスポンシブに画⾯サイズを切り替えれる 21

22. DOM要素の調整 ▌Elementsパネル > DOMツリー l 表⽰されているDOM要素はドラッグ&ドロップで移動できる ▌Document.designMode l Consoleパネルで「document.designMode =

    “on”;」と⼊⼒ l ⽂書全体が編集可能になるので、ちょっとした修正をする ときに便利かも 22

23. 様々な視覚障害の⾒え⽅をエミュレート(v83-) ▌Renderingタブ > Emulate vision deficiencies ▌様々な種類の視覚障害の⾒え⽅をエミュレートできる ▌あくまでエミュレーションなので、視覚的に近似したものを表 ⽰してるという点を注意 23

24. Webアプリ開発編 24

25. いまどんなファイルがブラウザに読み込まれてるか知りたい ▌Sourcesパネル > Pageタブ ▌そのページが読み込んでいるリソースのツリーが表⽰される ▌HTMLやCSS、JavaScript、画像ファイルなど読み込んでいる ファイルの中⾝も確認できる 25

26. あのファイルを開きたい ▌Windows/Linux l Control + o ▌Mac l Command +

    o ▌検索窓が表⽰されるので、ファイル名を⼊⼒する ▌ブラウザに読み込まれているファイルにアクセスできる 26

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

28. 特定のリクエストをブロックした動作を⾒たい ▌Networkパネル > リクエストを右クリック > Block request URL ▌ブロックするリクエストは編集可能で、ワイルドカードも利⽤ 可能

    ▌特定のリクエストが無い場合に、Webページがどうなるか確認 したい場合など 28

29. ネットワークリクエストと同等のコードを知りたい ▌ 「Copy as Fetch」 ▌ Networkパネル > リクエストを右クリック >

    Copy > Copy as Fetch ▌ ネットワークリクエストと同等のfetch()のコードを⽣成 29

30. 特定のリクエストがあった時のブレイクポイント ▌「 XHR/Fetch Breakpoints 」 ▌Sourcesパネル > XHR/Fetch Breakpoints >

    「+」 ▌URLを指定して、そのURLへのリクエストを引き起こすコードに Breakpointsを張れる ▌例えば、誤ったリクエストを実⾏しているコードをすばやく⾒つける事 ができる 30

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

    リアルタイムで確認したい時に便利 31

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

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

    WebSQL l Service Workers l Cache Storage l IndexedDB l Local Storage l Application Cache 33

34. JavaScript編 34

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

36. DevToolsのConsoleはちょっと便利 ▌Chrome 80からConsoleでのletは再宣⾔できる ▌consoleでさくっと試してるときに、「already been declared」って怒られるの⾟かったから嬉しい 通常のJavaScriptだと以下のコードはエラーになる let x =

    5; let x = 6; 36

37. console.logしたい ▌Logpoints ▌Sourcesパネル > ⾏番号 > 右クリック > Add logpoint

    ▌console.log()呼び出しでコードを乱雑にすることなく、 Devtoolsからconsole.logへの出⼒を仕込むことができる 37

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

    38

39. 特定の条件でだけbreakpointを貼りたい ▌Conditional Breakpoint ▌Sourcesパネル > ⾏番号 > 右クリック > Add

    conditional breakpoint... ▌毎回⽌めるのは⾯倒で、特定の条件の時だけ⽌めたい場合など 39

40. 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

41. ブラウザからJavaScriptやCSSを上書きしたい ▌「Local Overrides」 ▌Sourcesパネル > Overrides > Select folder for

    overrides ▌Devtools上で変更したJSやCSSをファイルとして保存しておける l リロードしても変更が残る ▌ローカルにファイルを持っていない場合や変更した内容によるリ ロード後の挙動を確認したい場合などに便利 41

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

43. パフォーマンス編 43

44. オフライン/低スペックな環境ではどんな⾵に動作するのか ▌オフラインでの動作を確認 l Networkパネル > Offlineにチェック ▌低スペック/遅い回線での動作を確認 l Performanceパネル >

    Network/CPUドロップダウン l 低スペック l Slow 3G l 遅い回線 l 6x slowdown 44

45. とりあえずサイトの品質を計測してみたい ▌Auditパネル(v83からはLighthouceパネル) l LighthouseというWebアプリの品質を計測するツールを使っ て以下の項⽬をチェックできる l Performance l PWA l

    Best practices l Accessibility l SEO 45

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

    Loading l Scripting l Rendering l Painting 46

47. その他便利な機能編 47

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

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

50. さいごに 50

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

52. 時間があれば試してみてください(好きなサイト) ⾃分が好きなサイトをブラウザで開いて ▌⾃分が好きなサイトをブラウザで開いて ▌ElementパネルでDOM構造や適⽤されてるStyleを⾒る ▌Networkパネルでページ読み込み時にどんなリクエストが発⽣ しているのか︖特定のリクエストはどんなリクエストで、どん なレスポンスが返ってきてるのか︖ ▌Audits/Lighthouseパネルの「Generate report」ボタンでサイト の品質を確認

    52

53. 時間があれば試してみてください(難読化されてないサイト) ⾃分がローカルで開発しているようなソースコードが難読化され ていないサイトを開く ▌DevTools上で特定のJSファイルを開く ▌任意の⾏でブレークポイントを貼って、JSの実⾏を⽌めてみる ▌Step overでJSの実⾏を観察してみたり、変数にどんなデータが ⼊っているのかを確認する 例) https://googlechrome.github.io/devtools-

    samples/debug-js/get-started 53

54. Tools for Web Developers ▌公式の開発者向けドキュメント ▌各種機能についての詳しい説明 ▌Tools for Web Developres

    > Chrome DevTools l https://developers.google.com/web/tools/chrome-devtools/ 54

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