$30 off During Our Annual Pro Sale. View Details »

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

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

社内勉強会用資料

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

ダーシノ

March 24, 2021
Tweet

More Decks by ダーシノ

Other Decks in Technology

Transcript

  1. DevTools の 使い⽅
    知ってトクする
    ダーシノ
    @bc_rikko
    ※ 当資料では Chrome DevTools を主に扱っています

    View Slide

  2. ⽬次
    DevTools とは
    ウェブサイトを“つかう”⼈向け
    - ページ全体のスクリーンショットを撮りたい
    - マニュアルや企画⽤にページの⼀部を書き換えたい
    - 動かない原因を知りたい
    ウェブサイトを“つくる”⼈向け
    - ウェブサイトの品質を知りたい
    - パフォーマンスを計測したい
    - メモリリークの調査をしたい

    View Slide

  3. DevTools とは
    ※ 「デベロッパーツール」「開発者ツール」と呼ぶこともありますが、当資料では DevTools で統⼀します

    View Slide

  4. フロントエンド「三種の神器」のひとつ
    ブラウザに組み込まれている開発⽀援ツール
    - ブラウザごとに特⾊がある
    - Firefox: GUIでスタイルをいじれる(デザイナー向け)
    - Chrome: パフォーマンス計測の機能が充実している(エンジニア向け)
    DevTools とは #1
    図: GUIでclip-pathを編集している(Firefox) 図: パフォーマンスやアクセシビリティ対応を確認している(Chrome)
    ※ これは個⼈の意⾒です

    View Slide

  5. DevTools でできること
    - HTML、CSS、JavaScriptの確認、編集、デバッグ
    - エラーログの確認
    - 通信履歴の確認
    - Cookie、Web Storage、キャッシュなどの確認
    - パフォーマンス計測
    - メモリリーク調査
    - etc.
    DevTools とは #2

    View Slide

  6. DevTools の表⽰⽅法
    - メニュー > [その他のツール] > [デベロッパーツール]
    - ⌘ + ⌥ + I(Mac)
    - Ctrl + Shift + I or F12(Win)
    DevTools とは #3
    図: DevToolsを開く⽅法 図: DevToolsの全景

    View Slide

  7. Elements

    DOMとCSSを確認、編集できる
    Console

    ログの出⼒結果やJSの実⾏ができる
    Sources

    読み込まれているJavaScriptを確認できる
    Network

    リクエストの履歴が確認できる
    Performance, Memory

    パフォーマンス計測ができる
    Application

    Cookie、Web Storageなどが確認できる
    Lighthouse

    パフォーマンスやアクセシビリティを計測できる
    DevTools とは #4
    図: DevToolsの全体図(Chrome 88)

    View Slide

  8. ウェブサイトを

    “つかう”⼈向け

    View Slide

  9. ページ全体のスクリーンショットを撮りたい #1
    図: ブラウザの表⽰領域と表⽰領域外
    表⽰領域外
    画⾯に表⽰されている部分しか

    スクリーンショットが撮れない

    解 “Capture full size screenshot” を使う

    View Slide

  10. ページ全体のスクリーンショットを撮りたい #2
    図: コマンドパレットからCaptureを実⾏する
    ⽅法1: コマンドパレットから実⾏
    1. DevTools 上で ⌘ + ⇧ + P(Mac)、

    Shift + Alt + P(Win)でコマンドパレットを開く
    2. [capture full size screenshot] を選択する
    3. Enter でキャプチャを実⾏する
    4. 画像ファイルを保存する

    View Slide

  11. ページ全体のスクリーンショットを撮りたい #3
    図: Device ModeからCaptureを実⾏する
    ⽅法2: Device Mode から実⾏
    1. [ Toggle Device Toolbar] をクリックし、
    Device Modeで表⽰する
    2. Device Mode のメニューから [Capture full size
    screenshot] をクリックする
    3. 画像ファイルを保存する

    View Slide

  12. ページの⼀部を書き換えたい #1
    図: Elements パネルでDOMを書き換える
    表⽰領域外
    資料⽤にウェブページを書き換えたい
    けど、デザイナーやエンジニアに依頼
    するのは⾯倒くさい

    解 Elements パネルで DOMツリー を

    編集する

    View Slide

  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)

    View Slide

  14. ページの⼀部を書き換えたい #3
    図: Console パネルで DesignMode を有効にする
    ⽅法2: DesignMode を有効にする
    1. DevTools の Console パネルを表⽰する
    2. `document.designMode='on'` と⼊⼒し実⾏する
    3. DesignMode が有効になるので、ウェブページの⽂章を
    直接編集する

    View Slide

  15. 動かない原因を知りたい #1
    図: Console に出⼒されたメッセージ
    ボタンが反応しない、エラーがでて使
    えない

    解 Console パネルや Network パネルで
    エラーが発⽣していないか確認する

    View Slide

  16. 動かない原因を知りたい #2
    図: Console パネルにでたエラーたち
    ⽅法1: Console パネルを確認する
    - JavaScriptのランタイムエラー(実⾏時にエラーが発
    ⽣するバグ)がわかる
    - リソース(ファイル、画像など)の読み込みエラーが
    わかる
    - エラーの右に表⽰されるリンクをクリックすると、コ
    ードのどこでエラーになっているか表⽰される
    📝 ログの種類は3つある

    ⽩(通常): デバッグのログ
    ⻩(警告): エラーほど重⼤ではないけど、開発者に知らせる

    ためのログ
    ⾚(エラー): やばい…。

    View Slide

  17. 動かない原因を知りたい #3
    図: Network パネルに表⽰されたリクエスト⼀覧
    ⽅法2: Network パネルを確認する
    - HTTPリクエスト の履歴が確認できる
    📝 エラーの問い合わせ先
    ステータスコードでどこでエラーが起きているかだいたい把握できる
    100〜399: 問題なし

    400〜499: フロントエンドエンジニア

    500〜599: バックエンドエンジニア(or フロントエンドエンジニア)
    📝 より詳しい内容は…
    伝わるバグ報告 by ダーシノ

    https://knowledge.sakura.ad.jp/26627/

    View Slide

  18. ウェブサイトを

    “つくる”⼈向け

    View Slide

  19. ウェブサイトの品質を知りたい #1
    図: www.sakura.ad.jpのLighthouseの結果
    SEO、アクセシビリティなど対応でき
    ているか⼼配

    解 Lighthouse パネル(旧Audits)で計測
    する

    View Slide

  20. ウェブサイトの品質を知りたい #2
    Lighthouse パネルで計測する
    - 計測したいカテゴリーにチェックをつけ、[Generate
    report] をクリックする
    - 各カテゴリーのスコアが表⽰される
    - 品質向上のヒントをくれる
    📝 Lighthouse の結果がすべてではない

    imgタグ の alt属性 は、画像が表⽰されない場合の代替⽂字列
    (画像の説明)を提供する。Lighthouse は alt属性 が設定され
    ているかどうかしか⾒ていないので でも
    OKになる。
    スコアはあくまで基準なので⽬的と⼿段を間違えないようにしま
    しょう。
    図: www.sakura.ad.jp の Lighthouse のスコア

    View Slide

  21. ウェブサイトの品質を知りたい #3
    調査できるカテゴリー
    - Performance

    ウェブページが表⽰されるまでの速さを計測する
    - Progressive Web App

    ネイティブアプリみたいに使えるか計測する
    - Best practices

    ⼀般的に「やっておくといいぜ」を計測する
    - Accessibility

    どんなユーザーでもコンテンツにアクセス可能か計測する
    - SEO

    Googleさんに気に⼊られるための要素を計測する
    図: www.sakura.ad.jp の Lighthouse の詳細
    📝 ウェブ開発の勉強にも最適

    すべての項⽬には詳細説明へのリンク [Learn more.] が張ら
    れ、原因と対策がまとめられているので勉強にも最適。

    View Slide

  22. パフォーマンスを計測したい #1
    図: www.sakura.ad.jp の Performance の計測結果
    読み込み・描画が遅いけど原因がわか
    らない

    解 Performanceパネルで計測する

    View Slide

  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

    描画処理が終わりユーザーが操作できるようになったとき

    View Slide

  24. パフォーマンスを計測したい #3
    図: www.sakura.ad.jp の Performance を計測結果
    1
    各セクションの説明
    1. タイムラインのグラフ

    CPU使⽤量、FPSなど
    2. イベントの⼀覧

    リソースの読み込み、実⾏されたスク
    リプトなど
    3. メモリ使⽤量のグラフ

    JS Heapやノード数、GPUメモリの使
    ⽤量など
    4. アクティビティの概要

    計測範囲の概要円グラフ
    2
    3
    4 ※ ちゃんと説明しようとすると時間が⾜りないので詳細は割愛します

    View Slide

  25. パフォーマンスを計測したい(実例 1)
    時間 時間
    ※説明をシンプルにするため同時接続数を3にしています
    ファイルの読み込み順序を変えただけで⾼速化
    クリティカルパスに

    なりうるファイル
    早めに読込開始する
    … JSファイル

    View Slide

  26. パフォーマンスを計測したい(実例 2)
    時間 時間
    ※説明をシンプルにするため同時接続数を3にしています
    … JSファイル … イメージファイル
    重い画像が占拠して
    他のファイルが読み込めない
    優先度が低い画像を後回し
    ファーストビューに不要なリソースを遅延読み込み
    First Contentful Paint までの時間が短縮

    View Slide

  27. メモリリークの調査をしたい #1
    図: www.sakura.ad.jp の Memory の計測結果
    ずっと使っているとブラウザが重くなる

    解 Memory パネルで計測する

    View Slide

  28. メモリリークの調査をしたい #2
    Memoryパネルで計測する

    (Performanceパネル のMemory部分の詳細版)
    - Heap snapshot:

    ある時点でのヒープ(動的に割当可能なメモリ領域)のスナップショッ
    トをとる
    - Allocation instrumentation on timeline:

    50ms ごとにヒープスナップショットを取得し、時系列で記録する
    - Allocation sampling:

    記録中に使⽤されたメモリを記録する
    図: www.sakura.ad.jp の Memory の計測結果

    View Slide

  29. メモリリークの調査をしたい #3
    スナップショットの表⽰⽅法
    - Summary

    オブジェクトをコンストラクタ別にグループ化して表⽰する

    DOMツリーのメモリリークを調べるのに適している
    - Comparison:

    2つのスナップショットを⽐較し、増減したオブジェクトや割当/開放さ
    れたメモリサイズを表⽰する

    メモリリークを調べるのに適している
    - Comtainment:

    グローバル名前空間で参照されているオブジェクトを表⽰する

    グローバル変数の調査に適している
    - Statistic:

    メモリの使⽤割合を円グラフで表⽰する
    図: www.sakura.ad.jp の Memory の計測結果
    ※ ちゃんと説明しようとすると時間が⾜りないので詳細は割愛します

    View Slide

  30. おわり

    View Slide

  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

    View Slide