如何在浏览器外部调试Web应用程序

在大多数Web浏览器中按F12键，您将看到一组调试工具，这些工具可让您深入了解代码的运行方式。 它是一组功能强大的工具，并且是Microsoft Edge浏览器中针对开发人员的更重要的功能之一。

但是网络在变化，现代应用程序开发技术也在随之变化。 您现在正在构建依赖于网络技术但不属于网络的应用程序。 现在， React Native Windows ， Electron ，通用Windows平台（UWP）应用程序中的WebView控件和渐进式Web应用程序（PWA）之类的工具已成为您日常开发工作流程的组成部分，因此您需要使用F12混合调试器，分析器和资源管理器以测试您的新代码。

[InfoWorld的要点： CI / CD入门：使用CI / CD管道自动执行应用程序交付 。 • CI / CD的5个常见陷阱以及如何避免它们 。 | 通过InfoWorld的App Dev Report新闻通讯了解编程方面的热门话题。 ]

在没有浏览器的情况下调试网络

构建这些新开发工具所需的许多步骤已经在这里。 诸如WebDriver协议之类的技术允许对浏览器和其他Web呈现服务进行远程控制，而WebSockets使您可以在基于Web的客户端和服务器之间进行高速直接连接。 它们一起构成了远程控制调试环境的基础，并在Web浏览器中运行了本地服务器，该服务器可以从浏览器和应用程序内部工具以及直接访问DOM和JavaScript引擎传递数据。

如果您可以远程控制浏览器进行测试，为什么不将那些熟悉的F12调试工具从浏览器中分离出来并从您的开发PC中使用呢？ 这是Microsoft的Edge团队通过Windows Store版本发布的Edge Dev Tools所做的工作。

Edge Dev Tools是一个独立的UWP应用程序，可以连接到本地和远程浏览器会话，可以开始在多个设备和多个屏幕上进行调试。 它已经为新用户交互和新设备格式做好了准备，因此，例如，如果将HoloLens与SharePoint的新增强现实门户一起使用 ，则可以使用USB连接到耳机来测试站点中的任何WebVR或Babylon.js内容。

能够调试外部设备是一项重要功能，因为基于Web的UI正在通过Windows IoT核心版和Cortana之类的工具移至连接的设备。 使用Edge Dev Tools，您可以在开发PC上构建，部署和测试代码的各个方面。 您需要从“设置”应用程序启用Windows 10的开发人员功能，但是一旦安装了这些功能，您就可以打开设备的开发门户。

即使您不打算将其用于远程调试，此功能也很有用，因为它使您可以从门户网站查看目标设备上正在运行的应用程序到实时性能数据的变化。 连接到远程设备仅需要其IP地址和门户网站的HTTPS端口（通常为50443）。 Edge Dev Tools使用相同的地址和端口连接到目标设备上运行的浏览器实例。 您还需要确保两台计算机都位于Windows识别为在Active Directory域中或标记为私有的网络中。

远程调试Web应用程序

当前，您只能访问调试器视图，而不能访问开发工具应用程序或F12的本地副本提供的整套开发工具。 它还缺少调试远程PWA所需的一些功能，例如探索服务工作者缓存的使用情况或调试桌面浏览器之外的EdgeHTML实例。 但是，它确实支持使用本地PWA，因此您至少可以在开发PC上运行它们时对其进行调试。

可以通过Edge Dev Tools协议访问远程浏览器，该协议与Google通过其自己的Chrome DevTools协议所做的工作保持一致。 这两种协议尚不能互操作，但是很容易想到Edge和Chrome工具的未来实例，这些实例将支持从同一调试应用程序在独立浏览器或内置于IDE的不同浏览器上测试页面。 如果您不想运行其他调试工具，Edge已经提供了自己的调试服务器作为Windows远程开发门户的替代服务器，该门户通过在WebSockets上公开其调试协议来工作。

如果您使用Windows开发门户，则无需启动Edge自己的服务器，因为它是由门户自动托管的。 这减少了浏览器所需的资源，使您对现实世界的性能和交互有了更好的了解。

Edge Dev工具和PWA

在本地使用工具，不仅可以调试浏览器应用程序，还可以调试当前运行的Edge扩展以及PWA。 刷新应用选择器以查看您可以附加的内容，然后双击所需的应用以打开Dev Tools实例。 Edge Dev Tools主机应用程序充当切换器，因此您可以快速打开附加到特定应用程序或网页的工具。

连接后，即可访问Edge调试工具的所有功能。 您可以探索用于显示应用程序的元素，确保您的HTML，CSS和JavaScript可以按预期进行交互。 您还可以检查控制台警告，该功能在使用PWA时尤其有用，在这种情况下您看不到传统浏览器应用程序可用的错误信息。

在调试PWA时，您不仅可以深入研究代码，还可以了解代码如何使用PWA特定的功能，例如本地存储和服务工作者，以及如何缓存内容。 由于PWA是独立的应用程序，并且用户会期望类似应用程序的行为，因此您需要花时间在网络，内存和性能选项卡上，使用性能分析工具来了解您的应用程序如何与Windows交互。 使用Edge Dev Tools分析器，您可以跟踪代码中的瓶颈，从而为您提供重新设计应用程序所需的信息。

从浏览器中剥离Edge Dev Tools非常有意义。 您现在在很多地方都使用了Web技术，而浏览器不再是调试和测试所有技术的合适场所。 PWA，WebViews和JavaScript环境（如Electron）无处不在，它们需要与.Net或C ++一样多的支持。

现在要由Web标准机构来提供Microsoft，Google和Mozilla提供的功能，以提供一组通用的调试API，使我们可以在所有这些基于Web的平台上使用Edge Dev Tools及其后代。

From: https://www.infoworld.com/article/3284447/how-to-debug-web-apps-outside-the-browser.html