Visual Studio Code 向け Microsoft Edge DevTools 拡張機能

Visual Studio Code 用の Microsoft Edge DevTools 拡張機能を使用すると、Visual Studio Code 内から直接、Microsoft Edge DevTools と、デバイス エミュレーションを含む埋め込みバージョンの Microsoft Edge ブラウザーを使用できます。 DevTools 拡張機能には、Visual Studio Code 内から Microsoft Edge ブラウザーの DevTools と同じツールの多くが用意されています。

Visual Studio Code での Microsoft Edge 開発者ツールとブラウザー プレビュー

Visual Studio Code は、Windows、Linux、macOS 用の軽量かつ強力なソース コード エディターです。 Visual Studio Code は、Web 開発用の強力な機能を備えた完全な IDE (統合開発環境) です。 Visual Studio Code には JavaScript、TypeScript、Node.js のサポートが組み込まれているため、特にこの DevTools 拡張機能を使用すると、Web 開発者にとって優れたツールです。

Visual Studio Code 用の DevTools 拡張機能を使用すると、次のことが可能になります。

  • Visual Studio Code を離れることなく、Web ページを開発し、DevTools を使用できます。 この拡張機能は、ブラウザー ウィンドウ内で Web ページ開発に DevTools を使用する代わりに使用できます。

  • 開発中にさまざまなビューポート サイズで Web ページを表示するなど、デバイスをエミュレートします。

  • Visual Studio Code 内から Web ページのアクセシビリティをテストします。

  • CSS と SASS をライブ編集し、実際のソース ファイルを編集しながら、変更がブラウザー インスタンスにすぐに反映されるのを確認します。 CSS ミラー編集を使用すると、.css ファイルに変更を保存するかどうかを制御できます。 DevTools では .css ファイルを開いて編集しますが、ファイルは自動的に保存されないため、[要素] ツールの [スタイル] タブで行った変更を保存するかどうかを決定および制御できます。

比較したアプローチ

Visual Studio Code 用の DevTools 拡張機能は、DevTools を使用してローカル ファイルを変更するためのいくつかの異なる方法の 1 つです。

方法 利点と欠点 記事
ブラウザー > DevTools >要素 ツール DevTools からソース ファイルに変更を手動でコピーする必要があります。 要素ツールを使用して HTML と CSS を検査、編集、デバッグする
ブラウザー > DevTools >ソース ツール >ワークスペースを定義するためのワークスペース タブ 常に変更を保存するため、実験が妨げられる可能性があります DevTools を使用してファイルを編集し、ソース ツールで変更をディスクに保存するには、ローカル ワークスペースを選択します
ブラウザー > DevTools >設定>実験>Visual Studio Code でソース ファイルを開く 常に変更を保存するため、実験が妨げられる可能性があります Visual Studio Code でソース ファイルを開く
Visual Studio Code 向け Microsoft Edge DevTools 拡張機能 CSS ソース ファイルを自動的に開いて編集しますが、ファイルを自動的に保存するわけではないため、編集内容を保存するかどうかを選択できます。 現在の記事。

2 方向編集

変更は、次のように、開いているフォルダー、[ Edge DevTools ] タブ、および Edge DevTools: [ブラウザー ] タブのソース ファイル間に反映されます。

CSS

CSS ミラー編集を通じて、Edge DevTools タブで CSS を変更できます。CSS は、.html または .css ソース ファイルで自動的に変更され、Edge DevTools: [ブラウザー] タブにも反映されます。 DevTools を使用すると、変更を保存するかどうかを決定して、実験することができます。

.css または .html ソース ファイルで CSS を変更し、変更を保存してから、Edge DevTools: [ブラウザー] タブで Web ページを再読み込みできます。このタブでは、[Edge DevTools] タブも更新されます。

HTML

[ Edge DevTools ] タブで DOM ツリーを編集し ( <h2>Success!</h2> を <h2>CSS Success!</h2> に変更するなど)、 Enter キーを押し、[ Edge DevTools: ブラウザー ] タブを更新して変更を確認できます。 ( .html ソース ファイルが自動的に編集されることはありません)。

.html ソース ファイルで HTML を変更し、変更を保存してから、Edge DevTools: [ブラウザー] タブで Web ページを再読み込みできます。これにより、[Edge DevTools] タブも更新されます。

開発者ツールでサポートされるタスク

Visual Studio Code 用の DevTools 拡張機能を使用すると、次のことが可能になります:

タスク 記事
プロジェクトの DevTools を使用して、新しいブラウザー インスタンスを開始します。 DevTools と DevTools ブラウザーを開く
さまざまなデバイスをエミュレートし、さまざまな表示モードでプロジェクトを確認します。 デバイス エミュレーション
要素 ツールを使用して 、ページのランタイム DOM 構造とレイアウトを表示します。 要素ツールからソース ファイルを開く
プロジェクトのソース ファイルのライブ プレビューとライブ変更を使用して、プロジェクトの CSS スタイルを分析および変更します。 スタイル ツール内から .css ファイルを更新する (CSS ミラー編集)
ネットワーク ツールを使用してサイト トラフィックを分析します。 ネットワーク ツールの統合
ログ情報を記録し、JavaScript を試してみて、 コンソール ツールを使用して Window/DOM にアクセスします。 本体の統合
アプリケーション ツールを使用して、ストレージ ワーカーとサービス ワーカーを検査します。 アプリケーション ツールの統合
Visual Studio Code デバッグ ワークフローで拡張機能を使用します。 Visual Studio Code デバッグとの統合

DevTools 拡張機能のツールの概要

Visual Studio Code の DevTools 拡張機能には、次のツールが含まれています。 次の記事は、Visual Studio Code の DevTools 拡張機能に焦点を当てているのではなく、Microsoft Edge ブラウザーの DevTools 向けです。

ツール 用途 記事
要素 ツール HTML と CSS を検査、編集、デバッグします。 ブラウザーで変更をライブ表示しながら、ツールで編集できます。 DOM ツリーを使用して HTML をデバッグし、Web ページの CSS を検査して作業します。 要素ツールを使用して HTML と CSS を検査、編集、デバッグする
コンソール ツール DevTools 内のインテリジェントでリッチなコマンド ライン。 他のツールと併用するのに最適なコンパニオン ツールです。 JavaScript を使用して、スクリプト機能を書き、現在の Web ページを検査し、現在の Web ページを操作する強力な方法を提供します。 本体の概要
ネットワーク ツール ネットワーク ツールを使用して、リソースが期待どおりにダウンロードまたはアップロードされていることを確認します。 HTTP ヘッダー、コンテンツ、サイズなど、個々のリソースのプロパティを調べます。 ネットワーク アクティビティの検査
アプリケーション ツール アプリケーション ツールを使用して、マニフェスト、サービス ワーカー、ローカル ストレージ、Cookie、キャッシュ ストレージ、バックグラウンド サービスなど、Web アプリ ページのストレージを管理します。 ストレージを管理するためのアプリケーション ツール
問題 ツール 問題ツールは、現在の Web ページを自動的に分析し、種類ごとにグループ化された問題を報告し、問題の説明と解決に役立つドキュメントを提供します。 問題ツールを使用して問題を検索して修正する
ネットワーク条件 ツール ネットワーク条件ツールを使用して、ブラウザー キャッシュを無効にし、ネットワーク調整を設定し、ユーザー エージェント文字列を設定し、Content-Encodings (deflate、gzip、br など) を設定します。 ネットワーク条件ツール
ネットワーク要求ブロック ツール ネットワーク要求ブロック ツールを使用して、指定された URL パターンに対するネットワーク要求のブロックをテストし、Web ページの動作を確認します。 ネットワーク要求ブロック ツール
検査 ツール 検査ツールを使用して、レンダリングされた Web ページ内のアイテムに関する情報を表示します。 検査ツールがアクティブな場合は、Web ページ内のアイテムにカーソルを合わせると、DevTools によって Web ページに情報オーバーレイとグリッド強調表示が追加されます。 [検査] ツールを使用してページを分析する
デバイス エミュレーション デバイス シミュレーション モードまたはデバイス モードとも呼ばれるデバイス エミュレーション ツールを使用して、モバイル デバイスでのページの表示と応答を概算します。 モバイル デバイスをエミュレートする (デバイス エミュレーション)

Microsoft Edge ブラウザー バージョンの DevTools にあるすべてのツールの一覧については、「 ツールの一覧について」を参照してください。

関連項目

外部ページ:

  • 最終更新: