ソースツールの概要

[アーティクル]
07/21/2023

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

詳細な内容:

[ナビゲーター]、[エディター]、および [デバッガー] ウィンドウ
[ナビゲーター] ウィンドウを使用してファイルを選択する
[エディター] ウィンドウを使用してファイルを表示または編集する
デバッガーウィンドウを使用して JavaScript コードをデバッグする

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

ソース ツールには、次の 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 ページを作成するためにサーバーから返されるリソース間を移動します。ファイル、画像、その他のリソースを選択し、そのパスを表示します。

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

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

次のサブセクションでは、ナビゲーターウィンドウについて説明します。

[ページ] タブを使用して、現在の Web ページを作成するリソースを確認する
[ファイルシステム] タブを使用してローカルワークスペースを定義する
[上書き] タブを使用してサーバーファイルをローカルファイルで上書きする
Microsoft Edge 拡張機能の [コンテンツスクリプト] タブの使用
[スニペット] タブを使用して任意のページで JavaScript コードスニペットを実行する
コマンドメニューを使用してファイルを開く

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

[ナビゲーター] ウィンドウの [ページ] タブを使用して、サーバーから返されるファイルシステムを探索して、現在の Web ページを作成します。 JavaScript ファイルを選択して、表示、編集、およびデバッグします。 ページウィンドウを使用して、ページに読み込まれたすべてのリソースを表示します。

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

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

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

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

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

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

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

フォルダーまたはフラットリストとしてファイルをグループ化する

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

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

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

[ファイルシステム] タブを使用してローカルワークスペースを定義する

[ナビゲーター] ウィンドウの [ファイルシステム] タブを使用して、ファイルをワークスペースに追加し、DevTools で行った変更をローカルファイルシステムに保存します。

ワークスペースの [ファイルシステム] タブ

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

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

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

関連項目:

ワークスペースを使用してファイルを編集する ([ファイルシステム] タブ)
ソースツールでデモフォルダーを開き、DevTools のサンプルコードでファイルを編集します。

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

ナビゲーター ウィンドウの [上書き] タブを使用して、ページアセット (画像など) をローカルフォルダーのファイルで上書きします。

このタブのアイテムは、サーバーがアセットを送信した後でも、サーバーがブラウザーに送信する処理を上書きします。

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

[上書き] 機能はワークスペースに似ています。 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 に似ています。

関連項目:

任意の Web ページで JavaScript のスニペットを実行する

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

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

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

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

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

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

[エディタ] ウィンドウを使用して、JavaScript、HTML、CSS、画像ファイルなど、現在の Web ページを構成するためにサーバーから返されるフロントエンドファイルを表示します。 [エディタ] ウィンドウでフロントエンドファイルを編集すると、DevTools は変更されたコードを実行するように Web ページを更新します。

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

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

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

既定では、Web ページを更新すると編集は破棄されます。ファイルシステムへの変更を保存する方法については、上記の「[ファイルシステム] タブを使用したローカルワークスペースの定義」を参照してください。

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

JavaScript ファイルの編集
整形出力を使用して、縮小された JavaScript ファイルを再フォーマットする
読み取り可能なコードを表示するソースコードへのマイニングコードのマッピング
ソースコードからコンパイル済みのフロントエンドコードへの変換
CSS ファイルの編集
HTML ファイルの編集
行番号または関数にアクセスする
別のツールを使用する場合のソースファイルの表示

関連項目:

ソースツールでデモフォルダーを開き、DevTools のサンプルコードでファイルを編集します。

JavaScript ファイルの編集

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

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

ファイルを [エディター] ウィンドウに読み込むには、左側の [ナビゲーター] ウィンドウの [ページ] タブを使用します。または、 コマンドメニューを使用します。DevTools の右上にある [ カスタマイズと制御] 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 ページを更新すると編集内容は破棄されます。ローカルファイルシステムに変更を保存する方法の詳細については、「ワークスペース (Filesystem タブ) を使用してファイルを編集する」を参照してください。

検索と置換

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

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

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

整形出力を使用して、縮小された 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 つの方法があります。

要素ツールでは、ユーザーインターフェイスコントロールを使用して、一度に 1 つの CSS プロパティを操作します。ほとんどの場合、この方法が推奨されます。詳細については、「CSS の表示と変更の概要」を参照してください。
ソース ツールでは、テキストエディターを使用して CSS ファイルを編集します。

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

h1 {
  color: green;
}

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

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

関連項目:

[スタイル] ウィンドウで CSS フォントのスタイルと設定を編集する
Keyboard ショートカット の Sources ツールのキーボードショートカット
ソースツールでデモフォルダーを開き、DevTools のサンプルコードでファイルを編集します。

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 ファイルを右クリックします。

関連項目:

ソースツールでデモフォルダーを開き、DevTools のサンプルコードでファイルを編集します。

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

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

[ナビゲーター] ウィンドウで、省略記号 (...) を選択します。(その他のオプション) をクリックし、[ファイルを開く] を選択します。 [コマンド] メニューが表示されます。
次のいずれかの文字を入力します。

キャラクター	コマンド名	目的
:	行に移動	行番号に移動します。
@	記号に移動する	関数に移動します。 @ を入力すると、[エディター] ウィンドウで開いている JavaScript ファイルにある関数がコマンドメニューに一覧表示されます。

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

別のツールを使用する場合のソースファイルの表示

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

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

[要素] ツールなど、[ソース] ツール以外のツールを選択します。
Ctrl + Shift + P (Windows、Linux) または Command + Shift + P (macOS) を押します。 [コマンド] メニューが開きます。
「quick」と入力し、[クイックソースの表示] を選択します。

[クイックビュー] パネルが DevTools の下部に開き、クイックソース ツールが選択されています。 [クイックソース]ツールには、コンパクトバージョンのDevTools コードエディタ内に、Sources ツールで最後に編集したファイルが含まれています。
Ctrl + P (Windows、Linux) または Command + P (macOS) を押して、[ファイルを開く] ダイアログを開きます。

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

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

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

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

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

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

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

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

デバッガーを使用する基本的な方法
デバッガーの Watch と Scope over console.log の利点
Visual Studio Code から直接デバッグする
デバッグに関する記事

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

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

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

新しいウィンドウまたはタブで、デモ: Microsoft EdgeDevTools を使用した JavaScript のデバッグを開始する Web ページを開きます。
Web ページの任意の場所を右クリックして、[検査] を選択します。または、 F12 キーを押します。デモ Web ページの横にある DevTools ウィンドウが開きます。
DevTools で、[ソース]タブを選択します。
[ナビゲーター]ウィンドウ (左側) で、[ページ]タブを選択し、get-started.js などの JavaScript ファイルを選択します。
[エディター] ウィンドウで、疑わしいコード行の近くの行番号を選択して、その行にブレークポイントを設定します。次の図では、var sum = addend1 + addend2; 行にブレークポイントが設定されています。
Web ページで、値を入力してフォームを送信します。たとえば、 5 や 1 などの数値を入力し、[ 数値 1 と数値 2 の追加] ボタンを選択します。

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

上の図では、ウォッチ式 sum と typeof sum が追加され、ブレークポイントが 2 行超えています。
[スコープ] ウィンドウの値を調べます。このウィンドウには、現在のブレークポイントのスコープ内にあるすべての変数またはプロパティとそれらの値が表示されます。

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

JavaScript コマンドを実行して現在のコンテキストでデータを操作するには、[コンソール] を使用します。 DevTools の下部にある クイックビュー パネルでコンソールを開く場合は、Esc キーを押 します。
[デバッガー] ウィンドウの上部にあるコントロール (手順 (F9) など) を使用して、コードをステップ実行します。

このデモのバグは、最初に入力データを文字列から数値に変換する必要があることです。
バグを修正するには、ページを更新して Web ページフォームをリセットし、行を変更します。
```
var sum = addend1 + addend2;
```
終了日:
```
var sum = parseInt(addend1) + parseInt(addend2);
```
Ctrl + S (Windows、Linux) または Command + S (macOS) を押して、ローカルキャッシュされたファイルに変更を保存します。
Web ページに「5 」と「 1 」と入力し、[ 追加 ] ボタンをクリックします。ここで、スコープ>ローカル>合計は、文字列 "51" ではなく、数値 6 です。

関連項目:

Keyboard ショートカット の Sources ツールのキーボードショートカット
JavaScript のデバッグを開始する - いくつかのフォームコントロールを含む既存のシンプルな Web ページを使用したチュートリアル。

デバッガーの 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 を参照してください。

デバッグに関する記事

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

JavaScript のデバッグを開始する - 既存の単純なプロジェクトを使用したチュートリアル (画面キャプチャ付き)。
JavaScript デバッグ機能 - デバッガーを使用してブレークポイントを設定し、コードをステップスルーし、変数値を表示および変更し、JavaScript 式を監視し、呼び出しスタックを表示する方法。
ブレークポイントを使用してコードを一時停止します - デバッガーで基本的なブレークポイントと特殊なブレークポイントを設定する方法。

次の方法で共有

ソースツールの概要

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