ソース ツールの概要

  • [アーティクル]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

関連項目:

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

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

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

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

[上書き] 機能はワークスペースに似ています。 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、画像ファイルなど、現在の Web ページを構成するためにサーバーから返されるフロントエンド ファイルを表示します。 [エディタ] ウィンドウでフロントエンド ファイルを編集すると、DevTools は変更されたコードを実行するように Web ページを更新します。

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

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

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

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

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

関連項目:

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 ページを更新すると編集内容は破棄されます。 ローカル ファイル システムに変更を保存する方法の詳細については、「 ワークスペース (Filesystem タブ) を使用してファイルを編集する 」を参照してください。

検索と置換

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

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

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

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

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

ファイルを元の縮小状態に戻すには、[エディター] ウィンドウの下部にある [ プリティ印刷 ] ボタン ([フォーマット] ) をクリックします。

[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 の変更は直ちに有効になります。変更を手動で保存する必要はありません。

関連項目:

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. [要素] ツールなど、[ソース] ツール以外のツール を選択 します。

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

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

    DevTools ウィンドウの下部に、[クイック ソース] ツールが選択されたドロワーが表示されます。 [クイック ソース]ツ ールには、コンパクト バージョン のDevTools コード エディタ内に、Sources ツールで最後に編集したファイルが含まれています。

  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 に記載されている条項に従って使用されています。 元のページは ここに あり、 Kayce Basques (テクニカル ライター、Chrome DevTools & Lighthouse) によって作成されています。

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