浅谈Chrome开发者工具--- Console面板与常见报错类型

Console面板

在学习JS之后，Console面板就成了我离不开的工具。在我们的程序无法达到我们所期望的效果时候，就可以在Console面板上调试我们的程序。在面板上，除了报错以外，还可以打印出我们在程序中所想要补货到的一些数据。我用的最多的命令语句就是console.log()，但是在写文章的时候，查阅了资料，发现console命令有着很多的成员，而且都非常的实用。

从最熟悉的开始介绍：
console.log() : 打印出普通信息
console.info : 打印出提示性信息
console.warm()： 打印出警告信息
console.error() : 打印出错误信息
console.debug() ： 打印出调试信息

console.log("普通信息");console.info("提示信息");console.warn("警告信息")console.error("错误信息");

平时用的最多的就是console.log()，而info,warm,error虽然对代码使用没有影响，但是可以让它们更语义化，提高对信息分类管理，对于团队合作非常重要。

console.clear() ： 清空打印信息
或者按小图标也可以清空控制台上的信息。

console.assert() : 传入两个参数，只有当第一个参数为false时，才会打印出第二个参数所传入的字符串。

var flag = false;console.assert(flag, "打印消息");

console.count() 打印这个语句被调用的次数。

<script>    function count(){        console.count("触发了")    }</script><button onclick=count()>点击按钮触发</button>

我一共点击触发按钮4次，则调用命令四次。

console.time() ： 传入字符串，作为计时器的名字，开始计时直到console.timeEnd()结束计时，记录一段程序运行所花费的时间。

 console.time("timeName");   var count = 0;    for(var i = 0; i < 100; i++){        count++;    }    console.timeEnd("timeName")

console.table() : 传入一个数组或者对象，将以表格的形式展现出来，让数据更加的直观。

    var languages = [        { name: "JavaScript", fileExtension: ".js" },        { name: "TypeScript", fileExtension: ".ts" },        { name: "CoffeeScript", fileExtension: ".coffee" }    ];    console.table(languages);

这是打印出了数组。使用table()方法必须要有一个主键。在数组中，主键就是元素在数组中的编号。

var languages = {        a:{ name: "JavaScript", fileExtension: ".js" },        b:{ name: "TypeScript", fileExtension: ".ts" },        c:{ name: "CoffeeScript", fileExtension: ".coffee" }    };console.table(languages);

这是打印出一个对象。

console.dir() : 打印出传入的对象的所有属性与方法。

console.log(document.body)console.dir(document.body)

console.dirxml() ： 用来显示某个节点的代码。但是用console.log()打印出来的一样的。

console.group()/console.groupEnd() : group()中传入一个字符串作为分组名。可以将打印信息归类分组，使信息更直观。有一种嵌套关系。具体看代码：

console.group('Group One');  console.group('Group Two');   console.log("这是Group Two 里面的信息");  console.groupEnd(); // Group Two 结束  console.log("这是Group One 里面的信息");console.groupEnd(); // Group One 结束

JS常见错误类型

接下来介绍一下常见的错误类型，报错依旧会显示在控制台上。
因学识浅薄，这里引用 ranyonsue 网友的总结。
js常见错误类型

（1）SyntaxError

SyntaxError是解析代码时发生的语法错误

// 变量名错误

var 1a;

// 缺少括号

console.log ‘hello’);

（2）ReferenceError

ReferenceError是引用一个不存在的变量时发生的错误。

unknownVariable

// ReferenceError: unknownVariable is not defined

另一种触发场景是，将一个值分配给无法分配的对象，比如对函数的运行结果或者this赋值。

console.log() = 1

// ReferenceError: Invalid left-hand side in assignment

this = 1

// ReferenceError: Invalid left-hand side in assignment

上面代码对函数console.log的运行结果和this赋值，结果都引发了ReferenceError错误

（3）RangeError

RangeError是当一个值超出有效范围时发生的错误。主要有几种情况，一是数组长度为负数，二是Number对象的方法参数超出范围，以及函数堆栈超过最大值。

new Array(-1)

// RangeError: Invalid array length

(1234).toExponential(21)

// RangeError: toExponential() argument must be between 0 and 20

（4）TypeError

TypeError是变量或参数不是预期类型时发生的错误。比如，对字符串、布尔值、数值等原始类型的值使用new命令，就会抛出这种错误，因为new命令的参数应该是一个构造函数。

new 123

//TypeError: number is not a func

var obj = {}; obj.unknownMethod()

// TypeError: undefined is not a function

上面代码的第二种情况，调用对象不存在的方法，会抛出TypeError错误。

（5）URIError

URIError是URI相关函数的参数不正确时抛出的错误，主要涉及encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数。

decodeURI(‘%2’)

// URIError: URI malformed

（6）EvalError

eval函数没有被正确执行时，会抛出EvalError错误。该错误类型已经不再在ES5中出现了，只是为了保证与以前代码兼容，才继续保留。

以上这6种派生错误，连同原始的Error对象，都是构造函数。开发者可以使用它们，人为生成错误对象的实例。

new Error(“出错了！”);
new RangeError(“出错了，变量超出有效范围！”);
new TypeError(“出错了，变量类型无效！”);

上面代码表示新建错误对象的实例，实质就是手动抛出错误。可以看到，错误对象的构造函数接受一个参数，代表错误提示信息（message）。

这篇文章就到这里啦。不足之处，希望指正。