使用 Visual Studio 2022 解决 Blazor WASM 的调试问题：第三方 JavaScript 库导致断点

为什么使用 Visual Studio 2022 和 Chrome 调试 Blazor WASM 应用程序可能会令人沮丧

当 Visual Studio 2022 不断因第三方 JavaScript 库的异常而中断时，调试 Blazor WebAssembly (WASM) 应用程序可能会变得令人沮丧。这些库（例如 Stripe checkout 或 Google 地图）可能会引发错误，从而停止您的进度。作为开发人员，您可能会发现自己反复单击“继续”，这会中断您的工作流程。

当您切换到新的开发机器时，这个问题变得尤其明显。即使导入旧设置或重新安装 Visual Studio 后，问题仍然存在。调试第三方 JavaScript 变得很麻烦，导致很难专注于 Blazor WASM 应用程序本身。

许多开发人员在处理动态 JavaScript 文件时都会遇到同样的挑战，而 Visual Studio 似乎不必要地打破了这一点。尽管尝试了多种设置组合或切换 Chrome 的断点，但问题通常仍未解决，这增加了挫败感。

在本文中，我们将探讨一些有助于最大程度地减少这些干扰的步骤。如果您在使用 Chrome 进行调试时在 Visual Studio 2022 中遇到类似问题，这些提示可能会让您免于重复单击“继续”，并帮助您恢复更流畅的开发体验。

命令	使用示例
window.onerror	这是 JavaScript 中的事件处理程序，用于捕获脚本中的全局错误。在 Blazor 应用程序示例中，它用于拦截来自第三方库（例如 Stripe 或 Google Maps）的错误并在不中断执行的情况下处理它们。
Pause on Caught Exceptions	Chrome DevTools 设置，用于确定是否在代码已处理的异常上暂停执行。禁用此选项有助于避免在调试过程中因非关键第三方库错误而造成不必要的中断。
Exception Settings	在 Visual Studio 中，此设置允许开发人员指定应如何处理不同类型的异常。例如，关闭“JavaScript 运行时异常”有助于阻止 Visual Studio 因外部库中的 JavaScript 错误而中断。
window.onerror return true	错误处理程序中的此返回值指示错误已被处理并且不应进一步传播。它用于防止应用程序因第三方库引发的异常而中断。
Assert.True()	xUnit 测试框架中的一种方法，用于检查给定条件是否为真。在错误处理测试中，它用于确保自定义错误处理逻辑正常运行，如果成功捕获并处理错误，则允许测试通过。
HandleError()	这是单元测试中的自定义函数，用于模拟来自第三方 JavaScript 库的错误。它有助于验证错误处理代码在不同场景下是否按预期工作。
Uncheck JavaScript Runtime Exceptions	在 Visual Studio 异常设置面板中，取消选中此选项可防止调试器在每个 JavaScript 运行时异常时中断，这在调试过程中来自第三方库的异常导致中断时非常有用。
Sources tab (Chrome DevTools)	Chrome 开发者工具的这一部分允许开发者检查和控制 JavaScript 的执行。通过在此处管理断点（包括针对特定脚本禁用断点），您可以控制 Chrome 在调试期间暂停的位置。

使用 Visual Studio 2022 优化 Blazor WASM 中的 JavaScript 调试

在 Visual Studio 2022 中开发 Blazor WebAssembly (WASM) 应用时，通常会遇到调试器因第三方 JavaScript 库中的异常而反复中断的问题。发生这种情况是因为 Visual Studio 设计为在运行时捕获异常，包括由外部脚本（如 Stripe checkout 或 Google 地图）引发的异常。为了解决这个问题，提供的脚本重点控制 Visual Studio 和 Chrome 如何处理这些异常。例如，禁用 Visual Studio 中的 阻止调试器因非关键错误而暂停，从而使您能够专注于相关的调试任务。

Chrome DevTools 脚本在此过程中也发挥着至关重要的作用。通过调整 设置时，您指示 Chrome 避免破坏 JavaScript 代码中已处理的错误。当使用从第三方库动态加载的 JavaScript 文件时，这特别有用，因为这些文件通常会引发不会直接影响您的 Blazor 应用程序的异常。禁用此选项有助于在浏览器中保持流畅的调试流程。

习俗 handler 直接在您的应用程序中添加了另一层错误管理。通过设置此错误处理程序，特定库（如 Stripe 或 Google Maps）引发的任何错误都会被拦截并记录，而不是破坏应用程序。这可确保应用程序继续运行而不会中断，这对于维持高效的开发环境至关重要。该脚本会检查错误的来源，如果错误源自第三方库，则会阻止其传播。

最后，添加单元测试有助于确保错误处理机制按预期运行。通过编写模拟 JavaScript 错误的测试，您可以验证应用程序即使在第三方脚本失败时也能继续平稳运行。这些测试使用 xUnit 等框架来验证自定义代码是否正确捕获和处理异常。这种方法不仅提高了应用程序的稳定性，还减少了第三方 JavaScript 造成的中断数量，从而在 Visual Studio 中实现更高效的调试。

// Step 1: Open Visual Studio
// Step 2: Navigate to 'Debug' -> 'Windows' -> 'Exception Settings'
// Step 3: In the Exception Settings window, look for 'JavaScript Runtime Exceptions'
// Step 4: Uncheck the box next to 'JavaScript Runtime Exceptions'
// This will stop Visual Studio from breaking on JavaScript exceptions in third-party libraries
// Step 5: Restart debugging to apply the changes
// Now, Visual Studio will ignore JavaScript exceptions thrown by libraries like Stripe or Google Maps

// Step 1: Open Chrome DevTools (F12)
// Step 2: Go to the 'Sources' tab in DevTools
// Step 3: Click on the 'Pause on Exceptions' button (next to the breakpoint icon)
// Step 4: Make sure that 'Pause on Caught Exceptions' is disabled
// Step 5: This prevents Chrome from breaking on non-critical exceptions in dynamic scripts
// You can continue debugging without being interrupted by third-party JavaScript exceptions

// Step 1: Create a custom JavaScript error handler
window.onerror = function (message, source, lineno, colno, error) {
   console.log('Error caught: ', message);
   if (source.includes('Stripe') || source.includes('GoogleMaps')) {
       return true; // Prevents the error from halting execution
   }
   return false; // Allows other errors to propagate
}
// Step 2: Add this script to your Blazor app's index.html or _Host.cshtml file

// Step 1: Write a unit test for JavaScript error handling
using Xunit;
public class ErrorHandlingTests {
   [Fact]
   public void TestJavaScriptErrorHandling() {
       // Simulate an error from a third-party library
       var result = HandleError("StripeError");
       Assert.True(result); // Ensures the error is handled without breaking
   }
}

在 Blazor WASM 中管理动态 JavaScript 异常

调试 Blazor WebAssembly (WASM) 应用程序时，讨论较少但至关重要的方面之一是 Visual Studio 如何处理动态 JavaScript 异常。这些异常通常源于 Stripe 或 Google Maps 等第三方库，它们可能会动态加载脚本。 Visual Studio 将这些视为“[动态]”JavaScript 文件，并在引发错误时中断执行，即使该错误不会直接影响您的应用程序。这可能会导致调试过程中出现多次不必要的中断，从而扰乱您的工作流程并增加挫败感。

为了最大限度地减少这些中断，正确配置开发环境非常重要。 Visual Studio 提供了多个用于控制断点和异常的选项。例如，关闭“仅我的代码”或禁用 JavaScript 调试可以帮助防止 IDE 捕获与您的项目无关的错误。然而，这些解决方案可能并非万无一失，尤其是对于复杂的第三方脚本。微调 Visual Studio 和 Chrome DevTools 中的设置通常是解决这些持续问题的关键。

另一个需要考虑的方面是在 Blazor 应用程序本身中实现自定义错误处理机制。通过使用添加全局错误处理程序 事件，您可以在错误导致执行中断之前拦截并管理错误。此方法允许您专注于调试实际的应用程序代码，而不是被外部 JavaScript 错误分散注意力。这些策略的组合可以显着改善 Blazor WASM 应用程序中的调试体验。

1. 是什么导致 Visual Studio 在动态 JavaScript 异常时中断？
2. 当动态加载的 JavaScript 文件（通常来自 Stripe 或 Google Maps 等第三方库）中发生错误时，Visual Studio 会中断。
3. 如何防止 Visual Studio 因 JavaScript 错误而中断？
4. 您可以禁用 在“异常设置”窗口中或在 Visual Studio 设置中关闭 JavaScript 调试。
5. “Just My Code”在 Visual Studio 中做什么？
6. 正在关闭 可以防止 Visual Studio 破坏与项目无关的代码（例如第三方脚本）。
7. 如何处理 Blazor WASM 应用程序中的第三方错误？
8. 使用一个 处理程序，用于在第三方库破坏您的应用程序之前捕获和管理来自第三方库的异常。
9. Chrome DevTools 可以帮助解决这个问题吗？
10. 是的，禁用 Chrome DevTools 可以防止在 Chrome 中调试时出现不必要的暂停。

在 Visual Studio 2022 中处理由第三方 JavaScript 触发的断点可能会中断您在 Blazor WASM 应用程序上的工作。优化调试设置和实施有针对性的错误处理可以显着改善您的开发流程，使您能够专注于核心应用程序逻辑，而不会受到不必要的干扰。

通过利用自定义错误处理技术，例如 并微调您的 Visual Studio 设置，您可以避免第三方脚本引起的断点并增强调试体验。这些步骤可以节省开发人员的时间并减少挫败感，从而使调试会话更加顺利和高效。