DevTools のサンプル コード

デモ リポジトリを使用して、Microsoft Edge を使用して Web ページと Web アプリを開発する方法を学習します。 これらのデモ Web ページを表示、ダウンロード、変更するには、次のようなさまざまな方法があります。

• Microsoft Edge の DevTools。
• Visual Studio Code。省略可能な DevTools。
• Visual Studio。省略可能な DevTools。

Microsoft Edge の DevTools でレンダリングされたデモ Web ページのソース コードを表示するには:

1. Readme ページで、[ デモ ] リンクをクリックします。 ライブ ページが Microsoft Edge で開きます。

2. デモ Web ページを右クリックし、[ 検査 ] を選択して DevTools を開きます。

DevTools サンプルの一覧

次のデモでは、DevTools の機能を示します。

これらのサンプルをいくつか次に示します。

デモを実行するには

この簡単な To Do リスト Web ページは、さまざまな DevTools 機能を示すために使用されます。 これには、 .html ファイル、 .js ファイル、および .css ファイルがあります。

• レンダリングされたページ: TODO アプリ

• ソース コード: demo-to-do

アクセシビリティの問題を含むデモ Web ページ

この動物シェルターのデモ Web ページは、アクセシビリティ テスト機能など、さまざまな DevTools 機能を調べるのに役立ちます。

1. アクセシビリティの 問題があるデモ Web ページ を新しいウィンドウまたはタブで開きます。

2. レンダリングされた Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。 デモ Web ページの横に DevTools が開きます。

記事

これらの記事では、このデモ Web ページの使用方法について説明します。

• 検査ツールを使用して、Web ページにカーソルを合わせてアクセシビリティの問題を検出 します。上記の記事のセクションから派生した短い記事の 1 つ。

• アクセシビリティ テスト機能 - DevTools のアクセシビリティ テスト機能の一覧。"アクセシビリティの問題があるデモ Web ページ" を使用するいくつかの記事へのリンクが含まれています。

ソース コード リポジトリ

これは、このデモ Web ページのファイルを格納するソース コード リポジトリとそのディレクトリです。

• MicrosoftEdge/Demos > devtools-a11y-testing - 次のようなファイルが含まれています。

  • index.html - buttons.js JavaScript ファイルにデータを送信するページ セクションと入力フォームを含むデモ Web ページ。 レンダリングされた Web ページを表示するには、上記のデモ Web ページ リンクを使用します。

  • buttons.js - デモ Web ページで使用される JavaScript コードが含まれています。

  • styles.css、 light-theme.css、および dark-theme.css - デモ Web ページの表示を制御する CSS ファイル。

  • デモ Web ページで使用されるイメージ ファイル。

デモ Web ページ: DevTools を使用した JavaScript のデバッグ

このデモ Web ページは、 ソース ツール (特に JavaScript デバッガー) を探索するのに役立ちます。

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

2. レンダリングされた Web ページ内の任意の場所を右クリックし、[ 検査] を選択します。 デモ Web ページの横に DevTools が開きます。

記事

次の記事または記事セクションでは、このデモ Web ページの使用方法について説明します。

• ソース ツールの概要でデバッガーを使用するための基本的なアプローチ。 この記事セクションでは、 ソース ツールで JavaScript デバッガーを使用してデモ Web ページのバグを見つける手順について簡単に説明します。 バグを修正するには、入力文字列を数値に変換してから追加します。

• JavaScript のデバッグを開始する - デモ Web ページをデバッガーと共に使用し、デバッガーのさまざまな機能を示し、さまざまな種類のブレークポイントを設定する方法について詳しく説明します。

ソース コード リポジトリ

これは、このデモ Web ページのファイルを格納するソース コード リポジトリとそのディレクトリです。

• MicrosoftEdge/Demos > devtools-js-get-started - ファイルが含まれています。

  • README.md - レンダリングされたデモ Web ページへのリンクと、デモ Web ページの使用に関する詳細なチュートリアル記事が含まれています。

  • index.html - JavaScript ファイルにデータを送信し、JavaScript の結果を表示する入力フォームを含む Web ページ。

  • get-started.js - デモ Web ページのフォームで使用される JavaScript ファイル。

Edge Demos リポジトリをドライブに複製する

Microsoft Edge/Demos リポジトリは、さまざまな DevTools ドキュメントに従う場合に役立ちます。 リポジトリを複製し、複製したリポジトリのフォルダー内で localhost Web サーバーを起動し、DevTools 内または VS Code などのエディター内でデモ ファイルを直接編集できます。

リポジトリの更新をプルしてリポジトリに完全に参加できるように、リポジトリのダウンロードよりもリポジトリの複製をお勧めします。

MicrosoftEdge/Demos リポジトリをローカル ドライブに複製するには:

1. コマンド プロンプトで、「git」と入力して、git がインストールされているかどうかをチェックします。

2. まだ完了していない場合は、 git をダウンロード してインストールします。

3. 新しいウィンドウまたはタブで MicrosoftEdge/Demos に移動します。

4. [ コード ] ドロップダウン ボタンをクリックし、[ クリップボードに URL をコピー ] ボタンをクリックします。

   URL はクリップボードにコピーされます。 https://github.com/MicrosoftEdge/Demos.git

   または、GitHub Desktop がインストールされている場合は、[ GitHub Desktop で開く ] をクリックしてリポジトリを複製し、以下のコマンド プロンプトの手順をスキップします。

5. git bash などのコマンド プロンプトを開きます。

6. リポジトリをローカル ドライブに複製し、GitHub リポジトリからコピーした URL 文字列を入力します。 コマンド プロンプトを使用する場合:

   # example location where the repo directory will be added:
   cd ~/GitHub
   cd c:/users/localAccount/GitHub/  # alt format
   git clone https://github.com/MicrosoftEdge/Demos.git
   

リポジトリの複製の詳細については、次を参照してください。

• リポジトリの複製 - GitHub ドキュメント。

次のセクションに進みます。

VS Code を使用して Edge Demos リポジトリをドライブに複製する

MicrosoftEdge/Demos リポジトリをローカル ドライブに複製するには:

1. 新しいウィンドウまたはタブで MicrosoftEdge/Demos に移動します。

2. [ コード ] ドロップダウン ボタンをクリックし、表示されたら [ Visual Studio で開く ] をクリックします。 ハンドラー セレクター項目の一覧は、インストールされている Visual Studio インスタンスごとに 1 つずつ提供されます。 このオプションは、ログインしている場合にのみ表示されます。

   

3. Visual Studio Code の アクティビティ バーで、 ソース管理 () ボタンをクリックし、[ リポジトリの複製 ] ボタンをクリックします。

4. [ リポジトリ URL の指定 ] テキスト ボックスに、コピーした URL を貼り付けます: https://github.com/MicrosoftEdge/Demos.git し、 Enter キーを押します。 フォルダー選択ダイアログが開きます。

   

5. C:\Users\localAccount\Documents\GitHubやUsers/username/GitHubなど、目的のパスに移動し、[リポジトリの場所の選択] ボタンをクリックします。

6. 「 Git リポジトリの複製 」というメッセージが表示され、複製されたリポジトリを開くよう求められます。 [ 開く ] ボタンをクリックします。

   

7. [ 信頼しますか...] というメッセージが表示されたら、[ はい ] ボタンをクリックします。 または、[ いいえ ] ボタンをクリックし、このチュートリアルのほとんどの部分に進みます。

   エクスプローラー ツリーには、デモを含む多くのデモが一覧表示されます。

関連項目:

• リポジトリの複製 - GitHub ドキュメント。
• 「WebView2 用の開発環境を設定する」の WebView2Samples リポジトリを複製します。

リポジトリと git コミット/プル/プッシュ操作の複製をサポートするツール

リポジトリを複製すると、リポジトリの更新時にローカル コピーを更新できます。 多くのツールでは、次のような GitHub リポジトリとの複製と同期がサポートされています。

• "git bash" シェルなどのコマンド プロンプトで git コマンドを実行します。 これは、ここに記載されている主な方法です。

• GitHub Desktop。 GitHub リポジトリとプル要求、VS Code とうまく統合されます。

• Visual Studio Code。 左側のアクティビティ バーで、[ ソース管理] をクリックします。

• Visual Studio >右下の [ソリューション エクスプローラー] タブの横にある [Git Changes]\(変更\) タブ。

• Edge ブラウザー内の VS Code の "ドット キー" バージョン。 Github.com で、ブランチまたはプル要求 (PR) を表示するときは、ピリオド (.) キーを押します。 左側の [アクティビティ バー] で、次をクリックします。

  • ソース管理
  • GitHub Pull Requests
  • GitHub Pull Request

Demos リポジトリをダウンロードする

リポジトリの更新をプルしてリポジトリに完全に参加できるように、リポジトリのダウンロードよりもリポジトリの複製をお勧めします。

複製する代わりに Demos リポジトリをダウンロードする場合は、次のようにします。

1. 新しいウィンドウまたはタブで、 MicrosoftEdge/Demos リポジトリに移動します。

2. [ コード ] ドロップダウン ボタンをクリックし、[ ZIP のダウンロード] をクリックします。

   .zip ファイルは、ダウンロード ディレクトリに配置されます。 これらの Web ページ ソース ファイルを適切な場所に解凍します。

Demos リポジトリの 1 つのディレクトリをダウンロードするには:

1. https://download-directory.github.io/に移動し、URL https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-doを貼り付けます。

   .zip ファイルは、ダウンロード ディレクトリに配置されます。 これらの Web ページ ソース ファイルを適切な場所に解凍します。

関連項目:

• 「WebView2 の開発環境をセットアップする」の WebView2Samples リポジトリをダウンロードします。

ソース ツールの [ワークスペース] タブからデモ フォルダーを開く

このセクションを使用するには、まず、上記 の「Edge Demos リポジトリをドライブに複製する」を実行します。

関連項目:

• ワークスペース チュートリアル (ソース ツールの [ワークスペース] タブ)
• Visual Studio Code の Microsoft Edge DevTools 拡張機能で比較されるアプローチ。 Web ページ ファイルを編集するためのいくつかのオプションを要約して比較します。

Edge Demos リポジトリを複製 (またはダウンロード) した後:

1. Microsoft Edge で、新しいタブを開きます。

2. Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

3. DevTools のメイン ツール バーで、[ ソース ] タブを選択します。そのタブが表示されない場合は、[ その他のタブ ] () ボタンをクリックします。

4. [ ソース ] タブの左側にある [ ワークスペース ] タブを選択します。このタブは [ ページ ] タブでグループ化されます。 [ワークスペース ] タブが表示されない場合は、[ その他のタブ ] () ボタンをクリックします。

5. [ + フォルダーをワークスペースに追加] をクリックします。 フォルダー選択ダイアログが開きます。

6. demo-to-do などの特定のフォルダーを選択するか、Demos ルート フォルダーを選択します。

   

7. DevTools の上に、"DevTools は (ディレクトリ) へのフル アクセスを要求します」 というメッセージが表示されます。 [ 許可 ] ボタンをクリックします。

   

localhost サーバーを起動する

\Demos\demo-to-doなどの特定のデモ フォルダーから localhost サーバーを起動し、localhost:8080に移動 (または Microsoft Edge で C:\Users\localAccount\GitHub\Demos\demo-to-do\index.html などのローカル ファイルを開く) 場合は、特定のデモがブラウザーにすぐに表示されます。 その後、ソース ツールの [ワークスペース] タブに、C:\Users\localAccount\GitHub\Demos\demo-to-do\などの特定のデモ ディレクトリのみを追加できます。 その後、その特定のデモに対して DevTools を IDE として使用するための完全な機能が用意されています。

特定のデモ ディレクトリ内からサーバーを起動する:

$ cd ~/GitHub/Demos/demo-to-do
$ npx http-server

ソース ツールの [ワークスペース] タブに追加するディレクトリの例:C:\Users\localAccount\GitHub\Demos\demo-to-do

localhost:8080に移動した結果:

Demos ディレクトリから localhost サーバーを起動する

\Demos\ フォルダー全体から localhost サーバーを起動し、localhost:8080に移動すると、ブラウザー内から各デモに移動できます。 複製した/Demos/ フォルダー全体を、[ソース] ツールの [ワークスペース] タブに追加できます。 その後、IDE として DevTools を使用するための完全な機能が用意されています。

\Demos\ ディレクトリ全体からサーバーを起動します。

$ cd ~/GitHub/Demos
$ cd "C:\Users\localAccount\GitHub\Demos"  # alt syntax
$ npx http-server

ソース ツールの [ワークスペース] タブに追加するディレクトリの例:C:\Users\localAccount\GitHub\Demos

localhost:8080に移動した結果:

エクスプローラーからローカル HTML ファイルを開き、DevTools で編集する

ソース ツールでファイルを編集するには、このセクションの手順を実行する前に、[許可] ボタンをクリックして読み取り/書き込みアクセス権を付与する必要がある場合があります。上記の「ソース ツールの [ワークスペース] タブからデモ フォルダーを開く」の手順に従います。

1. Windows エクスプローラー または macOS の Finder で、Demos リポジトリのローカル コピーから HTML ファイル (C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.htmlなど) を選択します。

   .html ファイルが開き、Microsoft Edge でレンダリングされます。

   [アドレス] バーに [ ファイル] が表示されます。 |C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

   アドレス バーで URL を選択すると、URL 形式が表示されます。 file:///C:/Users/localAccount/GitHub/Demos/demo-to-do/index.html

2. レンダリングされた Web ページを右クリックし、[ 検査] を選択します。

   DevTools が開きます。

3. [ソース] ツールを選択し、[ページ] タブまたは [ワークスペース] タブを選択します。

関連項目:

• ワークスペースにファイルを編集して保存する ([ソース] ツールの [ワークスペース] タブ) - ブラウザーの DevTools の [ソース ] ツールでローカル フォルダーを開きます。

ブラウザーの [ファイルを開く] ダイアログからローカル HTML ファイルを開き、DevTools で編集する

.html ファイルを開いて編集するには:

1. Microsoft Edge で新しいタブを開き、 Ctrl + O (Windows/Linux) または Command + O (macOS) を押します。 ファイル選択ダイアログが開きます。

2. C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.htmlなど、Demos リポジトリのローカル コピーから HTML ファイルを選択します。 .html ファイルが開き、Microsoft Edge でレンダリングされます。

3. Web ページを右クリックし、[ 検査] を選択します。 または、 Ctrl + Shift + I (Windows、Linux) または Command + Option + I (macOS) を押します。 DevTools が開きます。

4. DevTools のメイン ツール バーで、[ ソース ] タブを選択します。そのタブが表示されない場合は、[ その他のタブ ] ([) ボタンをクリックします。

5. DevTools の左側にある [ ページ ] タブを選択し、 index.html や (インデックス) などの HTML ファイルを選択します。

6. Esc キーを押して、DevTools の下部にあるクイック ビュー パネルを開きます。

7. クイック ビュー ツール バーで、[その他のツール] () ボタンをクリックし、[変更] ツールを選択します。

8. 中央の ソース ツールの エディター ウィンドウで、 .html ファイルを編集します。 たとえば、 demo-to-do/index.html フォルダーの <h1> 見出し行で、[ マイ タスク ] を [ 変更したタスク] に変更します。

   <h1>📋 My modified tasks</h1>
   

   編集が有効になっていない場合は、[ 許可 ] ボタンをクリックして、上記の [ ソース] ツールの [ワークスペース] タブからデモ フォルダーを開く 手順を実行して、フォルダーへの読み取り/書き込みアクセス権を付与します。

   変更はクイック ビュー パネルの [変更] ツールに表示され、[ソース] ツールの [index.html] タブのファイル名にアスタリスクが追加されます。

   

9. Ctrl + S (Windows、Linux) または Command + S (macOS) を押して変更を保存します。 アスタリスクは、[ソース] ツールの [index.html] タブから削除されます。

10. ページを最新の情報に更新してください。 変更は、レンダリングされた Web ページに表示されます。たとえば、 変更された 単語がタイトルに追加されます。

    

Visual Studio Code でデモ フォルダーを開く

Edge Demos リポジトリを複製 (またはダウンロード) した後:

1. Visual Studio Code のアクティビティ バーで、エクスプローラー () ボタンをクリックします。 [エクスプローラー] ウィンドウが開きます。

2. [エクスプローラー] ウィンドウで、[フォルダーを開く] ボタンをクリックします。 [ フォルダーを開く] ダイアログが開きます。 複製した Demo リポジトリの demo-to-do フォルダーに移動し、フォルダーを選択するか、フォルダーに移動して、[ フォルダーの選択 ] ボタンをクリックします。

   

   Demos リポジトリが複製されたリポジトリの場所の例を上に示します。 複製された Demos リポジトリの demo-to-do フォルダーが、Visual Studio Code のエクスプローラーで開きます。

   

または、Demos リポジトリのルート フォルダーを開いて、エクスプローラー ウィンドウ内のすべてのデモ フォルダーを調べることができます。

関連項目:

• Visual Studio Code 用の Microsoft Edge DevTools 拡張機能 - Visual Studio Code でローカル フォルダーを開き、Visual Studio Code 内で DevTools を使用します。

レンダリングされたデモ Web ページとソース コードの URL パターン

Demos リポジトリの Readme ファイルのほとんどは、GitHub.io サーバーからレンダリングされた .html ファイルを開くリンクを持っています。 GitHub.com に HTML ソース ファイルの URL がある場合もありますが、代わりに、gitHub ディレクトリに.htmlソース コードのコード 一覧を表示するのではなく、レンダリングされたファイルを表示するために github.io サーバー URL を派生させる必要があります。

GitHub.com のソース コード ディレクトリの URL から、GitHub.io でレンダリングされたデモ Web ページの URL に変換するには、パターンは次のとおりです。

GitHub.com の Web ページのソース コードの URL は次のとおりです。

• https://github.com/MicrosoftEdge/Demos/tree/main/demo-to-do/

その GITHUB.COM URL の主要なコンポーネントは次のとおりです。

• https://github.com/[org]/[repo]/tree/main/[path]

一方、目的の GitHub.io URL パターンは次のとおりです。

• https://[org].github.io/[repo]/[path]

その GitHub.io URL パターンを入力するには、次の例を実行します。

• [org] が MicrosoftEdge。
• [repo] が Demos。
• [パス] が demo-to-do。

そのため、レンダリングされたデモ Web ページの結果の GitHub.io サーバー URL は次のようになります。

• https://MicrosoftEdge.github.io/Demos/demo-to-do/

これらの URL では、大文字と小文字は区別されません。

localhost サーバーを実行し、 C:\Users\localAccount\GitHub\Demos\workspacesなどの複製されたリポジトリ フォルダー内で起動すると、通常、ブラウザーのアドレス バーに localhost:8080 が表示されます。

関連項目

ファイルを開いて編集する:

• ワークスペースにファイルを編集して保存する ([ソース] ツールの [ワークスペース] タブ) - ブラウザー内の統合開発環境 (IDE) として DevTools を使用します。
• DevTools を使用してファイルを編集し、ソース ツールの概要でディスクに変更を保存するには、ローカル フォルダーをワークスペースに追加します。
• Visual Studio Code の Microsoft Edge DevTools 拡張機能で比較されるアプローチ。 Web ページ ファイルを編集するためのいくつかのオプションを要約して比較します。
• Microsoft Edge IDE 統合 - Microsoft Edge DevTools を含む Visual Studio Code または Visual Studio を使用した Web ページ アプリ開発。

ダウンロードと複製:

• 手順 5:Visual Studio Code 用 DevTools 拡張機能のインストールに関するページの Demos リポジトリを複製します。
• リポジトリの複製 - GitHub ドキュメント。

ローカル Web サーバーの実行:

• 手順 6:Visual Studio Code 用 DevTools 拡張機能のインストールに関するページで localhost サーバーを設定します。