次の方法で共有

ソース ツールの概要

ソース ツール を使用して、フロントエンド JavaScript コードを表示、変更、デバッグし、現在の Web ページを構成するリソースを検査します。

詳細な内容:

[ナビゲーター]、[エディター]、および [デバッガー] ウィンドウ

ソース ツールには、 次の 3 つのウィンドウがあります。

ウィンドウ アクション
[ナビゲーター] ウィンドウ サーバーから返されるリソース間を移動して、現在の Web ページを作成します。 ファイル、画像、その他のリソースを選択し、そのパスを表示します。 必要に応じて、ローカル ワークスペースをセットアップして、変更をソース ファイルに直接保存します。
エディター ウィンドウ サーバーから返される JavaScript、HTML、CSS、その他のファイルを表示します。 JavaScript または CSS を実験的に編集します。 変更は、ページを更新するまで保持され、ワークスペースを使用してローカル ファイルに保存した場合はページ更新後も保持されます。 ワークスペースまたは上書きを使用する場合は、HTML ファイルも編集できます。
デバッガー ウィンドウ JavaScript デバッガーを使用してブレークポイントを設定し、JavaScript の実行を一時停止し、指定した JavaScript 式を確認しながら、行った編集内容を含むコードをステップ実行します。 現在のコード行のスコープ内にある変数の値を監視し、手動で変更します。

次の図は、DevTools の左上隅に赤いボックスで強調表示されたナビゲーター ウィンドウ、右上で強調表示されているエディター ウィンドウ、および下部で強調表示されたデバッガー ウィンドウを示しています。 左側はブラウザー ウィンドウのメイン部分で、デバッガーがブレークポイントで一時停止している場合に、レンダリングされた Web ページが灰色表示で表示されます。

狭いレイアウトの [ソース] ツールのウィンドウ

DevTools が広い場合、デバッガー ウィンドウは右側に配置され、スコープとウォッチが含まれます。

サーバーから返される JavaScript の移動、表示、編集、デバッグ

Sources ツールのサイズを最大化するには、DevTools を別のウィンドウにドッキング解除し、必要に応じて DevTools ウィンドウを別のモニターに移動します。 「DevTools の配置を変更する (Undock、Dock to bottom、Dock to left)」を参照してください。

上記のデバッグ デモ Web ページを読み込むには、以下の「デバッガーを使用する基本的な方法 」を参照してください。

[ナビゲーター] ウィンドウを使用してファイルを選択する

左側の [ナビゲーター] ウィンドウを使用して、現在の Web ページを作成するためにサーバーから返されるリソース間を移動します。 ファイル、画像、その他のリソースを選択し、そのパスを表示します。

[ナビゲーター] ウィンドウ

[ナビゲーター] ウィンドウには、次のタブが含まれています。

タブ 説明 ドキュメント
Page ブラウザーがサーバーまたはファイル システムからダウンロードしたリソースを表示し、そのコンテンツを検査し、コードをデバッグします。 [ページ] タブを使用して、現在の Web ページを作成するリソースを確認する
ワークスペース DevTools でローカル ファイルを表示および編集し、ブラウザー内で DevTools を統合開発環境 (IDE) として使用します。 DevTools を使用してファイルを編集し、変更をディスクに保存するには、ローカル フォルダーをワークスペースに追加します
上書き Web ページに対する変更を試し、変更を Web ページのソース コードにマッピングせずに、Web ページを更新した後も変更を保持します。 [上書き] タブを使用してサーバー ファイルをローカル ファイルで上書きする
コンテンツ スクリプト Microsoft Edge 拡張機能によって読み込まれたコンテンツ スクリプトを表示します。 Microsoft Edge 拡張機能の [コンテンツ スクリプト] タブの使用
スニペット 任意の Web ページで JavaScript のスニペットを簡単に実行できるように、JavaScript コード スニペットを作成して保存します。 [スニペット] タブを使用して任意のページで JavaScript コード スニペットを実行する

[ナビゲーター] ウィンドウの非表示のタブにアクセスするには、[ その他のタブ (その他のタブ)] ボタンをクリックします。

詳細は以下のとおりです。 また、以下: コマンド メニューを使用してファイルを開きます。

[ページ] タブを使用して、現在の Web ページを作成するリソースを確認する

[ソース] ツールの [ページ] タブには、Web ページの HTML ドキュメント、JavaScript ファイル、CSS ファイル、画像など、現在の Web ページで使用されているリソースが表示されます。 [ ページ ] タブに表示されるリソースは、ダウンロード元のファイル システムまたはサーバー パスと一致するツリーに編成されます。

[ ページ ] タブを使用して、ブラウザーがサーバーまたはファイル システムからダウンロードしたリソースを表示し、そのコンテンツを検査し、コードをデバッグします。

[ソース] ツールの [ナビゲーター] ウィンドウの [ページ] タブ

[エディター] ウィンドウにファイルを表示するには、[ページ] タブでファイルを選択します。イメージの場合は、イメージのプレビューが表示されます。

リソースの URL またはパスを表示するには、リソースの上にマウス ポインターを置きます。

ブラウザーの新しいタブにファイルを読み込む場合、または他のアクションを表示するには、ファイル名を右クリックします。

[ページ] タブのアイコン

[ページ] タブ には、次のアイコンが使用されます。

  • ウィンドウ アイコンは、ラベル topと共に、メインドキュメント フレーム (HTML フレーム) を表します。ウィンドウ アイコン
  • クラウド アイコンは、配信元を表します。クラウド アイコン
  • フォルダー アイコンはディレクトリを表します。フォルダー アイコン
  • ページ アイコンはリソースを表します:ページ アイコン
フォルダーまたはフラット リストとしてファイルをグループ化する

[ページ] タブには、サーバーとディレクトリ、またはフラット リストでグループ化されたファイルまたはリソースが表示されます。

リソースのグループ化方法を変更するには、次の方法を使用します。

  1. 左側の [ナビゲーター] ウィンドウのタブの横にある [ ... (その他のオプション)] ボタンをクリックします。 コンテキスト メニューが表示されます。
  2. [フォルダー別にグループ化] オプションを選択またはオフ にします。

DevTools を使用してファイルを編集し、変更をディスクに保存するには、ローカル フォルダーをワークスペースに追加します

ソース ツールの [ワークスペース] タブを使用して、DevTools のローカル ファイルを表示および編集します。 [ワークスペース] タブは、Edge でローカル Web サイトを読み込み、DevTools でそのソース ファイルを編集できるため、ローカル Web サーバーと組み合わせて使用する場合に便利です。

[ ワークスペース ] タブにフォルダーを追加すると、そのフォルダー内のファイルとサブフォルダーがタブに表示され、ファイルを開いて表示および編集できます。

[ ワークスペース ] タブには、ブラウザーが Web ページを表示するためにダウンロードしたリソースは表示されません。[ ワークスペース ] タブには、追加したローカル フォルダー内にあるフォルダーとファイルのみが表示されます。

DevTools 全体を通じて、DevTools がワークスペース ファイルと Web ページ リソースの間のマッピングを見つけることができたファイルに緑色の "マップされた" ドットが表示されます。 たとえば、ページで styles.css というスタイル シートを使用し、ワークスペースに styles.css というファイルがある場合、DevTools はファイルを相互にマップし、緑色の "マップされた" ドットを表示します。

緑色の "マップ済み" ドットは、Web ページ リソースに対して行った変更が保存されることを示します。 たとえば、要素ツールの [スタイル] タブ内で変更を行うと、(ファイルではなく) Web ページ のスタイルシートを編集します。 [ スタイル ] タブに表示されている CSS ファイル名に緑色の "マップ済み" ドットがある場合、そのスタイルシートはワークスペース内のファイルにマップされており、変更は失われません。

ソース ツールの [ワークスペース] タブ

既定では、[ソース] パネルでファイルを編集すると、ページを再読み込みするときにその変更が失われます。 Sources ツールは、Web サーバーから返されるフロントエンド リソースのコピーを使用します。 サーバーによって返されるこれらのフロントエンド ファイルを変更しても、ソース ファイルを変更しなかったため、変更は保持されません。 また、実際のソース コードで編集内容を適用してから、サーバーに再展開する必要があります。

これに対し、Workspace を使用すると、Web ページを更新するときにフロントエンド コードに加えた変更は保持されます。 Workspace では、サーバーから返されるフロントエンド コードを編集すると、ソース ツールによって編集内容がローカル ソース コードにも適用されます。 その後、他のユーザーが変更を確認するには、変更されたソース ファイルのみをサーバーに再展開する必要があります。

サーバーから返される JavaScript コードがローカルの JavaScript ソース コードと同じ場合、ワークスペースは適切に機能します。 ワークスペースは、ワークフローがソース コードの変換 (minification や TypeScript のコンパイルなど) を伴う場合にも機能しません。

関連項目:

[上書き] タブを使用してサーバー ファイルをローカル ファイルで上書きする

[ソース] ツールの [オーバーライド] タブを使用して、Web サーバーからの応答をローカル ファイルでオーバーライドします。 [ オーバーライド ] タブは、CSS ファイルなどの個々のファイルを Web サイトで一時的に変更する場合に便利です。 Web ページへの変更を試す場合は オーバーライド を使用します。Web ページを更新した後も変更を保持する必要がありますが、変更を Web ページのソース コードにマッピングする必要はありません。

[オーバーライド] タブの使用を開始するには、ファイル システムに新しいフォルダーを作成し、[オーバーライド] タブでそのフォルダーを選択します。その後、[要素] ツールの [スタイル] タブ、または [ソース] ツールの [ページ] タブで行った変更は、新しいフォルダーに保存されます。 DevTools では、ローカル ファイルを使用して、一致するサーバー応答をオーバーライドします。

[ナビゲーター] ウィンドウの [オーバーライド] タブ

関連項目:

Microsoft Edge 拡張機能の [コンテンツ スクリプト] タブの使用

[ナビゲーター] ウィンドウの [コンテンツ スクリプト] タブを使用して、インストールした Microsoft Edge 拡張機能によって読み込まれたコンテンツ スクリプトを表示します。

[ナビゲーター] ウィンドウの [コンテンツ スクリプト] タブ

デバッガーが認識できないコードにステップインする場合は、そのコードにステップインしないように、そのコードを 無視リストに追加することをお勧めします。 「 無視リストにコンテンツ スクリプトを追加する」を参照してください。

関連項目:

[スニペット] タブを使用して任意の Web ページで JavaScript コード スニペットを実行する

[ナビゲーター] ウィンドウの[スニペット] タブを使用して、JavaScript コード スニペットを作成および保存します。これにより、これらのスニペットを任意の Web ページで簡単に実行できます。

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

たとえば、[コンソール] に次のコードを頻繁に入力して、jQuer yライブラリをページに挿入し、[コンソール]から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);

代わりに、このコードを [スニペット] に保存して、必要なときにいつでも簡単に実行できます。 Ctrl + S (Windows、Linux) または Command + S (macOS) を押すと、DevTools によってスニペットがファイル システムに保存されます。

スニペットを実行する方法は複数あります。

  • [ナビゲーター] ウィンドウで、[スニペット] タブを選択し、スニペット ファイルを選択して開きます。 次に、エディター ウィンドウの下部にある [実行] ([実行] ボタン) ボタンをクリックします。
  • DevTools にフォーカスがある場合は、 Ctrl + P (Windows、Linux) または Command + P (macOS) を押して コマンド メニューを開き、「!」と入力 します。

スニペット は bookmarklets に似ています。

関連項目:

コマンド メニューを使用してファイルを開く

ファイルを開くには、[ソース] ツール内の [ナビゲーター] ペインを使用するだけでなく、DevTools 内のどこからでもコマンド メニューを使用できます。

  • DevTools の任意の場所から、Windows/Linux で Ctrl キーを押しながら P キーを押すか、macOS の 場合は Command + P キーを押します。 [コマンド メニュー] が表示され、ソース ツールの [ナビゲーター] ウィンドウのタブにあるすべてのリソースが一覧表示されます。
  • または、[ソース] ツールの [ナビゲーター] ウィンドウのタブの横にある [その他のオプション (...)] ボタンをクリックし、[ファイルを開く] を選択します。

すべての .js ファイルの一覧を表示して選択するには、「 」と入力.js。

コマンド メニューを使用してファイルを開く

「?」と入力すると、コマンド メニューにいくつかのコマンド (..など) が表示されます。ファイルを開きます。 Backspace キーを押してコマンド メニューをクリアすると、ファイルの一覧が表示されます。

詳細については、「Microsoft Edge DevTools コマンド メニューを使用したコマンドの実行」を参照してください。

[エディター] ウィンドウを使用してファイルを表示または編集する

[エディター] ウィンドウを使用して、JavaScript、HTML、CSS、イメージ ファイルなどのファイルを表示または編集します。 [エディター] ウィンドウには、[ナビゲーター] ウィンドウ タブで選択したファイルの内容が表示されます。

  • Page
  • ワークスペース
  • 上書き
  • コンテンツ スクリプト
  • スニペット

たとえば、[エディター] ウィンドウには次の情報が表示されます。

  • スニペットの内容。
  • フロントエンド コードで実際に使用されていない ワークスペース ファイルの内容 ( Workspace では任意のフォルダーのコンテンツを編集できるため)。

[ソース] ツールの [エディター] ウィンドウ

[エディタ] ウィンドウでは、さまざまなファイル タイプに対して次のレベルのサポートがあります。

ファイルの種類 サポートされているアクション
JavaScript 表示、編集、デバッグを行います。
CSS ローカル ストレージの表示と編集。
HTML ローカル ストレージの表示と編集。
画像 [表示] を選びます。

既定では、Web ページを更新すると編集は破棄されます。 ファイル システムに変更を保存する方法の詳細については、「ワークスペースに ローカル フォルダーを追加する」を参照してください。DevTools を使用してファイルを編集し、変更をディスクに保存します。上記の「

次のサブセクションでは、[エディター] ウィンドウについて説明します。

関連項目:

JavaScript ファイルの編集

DevTools で JavaScript ファイルを編集するには、[ソース] ツール 内の [エディター] ウィンドウを使用 します。

エディター ペインでの JavaScript の編集

ファイルを [エディター] ウィンドウに読み込むには、左側の [ナビゲーター] ウィンドウの [ページ] タブを使用します。 または、 コマンド メニューを使用します。DevTools の右上にある [ カスタマイズと制御] DevTools (...) を選択し、[ ファイルを開く] を選択します。

関連項目:

保存して元に戻す

JavaScript の変更を有効にするには、 Ctrl + S (Windows、Linux) または Command + S (macOS) を押します。

ファイルを変更すると、ファイル名の横にアスタリスクが表示されます。

  • 変更を保存するには、Windows/Linux で Ctrl キーを押しながら S キーを押すか、macOS の 場合は Command + S キーを押します。
  • 変更を元に戻すには、Windows/Linux で Ctrl キーを押しながら Z キーを押すか、macOS の 場合は Command + Z キーを押します。

既定では、Web ページを更新すると編集内容は破棄されます。 ローカル ファイル システムに変更を保存する方法の詳細については、「 ワークスペースにファイルを編集して保存する ([ソース] ツールの [ワークスペース] タブ)」を参照してください。

検索と置換

現在のファイル内のテキストを検索するには、[エディター] ウィンドウを選択してフォーカスを設定し、Windows/Linux で Ctrl + F キーを押すか、macOS の場合は Command + F キーを押します。

ソース ツールのエディター ウィンドウでの検索と置換

テキストを検索して置換するには、[検索] テキスト ボックスの左側にある [置換 (A->B)] ボタンを選択します。 編集可能なファイルを表示すると 、置換 (A->B) ボタンが表示されます。

行った変更の表示

ワークスペースを定義すると、JavaScript への変更が保存され、 変更 ツールに表示されます。

ファイルに加えた変更を確認するには、[エディター] ウィンドウを右クリックし、[ローカルの変更] を選択します。

[クイック ビュー] パネルが DevTools の下部に開き、[変更] タブに変更内容が表示されます。

[クイック ビュー] パネルの [変更] タブにローカル変更を表示する

関連項目:

関数内の変更が有効になります

ワークスペースを定義すると、JavaScript 関数本体内の変更が有効になります。

DevTools ではスクリプトは再実行されないため、 JavaScript の変更で有効にできるのは、関数内で行う変更のみです。 たとえば、次の図では、サーバーによって返される JavaScript に次のコードを追加しました。

  • 関数の外にステートメント console.log('A') を追加しました。
  • onClick 関数内にステートメント console.log('B') を追加しました。 その後、変更を保存し、フォームに番号を入力し、フォームを送信するフォーム ボタンを選択しました。

フォームを送信した後、グローバル スコープのconsole.log('A')は実行されませんが、onClick関数内のconsole.log('B')は実行され、Bがコンソールに出力されます。

グローバル スコープの JavaScript が再実行されない

整形出力を使用して、縮小された JavaScript ファイルを再フォーマットする

縮小されたファイルは、エディター ウィンドウで開くと自動的に再フォーマットされます。

ファイルを元の縮小状態に戻すには、エディター ウィンドウの下部にある中かっことして表示される [Pretty print] (フォーマット) ボタンをクリックします。

[Pretty print]\(きれいな印刷\) ボタン

詳細については、「縮小された JavaScript ファイルを整形出力で再フォーマットする」を参照してください。

読み取り可能なコードを表示するソース コードへのマイニング コードのマッピング

事前プロセッサからのソース マップにより、DevTools は、サーバーから返される縮小された変換された JavaScript ファイルに加えて、元の JavaScript ソース ファイルを読み込みます。 次に、ブレークポイントを設定し、コードをステップ実行しながら、元のソース ファイルを表示します。 その間、Microsoft Edge は実際に縮小されたコードを実行しています。

[エディター] ウィンドウで JavaScript ファイルを右クリックし、[ソース マップの追加] を選択すると、ポップアップ ボックスが表示され、[ソース マップの URL] テキスト ボックスと [追加] ボタンが表示されます。

ソース マッピング アプローチにより、フロントエンド コードを結合、縮小、またはコンパイルした後でも、人間が判読可能でデバッグ可能になります。 詳細については、「デバッグ用に、処理されたコードを元のソース コードにマップする」をご覧ください。

ソース コードからコンパイル済みのフロントエンド コードへの変換

React などの JavaScript ファイルを変換するフレームワークを使用する場合、ローカル ソースの JavaScript は、サーバーから返されるフロントエンドの JavaScript とは異なる場合があります。 このシナリオではワークスペースはサポートされていませんが、このシナリオではソース コードマッピングがサポートされています。

開発環境では、サーバーにソースマップと React 用の元の .ts または .jsx ファイルが含まれている場合があります。 [ソース] ツール は、これらのファイルを表示しますが、これらのファイルを編集することはできません。 ブレークポイントを設定してデバッガーを使用すると、DevTools は元の .ts または .jsx ファイルを表示しますが、実際には JavaScript ファイルの縮小バージョンをステップスルーします。

このシナリオでは、 Sources ツールは、サーバーから返される変換済みフロントエンド JavaScript の検査とステップスルーに役立ちます。 デバッガーを使用してウォッチ式を定義し、コンソールを使用して JavaScript 式を入力して、スコープ内のデータを操作します。

CSS の編集

DevTools で CSS ルールとそのプロパティを編集するには、次の 2 つの場所があります。

  • [要素] ツールの [スタイル] タブで、ユーザー インターフェイス コントロールを使用して CSS プロパティを編集します。

  • [ソース] ツールの [ページ] タブまたは [ワークスペース] タブで、テキスト エディターを使用して CSS ファイルを編集します。

[ソース] ツールの [ワークスペース] タブを使用する場合は、[要素] ツールの [スタイル] タブを使用して CSS を編集する

関連項目:

[ソース] ツールの [ページ] タブまたは [ワークスペース] タブでの CSS の編集

ソース ツールの [ページ] タブまたは [ワークスペース] タブでは、CSS ファイルの直接編集がサポートされています。 たとえば、以下のスタイル ルールに一致するように、チュートリアルの 「ファイルを編集してワークスペースにファイルを保存する」([ソース] ツールの [ワークスペース] タブ) から CSS ファイルを編集すると、レンダリングされた Web ページの左上にある H1 要素が緑色に変わります。

h1 {
  color: green;
}

[エディター] ウィンドウで CSS を編集して、H1 見出しのテキストの色を緑色に変更します

CSS の変更は直ちに有効になります。変更を手動で保存する必要はありません。

関連項目:

HTML ファイルの編集

DevTools で HTML を編集するには、次の 2 つの方法があります。

  • 要素ツール では、ユーザー インターフェイス コントロールを使用して、一度に 1 つの HTML 要素を操作します。
  • [ソース] ツールでは、テキスト エディターを使用します。

ソース ツールの HTML エディター

JavaScript ファイルや CSS ファイルとは異なり、Web サーバーから返される HTML ファイルをソース ツールで直接編集することはできません。 ソース ツールのエディターを使用して HTML ファイルを編集するには、HTML ファイルがワークスペースまたは [オーバーライド] タブにある必要があります。現在の記事の次のサブセクションを参照してください。

変更を保存するには、Windows/Linux で Ctrl キーを押しながら S キーを押すか、macOS の 場合は Command + S キーを押します。 編集したファイルにはアスタリスクが付きます。

テキストを検索するには、Windows/Linux で Ctrl + F キーを押すか、macOS の 場合は Command + F キーを押します。

編集を元に戻すには、Windows/Linux で Ctrl キーを押しながら Z キーを押すか、macOS の 場合は Command + Z キーを押します。

HTML ファイルの編集中に他のコマンドを表示するには、[エディター] ウィンドウで HTML ファイルを右クリックします。

関連項目:

行番号または関数にアクセスする

エディター ペインで開いているファイル内の行番号または記号 (関数名など) に移動するには、ファイルをスクロールするのではなく、コマンド メニューを使用します。

  1. [ナビゲーター] ウィンドウ で、省略記号 (...) を選択します。(その他のオプション) をクリックし、[ファイルを開く] を選択します。 コマンド メニューが表示されます。
  2. 次のいずれかの文字を入力します。
キャラクター コマンド名 目的
: 行に移動 行番号に移動します。
@ 記号に移動する 関数に移動します。 @と入力すると、[コマンド メニュー] には、エディター ウィンドウで開いている JavaScript ファイル内にある関数が一覧表示されます。

詳細については、「Microsoft Edge DevTools コマンド メニューを使用したコマンドの実行」を参照してください。

別のツールを使用するときにソース ファイルを表示するためのクイック ソース ツール

DevTools でソース ファイルを表示する主な場所は、ソース ツール内にあります。 ただし、ソース ファイルの表示または編集中に、 Elements や Console などの他のツールにアクセスする必要がある場合があります。 DevTools の下部にある [クイック ビュー] パネルでクイック ソース ツールを使用します。

クイック ソース ツールを使用するには、次のコマンドを 実行します。

  1. DevTools の上部にある アクティビティ バー で、[ ソース ] ツール以外のツール ( [要素 ] ツールなど) を選択します。

  2. Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押します。 コマンド メニューが開きます。

  3. 「quick」と入力し、[クイック ソースの表示] を選択します。

    [クイック ビュー] パネルが DevTools の下部に開き、クイック ソース ツールが選択されています。 クイック ソース ツールには、DevTools コード エディターのコンパクト バージョン内のソース ツールで開いているファイルと同じファイルが表示されます。

  4. Ctrl + P (Windows、Linux) または Command + P (macOS) を押して、[ファイルを開く] ダイアログを開きます。

関連項目:

デバッガー ウィンドウを使用して JavaScript コードをデバッグする

JavaScript デバッガーを使用して、サーバーから返される JavaScript コードをステップ実行します。 デバッガーには、 デバッガー ウィンドウ と、エディター ウィンドウのコード行に設定したブレークポイントが 含まれます。

デバッガーを使用して、指定した JavaScript 式を確認しながら、コードをステップ実行します。 変数の値を監視して手動で変更し、現在のステートメントのスコープ内にある変数を自動的に表示します。

[ソース] ツールの [デバッガー] ウィンドウ

デバッガーは、次のような標準的なデバッグ アクションをサポートしています。

  • ブレークポイントを設定し、コードを一時停止します。
  • コードをステップ スルーします。
  • プロパティと変数の表示と編集。
  • JavaScript 式の値を確認する。
  • 呼び出し履歴の表示 (現在のところ、関数呼び出しのシーケンス)。

DevTools のデバッガーは、Visual StudioCode のデバッガーおよび VisualStudio のデバッガーのように見え、感じ、動作するように設計されています。

次のサブセクションでは、デバッグについて説明します。

デバッガーを使用する基本的な方法

JavaScript コードのトラブルシューティングを行うには、コードに console.log() ステートメントを挿入します。 もう 1 つのより強力なアプローチは、Microsoft Edge DevTools のデバッガーを使用することです。 デバッガーのアプローチに慣れれば、デバッガーの使用は実際には console.log() よりも簡単になります。

Web ページでデバッガーを使用するには、通常、ブレークポイントを設定し、次のように Web ページからフォームを送信します。

  1. 新しいウィンドウまたはタブで、デモ: Microsoft EdgeDevTools を使用した JavaScript のデバッグを開始する Web ページを開きます。

  2. Web ページの任意の場所を右クリックして、[検査] を選択します。 または、 F12 キーを押します。 デモ Web ページの横にある DevTools ウィンドウが開きます。

  3. DevTools で、[ソース]タブを選択します。

  4. [ナビゲーター]ウィンドウ (左側) で、[ページ]タブを選択し、get-started.js などの JavaScript ファイルを選択します。

  5. [エディター] ウィンドウで、疑わしいコード行の近くの行番号を選択して、その行にブレークポイントを設定します。 次の図では、var sum = addend1 + addend2; 行にブレークポイントが設定されています。

  6. Web ページで、値を入力してフォームを送信します。 たとえば、 5 や 1 などの数値を入力し、[ 数値 1 と数値 2 の追加] ボタンをクリックします。

    デバッガーは JavaScript コードを実行し、ブレークポイントで一時停止します。 デバッガーが一時停止モードに切り替わるので、スコープ内のプロパティの値を検査し、コードをステップ実行できます。

    デバッガーの一時停止モードに入る

    上の図では、ウォッチ式 sum と typeof sum が追加され、ブレークポイントが 2 行超えています。

  7. [スコープ] ウィンドウの値を調べます。このウィンドウには、現在のブレークポイントのスコープ内にあるすべての変数またはプロパティとそれらの値が表示されます。

    この時点で、[ウォッチ] ウィンドウに式を追加できます。 これらの式は、コードをデバッグするために console.log ステートメント内に記述する式と同じです。

    JavaScript コマンドを実行して現在のコンテキストでデータを操作するには、[コンソール] を使用します。 DevTools の下部にある クイック ビュー パネルでコンソールを開く場合は、Esc キーを押 します。

  8. [デバッガー] ウィンドウの上部にあるコントロール (手順 (F9) など) を使用して、コードをステップ実行します。

    このデモのバグは、最初に入力データを文字列から数値に変換する必要があることです。

  9. バグを修正するには、ページを更新して Web ページ フォームをリセットし、行を変更します。

    var sum = addend1 + addend2;

    終了日:

    var sum = parseInt(addend1) + parseInt(addend2);

  10. Ctrl + S (Windows、Linux) または Command + S (macOS) を押して、ローカル キャッシュされたファイルに変更を保存します。

  11. Web ページに 「5 」と「 1 」と入力し、[ 追加 ] ボタンをクリックします。 ここで、スコープ>ローカル>合計 は、文字列 "51" ではなく、数値 6 です。

関連項目:

デバッガーの Watch と Scope over console.log の利点

これら 3 つの方法は同等です。

  • コードにステートメント console.log(sum) と console.log(typeof sum) を一時的に追加します。ここで、sum はスコープ内です。

  • sum がスコープ内にある場所でデバッガーが一時停止しているときに、DevTools の [コンソール] ウィンドウでステートメント sum および console.log(typeof sum) を発行します。

  • [デバッガー] ウィンドウで Watch 式 sum および typeof sum を設定します。

変数 sum がスコープ内にある場合、sum とその値は [デバッガー] ウィンドウの [スコープ] セクションに自動的に表示され、sum が計算されるエディター ウィンドウにも上書きされます。 したがって、sum のウォッチ式を定義する必要はおそらくないでしょう。

デバッガーは、console.log ステートメントよりもリッチで柔軟な表示と環境を提供します。 たとえば、デバッガーでコードをステップ実行すると、現在定義されているプロパティと変数の値を表示および変更できます。 スコープ内の配列の値を変更するなどのJavaScript ステートメントをコンソールで発行することもできます。 (コンソールを表示するには、 Esc キーを押します)。

ブレークポイントとウォッチ式は、Web ページを更新すると保持されます。

Visual Studio Code から直接デバッグする

DevTools デバッガーの代わりに VisualStudio Code のよりフル機能のデバッガーを使用するには、VisualStudio Code の Microsoft Edge DevTools 拡張機能を使用します。

Visual Studio Code 用の Microsoft Edge DevTools 拡張機能

この拡張機能は、Microsoft VisualStudio Code 内から Microsoft Edge DevTools の [エレメント] および [ネットワーク] ツールへのアクセスを提供します。

詳細については、Web 開発用の VisualStudio Codeおよび GitHub Readme ページの VisualStudio Code 用の Microsoft Edge Developer Tools を参照してください。

デバッグに関する記事

次の記事では、[デバッガー] ウィンドウとブレークポイントについて説明します。

関連項目

注

このページの一部の情報は、Google によって作成および共有されている著作物に基づいており、Creative Commons Attribution 4.0 International License に記載されている条項に従って使用されています。 元のページは ここに あり、ケイス・バスクによって作成されています。

クリエイティブ・コモンズ・ライセンス この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。