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 の機能を示します。

デモ名 説明 Repo ディレクトリ ライブ デモ ページ
CSS ミラーリング ソースマップ Visual Studio Code の DevTools 拡張機能の [スタイル] タブ (CSS ミラー編集) 内から.cssファイルを更新するために使用されます。 /css-mirroring-sourcemaps-demo/ 該当なし
TODO アプリ Simple To Do アプリとバニラ JavaScript。 Microsoft Edge DevTools ドキュメントのスクリーンショット、および Visual Studio Code 用 DevTools 拡張機能の DevTools ブラウザーを開く場合に使用します。 /demo-to-do/ 自分のタスク
デタッチされた要素 チャットのようなデモ。 デタッチされた要素ツールを使用して DOM メモリ リークをデバッグするために使用されます。 /detached-elements/ トラフィックをシミュレートする
3D ビュー 3D ビュー ツールを使用して Web ページ レイヤー、z インデックス、DOM を移動するために使用されます。 /devtools-3d/ Microsoft Edge DevTools 3D ビュー ツールのデモ
アクセシビリティのテスト アクセシビリティ テスト機能に使用されます。 /devtools-a11y-testing/ 動物保護施設
DevTools の問題: レイアウトを必要とする CSS プロパティをアニメーション化する レイアウトを必要とする CSS プロパティがアニメーション化されるときに発生する 問題 と 要素 ツールの警告を示します。 /devtools-animated-property-issue/ アニメーション CSS プロパティのデモ
コンソール パネルのデモ ページ コンソールの概要、コンソール ツールでのログ メッセージ、コンソールで報告される JavaScript エラーの修正に使用されます。 /devtools-console/ DevTools コンソール パネルのデモ ページ
コンソールのデモ ページからの DOM 操作 コンソールを 使用した DOM との対話に使用されます。 /devtools-console-dom-interactions/ DevTools コンソール ツール DOM の相互作用のデモ
コントラストバグの修正 Microsoft Edge DevTools のコントラストを向上させるために使用: バグ修正のケース スタディ。 /devtools-contrast-bugfix/ コントラストの問題について DevTools のすべてのバッジをテストする
CSS の例 CSS の 表示と変更を開始するために使用されます。 /devtools-css-get-started/ CSS の例
DOM の例 DOM の 表示と変更を開始するために使用されます。 /devtools-dom-get-started/ DOM の例
Edge の Copilot でのコンソールエラーと警告について説明する Edge で Copilot を使用して説明できるエラーをコンソールで生成します。 /devtools-explain-error/ コンソール エラーのデモの説明
検査ツール 検査ツールを使用してページを分析するために使用されます。 /devtools-inspect/ デモの検査
2 つの数値を追加する JavaScript のデバッグ JavaScript のデバッグを開始するために使用されます。 /devtools-js-get-started/ デモ: Microsoft Edge DevTools を使用した JavaScript のデバッグ
メモリ ヒープのスナップショット メモリ ツールを使用してヒープ スナップショットを記録するために使用されます。 /devtools-memory-heap-スナップショット/ 該当なし
パフォーマンス アクティビティ タブ パフォーマンス ツールの [ボトムアップ]、[コール ツリー]、および [イベント ログ] タブについて、テーブル内のアクティビティを表示するために使用されます。 /devtools-performance-activitytabs/ アクティビティ タブのデモ
アニメーションが遅い パフォーマンス ツールの概要に使用されます。 /devtools-performance-get-started/ アニメーションが遅い
postMessage トレース イベント パフォーマンス ツールでトレース イベントをテストpostMessageします。 パフォーマンス機能リファレンスのウィンドウ、iframe、および専用ワーカー間のメッセージの表示に使用されます。 /devtools-postmessage-perf-タイムライン/ postMessage トレース イベントのデモ
CSS :target 擬似クラス :target CSS 状態の強制のサポートに使用されます。 /devtools-target-pseudo/ CSS :target 擬似クラスのデモ
ヒープ スナップショット ビジュアライザー DevTools の ヒープ スナップショット ビジュアライザー 拡張機能のソース コード。 /heap-スナップショット-visualizer/ 該当なし
JSON ダミー データ 単純な JSON ファイル。 書式設定された JSON の表示に使用されます。 /json-dummy-data/ JSON ダミー データ
ネットワーク アクティビティの検査 ネットワーク アクティビティの検査に使用されます。 /network-tutorial/ ネットワーク アクティビティの検査のデモ
フォト ギャラリー CSS セレクターのパフォーマンスに関する真実のために使用されます。 /photo-gallery/ フォト ギャラリー
遅い予定表 パフォーマンス ツールやソース マップのサポートなど、さまざまな DevTools 機能をテストするためのシンプルな予定表デモ アプリ。 /slow-calendar/ 遅い予定表
ワークスペース [ソース] ツールの [ワークスペースを使用したファイルの編集] ([ファイル システム] タブ) に使用します。 /ワークスペース/ DevTools ワークスペースのデモ

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

デモを実行するには

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

ソース ツールを選択してデモと DevTools を実行するには

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

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

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

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

記事

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

ソース コード リポジトリ

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

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

    • index.html - JavaScript ファイルにデータ buttons.js を送信するページ セクションと入力フォームを含むデモ 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 が開きます。

「DevTools を使用した JavaScript のデバッグの開始」デモ Web ページ

記事

次の記事または記事セクションでは、このデモ 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 ファイル。

Demos リポジトリをダウンロードまたは複製する

Demos リポジトリは、さまざまな DevTools ドキュメントに従う場合に役立ちます。

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 ページ ソース ファイルを適切な場所に解凍します。

関連項目:

Demos リポジトリを複製する

リポジトリを複製すると、リポジトリの更新時にローカル コピーを更新できます。 GitHub UI とさまざまなツールでは、複製がサポートされています。 Visual Studio Code を使用して複製を示しますが、GitHub Desktop、Visual Studio、git bash シェルなど、他の多くのコーディング ツールを使用できます。

リポジトリを複製するには:

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

  2. 緑色の [コード] ボタンが表示されない場合は、左上のパスの [デモ / ] をクリックして、リポジトリのメイン ページに移動します。

  3. [コード] ドロップダウン ボタンをクリックし、URL https://github.com/MicrosoftEdge/Demos.gitの横にある [コピー] ボタンをクリックします。 その後、URL を git bash または Visual Studio Code ダイアログなどに貼り付けることができます。

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

    MicrosoftEdge/Demos リポジトリの複製

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

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

    Visual Studio Code の [リポジトリの複製] ボタン

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

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

    複製されたリポジトリを開くよう求められた

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

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

関連項目:

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

ソース ツールでデモ フォルダーを開き、ファイルを編集する

このセクションを使用するには、まず Demos リポジトリをダウンロードまたは複製します。

ソース ツールでローカル ファイルを編集するには、最初に [許可] ボタンをクリックして読み取り/書き込みアクセス権を付与する必要がある場合があります。 これを行うには、以下の ソース ツールの [ファイルシステム (ワークスペース)] タブからフォルダーを開く方法に関するページの手順に 従います。

関連項目:

  • Visual Studio Code の Microsoft Edge DevTools 拡張機能で比較されるアプローチ。 Web ページ ファイルを編集するためのいくつかのオプションを要約して比較します。

ソース ツールの [ファイル システム (ワークスペース)] タブからフォルダーを開く

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 ルート フォルダーを選択します。

    demo-to-do ディレクトリの選択

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

    DevTools は、[ファイル システム] タブのワークスペースにフォルダーを追加するためのアクセス権を要求します

ファイルを編集するには、次のセクションの編集手順を参照してください。

関連項目:

ブラウザーの [ファイルを開く] ダイアログからローカル HTML ファイルを開き、[ソース] ツールの [ページ] タブから編集する

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

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

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

  2. Demos リポジトリのローカル コピーから HTML ファイル (などC:\Users\username\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 の左側にある [ページ] タブを選択し、HTML ファイル (または (インデックス) などindex.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 ページに表示されます。たとえば、 変更された 単語がタイトルに追加されます。

    変更を保存して更新した後の変更されたデモ to Do ページ

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

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

  2. 上記のセクションの手順に従います。

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

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

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

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

    demo-to-do フォルダーの選択

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

    最初に demo-to-do フォルダーを開きました

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

関連項目:

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

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

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です。
  • [path] は です demo-to-do。

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

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

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

関連項目

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

ダウンロードと複製:

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

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

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