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