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

Posted on | Edited on | In | Comments:

最近经常抱怨：我再也不想写一句 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小时。

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

第一阶段

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

其实不一定非要用 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 然后输入或者粘贴你想要的变量名。

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

第三阶段

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

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

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

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

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

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

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