DevTools の新機能 (Microsoft Edge 96)

Microsoft Edge DevTools の最新機能と Microsoft Visual Studio Code および Visual Studio 用の Microsoft Edge DevTools 拡張機能をチェックするには、これらのお知らせをお読みください。

最新の状態を維持し、最新の DevTools 機能を入手するには、Insiders プレビュー バージョンの Microsoft Edge をダウンロードしてください。 Windows、Linux、macOS のいずれを使用している場合でも、既定の開発ブラウザーとして Canary (または別のプレビュー チャネル) を使用することを検討してください。 Microsoft Edge のベータ版、開発版、カナリア版は、Microsoft Edge の安定したリリースバージョンと並べて、個別のアプリとして実行されます。 「Microsoft Edge Insider Channels」を参照してください。

最新のお知らせについては、 Twitter の Microsoft Edge チームに従ってください。 DevTools に関する問題を報告したり、新機能を要求したりするには、 MicrosoftEdge/DevTools リポジトリに問題を提出します。

ビデオ: Microsoft Edge |DevTools 96 の新機能

利用可能な新しい DevTools UI (プレビュー)

Microsoft Edge DevTools チームは、新しい DevTools UI: フォーカス モードを試しています。 フォーカス モードを使用すると、よりモダンでシンプルなレイアウトで、煩雑さと煩雑さが軽減されます。 新しい アクティビティ バー を使用すると、画面領域をより効率的に使用するために、お気に入りのツールを水平方向または垂直方向のツール バーにピン留めできます。

Microsoft Edge バージョン 96 でこの新しい UI を試すには、[設定] () >[Experiments>Focus Mode] を選択します。

Microsoft Edge バージョン 96 以降、実験のチェック ボックスには、[ フォーカス モード ] と [DevTools ツールヒント] ではなく [フォーカス モード] というラベルが付けられます。

この UI はまだ開発中であり、Microsoft Edge の将来のバージョンで変更される可能性があります。 この新しい DevTools UI に関するフィードバックをお寄せください。 @EdgeDevToolsツイートしてフィードバックをお寄せください。 または、 フォーカス モード の実験をオンにした状態で、 アクティビティ バーの下部にある [ ヘルプ ] () >Feedback を選択して、[ フィードバックの送信 ] ウィンドウを表示します。

関連項目:

• DevTools: MSEdgeExplainers リポジトリのフォーカス モード UI。

本体は、上部と下部のパネルにもう一度表示できます

Microsoft Edge バージョン 87 以降、コンソール ツールを含め、上部と下部のパネル間で任意のツールを移動できました。 ただし、コンソール ツールを繰り返し移動するのは面倒だと開発者から聞きました。 Microsoft Edge バージョン 96 以降では、コンソール ツールの既定のエクスペリエンスが復元されているため、コンソール ツールを移動せずに、本体の全画面表示 (上部パネル) と分割画面ビュー (下部パネルにコンソールが表示) をすばやく切り替えることができます。

コンソールは、DevTools の下部にあるドロワー (クイック ビュー) で、別のツールと共に開くことができます。

上部パネルで [コンソール ] が選択されている場合、下部パネルが 本体を表示していた場合、下部パネルは自動的に最小化されます。

コンソール ツールを 1 つの場所でのみ開くことを許可する場合は、コンソールの動作を構成できます。

1. メイン ツール バーまたはドロワー ツール バーで、[コンソール] タブを右クリックし、[コンソールの構成] を選択します。 [設定>Preferences] ページが表示されます。

2. [コンソール] セクションで、パネルとドロワーメイン [コンソール] タブを表示する] チェック ボックスをオフにし、[閉じる (x)] をクリックします。

関連項目:

• [ツールの一覧について] のアクティビティ バー ツールとクイック ビュー ツール
• DevTools の新機能 (Microsoft Edge 87) の上部と下部のパネル間でツールを移動します。

Microsoft Edge DevTools Visual Studio Code 拡張機能

この拡張機能の一般的な情報については、「 Visual Studio Code 用 Microsoft Edge DevTools 拡張機能」を参照してください。

エディター内に Web プロジェクトを表示し、さまざまなデバイスをシミュレートする

Microsoft Edge DevTools for Visual Studio Code 拡張機能に、ドッキング可能なスクリーンキャストとデバイス エミュレーションが追加されました。

Visual Studio Code 内の専用タブに Web プロジェクトを表示したり、さまざまなデバイスをシミュレートしたりできます。

デバイス エミュレーションの詳細については、「 デバイスと状態エミュレーション」を参照してください。

ライブのインラインイシュー レポート

拡張機能では、ライブのインラインイシュー レポートも機能するようになりました。 Visual Studio Code では、別のツールで問題を見つける代わりに、ソース コードの問題が強調表示され、コードの入力中にレポートされます。

詳細については、「 インラインおよびライブイシュー分析」を参照してください。

ソース マップを読み込めなくなったときに、ソース ツールから通知されるようになりました

Microsoft Edge バージョン 96 では、 DevTools がソース マップを読み込むことができない場合に、ソース ツールによって UI にいくつかのインジケーターが表示されるようになりました。 [ソース] ツールの [ナビゲーター] ウィンドウの [ページ] タブで、DevTools がソースマップを読み込めないファイルには、ファイル アイコンの代わりに警告アイコンが表示されます。

警告アイコンが表示されたファイルを選択すると、DevTools がサーバーからソースマップを正しくフェッチできなかったか、ソースマップを正しく解析できなかったことを示す情報バーが表示されたファイルがソース ツールで開きます。

情報バーから、[問題 で開く ] ボタンを選択すると、問題の詳細を確認できます。 その後、 問題 ツールが DevTools の下部にある ドロワー (現在の クイック ビュー ) で開き、問題を解決し、DevTools でソースマップを正しく読み込む方法に関する情報を提供します。

ソース マップに関する情報バーで [ソース ] ツールが乱雑にならないようにするには、[ もう一度表示しない ] ボタンを選択します。 ソースマップに関連する問題が問題ツールを煩雑にしないようにするには、[問題] ツールの [サードパーティの問題を含める] チェック ボックスをオフにします。

関連項目:

• デバッグのために、処理されたコードを元のソース コードにマップする

Visual Studio Code でソース ファイルを開くと、ソース ツールとの統合が改善されました

以前のバージョンの Microsoft Edge では、 Visual Studio Code の実験でオープン ソース ファイル をオンにすると、DevTools で ソース ツールを既に使用していたときに予期しない動作が発生していました。 ブレークポイントを設定すると、Visual Studio Code またはドキュメントに移動して実験を正しく構成できます。

Microsoft Edge バージョン 96 では、 Visual Studio Code のオープン ソース ファイル の実験が ソース ツールとより適切に統合されるようになりました。

• ソース ツールが開いている場合、Visual Studio Code 実験でオープン ソース ファイルを有効にした場合、ブレークポイントを設定するか、ファイルを開くと、Visual Studio Code または実験を正しく構成するためのドキュメントに指示するのではなく、ソース ツールが開きます。

  

• 以前のバージョンの Microsoft Edge と同様に、 ソース ツールが DevTools で開いていない場合、 Visual Studio Code の実験でオープン ソース ファイル を有効にした場合、ブレークポイントを設定するか、 ソース ツール以外のツールからファイルを開くと、Visual Studio Code でファイルが開きます。

関連項目:

• Visual Studio Code でソース ファイルを開く - DevTools と Visual Studio Code の統合方法。

DevTools UI でドロップダウン三角形アイコンを選択すると、メニューが開くようになりました

以前のバージョンの Microsoft Edge DevTools では、ドロップダウン メニューの横にある三角形アイコンを選択しても、ドロップダウン メニューは表示されませんでした。 ドロップダウン メニューを開くには、現在選択されているメニュー項目を三角形アイコンの左側 ( 調整なしなど) をクリックする必要がありました。

Microsoft Edge バージョン 96 では、この問題は修正されました。 DevTools でドロップダウン メニューの三角形アイコンを選択すると、ドロップダウン メニューが開きます。

この作品は 、クリエイティブ・コモンズ属性4.0国際ライセンスに基づきライセンスされています。