Microsoft Edge VS コード拡張用デバッガー

Microsoft Edge VS のコード拡張用デバッガーを使って、フロントエンド JavaScript コードを1行ずつデバッグし、 console.log() Visual Studio コードからステートメントを直接参照します。

Edge 用デバッガーと作業中のコード拡張機能

Edge 用デバッガーと作業中のコード拡張機能

Microsoft Edge を起動する

Ctrl + Shift + D アクティビティバーの (Windows または macOS 上の Command + Shift + D ) Activity Barデバッグビューに移動します。 VS コードにまだ構成がない場合 F5 は、Windows または macOS を押すか、緑色の再生ボタンを選択します。 ドロップダウンで [エッジ] を選択します。 launch.json次の構成のファイルが表示されます。

{
    "version": "0.2.0",
    "configurations": [
        {
            "type": "edge",
            "request": "launch",
            "name": "Launch Edge against localhost",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

F5Windows または macOS を押すか、緑色の「再生」ボタンをもう一度選択すると、vs コードによって Microsoft Edge \ (EdgeHTML ) が起動し、vs コードから直接ポートで実行している web プロジェクトをデバッグでき 8080 ます。

Microsoft Edge (Chromium)

Microsoft edge \ (Chromium ) を起動するには、microsoft edge \ (EdgeHTML ) ではなく、microsoft edge の次のバージョン (microsoft edge \ (Chromium ) を起動したいバージョンの microsoft edge version \ () を使って、既存の構成に属性を追加するだけ dev beta canary です。 以下の構成では、Microsoft Edge \ (Chromium) のカナリアバージョンが起動されます。

{
    "type": "edge",
    "request": "launch",
    "version": "canary",
    "name": "Launch Edge against localhost",
    "url": "http://localhost:8080",
    "webRoot": "${workspaceFolder}"
}

Microsoft Edge へのアタッチ

Microsoft Edge \ (Chromium ) に VS コードをアタッチします。 ターミナルから次のコマンドを実行します。

start msedge --remote-debugging-port=9222

以下の構成をファイルに追加し launch.json ます。

{
    "type": "edge",
    "request": "attach",
    "name": "Attach to Edge",
    "port": 9222
}

この構成を現在実行している場合、VS コードは Microsoft Edge \ (Chromium) にアタッチしてデバッグを開始します。

Microsoft Edge VS コード拡張チームの要素に連絡する

拡張機能のGitHub リポジトリ問題を整理して、フィードバックを送信します。 %temp%名前の付いたディレクトリの各実行に対して作成された debug adapter ログファイルを含めてください vscode-edge-debug2.txt 。 このファイルを問題のコメントにドラッグして、GitHub にアップロードします。

Microsoft Edge VS のコード拡張機能の向上に役立つように、投稿は歓迎されます。 拡張機能のGitHub リポジトリで始めるのに必要なものをすべて見つけます。