从好用工具到艺术品！Chrome DevTools花式玩法：控制台和命令菜单

从毕业入职工作以来，Chrome DevTools真的可以称为前端开发的最亲密的伙伴了。通过这段时间的不断学习和使用，对Chrome DevTools也总结了一套自己的经验使用方法，在此我也会把自己的总结分类，分享出来并和大家一起讨论。本文将优先介绍前两大类，后文再另作他解。

一、Console 篇

1. console.log()，你真的会用吗？

console.log() 是一个非常常用的调试工具，我们经常会在代码中使用它来打印出变量的值、对象的内容等。但是，你知道 console.log() 还有一些其他的用法吗？

// 打印出变量的值
console.log("Hello World!");

// 打印出对象的属性值
const person = { name: "John Doe", age: 30 };
console.log(person.name); // "John Doe"
console.log(person.age); // 30

// 打印出数组中的元素
const numbers = [1, 2, 3, 4, 5];
console.log(numbers); // [1, 2, 3, 4, 5]

// 打印出函数的执行结果
const sum = (a, b) => a + b;
console.log(sum(1, 2)); // 3

2. 巧用 console.table()，让数据更直观

当我们需要打印出一个复杂的对象或数组时，console.log() 可能不是一个很好的选择，因为它会将对象或数组的全部内容打印出来，这可能会导致输出结果非常混乱。这时候，我们就可以使用 console.table() 来将对象或数组的内容以表格的形式打印出来，这样更加直观。

// 打印出一个复杂的对象
const person = {
  name: "John Doe",
  age: 30,
  address: "123 Main Street",
  city: "Anytown",
  state: "CA",
  zip: "12345"
};
console.table(person);

// 打印出一个数组
const numbers = [1, 2, 3, 4, 5];
console.table(numbers);

3. 利用 console.error()，捕获错误信息

当我们的代码中出现错误时，我们可以使用 console.error() 来捕获错误信息并将其打印出来。这可以帮助我们快速找到错误所在，并进行修复。

// 捕获错误信息
try {
  // 这里可能会发生错误
} catch (error) {
  console.error(error);
}

二、命令菜单篇

1. $() 命令，快速定位元素

在调试过程中，我们经常需要定位某个元素。这时，我们可以使用 $() 命令来快速定位元素。

// 定位一个元素
const element = $("div");

// 获取元素的属性
console.log(element.attr("id"));

// 设置元素的属性
element.attr("id", "new-id");

// 删除元素
element.remove();

2. $$() 命令，定位所有元素

如果我们需要定位所有匹配某个选择器的元素，我们可以使用 $$() 命令。

// 定位所有匹配某个选择器的元素
const elements = $("div");

// 获取元素的属性
console.log(elements[0].attr("id"));

// 设置元素的属性
elements.attr("id", "new-id");

// 删除元素
elements.remove();

3. $x() 命令，通过 XPath 定位元素

如果我们需要通过 XPath 定位元素，我们可以使用 $x() 命令。

// 通过 XPath 定位元素
const elements = $x("//div[@id='my-id']");

// 获取元素的属性
console.log(elements[0].attr("id"));

// 设置元素的属性
elements.attr("id", "new-id");

// 删除元素
elements.remove();