Web 開発用 Visual Studio

  • [アーティクル]

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

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

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

Visual Studio をまだ使用していない場合は、[Visual Studio の ダウンロード] に移動してダウンロードします。

現在、Visual Studio 2019 では、ASP.NET Framework と ASP.NET Core アプリの Microsoft Edge での JavaScript のデバッグがサポートされています。 Visual Studio を使用して Microsoft Edge をデバッグするには、次の手順を実行します。

Microsoft Edge を起動する

Visual Studio を使用して次の操作を行うには、このセクションの手順に従います。

  • ASP.NET と ASP.NET Core アプリをビルドします。
  • Web サーバーを起動します。
  • Microsoft Edge を起動します。
  • Visual Studio デバッガーを 1 つのボタンで接続します。

簡略化されたワークフローを使用すると、Microsoft Edge で実行される JavaScript を IDE から直接デバッグできます。

新しい ASP.NET Core Web アプリを作成する

まず、次のように新しい ASP.NET Core Web アプリを作成します。

  1. Visual Studio 2019 を開き、[ 新しいプロジェクトの作成] を選択します。

  2. 次の画面の検索ボックスに「react」と入力 します。

  3. テンプレートの一覧から [React.jsを含む ASP.NET Core] を選択し、[次へ] を選択します。

React.jsを使用して新しい ASP.NET Core Web アプリを作成する

このReact.js テンプレートでは、React.jsを ASP.NET Core アプリと統合する方法を指定します。

これで、ASP.NET Core Web アプリのプロジェクトが作成されました。

Visual Studio から Microsoft Edge を起動する

次に、次のように、Visual Studio で ASP.NET Core Web アプリ プロジェクトを実行してデバッグします。

  1. を開きます ClientApp/src/components/Counter.js。

  2. 緑色の [再生] ボタンの横にあるドロップダウン リストを選択し、IIS Expressします。

    緑色の [再生] ボタンの横にあるドロップダウン リストとIIS Express

  3. [スクリプト デバッグが有効] を>選択します。

    Visual Studio でスクリプト デバッグを有効にする

  4. 同じドロップダウン リストで、Microsoft Edge Canary、Dev、Beta など、Visual Studio を起動する Microsoft Edge のプレビュー チャネルである [Web ブラウザー> ] を選択します。 Microsoft Edge プレビュー チャネルのいずれかをまだ使用していない場合は、[Microsoft Edge Insider Channels のダウンロード ] に移動してダウンロードします。

    Visual Studio を起動する Microsoft Edge のプレビュー チャネルを選択します

  5. 緑色の [再生 ] ボタンを選択します。 Visual Studio でアプリをビルドし、Web サーバーを起動し、Microsoft Edge を起動し、 でlaunchSettings.json指定されているポートまたは に移動https://localhost:44362/します。

    Visual Studio から Microsoft Edge が起動する

次の手順に進みます。

Microsoft Edge で実行されている JavaScript コードをデバッグする

  1. Visual Studio に戻ってブレークポイントを設定します。

  2. で Counter.js、行の横にある余白を選択して、13 行目にブレークポイントを設定します。

    Visual Studio でブレークポイントを設定するには、Counter.jsの [行 13] の横にある余白を選択します

  3. Visual Studio が起動した Microsoft Edge のインスタンスに戻ります。

  4. Web ページの上部にあるナビゲーション メニューで [ カウンター ] を選択し、[ 増分] を選択します。

    ASP.NET Core Web アプリの [カウンター] ページ

  5. Visual Studio の JavaScript デバッガーは、 で設定したブレークポイントに Counter.jsヒットします。 Visual Studio では、Microsoft Edge で実行されている JavaScript のランタイムが一時停止され、スクリプトを 1 行ずつ実行できます。

Visual Studio が Microsoft Edge で実行されている JavaScript を一時停止する

上記の方法では、Visual Studio から Microsoft Edge を起動しました。 または、次に説明するように、既に実行されている Microsoft Edge のインスタンスに Visual Studio デバッガーをアタッチすることもできます。

この例は、Visual Studio で使用できる機能のほんの一部のデモでした。 Visual Studio 2019 の機能の詳細については、 Visual Studio のドキュメントを参照してください。

実行中の Microsoft Edge インスタンスに Visual Studio デバッガーをアタッチする

既に実行されている Microsoft Edge のインスタンスに Visual Studio デバッガーをアタッチするには:

  1. Microsoft Edge の実行中のインスタンスがないことを確認します。

  2. コマンド ラインから、次のコマンドを実行します。

    start msedge --remote-debugging-port=9222

  3. Visual Studio で、[プロセスへのアタッチのデバッグ>] または Ctrl + Alt + P を選択します。

    Visual Studio で [プロセスにアタッチする] > を選択する

  4. [ プロセスにアタッチ ] ダイアログで、[ 接続の種類 ] を Chrome devtools プロトコル Websocket (認証なし) に設定します。

  5. [ 接続先 ] テキスト ボックスに「」と入力 http://localhost:9222/ し、 Enter キーを押します。

  6. [ 使用可能なプロセス ] セクションに記載されている Microsoft Edge にある開いているタブの一覧を確認します。

    Visual Studio で [プロセスにアタッチ] ダイアログを構成する

  7. 一覧からデバッグするタブを選択し、[ アタッチ] を選択します。

  8. [コードの種類の選択] ダイアログで、JavaScript (Microsoft Edge - Chromium) を選択し、[OK] を選択します。

Visual Studio デバッガーが Microsoft Edge にアタッチされました。 JavaScript の実行を一時停止し、ブレークポイントを設定し、Visual Studio の [デバッグ出力] ウィンドウでステートメントを直接表示console.log()できます。

Visual Studio 用 Edge DevTools 拡張機能

Edge 開発者ツールを使用して、Visual Studio で ASP.NET プロジェクトをデバッグします。 Microsoft Visual Studio に Microsoft Edge 開発者ツールを埋め込んで、ASP.NET プロジェクトをライブでデバッグできます。 Microsoft Edge Developer Tools for Visual Studio をダウンロードします。

拡張機能を使用するには:

  1. Visual Studio 2022 と ASP.NET ワークロードがインストールされていることを確認します。

  2. 上記のページで説明されているように、既定のWeb Forms Designerとして Web Live プレビューを設定します。

  3. ASP.NET プロジェクトを開きます。

  4. [デザイン] ウィンドウでプロジェクトの Web ページを開きます。

  5. [デザイン] ウィンドウの左上にある [Open Edge DevTools] (Open Edge DevToolsアイコン) ボタンをクリックします。

Edge DevTools を開く ASP.NET プロジェクト

Edge DevTools for Visual Studio が開き、[ 要素 ] ツールが選択されています。

Visual Studio 用 Microsoft Edge 開発者ツール: DevTools の要素ツール

[ネットワーク] ツールも既定で開いています。

Visual Studio 用 Microsoft Edge 開発者ツール: DevTools のネットワーク ツール

検査ツール (検査ツール アイコン) と画面キャストの切り替え (画面キャストの切り替えアイコン) を使用できます。その他のツール (その他のツール アイコン) メニューには、問題、ネットワーク条件、ネットワーク要求ブロック ツールが用意されています。

ドッキングされていない Visual Studio の [Edge DevTools] ウィンドウ

以下も参照してください。

Microsoft Visual Studio チームと連絡を取る

Microsoft Visual Studio チームと Microsoft Edge チームは、Visual Studio での JavaScript の使用方法の詳細を確認したいと考えています。 フィードバックを送信するには、Visual Studio で [ フィードバックの送信 ] アイコンを選択するか、 をツイートします @VisualStudio and @EdgeDevTools。

Visual Studio の [フィードバックの送信] アイコン