Chrome新版JS调试工具

jopen 4年前

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

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

Chrome v43.0.2357.81 m

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

Display variable values inline while debugging

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

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

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

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

Chrome DevTool Settings

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

No inline values display

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

作者博客:百码山庄