发现:Chrome新版JS调试工具

很多前端开发工程师都对Chrome浏览器情有独钟。原因很简单:一来她启动速度快,执行效率高,给网页浏览带来流畅和快感;二来她实现了很多新的标准,支持很多高级属性,让网页体验更好,更高大上;三来就不得不提一下她的调试工具了,对于前端开发工程师更是无异于左右手。然而,大概是因为强迫症得问题,我今天却遇到一个让我有点接受不了的功能…

由于,我的Chrome开启自动升级功能。所以我的Chrome总是最新的,下图是我目前的Chrome浏览器版本:

newestChrome.png

而最近我在进行代码调试的时候,发现她的调试工具中多了一些东西——当我们使用断点调试的时候,Chrome调试工具将变量直接输出到了源代码旁边,下面我们一起看下效果:

c5dfb742f7b2d7b3b2acb9eff7ba483a.png

当然这种设计不可否认有其好的地方:运行时变量直接可见,很方便查看,多数时间不需要再将鼠标移到变量上甚至使用 Watch 功能来查看了。但是她为什么会让我感到不爽呢?

我个人觉得,她也有不好的地方:其一,在源代码中输出运行时变量,虽然有颜色区分,但不得不承认会一定程度降低源代码的可读性;其二,从上图我们不难发现,变量的输出是以逗号分割紧接输出,其实当变量过多时并不便于查看;其三,从调试空间来考虑,并不适合一次性显示过多信息,尤其考虑到国内的开发条件,还有很多使用小屏幕设备开发的前端工程师。所以,一开始我其实是不愿意接受这种设计的,不知道有没有和我一样感觉的小伙伴。

然而,事情没有想象的那么糟。庆幸的是Chrome并没有去除鼠标移到变量上查看变量信息的功能,我们依然可以采取原有的开发习惯进行开发调试。但是,那些“多余”的信息显示在那里,总还是让我心里不舒服(强迫症伤不起啊),有没有什么办法可以把她们干掉呢?

答案是肯定的。作为努力做好用户体验先去的Google工程师们,怎么可能忽略各类开发者们的感受,Chrome调试工具给我们提供了很便捷的方法来配置是否显示这些信息,点击调试工具右上角那只小齿轮图标(设置),我们在“General”面板中会看到这样一条配置:

84c72efe96e306c9c0481f4eb869452c.png

意思很明确:在调试的时候在行内显示变量的值。所以我果断的将其取消了,然后,我的界面整齐干净了,心里舒服多了。

60f896b59c35a9ed91cc446e4f5b660f.png

当然,我写这些文字,不是想要说明新版Chrome中的调试工具不好,我只是想表达对于我这种有强迫症的前端开发者来说,新增的功能未必是好,或者说还需要一定的时间来接受新的操作习惯。如果有和我一样的朋友,也可以通过这样的方式慢慢习惯。

原文链接        作者信息:百码山庄

原文链接:HelloWeb前端网 » 发现:Chrome新版JS调试工具 » 感谢您的浏览,希望能有所帮助。

欢迎您加入“Helloweb” 学习交流群:HelloWeb-学习交流群 196291215 共同交流并结识同行,在这里说出您的收获与感想或有什么不同的观点,我们期待您的留言,分享,让我们一起进步!

喜欢 ()or分享