[ソース] パネルの概要

Kayce Basques
Kayce Basques
X GitHub
Sofia Emelianova
Sofia Emelianova
GitHub

[ソース] パネルを使用すると、スタイルシート、JavaScript ファイル、画像など、ウェブサイトのリソースを表示して編集できます。

概要

[ソース] パネルでは、次のことができます。

[ソース] パネルを開く

[ソース] パネルを開く手順は次のとおりです。

  1. DevTools を開きます。
  2. 次のキーを押してコマンド メニュー を開きます。
    • macOS: Command+Shift+P
    • Windows、Linux、ChromeOS: Control+Shift+P
  3. 「sources」と入力し、[Show Sources panel] を選択して Enter キーを押します。

または、右上の more_vert [**その他のオプション**] > [**その他のツール**] > [**ソース**] を選択します。

ファイルを表示

[ページ] タブをクリックすると、ページで読み込まれたすべてのリソースが表示されます。

[ページ] タブ。

[ページ] タブの構成は次のとおりです。

  • 最上位レベル（上のスクリーンショットの top など）は、HTML フレームを表します。top は、アクセスするすべてのページに表示されます。top は、メイン ドキュメント フレームを表します。
  • 2 番目のレベル（上のスクリーンショットの developers.google.com など）は、オリジンを表します。
  • 3 番目のレベル以降は、そのオリジンから読み込まれたディレクトリとリソースを表します。たとえば、上のスクリーンショットでは、リソース devsite-googler-button の完全パスは developers.google.com/_static/19aa27122b/css/devsite-googler-button です。

[ページ] タブでファイルをクリックすると、[エディタ] タブにその内容が表示されます。任意の種類のファイルを表示できます。画像の場合は、画像のプレビューが表示されます。

エディタ タブでファイルを表示する。

CSS と JavaScript を編集する

[エディタ] タブをクリックして、CSS と JavaScript を編集します。DevTools は、新しいコードを実行するようにページを更新します。

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

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

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

[エディタ] タブで CSS を編集する。

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

[エディタ] タブで 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 ライブラリをページに挿入するスニペット を確認します。

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

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

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

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

JavaScript をデバッグする

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

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

コードをステップスルーすると、現在定義されているすべての プロパティと変数の値を表示して変更したり、コンソールで JavaScript を実行したりできます。

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

コードのみに集中する

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

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

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

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

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

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

まず、ワークスペースでファイルを編集するをご覧ください。