Microsoft Edge DevTools for Visual Studio Code extensionMicrosoft Edge DevTools for Visual Studio Code extension

用途Use 此扩展以在 Microsoft Edge DevTools 中访问 Microsoft Visual Studio Code。this extension to access in Microsoft Edge DevTools inside Microsoft Visual Studio Code. 你有权访问 Microsoft Edge DevTools中的元素和网络工具。You have access to the Elements and Network tools in Microsoft Edge DevTools. 可以启动或附加到 Microsoft Edge 的实例。You may either launch or attach to an instance of Microsoft Edge. 连接后,可以显示运行时 HTML 结构、更改布局、修复样式设置问题以及检查网络流量。After you connect you may display the runtime HTML structure, alter the layout, fix styling issues, and inspect network traffic.

元素工具Elements tool

默认情况下,扩展将在唯一窗口中启动浏览器实例,并为你提供 Microsoft Edge DevTools 的元素功能。By default, the extension launches a browser instance in a unique window and gives you the Elements functionality of Microsoft Edge DevTools.

Microsoft Edge DevTools for Visual Studio在完整浏览器窗口中运行的代码

在扩展设置中,你可以启用更多功能,如无头模式和网络In the extension settings, you may enable more functionality like Headless Mode and Network.

在 (设置中启用) 无头模式和网络检查

无头模式Headless Mode

在无头模式下,此扩展不会启动完整的浏览器实例进行调试。In headless mode, this extension does not launch a full browser instance to debug. 它在后台运行实例。It runs an instance in the background. 你可能必须留在编辑器内并与嵌入的浏览器交互。You may have to stay inside the editor and interact with the embedded browser. 任务栏中不显示额外的浏览器图标。An extra browser icon is not be displayed in your task bar.

用于无Visual Studio运行的代码的 Microsoft Edge DevTools

备注

在 macOS 上,应打开无头模式作为首选模式。On macOS, you should turn on headless mode as your preferred mode. 使用无头模式应解决一个问题,如果窗口不可见,浏览器窗口将报告它 Not ActiveUsing headless mode should solve an issue where, if the window is not visible, the browser window reports that it is Not Active.

网络工具Network tool

如果还要检查应用程序的网络流量,请打开设置并打开"网络 " 选项卡。If you also want to inspect the network traffic of your application, open the settings and turn on the Network tab.

Microsoft Edge DevTools for Visual Studio 中的网络检查

从扩展启动 Microsoft EdgeLaunching Microsoft Edge From the extension

导航到活动栏中的 Microsoft Edge 工具Navigate to Microsoft Edge Tools in the Activity Bar. 旁边显示 "Microsoft Edge 工具: 目标", 旁边有一个为你的应用打开浏览器的加号。Next to where it says Microsoft Edge Tools: Targets, there is a plus sign that opens the browser for your app. 如果选择 "about:blank" 选项,则必须在浏览器中导航到 Web 应用,以在"代码"中的" 元素"Visual Studio中显示。If you choose the about:blank option, you must navigate to your web app in the browser for it to appear in the Elements panel in Visual Studio Code.

从调试视图启动 Microsoft EdgeLaunching Microsoft Edge from the Debug view

如果你习惯在代码中使用调试Visual Studio,请从它访问 Microsoft Edge DevTools。If you are accustomed to using the Debug view in Visual Studio Code, access Microsoft Edge DevTools from it.

  1. 在Visual Studio中,导航到"调试"视图In Visual Studio Code, navigate to the Debug view
    • Ctrl + Shift + D windows/Linux (Command + Shift + D macOS) 。Select Ctrl+Shift+D on Windows/Linux (Command+Shift+D on macOS).

备注

  1. 如果代码中没有任何配置Visual Studio,请完成以下操作之一。If you do not have any configurations in Visual Studio Code, complete one of the following actions.

    • 选择 F5Select F5.
    • 选择 "播放 (绿色) 按钮。Choose the Play (green) button.
  2. 在下拉列表中,选择 下拉列表 中的"边缘"。In the dropdown, choose Edge in the dropdown.

  3. launch.json 显示包含以下配置的文件。A launch.json file should be displayed that contains the following configuration.

    {
      "version": "0.2.0",
      "configurations": [
        {
          "name": "Launch Microsoft Edge and open the Edge DevTools",
          "request": "launch",
          "type": "vscode-edge-devtools.debug",
          "url": "http://localhost:8080"
        }
      ]
    }
    

加载正确的配置后,请完成以下操作。After you load the correct configuration, complete the following action.

  1. 若要 从代码Visual Studio 元素工具,请完成以下操作之一。To launch the Elements tool from Visual Studio Code, complete one of the following actions.
    • 选择 F5Select F5.
    • 选择 "播放 (绿色) 按钮。Choose the Play (green) button.

现在,您可以执行下列操作。Now, you may do the following actions.

  • 访问浏览器的屏幕视频。Access a screencast of your browser.
  • 检查页面上组件的 DOM 和样式。Inspect the DOM and the styling of the components on your page.

附加到 Microsoft EdgeAttaching to Microsoft Edge

若要打开浏览器并将该实例附加到Visual Studio代码,请完成以下步骤。To open a browser and attach the instance to Visual Studio Code, complete the following steps.

  1. 若要打开 Microsoft Edge (Chromium) 的实例,请复制并运行以下命令。To open an instance of Microsoft Edge (Chromium), copy and run the following command.

    start msedge --remote-debugging-port=9222
    
  2. 实例启动后,将以下代码段复制并粘贴到 launch.json 文件中。After the instance launches, copy and paste the following code snippet into your launch.json file.

    {
        "type": "vscode-edge-devtools.debug",
        "request": "attach",
        "name": "Attach to Microsoft Edge and open the developer tools",
        "url": "http://localhost:3000/",
        "webRoot": "${workspaceFolder}/out",
        "port": 9222
    }
    
  3. 在Visual Studio中,打开 调试 器下拉菜单,然后选择"附加到 Microsoft Edge",然后打开开发人员工具In Visual Studio Code, open the Debugger drop-down menu and choose Attach to Microsoft Edge and open the developer tools.

  4. 若要 从代码Visual Studio 元素工具,请完成以下操作之一。To launch the Elements tool from Visual Studio Code, complete one of the following actions.

    • 选择 F5Select F5.
    • 选择 "播放 (绿色) 按钮。Choose the Play (green) button.

现在,您可以执行下列操作。Now, you may do the following actions.

  • 访问浏览器的屏幕视频。Access a screencast of your browser.
  • 检查页面上组件的 DOM 和样式。Inspect the DOM and the styling of the components on your page.

联系 Microsoft Edge 开发人员工具Visual Studio代码扩展团队Getting in touch with the Microsoft Edge DevTools for Visual Studio Code extension team

通过针对扩展 GitHub 存储库 提交问题来发送反馈。Send your feedback by filing an issue against the GitHub repo of the extension.

如果你想要帮助创建If you want to help make 此扩展效果更好,欢迎你做出贡献。this extension better, your contributions are welcome. 在扩展的 GitHub 存储库中查找入门所需的一切。Find everything you need to get started in the GitHub repo of the extension.