Missed the action at the 2018 Chrome Dev Summit? Catch up with our playlist on the Google Chrome Developers channel on YouTube. Watch now.

[Sources] パネルの概要

Chrome DevTools [Sources] パネルを使用して、以下を行います。

ファイルの表示

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

[Network] ペイン
図 1[Network] ペイン

[Network] ペインは、次のように構成されています。

  • 最上位レベル(例: 図 1top)は HTML フレーム を表しています。 アクセスする各ページに top があることに気づかれるでしょう。 top はメイン ドキュメントのフレームを表しています。
  • 2 番目のレベル(例: 図 1developers.google.com)は、オリジン を表しています。
  • 3 番目、4 番目、それ以降のレベルは、そのオリジンから読み込まれたディレクトリとリソースを表しています。 たとえば、図 1 でリソース devsite-googler-button へのフルパスは、developers.google.com/_static/f6e16de9fa/css/devsite-googler-button になります。

[Network] ペインのファイルをクリックすると、そのコンテンツが [Editor] ペインに表示されます。 どのタイプのファイルも表示することができます。 画像の場合は画像のプレビューが表示されます。

[Editor] ペインにファイルを表示する
図 2[Editor] ペインに jquery-bundle.js のコンテンツが表示されている

CSS および JavaScript の編集

[Editor] ペインで CSS および JavaScript を編集します。 DevTools がそのページを更新し、新しいコードが実行されるようにします。 たとえば、あるエレメントの background-color を編集すると、その変更が有効になったことがすぐにわかります。

[Editor] ペインでの CSS の編集
図 3[Editor] ペインで、ある要素の背景色を青から赤に変更するよう CSS を編集する

CSS の変更はすぐに有効になり、保存する必要はありません。 JavaScript の変更を有効にするには、Command+S (Mac)か、Control+S (Windows、Linux)を押します。 DevTools はスクリプトを再実行しないため、有効になる JavaScript の変更は、関数の内部で行った変更だけです。 たとえば、図 4 では、console.log('A') は実行されませんが、console.log('B') は実行されています。 変更を行った後 DevTools でスクリプト全体を再実行すると、テキスト A[Console] にログ記録されます。

[Editor] ペインでの JavaScript の編集
図 5[Editor] ペインでの JavaScript の編集

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

スニペットの作成、保存、実行

スニペットは、任意のページで実行可能なスクリプトです。 [Console] から jQuery コマンドを実行するため、ページに jQuery ライブラリを挿入しようとして、[Console] に次のコードを繰り返し入力しているところを想像してみてください。

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);

そうする代わりに、このコードを [Snippet] に保存し、いつでも必要な時に 2 つのボタンをクリックして、そのスニペットを実行することができます。 スニペットは、DevTools によりファイル システムに保存されます。

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

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

  • [Snippets] ペインでファイルを開き、Run Run ボタン をクリックします{:.cdt-inl}。
  • Command Menu を開き、> 文字を削除し、! を入力し、スニペットの名前を入力します。続けて Enter キーを押します。

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

JavaScript のデバッグ

console.log() を使用して JavaScriptis の問題の原因を推測するのではなく、Chrome DevTools デバッグ ツールの使用を検討してください。 一般的なアイデアは、ブレークポイントを設定することです。これはコードの意図的な停止場所になり、次に一度に 1 行ずつコードを実行します。 コードをステップごとに実行しながら、現在定義されているすべてのプロパティと変数の値を表示して変更したり、[Console] で JavaScript を実行したりできます。

DevTools のデバッグの基礎について詳しくは、JavaScript をデバッグする をご覧ください。

JavaScript のデバッグ
図 7。 JavaScript のデバッグ

ワークスペースの設定

デフォルトでは、[Sources] パネルでファイルを編集している時にページを再読み込みすると、それまでに行った変更は失われます。 ワークスペースを使用すると、DevTools で行った変更を自分のファイル システムに保存できるようになります。 基本的に、この方法では DevTools をコードエディタとして使用することになります。

始めるには、DevTools ワークスペースによる永続化の設定 をご覧ください。

フィードバック

Was this page helpful?