Chrome DevTools の [ソース] パネルで、次の操作を行います。
- ファイルを表示する。
- CSS と JavaScript を編集します。
- JavaScript のスニペットを作成して保存し、どのページでも実行できます。スニペットはブックマークレットに似ています。
- JavaScript をデバッグする
- ワークスペースを設定して、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] ペインにコンテンツが表示されます。どの形式のファイルでも表示できます。画像の場合は、画像のプレビューが表示されます。
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 の変更が消去されます。ファイル システムに変更を保存する方法については、ワークスペースを設定するをご覧ください。
スニペットを作成、保存、実行する
スニペットは、どのページでも実行できるスクリプトです。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 ライブラリをページに挿入するスニペットを調べます。
スニペットを実行するには:
- [Snippets] ペインでファイルを開き、下部のアクションバーにある実行アイコン をクリックします。
- コマンド メニューを開き、
>
文字を削除して「!
」と入力し、スニペットの名前を入力して、Enter キーを押します。
詳しくは、任意のページからコードのスニペットを実行するをご覧ください。
JavaScript をデバッグする
JavaScript の問題の場所を console.log()
を使用して推測するのではなく、Chrome DevTools デバッグツールの使用を検討してください。一般的な考え方としては、ブレークポイント(コード内の意図的に停止する場所)を設定してから、コードの実行を 1 行ずつステップ実行します。
コードをステップ実行していくと、現在定義されているすべてのプロパティと変数の値を表示および変更したり、コンソールで JavaScript を実行したりできます。
DevTools でのデバッグの基本については、JavaScript のデバッグを開始するをご覧ください。
コードの作成に集中
Chrome DevTools では、ウェブ アプリケーションの構築時に使用するフレームワークやビルドツールから発生するノイズを除去することで、自分が作成したコードに集中できます。
最新のウェブ デバッグ エクスペリエンスを提供するために、DevTools は次の処理を行います。
- 作成済みのコードとデプロイしたコードを分離する。コードを素早く見つけられるように、バンドルまたは圧縮されたコードとは、作成したコードを [ソース] パネルから分離しています。
- 既知のサードパーティのコードを無視する:
また、フレームワークでサポートされている場合は、デバッガのコールスタックとコンソールのスタック トレースに、非同期処理の全履歴が表示されます。
詳しくは、次をご覧ください。
ワークスペースを設定する
デフォルトでは、[ソース] パネルでファイルを編集すると、ページを再読み込みすると変更内容が失われます。ワークスペースを使用すると、DevTools で行った変更をファイル システムに保存できます。基本的に、これにより DevTools をコードエディタとして使用できます。
利用を開始するには、ワークスペースでファイルを編集するをご覧ください。