javascript调试
本文是Microsoft的Web开发系列的一部分。 感谢您支持使SitePoint成为可能的合作伙伴。
2015年4月,我们在Microsoft的工程师和技术推广人员团队发布了Vorlon.js ,这是一个开源,可扩展,与平台无关的工具,用于远程调试和测试JavaScript。
当我们在Microsoft Build Developer Conference主题演讲期间启动该项目时,我们只有三个插件:DOM Explorer,Interactive Console和Modernizr。 目前我们知道,Vorlon等项目成功的关键在于插件的数量和质量。 当您要调试网站时,您不想做很多复杂的事情。 您只想选择正确的插件并获取正确的信息。
这就是为什么我们将此项目开源。 我们知道您有很多想法可以为Web开发人员提供出色的调试体验。
因此,两个月以来,共发出了66个请求,78个问题和547次提交:我们很自豪地宣布,我们(您和您的团队)刚刚发布了Vorlon.js 0.0.15版! 您可以通过克隆我们的GitHub存储库或使用npm命令工具( npm install –g vorlon
)来安装它。
注意 :如果您仍然想知道Vorlon.js是什么,请先阅读David Catuhe的这篇文章:_ http://blogs.msdn.com/b/eternalcoding/archive/2015/04/30/why-we-made -vorlon-js以及如何使用它来调试您JavaScript-remotely.aspx )。
让我们看一下此版本中的新增功能。
新插件
XHR Panel在这里可以帮助您获取通过XMLHttpRequest完成的请求的列表。 您可以使用播放按钮选择启用或禁用录制。
XHR面板
Network Monitor在Vorlon中为您提供了查看浏览器和Web服务器之间完成的所有网络交换的功能。 它提供了资源名称,服务器域,请求类型,持续时间(以毫秒为单位)和漂亮的可视时间轴!
资源浏览器为您提供有关客户端浏览器实例本地存储内容的信息。 有关于会话 , Cookie和本地存储的数据 。 当您要调试本地缓存或登录/持久性用户数据问题时,此功能非常有用。
NG Inspector是AngularJS的$scope
调试器。 您可以轻松访问存储在每个合并范围中的所有值。 第一个版本为您提供信息,将来的版本将使您能够编辑示波器。
插件改进
DOM资源管理器已得到改进。
以前,此插件每次更改时都会将所有DOM数据从客户端发送到仪表板。 这对表演产生了巨大的影响。 现在,此问题已解决,您可以通过手动单击刷新按钮或在“ 设置”窗格上激活自动刷新来从客户端刷新DOM。 自动刷新功能更智能,如果在客户端浏览器上可用,则使用MutationObserver
。
附加功能:当客户端更改DOM时,刷新按钮中的圆形指示器变为红色!
![](https://i-blog.csdnimg.cn/blog_migrate/61d67c06be7b70e1b9619b708c714a9e.png)
免费学习PHP!
全面介绍PHP和MySQL,从而实现服务器端编程的飞跃。
原价$ 11.95 您的完全免费
如您所见,“ DOM浏览”窗格更漂亮,更易于阅读。
现在,您可以单击它来编辑HTML内容和属性。 当按ENTER键时,更改将应用于客户端。
DOM突出显示功能更易于访问。 当您的鼠标移到Vorlon仪表板中DOM资源管理器上的DOM元素上时,就会发生这种情况。
您也可以右键单击元素以删除或编辑内容。 这是启用属性删除的最佳人体工程学方法。
在右窗格中,您可以获得更多的信息,而现在只有真正CSS代码。
布局选项卡为您提供了用于经典F12工具的信息:页边距,填充,边框和尺寸信息。
计算样式包含相同的内容,其中包含所有显式和隐式继承CSS样式。
HTML选项卡是在DOM中编辑文本的更好工具。 您可以通过单击保存按钮来制作断线并应用更改。
最后, 设置部分是您可以在其中激活DOM自动刷新的位置。
Interactive Console也具有一些新功能。
我们有windows.onerror
, console.dir
和复杂的object
日志支持。 您可以使用可视树在对象属性中导航。 过滤器仅用于显示日志的子集,您可以使用类似搜索的文本区域进行过滤。
其他变更和改进
我们在代码组织和结构中做了很多其他更改,这些更改在插件和功能中不直接可见。
例如,我们重命名了catalog.json
文件并将其移动到服务器文件夹中,该文件包含插件列表和一些参数。 现在将其称为config.json
因为某些参数与插件无关。 为了避免复制粘贴并简化调试和使用,我们还在config.json
的插件配置中添加了一个enabled
布尔参数。 如果对特定插件为false,则不会将其加载到仪表板中,也不会在生成的vorlon.js文件中发送给客户端。
我们还将插件分成两个单独的文件。 最初,一个插件仅由一个包含仪表板和客户端代码JavaScript文件组成。 当我们开始这个项目时,这很容易。 现在创建了更复杂的插件,出于优化原因,我们将其分为两个不同的文件: yourplugin.client.js
和yourplugin.dashboard.js
。
您可以阅读更多有关我们在GitHub存储库上可用的whatsnew.md文件中所做的更改的信息。
下一步是什么?
我们现在正在开发包含新插件和核心改进功能的下一个版本。 身份验证,webgl,webaudio都是列表的一部分!
正如我所说,我们希望该项目成为Web开发人员的项目。 如果您有想法,可以:
- 在GitHub上提交问题
- 自己创建并提交拉取请求(我们每天对此进行审查!)
_注意:为了帮助您学习如何创建插件,我编写了此简介 。
让我们一起在Vorlon.js上共同努力,使调试体验更轻松,更好。
不要忘记关注我们的团队推特帐户 !
使用JavaScript进行更多操作
本文是Microsoft技术福音专家开发的Web开发系列文章的一部分,内容涉及实用JavaScript学习,开源项目以及互操作性最佳实践,包括Microsoft Edge浏览器和新的EdgeHTML呈现引擎 。
我们鼓励您使用dev.modern.IE上的免费工具跨浏览器和设备进行测试,包括Microsoft Edge(Windows 10的默认浏览器):
- 扫描您的站点以查找过期的库,布局问题和可访问性
- 在Mac,Linux和Windows上使用虚拟机
- 在您自己的设备上远程测试Microsoft Edge
- GitHub上的编码实验室:跨浏览器测试和最佳实践
我们的工程师和宣传人员在Microsoft Edge和Web平台上进行了深入的技术学习:
- Microsoft Edge Web Summit 2015 (新浏览器,受支持的新网络平台标准以及来自JavaScript社区的嘉宾演讲者会期待什么)
- 哇,我可以在Mac和Linux上测试Edge和IE! (来自Rey Bango)
- 在不中断网络的情况下推进JavaScript (摘自Christian Heilmann)
- 使Web正常工作的Edge渲染引擎 (来自Jacob Rossi)
- 使用WebGL释放3D渲染 (来自David Catuhe,包括vorlon.JS和babylonJS项目)
- 托管的Web应用程序和Web平台创新 (来自Kevin Hill和Kiril Seksenov,包括歧管 .JS项目)
Web平台的更多免费跨平台工具和资源:
翻译自: https://www.sitepoint.com/remotely-debug-and-test-javascript-with-new-vorlon-js-plug-ins/
javascript调试