知ってトクするDevToolsの使い方 / DevTools Tips you should know

社内勉強会用資料

文字起こし版
前編: https://knowledge.sakura.ad.jp/27872/
後編: https://knowledge.sakura.ad.jp/28024/

Transcript

1. DevTools の 使い⽅ 知ってトクする ダーシノ @bc_rikko ※ 当資料では Chrome DevTools を主に扱っています
2. ⽬次 DevTools とは ウェブサイトを“つかう”⼈向け - ページ全体のスクリーンショットを撮りたい - マニュアルや企画⽤にページの⼀部を書き換えたい - 動かない原因を知りたい ウェブサイトを“つくる”⼈向け - ウェブサイトの品質を知りたい - パフォーマンスを計測したい - メモリリークの調査をしたい
3. DevTools とは ※ 「デベロッパーツール」「開発者ツール」と呼ぶこともありますが、当資料では DevTools で統⼀します
4. フロントエンド「三種の神器」のひとつ ブラウザに組み込まれている開発⽀援ツール - ブラウザごとに特⾊がある - Firefox: GUIでスタイルをいじれる（デザイナー向け） - Chrome: パフォーマンス計測の機能が充実している（エンジニア向け） DevTools とは #1 図: GUIでclip-pathを編集している（Firefox） 図: パフォーマンスやアクセシビリティ対応を確認している（Chrome） ※ これは個⼈の意⾒です
5. DevTools でできること - HTML、CSS、JavaScriptの確認、編集、デバッグ - エラーログの確認 - 通信履歴の確認 - Cookie、Web Storage、キャッシュなどの確認 - パフォーマンス計測 - メモリリーク調査 - etc. DevTools とは #2
6. DevTools の表⽰⽅法 - メニュー > [その他のツール] > [デベロッパーツール] - ⌘ + ⌥ + I（Mac） - Ctrl + Shift + I or F12（Win） DevTools とは #3 図: DevToolsを開く⽅法 図: DevToolsの全景
7. Elements
 DOMとCSSを確認、編集できる Console
 ログの出⼒結果やJSの実⾏ができる Sources
 読み込まれているJavaScriptを確認できる Network
 リクエストの履歴が確認できる Performance, Memory
 パフォーマンス計測ができる Application
 Cookie、Web Storageなどが確認できる Lighthouse
 パフォーマンスやアクセシビリティを計測できる DevTools とは #4 図: DevToolsの全体図（Chrome 88）
8. ウェブサイトを 
 “つかう”⼈向け
9. ページ全体のスクリーンショットを撮りたい #1 図: ブラウザの表⽰領域と表⽰領域外 表⽰領域外 画⾯に表⽰されている部分しか
 スクリーンショットが撮れない 悩 解 “Capture full size screenshot” を使う
10. ページ全体のスクリーンショットを撮りたい #2 図: コマンドパレットからCaptureを実⾏する ⽅法1: コマンドパレットから実⾏ 1. DevTools 上で ⌘ + ⇧ + P（Mac）、
 Shift + Alt + P（Win）でコマンドパレットを開く 2. [capture full size screenshot] を選択する 3. Enter でキャプチャを実⾏する 4. 画像ファイルを保存する
11. ページ全体のスクリーンショットを撮りたい #3 図: Device ModeからCaptureを実⾏する ⽅法2: Device Mode から実⾏ 1. [ Toggle Device Toolbar] をクリックし、 Device Modeで表⽰する 2. Device Mode のメニューから [Capture full size screenshot] をクリックする 3. 画像ファイルを保存する
12. ページの⼀部を書き換えたい #1 図: Elements パネルでDOMを書き換える 表⽰領域外 資料⽤にウェブページを書き換えたい けど、デザイナーやエンジニアに依頼 するのは⾯倒くさい 悩 解 Elements パネルで DOMツリー を
 編集する
13. ページの⼀部を書き換えたい #2 図: Elements パネルでDOMを書き換える ⽅法1: HTML を編集する 1. Shift + ⌘ + C（Mac）、Ctrl + Shift + C（Win）
 または DevTools 上の で 要素選択モード にする 2. 編集したい要素をページから選ぶ 3. コンテキストメニュー > [Edit as HTML] またはダブル クリックでHTMLを編集する 📝 DevTools の拡⼤・縮⼩
 DevTools からHTMLやCSSを編集すると⽂字が⼩さくて⽬が疲れ る、そんなときは⽂字サイズを変更してみましょう。 縮⼩: ⌘ + -（Mac）、Ctrl + -（Win）
 拡⼤: ⌘ + ^（Mac）、Ctrl + ^（Win）
 リセット: ⌘ + 0（Mac）、Ctrl + 0（Win）
14. ページの⼀部を書き換えたい #3 図: Console パネルで DesignMode を有効にする ⽅法2: DesignMode を有効にする 1. DevTools の Console パネルを表⽰する 2. `document.designMode='on'` と⼊⼒し実⾏する 3. DesignMode が有効になるので、ウェブページの⽂章を 直接編集する
15. 動かない原因を知りたい #1 図: Console に出⼒されたメッセージ ボタンが反応しない、エラーがでて使 えない 悩 解 Console パネルや Network パネルで エラーが発⽣していないか確認する
16. 動かない原因を知りたい #2 図: Console パネルにでたエラーたち ⽅法1: Console パネルを確認する - JavaScriptのランタイムエラー（実⾏時にエラーが発 ⽣するバグ）がわかる - リソース（ファイル、画像など）の読み込みエラーが わかる - エラーの右に表⽰されるリンクをクリックすると、コ ードのどこでエラーになっているか表⽰される 📝 ログの種類は3つある
 ⽩（通常）: デバッグのログ ⻩（警告）: エラーほど重⼤ではないけど、開発者に知らせる
 ためのログ ⾚（エラー）: やばい…。
17. 動かない原因を知りたい #3 図: Network パネルに表⽰されたリクエスト⼀覧 ⽅法2: Network パネルを確認する - HTTPリクエスト の履歴が確認できる 📝 エラーの問い合わせ先 ステータスコードでどこでエラーが起きているかだいたい把握できる 100〜399: 問題なし
 400〜499: フロントエンドエンジニア
 500〜599: バックエンドエンジニア（or フロントエンドエンジニア） 📝 より詳しい内容は… 伝わるバグ報告 by ダーシノ
 https://knowledge.sakura.ad.jp/26627/
18. ウェブサイトを 
 “つくる”⼈向け
19. ウェブサイトの品質を知りたい #1 図: www.sakura.ad.jpのLighthouseの結果 SEO、アクセシビリティなど対応でき ているか⼼配 悩 解 Lighthouse パネル（旧Audits）で計測 する
20. ウェブサイトの品質を知りたい #2 Lighthouse パネルで計測する - 計測したいカテゴリーにチェックをつけ、[Generate report] をクリックする - 各カテゴリーのスコアが表⽰される - 品質向上のヒントをくれる 📝 Lighthouse の結果がすべてではない
 imgタグ の alt属性 は、画像が表⽰されない場合の代替⽂字列 （画像の説明）を提供する。Lighthouse は alt属性 が設定され ているかどうかしか⾒ていないので <img alt=“abc123”> でも OKになる。 スコアはあくまで基準なので⽬的と⼿段を間違えないようにしま しょう。 図: www.sakura.ad.jp の Lighthouse のスコア
21. ウェブサイトの品質を知りたい #3 調査できるカテゴリー - Performance
 ウェブページが表⽰されるまでの速さを計測する - Progressive Web App
 ネイティブアプリみたいに使えるか計測する - Best practices
 ⼀般的に「やっておくといいぜ」を計測する - Accessibility
 どんなユーザーでもコンテンツにアクセス可能か計測する - SEO
 Googleさんに気に⼊られるための要素を計測する 図: www.sakura.ad.jp の Lighthouse の詳細 📝 ウェブ開発の勉強にも最適
 すべての項⽬には詳細説明へのリンク [Learn more.] が張ら れ、原因と対策がまとめられているので勉強にも最適。
22. パフォーマンスを計測したい #1 図: www.sakura.ad.jp の Performance の計測結果 読み込み・描画が遅いけど原因がわか らない 悩 解 Performanceパネルで計測する
23. パフォーマンスを計測したい #2 Performance パネルで計測する - Record:
 クリックした瞬間から記録する
 特定操作のパフォーマンスを計測したいときに便利 - Start profiling and reload page:
 リロードしてから描画が終わるまでを⾃動で記録する
 FP、FCP、FMP、TTIを計測したいときに便利 図: www.sakura.ad.jp の Performance を計測 📝 パフォーマンスに関する⽤語
 First Paint
 何でもいいのでページが表⽰されはじめたとき First Contentful Paint
 コンテンツ（テキストや画像など）が表⽰されはじめたとき First Meaningful Paint
 ユーザーにとって意味のある表⽰になったとき（わりと曖昧） Time To Interactive
 描画処理が終わりユーザーが操作できるようになったとき
24. パフォーマンスを計測したい #3 図: www.sakura.ad.jp の Performance を計測結果 1 各セクションの説明 1. タイムラインのグラフ
 CPU使⽤量、FPSなど 2. イベントの⼀覧
 リソースの読み込み、実⾏されたスク リプトなど 3. メモリ使⽤量のグラフ
 JS Heapやノード数、GPUメモリの使 ⽤量など 4. アクティビティの概要
 計測範囲の概要円グラフ 2 3 4 ※ ちゃんと説明しようとすると時間が⾜りないので詳細は割愛します
25. パフォーマンスを計測したい（実例 1） 時間 時間 ※説明をシンプルにするため同時接続数を3にしています ファイルの読み込み順序を変えただけで⾼速化 クリティカルパスに
 なりうるファイル 早めに読込開始する … JSファイル
26. パフォーマンスを計測したい（実例 2） 時間 時間 ※説明をシンプルにするため同時接続数を3にしています … JSファイル … イメージファイル 重い画像が占拠して 他のファイルが読み込めない 優先度が低い画像を後回し ファーストビューに不要なリソースを遅延読み込み First Contentful Paint までの時間が短縮
27. メモリリークの調査をしたい #1 図: www.sakura.ad.jp の Memory の計測結果 ずっと使っているとブラウザが重くなる 悩 解 Memory パネルで計測する
28. メモリリークの調査をしたい #2 Memoryパネルで計測する
 （Performanceパネル のMemory部分の詳細版） - Heap snapshot:
 ある時点でのヒープ（動的に割当可能なメモリ領域）のスナップショッ トをとる - Allocation instrumentation on timeline:
 50ms ごとにヒープスナップショットを取得し、時系列で記録する - Allocation sampling:
 記録中に使⽤されたメモリを記録する 図: www.sakura.ad.jp の Memory の計測結果
29. メモリリークの調査をしたい #3 スナップショットの表⽰⽅法 - Summary
 オブジェクトをコンストラクタ別にグループ化して表⽰する
 DOMツリーのメモリリークを調べるのに適している - Comparison:
 2つのスナップショットを⽐較し、増減したオブジェクトや割当/開放さ れたメモリサイズを表⽰する
 メモリリークを調べるのに適している - Comtainment:
 グローバル名前空間で参照されているオブジェクトを表⽰する
 グローバル変数の調査に適している - Statistic:
 メモリの使⽤割合を円グラフで表⽰する 図: www.sakura.ad.jp の Memory の計測結果 ※ ちゃんと説明しようとすると時間が⾜りないので詳細は割愛します
30. おわり
31. ダーシノ こんな⼈が発表しました @bc_rikko @BcRikko kuroeveryday.blogspot.com NES.css ファミコン⾵CSSフレームワーク 17,300+stars on GitHub https://github.com/nostalgic-css/NES.css 仮想DOM 実践⼊⾨ ⾃作フレームワークを作りながら仮想DOMを学ぶ記事、エンジニアHub寄稿 https://eh-career.com/engineerhub/entry/2020/02/18/103000 CSSと副業 OSS活動や副業に関するインタビュー記事、Offers寄稿 https://offers.jp/media/sidejob/workstyle/a_1769