[ソース] パネルの概要

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

ファイルを表示

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

[Page] ペイン。

[ページ] ペインの構成:

  • トップレベル（上のスクリーンショットの top など）は、HTML フレームを表します。top は次の場所に表示されます: 表示されなくなります。top は、ドキュメントのメインフレームを表します。
  • 第 2 レベル（上のスクリーンショットの developers.google.com など）は、オリジンを表します。
  • 第 3 レベル、第 4 レベルなどは、読み込まれたディレクトリとリソースを表します。 表示されます。たとえば、上のスクリーンショットでは、リソースのフルパスを指定します。 devsite-googler-button は developers.google.com/_static/19aa27122b/css/devsite-googler-button です。

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

[エディタ] ペインでファイルを表示する。

CSS と JavaScript を編集する

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

エディタを使用してデバッグすることもできます。たとえば、構文エラーやその他の問題（失敗した CSS @import および url() ステートメント、無効な URL を含む HTML の href 属性など）の横に、下線が引かれてインライン エラーのツールチップが表示されます。

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

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

[エディタ] ペインでの CSS の編集

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

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

変更後に DevTools がスクリプト全体を再実行した場合、テキスト A がログに記録された可能性があります。 コンソール。

DevTools では、ページを再読み込みすると、CSS と JavaScript の変更が消去されます。P-MAX の Workspace をご覧ください。

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

スニペットは、どのページでも実行できるスクリプトです。「kubectl」コマンドを繰り返し コンソールで次のコードを追加します。これにより、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 により、スニペットがファイル システムに保存されます。たとえば、Snippet を確認します。 を使用してページに jQuery ライブラリを挿入します。

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

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

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

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

JavaScript をデバッグする

console.log() を使用して JavaScript の問題を推測するのではなく、 Chrome DevTools のデバッグツールを使用してください。通常は、ブレークポイントを設定することを その後、コードの実行をステップごとに 1 行ずつ あります。

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

コードをステップ実行しながら、現在定義されているすべての プロパティや変数の設定、コンソールでの JavaScript の実行などを行うことができます。

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

コードだけに集中できる

Chrome DevTools を使用すると、フレームワークによって生成されるノイズを除去し、ウェブ アプリケーションの構築時に利用するツールを構築できるため、自分が作成したコードだけに集中できます。

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

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

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

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

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

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