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 サンプルの一覧

詳細:

• "MicrosoftEdge / Demos" リポジトリの Readme の Microsoft Edge DevTools。

サンプルの一部を次に示します。

To Do デモ

このシンプルなTo Do リスト Web ページは、さまざまな DevTools 機能のデモンストレーションを行うために使用されます。 .html ファイル、.js ファイル、.cssファイルがあります。

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

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

アクセシビリティの問題のあるデモ Web ページ

この Animal Shelter のデモ Web ページは、アクセシビリティ テスト機能を含むさまざまな DevTools 機能を探索するのに役立ちます。

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

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

記事

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

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

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

ソース コード リポジトリ

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

• MicrosoftEdge / デモ > 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 / デモ > devtools-js-get-started - 次のファイルが含まれます。

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

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

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

"MicrosoftEdge / 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 を使用して「MicrosoftEdge / 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. [ 信頼しますか...] を求められたら、[ はい ] ボタンをクリックします。 または、[ いいえ ] ボタンをクリックして、このチュートリアルのほとんどの部分を続行します。

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

関連項目:

• リポジトリのクローン作成 - GitHub ドキュメント。
• WebView2 の開発環境をセットアップするで WebView2Samples リポジトリを複製します。

リポジトリの複製と git commit/pull/push 操作をサポートするツール

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

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

• 作成します。 GitHub リポジトリと pull request、VS Code とうまく統合できます。

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

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

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

  • ソース管理
  • GitHub のプル要求
  • GitHub のプル リクエスト

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

リポジトリの更新を取得してリポジトリに完全に参加できるように、リポジトリをダウンロードするよりもリポジトリをクローニングすることをお勧めします。

クローンを作成するのではなく、デモ リポジトリのみをダウンロードする場合:

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 リポジトリをダウンロードします。

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

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

関連項目:

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

Edge デモ リポジトリを複製 (またはダウンロード) した後、次の手順を実行します。

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 が (ディレクトリ) へのフル アクセスを要求します" というメッセージが表示されます。 [ 許可] ボタンをクリックします。

   

ローカル ホスト サーバーを起動する

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

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

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

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

localhost:8080 に移動した結果:

Demos ディレクトリからのローカルホスト サーバーの起動

\Demos\ フォルダー全体から localhost サーバーを起動してから localhost:8080 に移動すると、ブラウザー内から各デモに移動できます。 クローンした /Demos/ フォルダー全体を [ソース] ツールの [ワークスペース] タブに追加できます。 これで、DevTools を IDE として使用するためのすべての機能が利用できるようになります。

\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. Demos リポジトリのローカル コピーから HTML ファイル (C:\Users\localAccount\Documents\GitHub\Demos\demo-to-do\index.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 デモ リポジトリを複製 (またはダウンロード) した後、次の手順を実行します。

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

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

   

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

   

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

関連項目:

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

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

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

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

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です。
• [path] は 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 の統合 - Visual Studio Code または Visual Studio (Microsoft Edge DevTools を含む) を使用した Web ページ アプリの開発。

ダウンロードと複製:

• 手順 5: Visual Studio Code 用の DevTools 拡張機能のインストールでデモ リポジトリを複製します。
• リポジトリのクローン作成 - GitHub ドキュメント。

ローカル Web サーバーを実行する:

• 手順 6: Visual Studio Code 用の DevTools 拡張機能のインストールでローカルホスト サーバーを設定します。