一。console
介绍之前先说下F12:
Elements:查看网页的 HTML 源码和 CSS 代码。
Resources:查看网页加载的各种资源文件(比如代码文件、字体文件 CSS 文件等),以及在硬盘上创建的各种内容(比如本地缓存、Cookie、Local Storage等)。
Network:查看网页的 HTTP 通信情况。
Sources:查看网页加载的脚本源码。
Timeline:查看各种网页行为随时间变化的情况。
Performance:查看网页的性能情况,比如 CPU 和内存消耗。
Console:用来运行 JavaScript 命令。
正题:console.log方法用于在控制台输出信息。它可以接受一个或多个参数,将它们连接起来输出。
console.info是console.log方法的别名,用法完全一样。只不过console.info方法会在输出信息的前面,加上一个蓝色图标。
console.debug方法与console.log方法类似,会在控制台输出调试信息。但是,默认情况下,console.debug输出的信息不会显示,只有在打开显示级别在verbose的情况下,才会显示。
warn方法和error方法也是在控制台输出信息,它们与log方法的不同之处在于,warn方法输出信息时,在最前面加一个黄色三角,表示警告;error方法输出信息时,在最前面加一个红色的叉,表示出错。同时,还会高亮显示输出文字和错误发生的堆栈。
注意:console
对象的所有方法,都可以被覆盖。因此,可以按照自己的需要,定义console.log
方法。
['log', 'info', 'warn', 'error'].forEach(function(method) { console[method] = console[method].bind( console, new Date().toISOString() ); }); console.log("出错了!"); // 2014-05-18T09:00.000Z 出错了! 上面代码表示,使用自定义的console.log方法,可以在显示结果添加当前时间。