Microsoft Edge IDE の統合

  • [アーティクル]

Microsoft ツールのさまざまな機能は、Microsoft Edge、Visual Studio Code、Visual Studio を使用して開発を統合し、Microsoft Edge で完全な統合を使用して動作する製品、Web ページ、Web アプリを開発します。

Visual Studio Code 用 Microsoft Edge DevTools 拡張機能

Visual Studio Code 用の Microsoft Edge DevTools 拡張機能を使用すると、Visual Studio Code 内から Microsoft Edge ブラウザーの 要素 ツールと ネットワーク ツールを使用できます。

Visual Studio Code を離れずに、Microsoft Edge DevTools を使用してインスタンスにアタッチするか、Microsoft Edge のインスタンスを起動し、次の手順を実行します。

  • ランタイム HTML 構造を表示します。
  • Web ページのレイアウトを変更します。
  • CSS スタイルを変更し、スタイルの問題を修正します。
  • コンソール メッセージを読み取ります。
  • ネットワーク要求を表示します。

Visual Studio Code の Microsoft Edge DevTools 拡張機能に関するページを参照してください。

Visual Studio Code のオープン ソース ファイル

Visual Studio Code のオープン ソース ファイル実験では、Microsoft Edge DevTools を使用できますが、DevTools ソース ツールのコード エディターではなく、Visual Studio Code でファイルを編集できます。

この実験を使用するときに、Visual Studio Code を使用し、DevTools を使用して CSS ルールを変更する場合、DevTools のソース ツールでコード エディターを使用する必要はなくなりました。 Visual Studio Code でコード エディターを使用するだけです。 この実験を有効にすると、ローカル ファイルは別の処理を受け取ります。

「Visual Studio Code でソース ファイルを開く」を参照してください。

Visual Studio Code で Microsoft Edge をデバッグする

Visual Studio Code には、ブラウザーを起動したり、既に実行中のブラウザーにアタッチしたりできる Microsoft Edge 用の組み込みデバッガーが含まれています。

この組み込みデバッガーを使用すると、フロントエンドの JavaScript コードを 1 行ずつデバッグし、Visual Studio Code から直接ステートメントを確認 console.log() できます。

「Visual Studio Code で Microsoft Edge をデバッグする」を参照してください。

Visual Studio Code の Webhint 拡張機能

カスタマイズ可能なリンティング ツールである Webhint を使用して、次のようなサイトの機能を改善します。

  • アクセシビリティ。
  • パフォーマンス。
  • ブラウザー間の互換性。
  • PWA の互換性。
  • セキュリティ

webhint は、コードでベスト プラクティスと一般的なエラーを確認します。 HTML、CSS、JavaScript、TypeScript など、ファイル内の問題を特定して修正します。 ヒントはテキスト エディターに波線の下線として表示され、[ 問題 ] ウィンドウに要約されます。

メモ： 2022 年 4 月の時点で、Visual Studio Code の Webhint 拡張機能は維持されなくなりました。 Visual Studio Code の Microsoft Edge DevTools 拡張機能に関するページを参照してください。

Web 開発用の Visual Studio

Microsoft Visual Studio は、統合開発環境 (IDE) です。 これを使用して、Web アプリの編集、デバッグ、ビルド、発行を行います。 これは、Web 開発のさまざまな側面に使用できる機能豊富なプログラムです。

ほとんどの IDE で提供される標準のエディターとデバッガーに加えて、Visual Studio には、開発プロセスを容易にする次のような機能が含まれています。

  • コンパイラ。
  • コード補完ツール。
  • グラフィカル デザイナー。
  • さらに多くの機能があります。

Web 開発については、「Visual Studio」を参照してください。