DevTools、Web プラットフォーム API と機能、Progressive Web Apps、WebView2 など、新しい Microsoft Edge Web 開発テクノロジと製品について詳しく学びます。
このページには、それぞれ 1 つの機能に焦点を当て、デモを含む短いビデオへのリンクが含まれています。
Microsoft は、 Microsoft Edge YouTube チャンネルで定期的に新しいビデオを公開しています。そのビデオは次のとおりです。
以下の一覧からサムネイルをクリックすると、対応する動画を YouTube で視聴できます。
YouTube の Microsoft Edge チャネル
Microsoft Edge を使用した開発に関するすべてのビデオは、 YouTube の Microsoft Edge (@MSFTEdge) チャンネルでご覧いただけます。
Microsoft Edge チャネルには、次のプレイリストが含まれています。
Edge で Copilot を使用した DevTools コンソールのエラーについて説明する
2024 年 2 月 8 日
Microsoft Edge DevTools の コンソール および ソース ツールが Microsoft Edge の Copilot と統合され、エラーとソース コードを理解するのに役立ちます。 この機能を使用して、コードのデバッグに関するヘルプを入手します。
関連項目:
JSON ビューアー
2023 年 8 月 17 日
JSON ビューアーは、JSON 応答とファイルを自動的にフォーマットし、ブラウザー タブで強調表示します。 Web サーバーが JSON としてエンコードされたデータを使用して HTTP 要求に応答する場合、このデータは必ずしも読み取りが容易であるとは限らず、1 行のテキストとして返されることがあります。 JSON ビューアーは、返されるデータを読みやすくするために変更します。 JSON 構文はさまざまな色で強調表示され、オブジェクト プロパティは独自の行に表示され、インデントされます。オブジェクトは折りたたんだり展開したりできます。
関連項目:
Microsoft Edge |DevTools 113 および 114 の新機能
2023 年 7 月 24 日
カバー:
- クラッシュ アナライザー ツール。
- CSS セレクター統計を集約します。
- レイアウトをトリガーする CSS プロパティに関する警告。
- メモリ ツールの機能強化。
- アクセシビリティの改善。
- VS Code 用 DevTools 拡張機能でのハイ コントラスト モードのサポートが向上しました。
-
console.table().
関連項目:
Microsoft Edge |DevTools 112 の新機能
2023 年 4 月 26 日
カバー:
- パフォーマンス ツールの OOPIF の縮小されていない JS 名。
- CSS 概要ツールの単純でない CSS セレクター。
- JSON ビューアーで折りたたむコード。
- DevTools UI の機能強化。
- ログポイントと条件付きブレークポイントの新しいマーカー。
- DevTools でテーマを変更する方法。
関連項目:
- DevTools の新機能 (Microsoft Edge 112)
- スタイルの再計算イベント中の CSS セレクターのパフォーマンスを分析する - CSS セレクター統計。
- JSON ファイルまたはサーバー応答を書式設定付きで表示する
Microsoft Edge |DevTools 111 の新機能
2023 年 3 月 28 日
カバー:
- XBOX および HoloLens デバイスで Web コンテンツをリモートでデバッグします。
- パフォーマンス ツールで最小化されていないファイル名と関数名。
- CSS セレクター統計 テーブルを Excel にコピーできます。
- デバイス モード ツール バーのレンダリング エミュレーション機能。
- より良い 要素ツール サイドバー。
- クイック ビューのアクセシビリティが向上しました。
- 高精細なカラー機能。
- ネットワーク ツールの列をカスタマイズします。
関連項目:
Microsoft Edge |DevTools 110 の新機能
2023 年 2 月 16 日
カバー:
- ヒープ スナップショット記録の高速化。
- フォーカス モード (DevTools UI) のカスタマイズが改善されました。
- アクセシビリティとコントラスト テーマの改善。
- [ソース] ツールでの自動インプレース整形印刷。
- シミュレート
prefers-color-scheme。
関連項目:
Microsoft Edge |DevTools 109 の新機能
2023 年 1 月 17 日
カバー:
- メモリとパフォーマンス トレースをより多くのデータと共有します。
- パフォーマンス ツールのセレクター統計。
- メモリ ツールでガベージ コレクション (GC'd) オブジェクトを追跡する。
- ヒープ スナップショット ビジュアライザー拡張機能。
- フォーカス モードで再設計された クイック ビュー パネル。
- [ スタイル] ウィンドウの新しいコマンド。
- 要素の検査。
関連項目:
- DevTools の新機能 (Microsoft Edge 109)
- メモリ トレースをより多くのデータと共有する
- パフォーマンス トレースをより多くのデータと共有する
- スタイルの再計算イベント中の CSS セレクターのパフォーマンスを分析する - セレクター統計。
- JavaScript ランタイムの高速化 (プロファイリングの種類: 「割り当てサンプリング」プロファイリング) でガベージ (「オブジェクトを含める」チェックボックス) を減らしてメモリ割り当てを調査します。
- トラッシュ トーク: Orinoco ガベージ コレクター
- ヒープ スナップショット ビジュアライザー 拡張機能。
Microsoft Edge |DevTools 108 の新機能
2022 年 12 月 16 日
カバー:
- コマンド パレットでのナビゲーションが改善されました。
- ハイ コントラスト モードの修正。
- JavaScript を無効にする警告。
- 非アクティブな CSS プロパティを参照してください。
- 独自のツールを作成するための新しいドキュメント。
- Web ドライバーは、Apple M1 の macOS で使用できます。
- デタッチされた要素を使用して DOM リークを見つけます。
関連項目:
- DevTools の新機能 (Microsoft Edge 108)
- DevTools 拡張機能を作成し、カスタム ツールのタブとパネルを追加する
- ヒープ スナップショット ファイル形式
- Microsoft Edge WebDriver - Edge WebDriver をダウンロードします。
Microsoft Edge |DevTools 107 の新機能
2022 年 11 月 8 日
カバー:
- フォーカス モード DevTools UI のテキスト ラベル。
- コマンド パレットの新しいショートカット。
- メモリ ツールの大きなヒープ スナップショット。
- ハイ コントラスト モードの修正。
- [入力時に検索] をオフに切り替えます。
- Playwright で WebView2 を自動化します。
- ショートカットをカスタマイズします。
関連項目:
Microsoft Edge |ネットワーク ツールの使用方法を学ぶ
2022 年 10 月 6 日
Microsoft Edge DevTools で ネットワーク ツールを使用する方法について説明します。
カバー:
- DevTools の ネットワーク ツールが Web 開発者にとって不可欠な理由。
- Web ブラウザーに表示するために必要な情報を Web サイトがインターネットから取得する方法。
- ネットワーク ツールを使用する場合。
- ネットワーク ツール UI のツアー。
- ネットワーク ツールでの要求の表示。
- 要求/応答の詳細を表示する。
- ネットワーク ツールのカスタマイズ。
- 要求の並べ替え、フィルター処理、検索。
- パフォーマンスの問題を調査しています。
- 要求をブロックし、HAR ファイルとしてエクスポートします。
- リクエストの編集と再送信。
関連項目:
Microsoft Edge |DevTools 106 の新機能
2022 年 10 月 3 日
カバー:
- コマンド パレットの実験。
- Edge DevTools VS Code 拡張機能の問題のクイック修正。
- DevTools が使用するディスク領域が少なくなります。
- フォーカス モード (DevTools UI) でのアクセシビリティが向上し、ハイコントラストのバグが修正されました。
- 非推奨の Chromium Light/Dark テーマ。
- パフォーマンス ツールの新しい操作トラック。
- スニペットの使用。
関連項目:
Microsoft Edge |DevTools 105 の新機能
2022 年 9 月 6 日
カバー:
- PWA プロトコル処理のデバッグ。
- フォーカス モードの改善。
- フォーカス モードのバグ修正。
- ネットワークと問題ツールの信頼性が向上しました。
- デバッグ中に関数コードをライブ編集します。
- ログ ポイントを使用する。
関連項目:
DevTools ユーザー インターフェイスを理解する
2022 年 9 月 1 日
この少し古い (2022 年 9 月) ビデオでは、DevTools の従来の UI を示しています。
- ビデオには、 アクティビティ バーの代わりにメイン ツール バーが表示されます。
- ビデオでは、 クイック ビュー パネルの代わりに、DevTools の下部にある ドロワー が表示されます。
カバー:
- DevTools の UI 構造で、メイン ツール バーとパネルが上部にあり、 ドロワー ツールバーとパネルが下部にあります。
- Microsoft Edge DevTools UI の構成方法。
- DevTools インターフェイスの主要部分の動作。
- 使用できるツール
- 検査ツール。
- デバイス エミュレーション モード。
- メイン ツールバーまたは ドロワー内のツール。
- [ その他のタブ] ボタン。
- [ その他のツール ] ボタンをクリックすると、30+ ツールをすべて表示できます。
- ツールを閉じる。
- メイン ツール バーでツールを並べ替えます。
- ドロワーとそのツールバー。
- メイン ツールバーと ドロワー ツールバーの間でツールを移動する。
- 既定の設定に戻す方法。
関連項目:
Microsoft Edge |DevTools 104 の新機能
2022 年 8 月 5 日
カバー:
- レンダリング/アクセシビリティのバグ修正。
- コンポジット レイヤーが 3D ビュー ツールに表示されるようになり、[ レイヤー] ツールは削除されました。
- [ソース] ツールでファイルをグループ化します。
- Web コンポーネントでノードがスロットされる場所を見つけます。
- 詳細情報の入手先。
- アクティビティ バーの配置場所を変更する方法。
関連項目:
- DevTools 104 の新機能
- 3D ビュー ツールを使用して Web を 3D でデバッグ する - ブログ投稿。
Microsoft Edge |DevTools 103 の新機能
2022 年 7 月 5 日
カバー:
- ウェルカム ツールの再設計。
- 新しいカラー ピッカー。
- 新しいメモリ ヒープ スナップショット ノード タイプ。
- ハイ コントラスト モードのバグ修正。
- VS Code 拡張機能で任意の HTML ページを開きます。
関連項目:
3D での Web のデバッグ
2022 年 6 月 21 日
Microsoft Edge DevTools の 3D ビュー ツールは、調査している Web ページの 3 次元表現を提供します。 3D ビュー ツールを使用して、次のような一般的な Web 開発の問題をデバッグします。
- 深く入れ子になった DOM ノード。
- ドキュメント外の要素。
- 不要なスクロール バー。
- Z インデックスのスタッキングに関する問題。
- 複合レイヤーのパフォーマンス。
関連項目:
Microsoft Edge DevTools で優先する言語を使用する
2022 年 6 月 9 日
コーディングやデバッグに最も適した UI 言語を選択する方法。 Microsoft Edge DevTools は、13+ の異なる言語をサポートしています。
関連項目:
Microsoft Edge |DevTools 102 の新機能
2022 年 6 月 1 日
カバー:
- Visual Studio Code。
- ヒープ スナップショットのエクスポート.
- 内部ノードを循環させます。
- ヘルプ アイコン。
- 問題が修正されました。
関連項目:
HTML <select> のドロップダウン部分のスタイルを <selectmenu> 要素で完全に設定する
2022 年 5 月 31 日
要素 <select> スタイリングは困難でした。 実験的な <selectmenu> (または <selectlist>) 要素は、Web 開発者が要素のすべての部分をスタイリングできるようにすることで、残りの制限を克服することを約束します。
2024 年 6 月の更新: この要素はまだ試験的機能です。
<selectmenu>要素の名前は 2023 年に <selectlist> に変更されました。
関連項目:
-
UI の
<selectlist>デモを開く- /selectlist/ - ソース コードと Readme。
-
リーダー デモ アプリ
- /reader/ - ソース コードと Readme。
-
実際の
<select>要素のスタイリング -<select>要素と<selectmenu>要素のスタイリングに関するブログ投稿。
Edge DevTools および VSCode での高度な問題のフィルター処理
2022 年 5 月 20 日
すべての Web 製品に問題があります。 Microsoft Edge DevTools の問題 ツールは、現在の Web ページを分析し、アクセシビリティ、互換性、パフォーマンスなどを含む種類別にグループ化された問題を報告します。
Visual Studio Code 用の Microsoft Edge DevTools 拡張機能を使用すると、ソース コードで問題を直接利用できるようになります。
リリースされた製品には問題がある可能性があります。 お客様からのフィードバックに基づいて、問題をフィルター処理する便利な方法を追加しました。 サードパーティ ライブラリからの問題を無効にしたり、問題を表示するブラウザーを選択できます。
関連項目:
JavaScript を使用せずにスクロール リンク アニメーションを作成する
2022 年 5 月 12 日
CSS スクロール リンク アニメーション機能と、それを使用して JavaScript を使用せずに Web ページ上に読書の進行状況インジケーターを作成する方法について説明します。 これは、Microsoft Edge だけでなく、Web プラットフォーム全体の機能です。
2023 年 7 月 21 日の時点で、この機能は実験的ではなくなり、フラグなしで Microsoft Edge でサポートされるようになりました。 2022 年の説明から: CSS スクロール リンク アニメーションは、Microsoft Edge の試験的機能です。この機能を試すには、 edge://flags に移動し、[ 実験用 Web プラットフォーム機能 ] 設定を有効にします。
関連項目:
- リーダーのデモ - ビデオで紹介されているデモ アプリ。
- MDN での CSS スクロール駆動のアニメーション。
- @scroll-タイムライン at MDN: 実験的な CSS スクロールリンクアニメーション機能に関する元のページ。
Microsoft Edge 開発者ツールとクイック機能アクセスのカスタマイズ
2022 年 5 月 5 日
ニーズに合わせて DevTools をカスタマイズする方法について説明します。 カバー:
- DevTools をドッキングまたはドッキング解除します。
- 新しいツールを開く。
- 不要なツールを閉じます。
- 下部 ドロワー (現在の クイック ビュー パネル) のツールを移動します。
- テキスト サイズをカスタマイズします。
- テーマをカスタマイズします。
- コマンド メニューのキーボード ショートカットを使用して、DevTools をすばやくカスタマイズします。
関連項目:
CSS カスタム強調表示 API を使用して Web 上のテキストを強調表示する
2022 年 4 月 28 日
Web 上のテキストの範囲のスタイル設定は非常に便利ですが、これまで複雑なことでした。
CSS カスタム強調表示 API は、Web 上のテキスト範囲を強調表示する未来です。 この API は、任意の範囲のテキストをより簡単かつ効率的にスタイル設定できるようにする JavaScript および CSS 機能を Web 開発者に提供します。
関連項目:
Microsoft Edge |DevTools 101 の新機能
2022 年 4 月 28 日
カバー:
- 本体を使用する。
- ソース マップ キャッシュ。
- 状態テキスト列。
- テーマの切り替え。
関連項目:
- DevTools 101 の新機能
- コンソール統合: https://aka.ms/ConsoleIntegration
- ネットワーク列: https://aka.ms/NetworkColumns
Microsoft Edge |DevTools 100 の新機能
2022 年 4 月 19 日
カバー:
- Microsoft Edge 開発者ツール リポジトリを使用して、フィードバックやアイデアを送信します。
- DevTools UI にチェコ語とベトナム語を追加しました。
- メモリ ツールで、ノード タイプでヒープ スナップショットをフィルター処理します。
- ネットワーク ツールには、サービス ワーカーまたはキャッシュを示す [実行者] 列があります。
- インポートされたパフォーマンス プロファイルからのリンクでは、Azure Artifacts シンボル サーバーからのソース マップを使用して、使い慣れた元のソース コードにマップされます。
関連項目:
Microsoft Edge |DevTools 99 の新機能
2022 年 3 月 21 日
カバー:
- Azure 成果物シンボル サーバーとソースマップ。
- 3D ビュー ツールのレイヤー ウィンドウを改善しました。
- ソースマップを使用してパフォーマンス プロファイルを最小化解除します。
- Visual Studio の DevTools でのライブ ASP.NET デバッグ。
- ネットワーク コンソール ツールと 3D ビュー ツールのアクセシビリティ。
関連項目:
Microsoft Edge での自動画像の説明
2022 年 3 月 17 日
Microsoft Edge では、代替テキストが含まれていない画像に対して自動生成される代替テキストが提供されます。 自動生成された代替テキストは、スクリーン リーダーなどの支援技術のユーザーが Web 上の画像の意味や意図を検出するのに役立ちます。
目の不自由な方の多くは、主にスクリーン リーダー (各ページのコンテンツを読み上げる支援技術) を通じて Web を体験しています。 スクリーン リーダーは、ユーザーがページのコンテンツ全体を理解できるように、画像やグラフなどの視覚コンテンツを説明できる画像ラベル (代替テキストまたは "代替テキスト") が必要です。
代替テキストは、Web アクセシビリティを高めるために重要ですが、見落とされがちです。 スクリーン リーダーで処理される画像の半分以上に代替テキストがありません。
関連項目:
Microsoft Edge |DevTools 98 の新機能
2022 年 2 月 23 日
カバー:
- 強制カラー モードをエミュレートします。
- パフォーマンス ツールのイベント ログのアクティビティ アイコンには、ヒントが表示されます。
- メモリ ツールの浅いサイズは、10 進値として表されます。
- ネットワーク ツールで、検索ボックスのサイズは必要に応じて変更されます。
- アプリケーション ツールで、UI が正しく配置されている。
- Updates for the Chromium ブラウザー エンジン。
関連項目:
Microsoft Edge |DevTools 97 の新機能
2022 年 2 月 1 日
カバー:
- [ 切断された要素 ] ツールは既定で使用できます。
- 3D ビュー ツールでは、DevTools での色テーマの変更がサポートされています。
- フォーカス モード (DevTools UI) の機能強化。
- VS Code 用の DevTools 拡張機能には、追加機能があります。
関連項目:
- DevTools 97 の新機能
- デバイスの一覧を更新します。 https://aka.ms/RefreshDeviceList
- HTML として編集を使用したオートコンプリート https://aka.ms/AutocompleteEditHTML
- デバッグ エクスペリエンスの向上: https://aka.ms/NewDebugging
Microsoft Edge 切断された要素ツールを使用してメモリ リークをデバッグする
2021 年 12 月 9 日
2025 年 3 月の更新: 切断された要素ツール が削除されました。 DOM メモリ リークをデバッグするには、メモリ ツールで Detached elements プロファイリングの種類を使用します。
メモリ リークは、アプリケーションの JavaScript コードが、ブラウザーがガベージ コレクションのために解放するのではなく、メモリ内にオブジェクトを保持する場合に発生します。 私たちは Microsoft Teams の開発者と共同でデ タッチされた要素 ツールを構築し、すでに多くの独自の Web サイトやアプリでメモリ リークを見つけて修正するのに役立っています。
関連項目:
- メモリの問題を修正するで、切り離された要素から DOM ツリーのメモリ リークを見つける。
- Microsoft Edge 切断された要素ツールを使用してメモリリークをデバッグ する - ブログ投稿。
Microsoft Edge |DevTools 96 の新機能
2021 年 12 月 9 日
カバー:
- 新しい DevTools UI: フォーカス モード。
- コンソール ツールは、DevTools の上部パネルと下部パネルの両方に配置できます。
- ソースマップを読み込めない場合、[ ソース] ツールから通知が表示されます。
- ドロップダウンの三角形アイコンをクリックすると、メニューが開きます。
- Visual Studio Code でソース ファイルを開くと、 ソース ツールと統合されます。
関連項目:
Microsoft Edge |DevTools 95 の新機能
2021 年 12 月 8 日
カバー:
- すべてのエラー メッセージと警告メッセージの検索 Web アイコン。
- User-Agent クライアント ヒントを定義するためのアクセスが改善されました。
- コンソール フィルターは、グループ化されたメッセージを表示します。
関連項目:
Microsoft Edge |The EyeDropper API
2021 年 11 月 22 日
Microsoft Edge チームは、Chromium オープンソース プロジェクトと共同で、新しい EyeDropper API を指定して実装しました。 「 問題 - WICG/スポイト | github.com」でフィードバックをお寄せください。
多くのクリエイティブ アプリケーションでは、ユーザーは通常、スポイトの比喩を使用して、アプリ ウィンドウの一部から、または画面全体から色を選択できます。 EyeDropper API を使用すると、作成者はブラウザーが提供するスポイトを使用して、Web 上のカスタム カラー ピッカーを作成できます。
関連項目:
- MDN の EyeDropper API。
- EyeDropper API デモ
Microsoft Edge |DevTools 94 の新機能
2021 年 11 月 12 日
カバー:
- Web でコンソール エラーを検索します。
- Visual Studio Code テーマを使用すると、ブレークポイント アイコンが表示されます。
- Visual Studio Code 用の DevTools 拡張機能には、最新のツール、テーマのサポート、役に立つリンクなどがあります。 JavaScript デバッガーのリモート ワークスペースへの接続。
更新: Visual Studio Code のテーマ機能が削除され、そのようなテーマは既定のテーマに戻ります。
- Light+
- Dark+
関連項目:
- DevTools 94 の新機能
- キーボード ショートカット - キーボードを使用して DevTools をナビゲートする。
Microsoft Edge |DevTools 93 の新機能
2021 年 10 月 11 日
カバー:
- DevTools UI。
- デタッチされた要素ツールを使用して DOM ノードのメモリ リークをデバッグします。
- 表示言語の変更。
- CSS-in-JS ライブラリの 要素 ツールの [ スタイル] ウィンドウで CSS 宣言をコピーします。
- User-Agent クライアント ヒントのカスタマイズが容易になります。
- スクリーン リーダーは、ツール バーと コンソールに表示されるエラー、警告、問題を読み上げます。
- ネットワーク ツールの PowerShell としてコピーには、Cookie が含まれます。
- Visual Studio Code デバッガーは、VS Code の DevTools 拡張機能と統合されています。
関連項目:
Microsoft Edge |プラットフォームの状態
2021 年 5 月 25 日
Microsoft Edge は、魅力的で一貫したプラットフォームとツールを開発者に提供します。 従来のブラウザーはサポートを段階的に廃止しますが、Edge はまもなく、Microsoft が Windows 10 で唯一サポートするブラウザーになります。 Edge プラットフォーム、ツール、Web アプリの全体に渡って最新の情報について説明します。
カバー:
- 委任されたインク トレイル。
- 開発者向けの新しい Web 機能。
- OS ログインで実行します。
- VS Code 用 Microsoft Edge ツール。
関連項目:
- Windows 10 上の Internet エクスプローラーの将来は、Microsoft Edge - IE モードになります。
- FastTrack で Microsoft Edge を採用する
- "Microsoft Edge: プラットフォームの状態": セッション リソース
Ignite |2021 年 3 月 |Web Apps ストーリーに火をつける
2021 年 3 月 2 日
Progressive Web Apps (PWA) は Microsoft Edge でサポートされており、アプリケーションの検出可能性と関与を強化する機会を表します。 Web プラットフォームの新機能。 これらの最新の Web アプリケーションが Microsoft Windows とシームレスに統合される方法。
カバー:
- 最新化する能力。
- Web プラットフォームを強化するための共同の取り組み。
- Microsoft Edge と Chromium ブラウザー エンジン。
- Microsoft Edge と Web 機能 (Project Fugu)。
- Windows で PWA を輝かせる。
- クラス最高のリーチ。
- Web サイトをアプリとしてインストールします。
- Windows の PWA に参加します。
関連項目:
Ignite |2020 年 9 月 |最新の開発者ツール
2020 年 9 月 22 日
Microsoft Edge 開発者ツールは、Web の開発、テスト、および自動化を容易にするのに役立ちます。 Microsoft のツールやアプリケーションでアクセシビリティをどのように優先するか、また、他のユーザーも同じことを行えるようにする方法について説明します。
カバー:
- VS Code の DevTools 拡張機能。
- ブラウザー間のテストと自動化。 Selenium、WebDriver、Puppeteer、Playwright、および Docker コンテナー経由の CI/CD。
- Chromium ブラウザー エンジンでのコラボレーション。 貢献する方法。
- 開発者ツールのローカライズされた UI。
- 開発者ツールのアクセシビリティ。
関連項目:
関連項目
YouTube:
-
YouTube の Microsoft Edge (@MSFTEdge) チャンネル
- 開発者 - プレイリスト。
- DevTools の新機能 - プレイリスト。
- 拡張機能 - プレイリスト。
- WebView2 アプリケーションのビルド、展開、管理 - 2021 年 3 月 2 日。