次の方法で共有

HTML ファイルを右クリックして開始する

このチュートリアルでは、Web サーバーを実行することなく、Visual Studio Code のエクスプローラーで Demo To Do の.html ファイルを右クリックして DevTools を開いたり閉じる方法について説明します。

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

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

手順 2: HTML ファイルを右クリックして DevTools を開始する

Web サーバーで Web ページを実行する必要がない場合は、Visual Studio Code のエクスプローラーで.html ファイルを右クリックして DevTools を開く主な方法です。

  • [ インスタンスの起動] ボタンとは異なり、この方法ではデバッグ モードで DevTools が開きます。

  • 後で使用する [プロジェクトの起動 ] ボタンとは異なり、この方法では launch.json ファイルを生成する必要はありません。

デモツード Web アプリを開いてデモを行います。

  1. Visual Studio Code で、[ ファイル>フォルダーを開く] を選択します。

  2. Demos リポジトリを複製したディレクトリに移動し、C:\Users\username\Documents\GitHub\Demos\demo-to-do\などのデモ to do アプリの特定のディレクトリを開き、[フォルダーの選択] ボタンをクリックします。

    フォルダーを開く: デモから実行

  3. [アクティビティ バー>エクスプローラー (エクスプローラー アイコン) を選択>index.htmlを右クリックし、[Edge で開く>DevTools でブラウザーを開く] を選択します。

    DevTools > ブラウザーを開くを右クリックします

    • [ Edge DevTools ] タブが開きます。

    • [Edge DevTools: ブラウザー] タブが開き、右クリックした Web ページが表示されます。

    • Visual Studio Code の [デバッグ] ツール バーが開き、下部に デバッグ コンソール が開き、[ 実行 ] ウィンドウが開きます。 これらの機能は、Visual Studio Code がデバッグ モードであることを示しています。

    2 つの Edge DevTools タブとデバッグ ツール バー

手順 3: タブを配置する

領域を節約するには、[ DevTools を閉じる ] または [DevTools を開く ] ボタンと [ スクリーンキャストの切り替え ] ボタンを使用して、DevTools タブを切り替える (開くまたは閉じる) します。

  1. [Edge DevTools] タブの左上隅にある [スクリーンキャストの切り替え] ボタンをクリックします。

    [Edge DevTools] タブの [スクリーンキャストの切り替え] ボタン

    [Edge DevTools: ブラウザー] タブが閉じます。

  2. [ Edge DevTools ] タブで、もう一度 [ スクリーンキャストの切り替え ] ボタンをクリックします。

    [Edge DevTools: ブラウザー] タブが開きます。

  3. [Edge DevTools: ブラウザー] タブの右上にある [DevTools を閉じる] ボタンをクリックします。

    [Edge DevTools: Browser] タブの [Close DevTools]\(DevTools を閉じる\) ボタン

  4. [Edge DevTools: ブラウザー] タブの右上にある [Open DevTools]\(DevTools を開く\) ボタンをクリックします。

  5. [Edge DevTools: ブラウザー] タブをドラッグして、ソース コード エディターでグループ化するなど、Visual Studio Code 内の任意の場所にドッキングします。

手順 4: DevTools で CSS を編集し、.css ファイルを自動的に更新する

[ Edge DevTools ] タブの [ 要素 ] ツールの [ >Styles ] タブで、CSS セレクター、ルール、および値を編集できます。 [CSS ミラー編集] チェック ボックスは既定でオンになっているため、.css ファイルは自動的に編集されますが、編集内容は保存されないため、変更を保存するかどうかを決定できます。

  1. [要素] ツールの [スタイル] タブで、本文のフォント サイズなどの CSS 値をクリックします。

  2. マウス ホイールを使用するか、 上方向キー と 下方向キーを押すなど、CSS の値を変更します。 関連付けられている .css ファイルが開きます( to-do-styles.css 、CSS 値を定義する行までスクロールし、 .css ファイルを自動的に編集しますが、変更は保存されません)。

    CSS ミラー編集

  3. .css ファイルを閉じます。 Visual Studio Code では、変更を保存するかどうかを確認するメッセージが表示されます。

  4. [ 保存しない ] ボタンをクリックします。

手順 5: デバッガーで JavaScript コードをステップ 実行する

  1. [アクティビティ バー> エクスプローラー (アクティビティ バーのエクスプローラー アイコン)] を選択します。

  2. demo-to-do ディレクトリで、[to-do.js] をクリックして開きます。 changeTask関数まで下にスクロールし、行番号の左側をクリックしてブレークポイントを設定します。

    デモ アプリのデバッグ

  3. [実行] と [デバッグ] サイド バーが表示されない場合は、[表示]、[実行] の>選択します。 [実行とデバッグ] サイド バーには、[ウォッチ] ウィンドウと他のデバッガー ウィンドウが含まれます。

  4. [Edge DevTools: ブラウザー] タブに表示されるデモ アプリで、テストなどのタスクを入力します。 Visual Studio Code のデバッガーは、 to-do.js ファイルのブレークポイントで一時停止します。

    デモ アプリでの JavaScript のステップ実行

  5. [デバッグ] ツール バーで、または [実行 ] メニューを使用するか、キーを押して、 to-do.jsでコードの 2 行をステップ実行します。

  6. [Edge DevTools: ブラウザー] タブでレンダリングされたデモ アプリで、テスト タスクの横にある [完了] 円をクリックします。 Visual Studio Code のデバッガーは、 to-do.js ファイルのブレークポイントで一時停止します。

手順 6: DevTools を閉じる

デバッグを終了し、 Edge DevTools タブを 閉じるには:

  1. [デバッグ] ツール バーで、[ 停止 ] (Shift + F5) ボタンをクリックします。 または、[ 実行 ] メニューの [ デバッグの停止] を選択します。

    デバッグ ツール バーの [停止] ボタン

    [Edge DevTools] タブが閉じられ、[Edge DevTools: ブラウザー] タブが閉じます。

関連項目:

チュートリアル 「HTML ファイルを右クリックして開始する」を完了しました。 他のチュートリアルも行うことをお勧めします。 「Visual Studio Code の DevTools 拡張機能の使用を開始する」を参照してください。

関連項目

GitHub:

  • Last updated on