本文内容基于 Chrome,其它浏览器应该大同小异。

1. JavaScript Console

console.clear()

如题

console.log()

以上四个大致上是语义的不同,显示的图标和颜色会不同

可以用 %c 给信息添加样式

console.log('%c Hello World', 'color: red;')

console.assert()

asset 就是有条件(如果你不满足我我就说出去)的信息

console.assert(expression, 'message')

console.group()

将信息放入分组

console.group('Group Name')
// 需要分组的信息
console.groupEnd('Group Name')

console.groupCollapsed('Collapsed Group Name')
// 需要分组的信息
console.groupEnd('Collapsed Group Name')

console.dir()

列出对象的所有属性

console.table()

以表格形式显示数组或对象的数据

console.count()

记录代码运行的次数。

console.count("label")

console.time()

记录代码运行的时间。

console.time('name of timer')
// 需要计时的代码
console.timeEnd('name of timer')

console.trace()

返回 call stack:在哪里定义,在哪里调用

console.trace('message')

2. Break on

在 Elements 视图中选择要查看的元素,右键菜单选择 Break on,有三个子项

比如某 HTML 元素的背景色被修改,你找不到或懒得找是哪段代码,可以用 attribute modificatons ,当属性被修改时断点会停在修改背景色的代码。

3. Disable Cache

前端开发清除缓存是件很重要的小事,一件常常你在折腾一阵之后因为发现自己忽略了它而觉得自己很蠢的小事。

打开开发者工具后,在 Network 视图可以勾选 Disable cache 选项(只在开发者工具打开时有效)。

如果不想一直开着这个选项,可以在开发者工具打开时鼠标长按 Chrome 刷新按钮,选择 Empty Cache and Hard Reload

其它

Msgbox(), MessageBox.Show() 以及 alert() 就是我多年以来赖以傍身的调试技能了,最近刚学会 console.log(),然后突然见到这么多玩法,感觉一时有点吸收不了。

有个常被提到的故事,说是某台故障无人能修的机器,某外国专家划了条线指出问题所在,收费 XXXX,因为他知道在哪划线。

我呢算是工具党,以上的开发者工具应用,在合适的场合,绝对可以省不少的精力。你当然可以熟练应用开发者工具的一百种技巧,但是,也无所谓只会 console.log(),成为老法师的关键是知道在哪里用 console.log(),或者别的什么。

然后,如果是调试自己的程序,也算是吃自己的狗粮,尽量弄得好吃一点。你会调试自己的程序的对吧?

有些传奇程序员,写程序从不调试,一次编译通过,或者没通过(那都是环境的问题)。Bug?业务相关的那不正是测试存在的目的吗?你能找出来他就能把这个现象给消灭掉。

程序员难得不太问出处,哪学的或谁教的不重要,不过除了编程语言语法,软件工程常识也掌握些为好,可能会决定去处。

既然是常识,就是说要把常识当做常识。知道,并且做到。