你尚未登录,仅允许查看本站部分内容。请登录使用邀请码注册
MrZheng

Chrome新版JS调试工具 20个回复 专栏 @ Javascript

MrZheng 发布于 1 年前

很多前端开发工程师都对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中的调试工具不好,我只是想表达对于我这种有强迫症的前端开发者来说,新增的功能未必是好,或者说还需要一定的时间来接受新的操作习惯。如果有和我一样的朋友,也可以通过这样的方式慢慢习惯。

作者博客:百码山庄

  • 小小小无路

    赞一个。。正在升级ing

    #1
  • 荒初禁赦

    前几天也发现了~个人觉得这个功能很赞、、、、

    #2
  • lvsheng

    觉得这个功能其实很好用+1

    #3
  • yolio2003

    早说啊,我赶紧去开起来

    #4
  • DualWield

    觉得这个功能很好用+1

    #5
  • 小天同学

    图片为什么全是404啊?

    #6
  • MrZheng

    @小天同学 今天我放图片的博客服务器出故障挂了,貌似他们的工作人员正在抢修..

    #7
  • exolution

    还以为是新的功能介绍,原来是个吐槽~ (┬_┬)

    #8
  • rambo

    洁癖 + 强迫症 = 楼主

    #9
  • kiinlam

    其实一开始也觉得挺不习惯,后来觉得省掉移鼠标,就留着没关闭掉。但有时候会发现会把代码盖住,真是又爱又恨啊。
    尽量让自己去适应变化吧。
    不过chrome提供了开关控制,还是做得比较好的。

    #10
  • yizh1211

    新版的功能更好用

    #11
  • liuyangcharlie

    其实要说到Chrome的新特性,得提一下Google Chrome Canary

    类似于Nightly版本吧,很多实验性的功能或改进都会在这里体现,更新快,内核版本新得不行,调试工具也有很多调整,这些新特性或新UI如果经过验证,都会应用在稳定版的Chrome上

    bug有时候可能会很多,比如最近的更新Flash插件实在是经常崩溃,不过个人觉得还是值得尝试

    #12
  • erniu

    哈哈,强迫症,得治

    #13
  • 撒子都学

    貌似挺好用的啊。。

    #14
  • Sirormy

    我觉得还挺好啊,比调试时候鼠标悬停显示来得直接,除非add watch

    #15
  • Sigma

    灵活运用快捷键:
    1. 选择一个变量;
    2. Ctrl + Shift + E

    #16
  • lingc

    我也觉得赞!!!

    #17
  • luqin

    这功能也不错啊

    #18
  • acrens

    个人觉得这样设计还是蛮有必要的

    #19
  • ilaipi

    哈哈。这个功能在intellij idea好像14版本开始就有了。这是一种变量查看方式,而不是唯一的方式,所以还是蛮好的。

    #20
登录后回复,如无账号,请使用邀请码注册