Visual StudioVisual Studio

Microsoft Visual Studio 是一个集成的开发环境 (IDE) 。Microsoft Visual Studio is an integrated development environment (IDE). 使用它编辑、调试、生成和发布 Web 应用。Use it to edit, debug, build, and publish your web apps. 它是一个功能丰富的程序,可用于 Web 开发的许多方面。It is a feature-rich program that may be used for many aspects of your web development. 在大部分 ID 提供的标准编辑器和调试器之上,Visual Studio包括以下功能来简化开发过程。Over and above the standard editor and debugger that most IDEs provide, Visual Studio includes the following features to ease your development process.

  • 编译器compilers
  • 代码完成工具code completion tools
  • 图形设计器graphical designers
  • 更多many more

如果尚未使用Visual Studio,请导航到" 下载Visual Studio 下载它。If you are not already using Visual Studio, navigate to Download Visual Studio to download it.

目前,Visual Studio 2019 支持在 Microsoft Edge 中为 ASP.NET Framework 和 ASP.NET Core 应用调试 JavaScript。Currently, Visual Studio 2019 supports debugging JavaScript in Microsoft Edge for your ASP.NET Framework and ASP.NET Core apps. 完成以下步骤以使用 Visual Studio调试 Microsoft Edge。Complete the following steps to use Visual Studio to debug Microsoft Edge.

启动 Microsoft EdgeLaunch Microsoft Edge

Visual Studio一个按钮完成以下工作流。Visual Studio completes the following workflow using a single button.

  1. 生成你的ASP.NET ASP.NET核心应用。Builds your ASP.NET and ASP.NET Core app.
  2. 启动 Web 服务器。Starts your web server.
  3. 启动 Microsoft Edge。Launches Microsoft Edge.
  4. 连接Visual Studio调试器。Connects the Visual Studio debugger.

简化的工作流允许你直接通过 IDE 调试在 Microsoft Edge 中运行的 JavaScript。The simplified workflow allows you to debug JavaScript that run in Microsoft Edge directly from your IDE.

创建新的核心ASP.NET Web 应用Create a new ASP.NET Core web app

打开Visual Studio 2019 并选择 "新建项目"。Open Visual Studio 2019 and choose Create a new project. 在下一个屏幕上,ASP.NET核心 Web 应用 > 下一步On the next screen, choose ASP.NET Core Web app > Next.

创建新的核心ASP.NET Web 应用

为新项目提供项目名称,然后选择"创建 "。Provide a Project name for your new project and choose Create. 对于示例,选择React.js模板, 然后选择"创建 "。For the purposes of the example, choose React.js as the template, and choose Create. React.js 模板指定如何将 React.js与 ASP.NET Core 应用集成。The React.js template specifies how to integrate React.js with an ASP.NET Core app.

从 Microsoft Edge Visual StudioLaunch Microsoft Edge from Visual Studio

创建项目后,打开 ClientApp/src/components/Counter.jsAfter you create your project, open ClientApp/src/components/Counter.js. 现在,若要Visual Studio调试 JavaScript,请选择绿色"播放"按钮和IIS Express 旁边的下拉列表。Now, to use Visual Studio to debug JavaScript, choose the dropdown next to the green Play button and IIS Express.

绿色播放按钮和 IIS Express 旁边的下拉列表

选择 "脚本调试 > 已启用"。Choose Script Debugging > Enabled.

打开脚本调试Visual Studio

在同一下拉列表中,>要 启动的 Microsoft Edge 预览频道(如 Microsoft Edge Canary、Dev 或 Beta)Visual Studio Web 浏览器。In the same dropdown, choose Web Browser > the preview channel of Microsoft Edge that you want Visual Studio to launch, such as Microsoft Edge Canary, Dev, or Beta. 如果尚未使用其中一个 Microsoft Edge 预览频道,请导航到"下载 Microsoft Edge 预览 体验成员频道"下载一个。If you are not already using one of the Microsoft Edge preview channels, navigate to Download Microsoft Edge Insider Channels to download one.

选择要启动的 Microsoft Edge Visual Studio频道

备注

如果选择 Microsoft Edge (EdgeHTML) ,Visual Studio启动它,而不是 Microsoft Edge (Chromium) 。If you choose Microsoft Edge (EdgeHTML), Visual Studio launches it instead of Microsoft Edge (Chromium). 安装Microsoft Edge的预览频道之一,或确保计算机上安装的 Microsoft Edge 版本是 Microsoft Edge (Chromium) ,而不是 Microsoft Edge (EdgeHTML) 。Install the one of the preview channels of Microsoft Edge or ensure that the version of Microsoft Edge installed on your machine is Microsoft Edge (Chromium) and not Microsoft Edge (EdgeHTML).

现在,Visual Studio配置正确,选择绿色"播放 " 按钮。Now that Visual Studio is correctly configured, choose the green Play button. Visual Studio生成应用、启动 Web 服务器、启动 Microsoft Edge,并导航到或指定 https://localhost:44362/ 任何端口 launchSettings.jsonVisual Studio builds your app, start the web server, launch Microsoft Edge, and navigate to https://localhost:44362/ or whatever port is specified in launchSettings.json.

Microsoft Edge 从 Visual Studio

调试在 Microsoft Edge 中运行的 JavaScriptDebug JavaScript running in Microsoft Edge

切换回Visual Studio。Switch back to Visual Studio. Counter.js 中,若要设置第 13 行上的断点,请选择线条旁边的装订线。In Counter.js, to set a breakpoint on Line 13, choose the gutter next to the line.

选择第 13 行在 Counter.js 旁的装订线以在 Visual Studio

现在切换回已启动的 Microsoft Edge Visual Studio实例。Now switch back to the instance of Microsoft Edge that Visual Studio launched. 网页左侧 的 NavMenu 中选择"计数器"。Choose on Counter in the NavMenu on the left of the webpage. 现在选择 "增量"。Now choose Increment.

核心 Web 应用中的ASP.NET页面

Visual Studio中的 JavaScript 调试程序会命中你设置的断点 Counter.jsThe JavaScript debugger in Visual Studio hits the breakpoint you set in Counter.js. Visual Studio现在暂停在 Microsoft Edge 中运行的 JavaScript 的运行时,你可以逐行执行脚本。Visual Studio now pauses the runtime of the JavaScript running in Microsoft Edge and you may step through the script line-by-line.

Visual Studio暂停在 Microsoft Edge 中运行的 JavaScript

该示例只是一个小型演示,演示了 Visual Studio 中Visual Studio。The example was just a minor demonstration of the functionality available in Visual Studio. 有关 2019 年 Visual Studio 中功能 Visual Studio文档For more information about the functionality in Visual Studio 2019, navigate to Visual Studio documentation.

附加到 Microsoft EdgeAttach to Microsoft Edge

以前,你必须从 microsoft Edge 启动Visual Studio。Previously, you had to launch Microsoft Edge from Visual Studio. 现在,你可以将Visual Studio调试器附加到已在运行的 Microsoft Edge 实例。Now, you are able to attach the Visual Studio debugger to an already running instance of Microsoft Edge.

首先,确保没有正在运行的 Microsoft Edge 实例。First, ensure that there are no running instances of Microsoft Edge. 现在,从命令行运行以下命令。Now, from your command line, run the following command.

start msedge –remote-debugging-port=9222

从Visual Studio,打开 "调试" 菜单,然后选择 "附加到进程" 或选择 Ctrl + Alt + PFrom Visual Studio, open the Debug menu and choose Attach to Process or select Ctrl+Alt+P.

选择附加到进程 Visual Studio

从"附加到进程"对话框中,将连接类型设置为Chrome devtools 协议 websocket, (身份验证) 。 From the Attach to Process dialog, set Connection type to Chrome devtools protocol websocket (no authentication). "连接目标 文本框"中, http://localhost:9222/ 键入并选择 EnterIn the Connecting target textbox, type http://localhost:9222/ and select Enter. 查看"附加到进程"对话框中列出的 Microsoft Edge 中已打开选项卡的列表。Review the list of open tabs you have in Microsoft Edge listed out in the Attach to Process dialog.

配置附加到进程对话框Visual Studio

Choose Select... > the checkbox next to JavaScript (Microsoft Edge – Chromium) .Choose Select... > the checkbox next to JavaScript (Microsoft Edge – Chromium). 若要添加选项卡、导航到新选项卡、关闭选项卡并显示"附加到进程"对话框中反映的更改,请选择"刷新" 按钮。To add tabs, navigate to new tabs, and close tabs and display the changes reflected in the Attach to Process dialog, choose the Refresh button. 选择要调试的选项卡,然后选择"附加 "。Choose the tab you want to debug and choose Attach.

现在Visual Studio调试器连接到 Microsoft Edge。The Visual Studio debugger is now attached to Microsoft Edge. 您可以暂停 JavaScript 的运行、设置断点,并直接在 Visual Studio 的" console.log() 调试输出"窗口中查看Visual Studio。You may pause the running of JavaScript, set breakpoints, and review console.log() statements directly in the Debug Output window in Visual Studio.

与 Microsoft Visual Studio团队联系Getting in touch with the Microsoft Visual Studio team

Microsoft Visual Studio 和 Microsoft Edge 团队希望了解有关如何在 Visual Studio 中使用 JavaScript。The Microsoft Visual Studio and Microsoft Edge teams wants to learn more about how you work with JavaScript in Visual Studio. 若要发送反馈,请选择"发送反馈"图标Visual Studio推@VisualStudio@EdgeDevTools。To send your feedback, choose the Send Feedback icon in Visual Studio or tweet @VisualStudio and @EdgeDevTools.

发送反馈图标Visual Studio