debugger位置不对_console / debugger / alter

console / debugger / alter

都是代码调试工具，目前最常用的是console，最好用的应该是debugger。

三者的效果都不一样：

console 可以在开发者面板(调试窗口 / 控制台)输出内容。

alter 会阻断代码，并在浏览器的正上方输出内容。

debugger 会阻断代码，并在开发者面板中的 source 标签看到代码的执行顺序，和每一步的变化。

建议每个开发者都要熟悉 debugger 的使用。

console 其实不仅仅只会 .log() ，接下来说说，console这个对象，还有哪些方法：

一. console.log()、console.info()、console.debug()

使用最多的是console.log()。console.info()和console.debug()本质上与console.log()没有区别。是console.log()的另一个名字而以，可以理解为它们三个其实就是同一个，只不过名字不一样。其中，console.info()打印出的信息，在控制显示的时候信息前面会出现一个小图标(蓝色叹号，亲测谷歌浏览器，没能输出图标)，而且谷歌浏览器和opera不支持console.debug()。

二. warn()和error()

console.warn() 输出的内容前面会有一个黄色三角加叹号的小图标

console.error() 输出的内容前面会有一个红色圆形加叉号的小图标

三. 其它使用的方法

1、trace()

调试JavaScript程序时，使用console.trace()，不仅会打印函数调用栈信息，同时也会显示函数调用中各参数的值。

2、count()

可以把console.count()放在一个方法内，每次调用都会加1，更好显示方法被调用了多少次。

3、time()和timeEnd()

以ms为单位的时间，这两个要同时用，可以不写参数，输出的是，default：** ms

如果加了参数，参数要一致console.time(“count”);否则会报错，输出的是，count：** ms

4、assert() 一般两个参数，前面的是表达式，后面是要输出的内容，如果表达式为false，则输出

5、clear()

清空console的输出信息。

6、dir()

使输出内容格式化更易读，而且也会输出一个对象的全部属性和方法。

7、table()

将 数组 或者 对象 以表格的形式输出，更直观。

8、太多了，就不说了，可以自己看，重要的是你知道了 console 这个对象原来没那么简单。