JavaScript console的使用方法实例分析

什么是JavaScript console？

JavaScript console是浏览器提供的调试工具，可以用来输出JavaScript代码的执行结果、调试错误、监测性能等功能。

如何打开JavaScript console？

不同浏览器打开JavaScript console的方法不尽相同，以下是常用浏览器的打开方式：

• Chrome：打开网页后，按下“F12”键，在弹出的开发者工具中选择“Console”选项卡。
• Firefox：打开网页后，按下“Ctrl + Shift + K”组合键，或右键选择“检查元素”（Inspect Element），在弹出的开发者工具中选择“控制台”（Console）选项卡。
• Safari：打开网页后，选择“开发”（Develop）菜单中的“显示Web检查器”（Show Web Inspector），在弹出的开发者工具中选择“控制台”（Console）选项卡。

如何使用JavaScript console？

使用JavaScript console的主要方法是通过console对象下面的方法，以下是常用的几个方法：

console.log()

console.log()是最常用的方法之一，用来输出文本信息。

console.log("Hello, World!"); // 输出字符串
console.log(10 * 2); // 输出数字

console.error()

console.error()用来输出错误信息。

console.error("Oops! Something went wrong."); // 输出错误信息

console.warn()

console.warn()用来输出警告信息。

console.warn("This action could be potentially dangerous."); // 输出警告信息

console.table()

console.table()用来输出表格信息。

console.table([
  {name: 'Tom', age: 20, gender: 'male'},
  {name: 'Lucy', age: 18, gender: 'female'},
  {name: 'Jerry', age: 22, gender: 'male'}
]); // 输出表格信息

使用实例分析

实例1：输出循环中的变量

for (var i = 1; i <= 10; i++) {
  console.log("The value of i is: " + i);
}

在console中运行以上代码，会输出1到10的数值。

实例2：调试错误

function add(x, y) {
  return x + y;
}

var result = add(3, 4);
console.log("The result is: " + result);

在console中运行以上代码，会输出"The result is: 7"。如果将add函数改成以下的错误代码：

function add(x, y) {
  return x - y;
}

var result = add(3, 4);
console.log("The result is: " + result);

在console中运行以上代码，会输出"The result is: -1"。这种情况下，我们可以通过console.error()输出错误信息，定位到错误所在的代码行，方便进行调试。

function add(x, y) {
  console.error("The function add() has an error on " + (new Date()));
  return x - y;
}

var result = add(3, 4);
console.log("The result is: " + result);

以上代码会在console中输出错误信息："The function add() has an error on Fri Aug 07 2020 10:38:54 GMT+0800 (China Standard Time)"。