Microsoft Edge を使用した Web 開発に関するビデオ
DevTools、Web プラットフォーム API と機能、プログレッシブ Web Apps、WebView2 などの新しい Microsoft Edge Web 開発テクノロジと製品について説明します。
このページには短いビデオへのリンクが含まれており、それぞれが 1 つの機能のみに焦点を当て、デモを含みます。
Microsoft は、 Microsoft Edge YouTube チャネルで新しいビデオを定期的に公開しており、以下にも一覧表示されます。
次の一覧からサムネイルをクリックして、YouTube で対応するビデオをwatchします。
YouTube の Microsoft Edge チャネル
Microsoft Edge を使用した開発に関するすべてのビデオは、 YouTube の Microsoft Edge (@MSFTEdge) チャネルで見つけることができます。
Microsoft Edge チャネルには、次のプレイリストが含まれています。
Copilot in Edgeを使用して 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 日
カバー：
- パフォーマンス ツールでの OOPIFs の未確定の 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 ランタイムの高速化 ("割り当てサンプリング" プロファイルの種類) で、ガベージ ("オブジェクトを含める" チェック ボックス) を減らしてメモリ割り当てを調査します。
- ゴミ箱の話:オリノコのガベージコレクター
- ヒープ スナップショット ビジュアライザー 拡張機能。
Microsoft Edge |DevTools 108 の新機能
2022 年 12 月 16 日
カバー：
- コマンド パレットのナビゲーションが改善されました。
- ハイ コントラスト モードの修正。
- JavaScript 警告を無効にしました。
- 非アクティブな CSS プロパティを参照してください。
- 独自のツールを作成するための新しいドキュメント。
- Apple M1 の macOS で使用できる WebDriver。
- デタッチされた要素を使用して 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非推奨。
- パフォーマンス ツールで新しい操作が追跡されます。
- スニペットの使用。
関連項目:
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 ビュー ツールを使用して 3D で Web をデバッグ する - ブログ投稿。
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。
- ヒープ スナップショットのエクスポート。
- 内部ノードを循環します。
- ヘルプ アイコン。
- 問題が修正されました。
関連項目:
新しい <selectmenu> 要素を使用して HTML <select>のドロップダウン部分のスタイルを完全に設定する
2022 年 5 月 31 日
<select>要素のスタイル設定は困難でした。 試験的な <selectmenu> (または <selectlist>) 要素は、Web 開発者が要素のすべての部分のスタイルを設定できるようにすることで、残りの制限を克服することを約束します。
2024 年 6 月の更新: この新しい要素はまだ試験的です。
<selectmenu> 要素の名前は、2023 年に <selectlist> に変更されました。
関連項目:
-
UI の
<selectlist>デモを開く -
実際
<select>要素のスタイル 設定 -<select>要素と<selectmenu>要素のスタイル設定に関するブログ投稿。
Edge DevTools と VSCode での高度な問題のフィルター処理
2022 年 5 月 20 日
すべての Web 製品に問題があります。 Microsoft Edge DevTools Issues ツールは、現在の Web ページを分析し、アクセシビリティ、互換性、パフォーマンスなどの種類別にグループ化された問題を報告します。
Visual Studio Code の Microsoft Edge DevTools 拡張機能を使用すると、ソース コードで問題を直接使用できるようになります。
リリースされた製品には問題が発生する可能性があります。 フィードバックに基づいて、問題をフィルター処理するための便利な方法が追加されました。 サード パーティ製ライブラリからの問題を無効にし、問題を表示するブラウザーを選択できます。
関連項目:
- 問題ツールを使用して問題を見つけて修正する
- VS Code 用 DevTools 拡張機能のインラインおよびライブイシュー分析
JavaScript を使用せずにスクロールリンクアニメーションを作成する
2022 年 5 月 12 日
CSS のスクロールリンクされたアニメーション機能と、JavaScript を使用せずに Web ページで読み上げ進行状況インジケーターを作成する方法について説明します。 これは、Microsoft Edge だけでなく、Web プラットフォーム全体の機能です。
2023 年 7 月 21 日の時点で、この機能は試験的ではなく、フラグなしで Microsoft Edge でサポートされるようになりました。 2022 の説明から: CSS のスクロールにリンクされたアニメーションは、Microsoft Edge の実験的な機能です。この機能を試すには、[ edge://flags ] に移動し、[ 試験的な Web プラットフォーム機能 ] 設定を有効にします。
関連項目:
- リーダー デモ - ビデオに表示されるデモ アプリ。
- Reader デモのソース コード
- MDN での CSS スクロール 駆動アニメーション 。
- MDN で@scroll-タイムライン: 実験的な CSS スクロールリンクアニメーション機能に関する元のページ。
Microsoft Edge 開発者ツールのカスタマイズとクイック機能アクセス
2022 年 5 月 5 日
ニーズに合わせて DevTools をカスタマイズする方法について説明します。 カバー：
- DevTools をドッキングまたはドッキング解除します。
- 新しいツールを開きます。
- 不要なツールを閉じます。
- 下部の ドロワー (クイック ビュー パネル) でツールを移動します。
- テキスト サイズをカスタマイズします。
- テーマをカスタマイズします。
- コマンド メニューのキーボード ショートカットを使用して、DevTools をすばやくカスタマイズします。
関連項目:
CSS カスタム強調表示 API を使用して Web 上のテキストを強調表示する
2022 年 4 月 28 日
Web 上のテキストのスタイル設定範囲は非常に便利ですが、これまでは複雑な作業でした。
CSS カスタム強調表示 API は、Web でテキスト範囲を強調表示する未来です。 この API は、Web 開発者に JavaScript および CSS 機能を提供し、あらゆるテキストのスタイルを簡単かつ効率的にします。
関連項目:
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 Developer Tools リポジトリ。
- DevTools UI 用にチェコ語とベトナム語の言語を追加しました。
- メモリ ツールで、ノードの種類でヒープ スナップショットをフィルター処理します。
- ネットワーク ツールには、サービス ワーカーまたはキャッシュが表示された [フルフィルメント済み] 列があります。
- インポートされたパフォーマンス プロファイルからのリンクでは、Azure Artifacts シンボル サーバーのソース マップを使用して、使い慣れた元のソース コードにマップし直します。
関連項目:
Microsoft Edge |DevTools 99 の新機能
2022 年 3 月 21 日
カバー：
- Azure Artifacts シンボル サーバーとソースマップ。
- 3D ビュー ツールの [レイヤー] ウィンドウが改善されました。
- ソースマップを使用して、パフォーマンス プロファイルの評価を解除します。
- DevTools for Visual Studio でのライブ ASP.NET デバッグ。
- ネットワーク コンソール ツールと 3D ビュー ツールのアクセシビリティ。
関連項目:
Microsoft Edge での画像の自動説明
2022 年 3 月 17 日
Microsoft Edge では、含まれていないイメージに対して自動生成された代替テキストが提供されます。 自動生成された代替テキストは、スクリーン リーダーなどの支援技術のユーザーが、Web 上の画像の意味や意図を検出するのに役立ちます。
視覚障碍のあるユーザーや視覚障碍のあるユーザーの多くは、主にスクリーン リーダーを介して Web を体験します。各ページのコンテンツを読み上げる支援技術です。 スクリーン リーダーは、ユーザーがページの完全なコンテンツを理解できるように、画像やグラフなどの視覚的なコンテンツを記述できる画像ラベル (代替テキストまたは "代替テキスト") を用意することに依存します。 代替テキストは、Web にアクセスできるようにするために重要ですが、見落とされることが多いです。 スクリーン リーダーによって処理された画像の半分以上に代替テキストがありません。
関連項目:
Microsoft Edge |DevTools 98 の新機能
2022 年 2 月 23 日
カバー：
- 強制色モードをエミュレートします。
- パフォーマンス ツール イベント ログのアクティビティ アイコンにはヒントがあります。
- メモリ ツールの浅いサイズは、10 進値として表されます。
- ネットワーク ツールでは、必要に応じて [検索] ボックスのサイズが変更されます。
- アプリケーション ツールでは、UI が正しく配置されています。
- Chromium ブラウザー エンジンのUpdates。
関連項目:
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 日
DOM メモリ リークをデバッグするには、次のいずれかを使用します。
- デタッチされた要素ツール。 デタッチされたノードには、関連付けられている JavaScript コードへのリンクがあります。
- メモリ ツールのデタッチされた要素プロファイルの種類。
デタッチされた要素ツールは、DOM メモリ リークの調査と解決に役立ちます。
メモリ リークは、アプリケーションの JavaScript コードが、ブラウザーでガベージ コレクションのために解放されるのではなく、より多くのオブジェクトをメモリに保持する場合に発生します。 私たちは、Microsoft Teams開発者と デタッチされた要素 ツールを構築しました,そしてそれは既に私たち自身のウェブサイトやアプリの多くにわたってメモリリークを見つけて修正するのに役立ちました。
関連項目:
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 上のカスタム カラー ピッカーの構築でブラウザーが提供するスポイトを使用できます。
関連項目:
Microsoft Edge |DevTools 94 の新機能
2021 年 11 月 12 日
カバー：
- Web でコンソール エラーを検索します。
- Visual Studio Code テーマを使用すると、ブレークポイント アイコンが表示されます。
- Visual Studio Code の DevTools 拡張機能には、最新のツール、テーマのサポート、役立つリンクが含まれています。 リモート ワークスペースへの JavaScript デバッガー接続。
更新: Microsoft Edge 131 以降では、Visual Studio Code テーマ機能が削除され、そのようなテーマは既定のテーマに戻されます。
- Light+
- Dark+
関連項目:
- DevTools 94 の新機能
- キーボード ショートカット - キーボードを使用した DevTools の移動。
Microsoft Edge |DevTools 93 の新機能
2021 年 10 月 11 日
カバー：
- DevTools UI。
- デタッチされた要素ツールを使用して DOM ノードのメモリ リークをデバッグします。
- 表示言語を変更します。
- CSS イン JS ライブラリの [要素 ] ツールの [スタイル ] ウィンドウで CSS 宣言をコピーします。
- User-Agent クライアント ヒントのカスタマイズが容易になりました。
- スクリーン リーダーは、ツール バーとコンソールに表示されるエラー、警告、および問題を読み上 げる。
- ネットワーク ツールで PowerShell としてコピーすると、Cookie が含まれます。
- Visual Studio Code デバッガーは、VS Code 用 DevTools 拡張機能と統合されます。
関連項目:
Microsoft Edge |プラットフォームの状態
2021 年 5 月 25 日
Microsoft Edge は、開発者向けの魅力的で一貫性のあるプラットフォームとツールを提供します。 従来のブラウザーのサポートが段階的に終了するにつれて、Windows 10で Microsoft からサポートされる唯一のブラウザーは間もなく Edge になります。 Edge プラットフォーム、ツール、および Web アプリ全体の最新の情報について説明します。
カバー：
- 委任されたインク 証跡。
- 開発者向けの新しい Web 機能。
- OS ログインで実行します。
- VS Code 用の Microsoft Edge ツール。
関連項目:
- Windows 10でのインターネット エクスプローラーの将来は、Microsoft Edge - IE モードです。
- FastTrack で Microsoft Edge を採用する
- "Microsoft Edge: プラットフォームの状態": セッション リソース
Ignite |2021 年 3 月 |Web Appsストーリーの火付け
2021 年 3 月 2 日
プログレッシブ 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 開発、テスト、自動化を容易にするのに役立ちます。 ツールとアプリケーションのアクセシビリティに優先順位を付ける方法と、他のユーザーが同じ操作を行えるように支援する方法について説明します。
カバー：
- VS Code 用 DevTools 拡張機能。
- クロスブラウザーテストと自動化。 Docker コンテナーを使用した Selenium、WebDriver、Puppeteer、Playwright、CI/CD。
- Chromium ブラウザー エンジンでのコラボレーション。 投稿する方法。
- 開発者ツールのローカライズされた UI。
- 開発者ツールのアクセシビリティ。
関連項目:
関連項目
YouTube:
-
YouTube の Microsoft Edge (@MSFTEdge) チャネル
- 開発者 - プレイリスト。
- DevTools の新機能 - プレイリスト。
- 拡張機能 - プレイリスト。
- WebView2 アプリケーションのビルド、デプロイ、管理 - 2021 年 3 月 2 日。