我和 console.log() 之间的那点恩怨情仇

最近经常抱怨:我再也不想写一句 console.log() 了!

困惑

最近一直都在玩前端技术,其实也不算是纯粹的前端了,但是 js 语法体系里的东西确实越来越好用,npm 管理下的项目开发也变得充满了魔法。

但是,和其他平台一样,在开发的过程中,我们不停的输出各种变量,虽然我知道各种 debug 工具都很好用,但是,我们还是无法避免的需要把变量输出到调试面板,以给我们最直观的体验,这种最基础最直接的方式有时候觉得很蠢,但是不可或缺。

然而我是懒惰而不喜欢重复的,这种习惯体现在方方面面。

1
console.log(sth);

一度让我觉得,我自己在浪费生命。

具体的说,我常用的 console.log 应该和大多数人的用法一样,分两种情况:

  • 输出变量的值
1
console.log(value);
  • 因为输出的内容太多,我需要给变量做标识
1
console.log('value '+value);

这里有个小细节,就是如果我在 javascript 里,如果 value 是个对象或者数组,这样的输出结果可读性非常差,一般结果就是 [Object Object] 之类的结果,显然并不是我们想要的。所以这里可以稍加调整,估计一般人都已经这么做了。

1
console.log('value ',value);

这样,只是修改了一个字符,保障不同类型的变量都输出都有比较好的可读性。 Chrome 的 devtool 可以把这些复杂对象处理的非常舒服。

这样看,我们的需求就非常简单了,就是要输入这样的一段代码就可以了。

console.log('value: ',value);

这里加了一个冒号,增加可读性。

我打字速度应该算是个中等水准,但是放到程序员里估计是慢的。

因为要经常使用的原因,这句话里又有括号,又有单引号,还有冒号和逗号,输入复杂度其实不算低。

  • 我个人在没有任何输入提示下输入大概需要 9s 多;
  • 在 VS Code 代码提示和补全的帮助下大概需要的时间是 7s 多;

这些还都是在没有输入错误反复修改的情况下统计的。

拿平均输入需要8s 算如果每天输入这段代码 100次(我估计比这还多),那消耗的时间就达到了 800秒 也就是大概 13分钟。如果一年那大概 4745分钟。 大约 79小时

What**k

关键的问题是,我反复的输入并不能提升我的任何技能,它没有意义! 所以我决定改进。

第一阶段

我用的方式是 Alfred 自带的 Snippet 快捷输入功能。

Alfred snippets 提供了丰富的设置

其实不一定非要用 Alfred 这个软件,毕竟市面上支持快捷输入的软件一把一把的,例如 Dash 或者 Snippetty, 就连最基础的搜狗输入法,也可以实现这个功能。大致的原理就是我把这段文本设置一个快捷输入。这样我只要我运行着 Alfred 或者输入法,快速输入自定义代码。

1
console.log('value: ',value);

在 Alfred 的设置里,是可以直接读取剪切板内容的,所以你如果之前就复制好了变量,代码就直接输出内容了。
当然你也可以通过双击修改 value 的方式就可以快捷输入我要输出的变量了。

我大概把时间降低到了 5s 左右,当然这个取决于你输入的变量长短,当然你还可以用复制粘贴的方式,会更快一点。

第二阶段

我发现我自从变主力编辑工具切换到 VS Code 之后,我很少会在其他编辑器里输入这段代码,所以之前的方式,软件全局设置的方式并不合适。而与此同时,我发现 VS Code 自带的 Snippets 功能也非常的强大。
点击编辑器左下角的设置图标 > 选择 User Snippets > 在弹出的列表里选择 javascript > 在打开的编辑器里输入如下代码(注意格式):

1
2
3
4
"Console Log Value": {
"prefix": "logv",
"body": "console.log(\"$1 is: \",$1);"
},

这里设置的触发方式是在 js 文件编辑状态敲击 logv 然后输入或者粘贴你想要的变量名。

VS Code 自动同步变量名的功能提升速度明显

这次我完成输出变量的时间变成了 2-3s 之间,提升明显。另外,这种方式定制化很强,其实可以根据需求来调整代码,增加输出信息等。而且我自己已经觉得满意,这种方式我使用了起码有几个月的时间。

第三阶段

本来我觉得我已经把一个 7-9s 的任务提升到了 2-3s 近乎完美,直到我发现了它!

一个 VS Code 小插件,名字叫 Wrap Console Log

Wrap Console Log 截图

通过定制快捷键的方式,你可以通过这款软件快速的 console.log 鼠标指针所在的变量信息,直接把这个输出变量的这个流程缩短到0.5s 以内。

输入需要两个条件,一个是鼠标指向要输出的变量,然后按下快捷键。 要想速度最快,必须设置一个比较合适的按键绑定 我这里设置的 Command+L

当然这个插件还有一些其他很酷很实用的功能,可以详细探索,这里就只是抛砖引玉了。

相比第一种方式,可以帮我每年节省大概70小时的时间,我可以做更多有趣或者有意义的事儿。

至此,我关于 console.log 的抱怨算是告一段落,如果你有更好,更快的方式欢迎各种方式告知我。非常感谢!

注:文章里的一些时间计算可能略有偏差,因为我们小学的时候数学课的老师身体不好,经常体育老师代课,敬请知晓。如果习惯在手机微信平台阅读请扫码关注我的公众号。

我的微信公众号:暗行星