JavaScript console对象方法详解与命令行API使用指南

1. console对象

console是JavaScript内置的全局对象，封装了多种用于程序调试的功能接口，例如通过console.log输出日志信息，以及利用console.count统计代码执行频次等。

console.log(console);

2. console的静态方法

主要包含console.log()、console.info()以及console.debug()等常用输出函数。

关于console.log的具体使用场景与技巧。

console.log('一行文字');
const name = 'jack';
const age = 21;
console.log(name,age); //jack,21

在输出字符串时，可以结合使用占位符来格式化内容。

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样式格式。

鉴于JavaScript属于弱类型语言，缺乏编译期的静态类型检查，开发者在实际开发中通常较少依赖占位符，而是更倾向于直接使用字符串拼接或ES6引入的模板字符串来处理输出内容。

console.info作为console.log的别名，其功能与调用方式完全一致；同样，console.debug与console.log的使用逻辑也基本相同。

console.warn()和console.error()方法。

warn与error方法同样用于在控制台输出信息，但与log的主要区别在于视觉提示：warn方法会在输出前添加黄色三角形图标以表示警告；error方法则添加红色叉号图标以标识错误，并高亮显示相关文字及错误堆栈信息。除此之外，两者的其他行为与log保持一致。

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()方法。

count方法主要用于记录特定代码段或函数的执行次数。

    function foo(){
      count = console.count();
    };
    foo(); //default: 1
    foo(); //default: 2

count方法还可以接收一个字符串参数，用于对计数结果进行分类标识，便于区分不同逻辑块的执行频次。

    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()方法。

dir方法用于检查对象属性，并以易于阅读的层级结构输出对象信息。

const user = {name:'ian', age:21};
console.log(user); //{name: 'ian', age: 21}
console.dir(user);
// Object
//   name: "ian"
//   age: 21
//   __proto__: Object

dirxml方法主要用于以类似DOM树的形式展示HTML或XML节点的结构。

console.log(documnet.body);
console.dirxml(document.body);

console.assert()断言方法。

assert方法接收两个参数：第一个为布尔表达式，第二个为错误提示信息。当第一个参数为false时，会在控制台输出错误信息，但不会中断后续代码的执行；若为true，则不输出任何内容。

console.assert(true,'数组长度不能小于0')

console.time()与console.timeEnd()方法。

这两个方法配合使用，用于计算并输出一段代码执行所消耗的时间（毫秒）。

   console.time();
   for(let i=0;i<10000;i++){
    console.log(i);
   };
   console.timeEnd();
   //default: 164.182861328125 ms

console.trace()与console.clear()方法。

trace方法用于显示当前代码在调用栈中的完整调用路径，帮助定位函数调用来源。

    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

clear方法用于清空控制台当前显示的所有输出内容。

3. 自定义console对象

由于console对象的所有方法均为普通函数，因此可以被重新定义或覆盖，从而实现自定义的日志行为。

例如，可以重写console.log方法，将其内部实现改为调用document.write，从而将日志直接写入页面。

console.log = function(str){
 document.write(str);
};

此外，甚至可以尝试修改console对象本身，例如将其赋值为null，但这通常会受到浏览器的严格限制。

console = null; //null

4. 控制台命令行API

4.1 $_变量。

$_变量用于返回控制台最后执行表达式的结果值。

1 + 2 ; $_; //3

4.2 $0至$4变量。

$0至$4变量保存了最近5个在Elements面板中选中的DOM元素。其中$0表示当前选中的元素（最近访问），$1表示前一个选中的元素，依此类推。

4.3 $(selector)选择器。

( selector ) 返回第一个匹配的元素 , 等同于 document . querySelector ( ) , 需要注意的是 (selector)返回第一个匹配的元素,等同于document.querySelector(),需要注意的是 (selector)返回第一个匹配的元素,等同于document.querySelector(),需要注意的是是可以被复写的。

$$(selector)函数则返回所有匹配指定CSS选择器的元素，功能等同于document.querySelectorAll()。

4.4 $x(path) XPath查询。

$x(path)函数接收一个XPath表达式，返回一个包含所有匹配该表达式的DOM元素的数组。

$x('//p[a]'); 
//返回所有包含a标签的p元素

4.5 inspect(obj)检查对象。

inspect方法用于在Elements面板中显示指定对象的详细信息，方便查看其DOM结构或属性。

inspect(window);

4.6 keys()和values()函数。

keys()函数以数组形式返回指定对象的所有键名；values()函数则以数组形式返回指定对象的所有键值。

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/HTML树状结构显示特定对象，是console.dirxml方法的别名。

至此，关于JavaScript console对象及其控制台命令行API的详细使用示例已介绍完毕。如需了解更多JS console相关内容，建议查阅本站过往文章或继续浏览后续教程，感谢支持！

JavaScript console对象与控制台使用示例详解