[インスタンスの起動] ボタンをクリックして開始する

このチュートリアルでは、[ インスタンスの起動 ] ボタンをクリックして DevTools を開いたり閉じる方法を学習し、デモ の Success Web ページを試します。この方法では、編集用の既定の [成功] Web ページが開きます。これにより、DevTools の使用を練習して開始できます。この方法は UI で目立ち、デバッグ以外のモードで [DevTools] タブが開きます。

DevTools を開くこの方法は、次の単純なシナリオに役立ちます。

DevTools を使用して、既定の [成功] ページの編集を試す場合。
URL を使用して指定されたページを検査する場合、デバッグモードは必要ありません。別の Web ページを開くには、URL またはファイルパスをアドレスバーに貼り付けます。
フォルダーを開いていなくても、ローカルソースファイルを編集せずに、URL を使用して指定されたページで CSS を変更する場合。

手順 1: DevTools と前提条件をインストールする

まだ行っていない場合は、「 Visual Studio Code 用 DevTools 拡張機能をインストールする」の手順を実行し、以下に進みます。現在のチュートリアルでは、Web サーバーをインストールして起動する必要はありませんが、お勧めします。

手順 2: [インスタンスの起動] ボタンをクリックする

Visual Studio Code で、[ ファイル>新しいウィンドウ] を選択します。最初は、フォルダーは開かれていません。
アクティビティバーで、[Microsoft Edge ツール] (Microsoft Edge ツール アイコン) をクリック。 Microsoft Edge ツールサイドバーが開きます。
[ インスタンスの起動 ] ボタンをクリックします。 [ Edge DevTools ] タブが開き、[ Edge DevTools: ブラウザー ] タブが開き、既定の [成功] ページが表示されます。

Success ページソースファイルは、ドライブ上のディレクトリ内の自己完結型の .html ファイルです。これは、(<style> 要素内の) CSS ルールを含む 1 つの.html ファイルです。また、(<script> 要素内の) JavaScript console ステートメントも含まれています。

DevTools ブラウザーのアドレスバーには、file:///C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/index.htmlなどのfile:/// パス (URL ではなく) があります。

[デバッグ] ツールバーが開かない、デバッグコンソールが下部に開かない、および [ウォッチ付きの実行とデバッグのサイドバー] ウィンドウが開かない。これは、Visual Studio Code がデバッグモードではないことを示します。

ローカルファイルの CSS を変更したり、アドレスバーにローカルファイルパスまたは localhost URL を入力したり、ローカル Web アプリページを操作したりできます。

手順 3: フォルダーを開き、編集が許可されていることを確認する

Visual Studio Code で開いているフォルダーがないことに注意してください。多くの場合、Web ページを検査するのではなく、DevTools を使用して編集するには、表示されている Web ページに一致するソースファイルを含むフォルダーを開く必要があります。フォルダーを開くと、最も柔軟性が高く、 Edge DevTools: ブラウザー タブのアドレスバーで URL またはファイルパスを開き、DevTools の完全な機能を持つことができます。

フォルダーを開くと、ソースファイルを変更しようとしたときにエラーメッセージが表示されないように、フォルダーに信頼を付与する機会が与えられます。そうしないと、[成功] ページを含むフォルダーが信頼されず、CSS ミラー編集がそのフォルダー内の index.html ソースファイル内の CSS を編集しようとしているため、エラーメッセージが表示されることがあります。

[ Edge DevTools: ブラウザー ] タブの [アドレス] バーで、ファイルパスを選択してコピーしますが、 C:/Users/username/.vscode/extensions/ms-edgedevtools.vscode-edge-devtools-2.1.1/out/startpage/などのファイル名はコピーしません。
アクティビティバー>エクスプローラーで、[フォルダーを開く] ボタンをクリックします。 [ フォルダーを開く ] ダイアログで、上でコピーしたパスを貼り付けるか選択します。 Windows に貼り付けるには、パス全体で / を \ に変更する必要がある場合があります。次に、[ フォルダーの選択 ] ボタンをクリックします。

フォルダーを初めて開く場合は、このフォルダー内のファイルの作成者を信頼していることを確認する必要があります。
[ はい、作成者を信頼します ] ボタンをクリックします。

次のように、DevTools をもう一度起動する必要がある場合があります。

アクティビティバーで、[Microsoft Edge ツール] ([Microsoft Edge ツール] ボタン) をクリック。 Microsoft Edge ツールサイドバーが開きます。
[ インスタンスの起動 ] ボタンをクリックします。 [Edge DevTools] タブが開き、[Edge DevTools: ブラウザー] タブが開き、既定の [成功] ページが表示されます。

手順 4: CSS を編集する

[ Edge DevTools ] タブ で、ページ内の [要素の選択 ] をクリックして検査します () ボタン ([ 検査 ] ボタンとも呼ばれます)。
[Edge DevTools: ブラウザー] タブで、ページのさまざまな部分にカーソルを合わせ、要素ツールの DOM ツリーの展開と更新を確認します。
[ 成功] 見出しをクリックします。これは <h2> 要素です。
[Edge DevTools] タブの [要素] ツールの [スタイル] タブの [斜体以外の h2 宣言] セクションで、margin-bottom規則の右側をクリックします。
新しい CSS ルールを入力 font-size: 5em、 Enter キーを押します。スペルは、その下のユーザーエージェントスタイルシートの斜体 h2 セクションに示されている規則に似ています。

index.htmlが開き、CSS ミラー編集によって自動的に編集され、行font-size: 5em;が追加されます。 h2 セクションで、その行までスクロールします。

手順 5: タブを配置する

[Edge DevTools] タブの [斜体以外の h2] セクションで、入力した CSS 規則をクリックし、上方向キーと下方向キーを押します。 index.htmlの値は、CSS ミラー編集によって自動的に編集されます。
[ Edge DevTools ] タブで、[ スクリーンキャストの切り替え ] ボタンを数回クリックします。 [Edge DevTools: ブラウザー] タブが開き、閉じられ、領域が節約されます。
[ Edge DevTools: ブラウザー ] タブで、[ DevTools を閉じる ] または [DevTools を開く ] ボタンを数回クリックします。他の [DevTools ] タブが開き、閉じられ、領域が節約されます。
Visual Studio Code の上部にあるタブを右クリックし、さまざまなタブを同時に表示するように配置します。
- Microsoft Edge Tools>Targets を示すサイドバー。
- index.html エディター。
- [Edge DevTools] タブ。
- [Edge DevTools: ブラウザー] タブ。

手順 6: JavaScript を表示する

[Edge DevTools] タブで、コンソール ツールのタブをクリックします。index.htmlには、javaScript ステートメントconsole.info('Hello from the startpage!')を含む <script> 要素が含まれており、"スタートページから Hello!" が出力されます。

手順 7: アドレスバーを使用して別の .html ファイルを開く

[Edge DevTools: ブラウザー] タブの [アドレス] バーにファイルパスを入力すると、[インスタンスの起動] ボタンを使用して、[成功] ページではなく別の.html ファイルを開くこともできます。以下にそのことを示します。ただし、エクスプローラーで.html ファイルを右クリックすると、Success Web ページ以外の.html ファイルが開き、ツールがデバッグモードで開きます。

Visual Studio Code で、[ファイル] >[フォルダーを開く] (または [最近使ったファイルを開く]) を選択します。 C:\Users\username\Documents\GitHub\Demos\demo-to-do\など、複製した Demos リポジトリの\Demos\demo-to-do\ フォルダーを開きます。
メッセージが表示されたら、[ はい、作成者を信頼します ] ボタンをクリックします。信頼を付与する以外に、DevTools ブラウザーで URL ではなくファイルパスを指定した場合、 Launch Instance アプローチでは実際にはフォルダーを開く必要はありません。
Edge DevTools タブがまだ開いていない場合は、アクティビティバーで [Microsoft Edge ツール] (Microsoft Edge ツール) をクリックし、[インスタンスの起動] ボタンをクリックします。
アクティビティバーで、[エクスプローラー] を選択し、[\demo-to-do\index.html>Copy パス] を右クリックします。
Visual Studio Code の [Edge DevTools: Browser ] タブの [アドレス] バーに、上記で取得したローカルファイルパス ( C:\Users\username\Documents\GitHub\Demos\demo-to-do\index.htmlなど) を貼り付けます。 デモから実行するアプリが開きます。アドレスバーでは、 file:/// プレフィックスが追加され、(Windows では) 円記号がスラッシュに変更されます(たとえば、 file:///C:/Users/username/Documents/GitHub/Demos/demo-to-do/index.html)。
デモアプリで、テストなどのタスクを入力 します。
[要素] ツールの [スタイル] タブで、CSS の値を変更します。たとえば、body { font-size: 11pt;}のポイントサイズをクリックし、値を変更します。開いたフォルダー内の対応する .css ファイルが開き、[ スタイル ] タブで行われた変更に合わせて自動的に編集されます (ただし、保存されません)。

手順 8: アドレスバーを使用して URL を開く

[ インスタンスの起動 ] ボタンの結果のアドレスバーを使用して、サーバー上の URL を開くことができます。ただし、[ プロジェクトの起動 ] ボタンと launch.jsonに格納されている URL が、URL を指定して Web ページを開く主な方法であり、ツールはデバッグモードで開きます。

localhost サーバーが実行されている場合は、 http://localhost:8080などの localhost URL を貼り付けます。または、github.io サーバー URL を貼り付けます。 https://microsoftedge.github.io/Demos/demo-to-do/。

CSS ミラー編集を使用してソースファイルを編集する場合は、Visual Studio Code でフォルダーを開く必要があります。それ以外の場合は、[Edge DevTools] タブの [要素] ツールの [スタイル] タブの [CSS ミラー編集] チェックボックスをオフにします。チェックボックスをオフにすると、マッピングとミラーに関するエラーメッセージが表示されなくなります。DevTools で CSS の変更を試み、DevTools 用の CSS ソースファイルを提供していない場合の編集。
デモアプリで、テストなどのタスクを入力 します。
[要素] ツールの [スタイル] タブで、CSS の値を変更します。たとえば、body { font-size: 11pt;}のポイントサイズをクリックし、値を変更します。開いたフォルダー内の対応する .css ファイルが開き、[ スタイル ] タブで行われた変更に合わせて自動的に編集されます (ただし、保存されません)。

手順 9: DevTools を閉じる

これらのタブが開いている場合は、[Edge DevTools] タブと [Edge DevTools: ブラウザー] タブの [閉じる] (x) をクリックします。
[ アクティビティバー>Microsoft Edge ツール] を選択します。 [ターゲット] セクションにターゲットが一覧表示されている場合は、ターゲットインスタンスの右側にマウスポインターを合わせ、[インスタンスの閉じる (x)] をクリックします。 [ インスタンスの起動] ボタンが表示され、すべての DevTools インスタンスが閉じられています。

上のスクリーンショットでは、Visual Studio Code はデバッグモードではないことに注意してください。たとえば、デバッグツールバーはありません。 [デバッグ] ツールバーがある場合は、[ 停止 ] ボタンをクリックして DevTools を閉じることができました。
変更を保存せずに index.html を閉じます。
[ ファイル>Close フォルダー] を選択します。

フィードバック

このページはお役に立ちましたか?

Last updated on 2025-07-31