Microsoft Edge DevTools ドキュメント

Microsoft Edge での DevTools を使用した開発。

DevTools をお使いになる前に

作業の開始

• DevTools の概要
• DevTools の配置を変更する (Undock、Dock to bottom、Dock to left)
• コマンド メニューでコマンドを実行する
• コンソールの概要

新着情報

• Microsoft Edge DevTools の新機能
• Microsoft Edge DevTools チームに問い合わせる

DevTools のカスタマイズ

作業の開始

• DevTools のカスタマイズ

新着情報

• Microsoft Edge DevTools の試験的機能

攻略ガイド

• DevTools 言語設定の変更
• キーボード ショートカットのカスタマイズ

Web プロジェクトのデバッグ

クイックスタート

• [検査] ツールを使用してページを分析する

チュートリアル

• CSS の表示と変更を開始する
• DOM の表示と変更を開始する

攻略ガイド

• 問題ツールを使用して問題を検索して修正する
• 3D ビュー ツールを使用して、Web ページ レイヤー、z-index、および DOM を移動する
• アニメーションの検査
• プログレッシブ Web アプリ (PWA) をデバッグする
• ネットワーク アクティビティの検査

エミュレーションとテスト

攻略ガイド

• モバイル デバイスをエミュレートする (デバイス エミュレーション)
• アクセシビリティ テスト機能
• レンダリングされたページで暗いスキームまたは明るいスキームをエミュレートする
• ソース オーダー ビューアーを使用してキーボードのサポートをテストする
• 印刷プレビュー モードの強制
• 視覚障碍をエミュレートする
• モーション削減のシミュレーション

JavaScript とパフォーマンス

攻略ガイド

• コンソールで JavaScript を実行する
• コンソールで報告される JavaScript エラーを修正します
• ソース ツールの概要
• JavaScript のデバッグ機能
• カバレッジ ツールを使用して、使用されていない JavaScript コードと CSS コードを検索する
• メモリの問題を修正する
• デタッチされた要素ツールを使用して DOM メモリ リークをデバッグする
• セキュリティ ツールを使用してセキュリティの問題を理解する
• パフォーマンスに関する一般的な問題のトラブルシューティング

リファレンス

リファレンス

• キーボード ショートカット
• CSS 機能リファレンス
• コンソール機能リファレンス
• コンソール オブジェクト API リファレンス

攻略ガイド

• パフォーマンス機能のリファレンス

sample

• DevTools のサンプル コード

Microsoft Edge IDE の統合

概要

• Microsoft Edge IDE の統合
• Visual Studio Code で Microsoft Edge をデバッグする

攻略ガイド

• Visual Studio Code 向け Microsoft Edge DevTools 拡張機能。
• Visual Studio Code でソース ファイルを開く
• Web 開発用 Visual Studio