次の方法で共有

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 の組み込みサポートが含まれているため、Web 開発者にとっては、特にこの DevTools 拡張機能を使用した優れたツールです。

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 >Elements ツール DevTools からソース ファイルに変更を手動でコピーする必要があります。 要素ツールを使用して HTML と CSS を検査、編集、デバッグする
ブラウザー > DevTools >Sources ツール >Filesystem タブを使用してワークスペースを定義する 常に変更を保存します。これは実験を推奨しない可能性があります [ファイル システム] タブを使用してソース ツールのローカル ワークスペースを定義する概要
ブラウザー > DevTools >Settings>Experiments>Visual Studio Code でソース ファイルを開く 常に変更を保存します。これは実験を推奨しない可能性があります 実験 >Visual Studio Code でソース ファイルを開きます。
Visual Studio Code 用 Microsoft Edge DevTools 拡張機能 CSS ソース ファイルを自動的に開いて編集しますが、ファイルは自動的に保存されないため、編集内容を保存するかどうかを選択できます。 現在の記事。

2 方向編集

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

CSS

CSS ミラー編集を使用すると、[ Edge DevTools ] タブで 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 アプリ ページのストレージを管理します。 ストレージを管理するためのアプリケーション ツール
問題 ツール Issue ツールは、現在の Web ページを自動的に分析し、種類別にグループ化された問題を報告し、問題の説明と解決に役立つドキュメントを提供します。 問題ツールを使用して問題を見つけて修正する
ネットワーク条件 ツール [ネットワーク条件] ツールを使用して、ブラウザー キャッシュを無効にし、ネットワーク調整を設定し、ユーザー エージェント文字列を設定し、deflate、gzip、br などの Content-Encodings を設定します。 ネットワーク条件ツール
ネットワーク要求ブロック ツール ネットワーク要求ブロック ツールを使用して、指定された URL パターンに対するブロックネットワーク要求をテストし、Web ページの動作を確認します。 ネットワーク要求ブロック ツール
検査 ツール 検査ツールを使用して、レンダリングされた Web ページ内のアイテムに関する情報を表示します。 Inspect ツールがアクティブな場合は、Web ページ内の項目にカーソルを合わせると、DevTools によって Web ページに情報オーバーレイとグリッドの強調表示が追加されます。 検査ツールを使用してページを分析する
デバイス エミュレーション デバイス エミュレーション ツール (デバイス シミュレーション モードまたはデバイス モードとも呼ばれます) を使用して、モバイル デバイスでのページの外観と応答を概算します。 モバイル デバイスをエミュレートする (デバイス エミュレーション)

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

関連項目

外部ページ: