22. Chrome DevTools | Web | Google Developers

5 min readJul 19, 2018

【所要時間】

48分(2018年7月２０日)

【概要】

Dev Toolsの概要

【要約・学んだこと】

Chrome DevTools は、Google Chrome に組み込まれたウェブ作成およびデバッグツールのセットです。 DevTools を使用してサイトの反復処理、デバッグ、プロファイリングを行います。

試験運用: Chrome Canary には、常に最新の DevTools が備わっています。

Cmd+Opt+I でDeveloper Toolsが開く。

Get started

Viewing and changing a page’s styles
CSSで意図した表示を実際に見ると、上手くいかないことがよくある。DevToolsを使うことで、ブラウザが実際にスタイルをHTMLにどう適用しているかを見ることができる。また、DevToolsからスタイルを変えたり、リロードせずにすぐに変更を適用することができる。
Debugging JavaScript
多くの開発者は console.log() を使ったデバッグを最初に行う。DevToolsでbreakpointをセットし、ページ実行の途中で一時停止し、1行ずつコードを確認することが可能。
console.log() よりも早くデバッグを行うことができる、
Viewing messages and running JavaScript in the Console
Consoleはページが正しく動くかどうかの情報を時系列順のメッセージとして供給する。Consoleからページの構成や、変更点の実験をJavaScriptを実行することもできる。
Optimizing website speed
サイトのスピードをどうやって改善するかを具体化してくれる。

Device Mode
モバイルでの表示をチェックできる。

DOMとCSSを操作して、サイトのレイアウトやデザインを繰り返し確認できる。

開発中の診断情報や、ページのJavaScriptとの連動を記録する。

breakpointを使ってJavaScriptをデバッグしたり、ローカルファイルをWorkspace経由で、コードエディタとしてDevToolsを使うことができる。

ページのパフォーマンスやデバッグリクエストイシューを最適化する。

lifecycle中に起きた様々なイベントを調査、記録することでページのランタイムパフォーマンスを改善する。

メモリ使用状況と漏れのプロフィール

IndexedDBか、Web SQLデータベース、ローカルやセッションストレージ、クッキー、Application Cache,イメージ、フォント、スタイルシートを含むロードされた全てのリソースを調べることができる。

コンテンツが混ざってしまう問題、認証問題などをデバッグする。

【わからなかったこと】

特になし。

【感想】
コードが実際にどのように表示されるかの確認や、その時に何か問題がある場所の検出がしやすい。デバッグでも使う。といったツールのイメージ。