Chrome DevTools の [Sources] パネルを使用して、次の操作を行います。
- ファイルを表示する。
- CSS と JavaScript を編集する
- 任意のページで実行できる JavaScript のスニペットを作成して保存する。スニペットは ブックマークレットとよく似ています。
- JavaScript をデバッグする。
- ワークスペースをセットアップして、DevTools で行った変更がファイルのコードに保存されるようにします。 ありません
ファイルを表示
[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
を編集すると、変更が反映されます。
すぐに通知されます。
JavaScript の変更を有効にするには、Command+S キー(Mac)または Ctrl+S キー(Windows、Linux)を押します。DevTools ではスクリプトが再実行されないため、有効になる JavaScript の変更は関数内で行った変更のみです。たとえば、console.log('A')
は実行されませんが、console.log('B')
は実行されます。
変更後に 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 ライブラリを挿入します。
スニペットを実行するには:
- [スニペット] ペインでファイルを開き、下部のアクションバーで [実行]
をクリックします。
- コマンド メニューを開いて
>
文字を削除し、!
と入力し、 [Snippet] を選択し、Enter キーを押します。
詳しくは、任意のページからコード スニペットを実行するをご覧ください。
JavaScript をデバッグする
console.log()
を使用して JavaScript の問題を推測するのではなく、
Chrome DevTools のデバッグツールを使用してください。通常は、ブレークポイントを設定することを
その後、コードの実行をステップごとに 1 行ずつ
あります。
コードをステップ実行しながら、現在定義されているすべての プロパティや変数の設定、コンソールでの JavaScript の実行などを行うことができます。
DevTools でのデバッグの基本については、JavaScript のデバッグを開始するをご覧ください。
コードだけに集中できる
Chrome DevTools を使用すると、フレームワークによって生成されるノイズを除去し、ウェブ アプリケーションの構築時に利用するツールを構築できるため、自分が作成したコードだけに集中できます。
最新のウェブ デバッグ エクスペリエンスを提供するため、DevTools では次の処理が行われます。
- 作成されたコードとデプロイされたコードを分離する。コードをすばやく見つけられるように、[ソース] パネルでは、作成したコードをバンドルおよび圧縮されたコードから分離します。
- 既知のサードパーティのコードを無視する: <ph type="x-smartling-placeholder">
また、フレームワークでサポートされている場合は、デバッガのコールスタックとコンソールのスタック トレースに、非同期オペレーションの完全な履歴が表示されます。
詳しくは、次をご覧ください。
ワークスペースを設定する
デフォルトでは、[Sources] パネルでファイルを編集すると、再読み込み時に変更内容が失われます 表示されます。ワークスペースを使用すると、DevTools で行った変更をファイルに保存できます。 ありません基本的に、これにより DevTools をコードエディタとして使用できます。
詳しくは、ワークスペースでファイルを編集するをご覧ください。