可以使用 Visual Studio 调试 JavaScript 和 TypeScript 代码。 可以命中断点、附加调试器、检查变量、查看调用堆栈以及使用其他调试功能。
Tip
如果尚未安装 Visual Studio，请转到 Visual Studio 下载 页免费安装。
配置调试
对于 Visual Studio 2022 中的 .esproj 项目，Visual Studio Code 使用 launch.json 文件来配置和自定义调试器。 launch.json 是调试器配置文件。
Visual Studio 仅将调试器附加到用户代码。 对于 .esproj 项目，可以使用 launch.json中的 skipFiles 设置在 Visual Studio 中配置用户代码（也称为 “仅我的代码” 设置）。 这与 VS Code 中的 launch.json 设置相同。 有关 skipFiles 和其他调试器配置选项的详细信息，请参阅 跳过不感兴趣的代码 和 启动配置属性。
调试服务器端脚本
在 Visual Studio 中打开项目，然后打开服务器端 JavaScript 文件（例如“server.js”），单击滚动条槽以设置断点：
断点是可靠调试的最基本且必不可少的功能。 断点指示 Visual Studio 应暂停正在运行的代码的位置，以便可以查看变量的值或内存行为，或者代码分支是否正在运行。
若要运行应用，请按 F5（调试>启动调试）。
调试器在设置的断点处暂停（IDE 突出显示黄色背景中的语句）。 现在，可使用调试程序窗口（例如“局部变量”和“监视”窗口），通过将鼠标悬停在当前范围内的变量上来检查应用的状态。
按 F5 继续应用。
如果要使用 Chrome 开发人员工具，请按 Chrome 浏览器中 F12。 使用这些工具，可以使用 JavaScript 控制台检查 DOM 或与应用交互。
调试客户端脚本
Visual Studio 仅对 Chrome 和 Microsoft Edge 提供客户端调试支持。 在某些情况下，调试器会自动命中 JavaScript 和 TypeScript 代码中以及 HTML 文件的嵌入脚本中的断点。
若要在 ASP.NET 应用中调试客户端脚本，请打开“工具>选项”窗格并展开“所有设置>>”部分。 选择 “为 ASP.NET（Chrome 和 Edge）启用 JavaScript 调试 ”选项。
如果想要使用 Chrome 开发人员工具或 F12 Tools for Microsoft Edge 调试客户端脚本，则应禁用此设置。
有关详细信息，请参阅 Google Chrome 的这篇博客文章。 若要在 ASP.NET Core 中调试 TypeScript，请参阅 将 TypeScript 添加到现有 ASP.NET Core 应用。
若要在 ASP.NET 应用中调试客户端脚本，请打开 “工具>选项 ”对话框并展开 “调试>常规 ”部分。 选择 “为 ASP.NET（Chrome、Edge 和 IE）启用 JavaScript 调试 ”选项，然后选择“ 确定”。
如果想要使用 Chrome 开发人员工具或 F12 Tools for Microsoft Edge 调试客户端脚本，则应禁用此设置。
有关详细信息，请参阅 Google Chrome 的这篇博客文章。 若要在 ASP.NET Core 中调试 TypeScript，请参阅 将 TypeScript 添加到现有 ASP.NET Core 应用。
- 对于 Visual Studio 2022 中的 .esproj 项目，你可以使用标准调试方法调试客户端脚本以命中断点。 若要配置调试，可以修改与 VS Code 中相同的 launch.json 设置。 有关调试器配置选项的详细信息，请参阅 启动配置属性。
Note
对于 ASP.NET 和 ASP.NET Core，不支持调试 .CSHTML 文件中的嵌入脚本。 JavaScript 代码必须位于单独的文件中才能启用调试。
准备应用以进行调试
如果源是通过 TypeScript 或 Babel 等转译器缩小或创建的，请使用源映射获得最佳调试体验。 甚至可以将调试器附加到正在运行的客户端脚本，而无需源映射。 但是，你可能只能在压缩或转译的文件中设置和触发断点，而不是在源文件中。 例如，在 Vue.js 应用中，缩小后的脚本被作为字符串传递给 eval 语句，如果不使用源映射，就无法使用 Visual Studio 调试器逐步调试这段代码。 对于复杂的调试方案，你可能希望改用 Chrome 开发人员工具或 F12 Tools for Microsoft Edge。
手动配置浏览器进行调试
在 Visual Studio 2022 中，本节中所述的过程仅适用于 ASP.NET 和 ASP.NET Core 应用程序。 仅在需要自定义浏览器设置的不常见方案中才需要它。 在 .esproj 项目中，浏览器默认配置为调试。
对于此方案，请使用 Microsoft Edge 或 Chrome。
关闭目标浏览器的所有窗口，Microsoft Edge 或 Chrome 实例。
其他浏览器实例可能会阻止浏览器在启用调试的情况下打开。 （浏览器扩展可能正在运行并截获完整调试模式，因此可能需要打开任务管理器来查找和关闭 Chrome 或 Edge 的意外实例。）
为了获得最佳效果，请关闭 Chrome 的所有实例，即使你使用的是 Microsoft Edge。 这两个浏览器都使用相同的 chromium 代码库。
启动浏览器并启用调试。
从 Visual Studio 2019 开始，可以在浏览器启动时设置
--remote-debugging-port=9222标志，方法是从“调试”工具栏选择“浏览方式...”>。
如果在“调试”工具栏中看不到“浏览方式...”命令，请选择其他浏览器，然后重试。
在“浏览方式”对话框中，选择“添加”，然后在“参数”字段中设置标志。 为浏览器使用不同的友好名称，例如 Edge 调试模式 或 Chrome 调试模式。 有关详细信息，请参阅 发行说明。
选择浏览以在调试模式下使用浏览器启动应用。
或者，从 Windows “开始”按钮打开 运行 命令（右键单击并选择 运行），然后输入以下命令：
msedge --remote-debugging-port=9222or,
chrome.exe --remote-debugging-port=9222这会启动浏览器并启用调试。
应用尚未运行，因此你将获得一个空的浏览器页面。 （如果使用“运行”命令启动浏览器，则需要粘贴应用实例的正确 URL。
将调试器附加到客户端脚本
在某些情况下，可能需要将调试器附加到正在运行的应用。
若要从 Visual Studio 附加调试器并在客户端代码中命中断点，它需协助标识正确的进程。 下面是启用它的一种方法。
确保应用在调试模式下的浏览器中运行，如前一部分所述。
如果使用友好名称创建了浏览器配置，请选择该配置作为调试目标，然后按 Ctrl+F5（调试>启动而不调试）在浏览器中运行应用。
切换到 Visual Studio，然后在源代码中设置断点，该断点可能是 JavaScript 文件、TypeScript 文件或 JSX 文件。 （在允许断点的代码行中设置断点，例如 return 语句或 var 声明）。
若要在转译文件中查找特定代码，请使用 Ctrl+F（编辑>查找和替换>快速查找）。
对于客户端代码，若要在 TypeScript 文件中命中断点，.vue 或 JSX 文件通常需要使用源映射。 必须正确配置源映射以支持 Visual Studio 中的调试。
选择“调试”>“附加到进程”。
Tip
从 Visual Studio 2017 开始，首次通过这些步骤附加到进程后，可选择“调试”>“重新附加到进程”，快速重新附加到同一进程。
在附加到进程对话框中，选择 JavaScript 和 TypeScript（Chrome 开发工具/V8 检查器）作为连接类型。
调试器目标（如 http://localhost:9222）应显示在 连接目标 字段中。
在浏览器实例列表中，选择具有正确主机端口的浏览器进程（在本示例中
https://localhost:7184/），然后选择 附加。端口（例如，7184）也可能出现在 “标题 ”字段中，以帮助选择正确的浏览器实例。
以下示例演示如何查找 Microsoft Edge 浏览器。
Tip
如果调试器未附加，则会看到消息“无法启动调试适配器”或“无法附加到进程”。 作在当前状态下不合法。“在调试模式下启动浏览器之前，使用 Windows 任务管理器关闭目标浏览器的所有实例。 浏览器扩展可能正在运行并阻碍完整调试模式。
具有断点的代码可能已执行，请刷新浏览器页面。 如有必要，请采取措施，使带有断点的代码执行。
在调试器中暂停时，可以通过将鼠标悬停在变量上并使用调试器窗口来检查应用状态。 逐句通过代码（F5、F10 和 F11），推进调试器进度。 有关基本调试功能的详细信息，请参阅 首先查看调试器。
你可能会在转译
.js的文件或源文件中命中断点，具体取决于应用类型、之前遵循的步骤以及浏览器状态等因素。 无论在哪里命中，均可单步执行代码并检查变量。如果你需要进入 TypeScript、JSX 或
.vue源文件中的代码但无法做到，请确保你的环境已正确设置，如 VS Code 文档的源映射部分中所述。如果您需要在转译后的 JavaScript 文件（例如，app-bundle.js）中调试代码，但无法进行此操作，请删除源映射文件，即 filename.js.map。
使用 Razor 在动态文件中调试 JavaScript （ASP.NET）
在 Visual Studio 2022 中，可以使用断点调试 Razor 页面。 有关详细信息，请参阅在 Visual Studio 中使用调试工具。