[ソース] パネルの概要

Kayce Basques 氏
Kayce Basques
ソフィア・エメリアノバ
Sofia Emelianova

Chrome DevTools の [ソース] パネルを使用して、次の操作を行います。

ファイルを表示

[Page] ペインを使用して、ページが読み込まれたすべてのリソースを表示します。

ページペイン。

[Page] ペインの構成:

  • 上のスクリーンショットの top のように、トップレベルは HTML フレームを表しています。アクセスしたすべてのページに top があります。top は、ドキュメントのメインのフレームを表します。
  • 上のスクリーンショットの developers.google.com のように、第 2 レベルは「オリジン」を表します。
  • 第 3 レベル、第 4 レベルなどは、その送信元から読み込まれたディレクトリとリソースを表します。たとえば、上のスクリーンショットでは、リソース devsite-googler-button のフルパスは developers.google.com/_static/19aa27122b/css/devsite-googler-button です。

[Page] ペインでファイルをクリックすると、その内容が [Editor] ペインに表示されます。あらゆる種類のファイルを表示できます。画像の場合は、画像のプレビューが表示されます。

[Editor] ペインでファイルを表示している。

CSS と JavaScript を編集する

CSS と JavaScript を編集するには、[エディタ] ペインを使用します。DevTools によって、新しいコードを実行するようにページが更新されます。

[Editor] はデバッグにも役立ちます。たとえば、構文エラーやその他の問題(CSS @import ステートメントや url() ステートメントの失敗、無効な URL を含む HTML href 属性など)の横に、インライン エラーのツールチップに下線が引かれて表示されます。

インライン構文エラーのツールチップ。

要素の background-color を編集すると、変更がすぐに反映されます。

[Editor] ペインでの CSS の編集。

JavaScript の変更を有効にするには、Command+S キー(Mac)または Ctrl+S キー(Windows、Linux)を押します。DevTools ではスクリプトは再実行されないため、JavaScript で有効になる変更は関数内で行った変更のみです。たとえば、console.log('A') は実行されず、console.log('B') は実行されます。

[Editor] ペインでの JavaScript の編集。

変更後に DevTools でスクリプト全体を再実行した場合、A というテキストがコンソールに記録されます。

ページを再読み込みすると、DevTools によって CSS と JavaScript の変更が消去されます。ファイル システムへの変更を保存する方法については、ワークスペースを設定するをご覧ください。

スニペットを作成、保存、実行する

スニペットは、どのページでも実行できるスクリプトです。jQuery ライブラリをページに挿入して、コンソールから jQuery コマンドを実行できるようにするために、コンソールに次のコードを繰り返し入力します。

let script = document.createElement('script');
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
script.crossOrigin = 'anonymous';
script.integrity = 'sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=';
document.head.appendChild(script);

代わりに、このコードをスニペットに保存すれば、必要なときに何回でも、ボタンを数回クリックするだけでコードを実行できます。DevTools が、スニペットをファイル システムに保存します。たとえば、jQuery ライブラリをページに挿入する Snippet を調べます。

jQuery ライブラリをページに挿入するスニペット。

スニペットを実行するには:

  • [Snippets] ペインでファイルを開き、下部のアクションバーにある実行アイコン [Run] ボタン。 をクリックします。
  • コマンド メニューを開き、> 文字を削除して「!」と入力し、スニペットの名前を入力して Enter キーを押します。

詳しくは、任意のページからコード スニペットを実行するをご覧ください。

JavaScript をデバッグする

console.log() を使用して JavaScript の不具合を推測するのではなく、Chrome DevTools デバッグツールの使用を検討してください。一般的な考え方としては、ブレークポイント(コード内の意図的に停止する場所)を設定してから、コードの実行を 1 行ずつステップしていきます。

ブレークポイントで一時停止します。

コードを進めていくと、コンソールでの JavaScript の実行など、現在定義されているすべてのプロパティと変数の値を表示および変更できます。

DevTools でのデバッグの基本については、JavaScript のデバッグを開始するをご覧ください。

コードのみに集中

Chrome DevTools を使用すると、ウェブ アプリケーションの構築時に使用するフレームワークやビルドツールから生成されるノイズを除去できるため、作成したコードのみに集中できます。

最新のウェブ デバッグ エクスペリエンスを提供するために、DevTools では次のことを行います。

また、フレームワークでサポートされている場合は、デバッガのコールスタックコンソールのスタック トレースに非同期オペレーションの全履歴が表示されます。

詳しくは、次をご覧ください。

ワークスペースを設定する

デフォルトでは、[ソース] パネルでファイルを編集した場合、ページを再読み込みすると変更内容が失われます。ワークスペースを使用すると、DevTools で行った変更をファイル システムに保存できます。基本的に、これにより DevTools をコードエディタとして使用できます。

使用方法については、ワークスペースでファイルを編集するをご覧ください。