在调试客户端时使用Chrome / Firefox

Use Chrome/Firefox while debugging client-side

本文关键字:Chrome Firefox 调试 客户端      更新时间:2023-09-26

我正在使用带有getUserMedia的相机,我得到了一些想要修复的错误。问题是Visual Studio只允许我用IE调试JavaScript(我的意思是命断点(,而IE不支持getUserMedia。

如果要在Internet Explorer以外的浏览器中进行调试,则需要使用该浏览器的开发人员工具并相应地设置断点。或者,您可以使用 console.log(( 和/或 console.warn(( 在代码中获取对象的状态。Visual Studio没有也无法理解不同JavaScript和渲染引擎(V8,Blink,Gecko等(的实现 - 也不应该尝试这样做。这些引擎在六周的发布周期中移动得如此之快,以至于 IDE 对于您应该测试的实际平台来说将是一个完全误导性的代理。

Firefox 和 Chrome 都允许您在页面重新加载/导航之外保留控制台内容,并且像 Visual Studio 中的浏览器链接这样的工具将允许您同时在多个浏览器中进行测试 - 之后检查控制台结果是否存在错误(必须在每个浏览器中单独测试交互(。

如果您正在测试移动设备Adobe Shadow,则可能允许您在笔记本电脑或台式机上使用开发工具(我相信Chrome(的同时在多个平板电脑和/或手机上进行测试。否则,桌面浏览器开发工具允许您使用相同的浏览器调试在连接的移动设备上运行的页面,或者 - 对于 Firefox - 还可以调试设备上的 Chrome 实例。

了解

用于前端调试和故障排除的浏览器开发工具是非常值得的,因为这些工具比Visual Studio提供的工具更强大。免费的CodeSchool课程Discover DevTools(专注于Chrome DevTools,由Google/Chrome赞助(可以帮助您发现客户端开发人员工具的一些功能,并且许多界面和技术将广泛适用于其他浏览器开发工具。

如果您想在不可用的设备、无法安装在系统上的浏览器(例如 Windows 上的 Safari(或只是您无法与本地已安装的版本一起安装的较新版本或旧版本进行测试,那么有像 Browserstack 这样的服务允许您在托管虚拟机中这样做。有一个Visual Studio扩展可用于BrowserStack,以帮助连接到本地运行的项目。