1. console对象
console对象是JavaScript的原生对象,提供了很多用于调试的方法,如console.log输出信息,console.count记录执行次数
|
1 |
console.log(console); |
2. console的静态方法
- console.log()、console.info()、console.debug()
console.log的使用
|
1 2 3 4 |
console.log('一行文字'); const name = 'jack'; const age = 21; console.log(name,age); //jack,21 |
使用占位符
|
1 2 3 4 |
const name = 'ian'; const age = 21; console.log('I am %s,i am %d years old',name,age); //I am ian,i am 21 years old |
- %s 字符串
- %d 整数
- %i 整数
- %f 浮点数
- %o 对象的链接
- %c css格式字符串
由于js是弱语言,没有类型的静态校验,通常我们不会使用占位符,而是直接使用字符串变量或者模板字符串。
console.info是console.log的别名,用法和console.log完全一致,console.debug和console.log的用法也基本一致
- console.war()和console.error()
warn方法和error方法也是在控制台输出信息，它们与log方法的不同之处在于，warn方法输出信息时，在最前面加一个黄色三角，表示警告；error方法输出信息时，在最前面加一个红色的叉，表示出错。同时，还会高亮显示输出文字和错误发生的堆栈。其他方面都一样。
|
1 2 3 4 |
console.error('Error: %s (%i)', 'Server is not responding', 500) // Error: Server is not responding (500) console.warn('Warning! Too few nodes (%d)', document.childNodes.length) // Warning! Too few nodes (1) |
- console.count()
console.count用于记录代码执行次数
|
1 2 3 4 5 |
function foo(){ count = console.count(); }; foo(); //default: 1 foo(); //default: 2 |
count方法还接收一个字符串用于将计算结果进行分类
|
1 2 3 4 5 6 7 8 9 10 11 |
function foo(){ count = console.count('foo'); }; foo(); // foo: 1 foo(); // foo: 2 function bar(){ count = console.count('bar'); }; bar(); // bar: 1 bar(); // bar: 2 </script> |
- console.dir()、console.dirxml()
console.dir()用于对一个对象进行检查,并以易于阅读的方式输出
|
1 2 3 4 5 6 7 |
const user = {name:'ian', age:21}; console.log(user); //{name: 'ian', age: 21} console.dir(user); // Object // name: "ian" // age: 21 // __proto__: Object |
console.dirxml主要用于以目录树的形式显示DOM节点
|
1 2 |
console.log(documnet.body); console.dirxml(document.body); |
- console.assert()
console.assert接收两个参数第一个是布尔值,第二个是提示信息,当第一个参数为true的时候,就显示一个错误,但不会中断代码的执行
|
1 |
console.assert(true,'数组长度不能小于0') |
- console.time()、console.timeEnd
这两个方法可以计算出一段代码执行完所用的时间
|
1 2 3 4 5 6 |
console.time(); for(let i=0;i<10000;i++){ console.log(i); }; console.timeEnd(); //default: 164.182861328125 ms |
- console.trace()、console.clear()
console.trace方法显示当前代码在堆栈种的调用路径
|
1 2 3 4 5 6 7 8 9 10 11 |
function foo() { console.trace(); }; function bar() { foo(); }; bar(); //index.html:14 console.trace //foo @ index.html:14 //bar @ index.html:18 //(anonymous) @ index.html:20 |
console.clear()用于清空控制台
3. 自定义console
console对象所有的方法都可以被覆盖,因此可以自定义自己的方法
重写console.log()方法,将其改为document.write
|
1 2 3 |
console.log = function(str){ document.write(str); }; |
设置连console对象本身也可以被修改
|
1 |
console = null; //null |
4. 控制台命令行API
4.1 $_
$_返回上一个表达式的值
1 + 2 ;
$_; //3
4.2 $0-$4
$0-$4保存了最近5个在Element面板选中的元素,$0表示(最近访问)第一个,$1表示第二个以此类推
4.3 $(selector)
( s e l e c t o r ) 返回第一个匹配的元素 , 等同于 d o c u m e n t . q u e r y S e l e c t o r ( ) , 需要注意的是 (selector)返回第一个匹配的元素,等同于document.querySelector(),需要注意的是 (selector)返回第一个匹配的元素,等同于document.querySelector(),需要注意的是是可以被复写的。
$$(selector)相当于document.querySelectorAll()
4.4 $x(path)
$x(path)返回一个数组，包含匹配特定 XPath 表达式的所有 DOM 元素。
|
1 2 |
$x('//p[a]'); //返回所有包含a标签的p元素 |
4.5 inspect(obj)
inspect方法用于显示对象的具体信息
|
1 |
inspect(window); |
4.6 keys()和values()
keys()以数组的形式返回对象的所有键名,values()以数组的形式返回对象的所有键值
|
1 2 3 4 5 |
const obj = {name:'ian',age:21}; keys(obj); //['name', 'age'] values(obj); //['ian', 21] |
4.7 其它的命令
- copy() 复制，某个值到粘贴板
- clear() 清空控制台
- dir(object)：显示特定对象的所有属性，是console.dir方法的别名
- dirxml(object)：显示特定对象的 XML 形式，是console.dirxml方法的别名
