Chrome新版JS调试工具

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

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

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

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

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

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

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

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

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

作者博客：百码山庄