在前端开发中，Chrome DevTools 是一个强大的工具，帮助开发者调试和优化代码。本文将介绍一些 Chrome DevTools 控制台的高级功能和快捷键，帮助你更高效地进行开发和调试。
控制台高级功能
1. 复制变量
在控制台中，你可以使用 copy(变量名) 来复制变量的值。例如：
let myVar = { name: 'John', age: 30 };
copy(myVar);
这会将 myVar 的值复制到剪贴板。
2. Store as Global
在调试复杂变量时，可以使用 "Store as Global" 功能将变量存储为一个新的全局变量。右键点击变量，选择 "Store as Global"，然后在控制台中可以使用 temp1（或其他生成的变量名）来引用它。
// 右键点击变量 complexObject，选择 "Store as Global"
let complexObject = {
name: 'John',
age: 30,
address: {
street: '123 Main St',
city: 'New York',
zip: '10001'
},
hobbies: ['reading', 'traveling', 'swimming']
};
// 现在可以在控制台中使用 temp1 来引用 complexObject
console.log(temp1.name); // 输出: John
console.log(temp1.address.city); // 输出: New York
3. queryObjects
queryObjects 用于查询特定构造函数创建的所有对象。
function Person(name, age) {
this.name = name;
this.age = age;
}
let person1 = new Person('Alice', 25);
let person2 = new Person('Bob', 30);
let person3 = new Person('Charlie', 35);
// 查询所有 Person 实例
let persons = queryObjects(Person);
// 转为全局变量
// 将 persons 存储为全局变量 temp1
// 使用 console.table 打印对象列表
console.table(temp1);
打印结果
4. $ 的使用
$0：引用选中的 DOM 节点。$1：引用上一个选中的 DOM 节点。$_：引用上次执行结果。$i('lodash')：引用 npm 插件。
// 选中一个 <div> 节点
console.log($0); // 输出选中的 <div> 节点
// 选中另一个 <p> 节点
console.log($0); // 输出选中的 <p> 节点
console.log($1); // 输出之前选中的 <div> 节点
// 使用 $_ 引用上次执行结果
let result = 2 + 2;
console.log(result); // 输出: 4
console.log($_); // 输出: 4
5. 问号的使用
使用问号 ? 可以查询节点数组：
?('div') === Array.from(document.querySelectorAll('div'));//这两者理论上相当
6. 直接使用 await
在控制台中可以直接使用 await，无需在异步函数中。例如：
let data = await fetch('https://api.example.com/data');
console.log(data);
7. 监听函数和事件
monitor(func)：监听函数调用。monitorEvents(node, events)：监听节点的事件。
function myFunction() {
console.log('Function called');
}
monitor(myFunction);
// 调用 myFunction 时会提示
myFunction();
let button = document.querySelector('button');
monitorEvents(button, 'click');
// 点击按钮时会提示
8. 断言和打印
console.assert(condition, message)：断言条件为真，否则打印消息。console.log({ id })：打印对象，显示为{ id: id }。console.table(array)：以表格形式打印数组或对象。console.dir(node)：打印真实 DOM 节点。
console.assert(1 === 2, '1 不等于 2'); // 输出: Assertion failed: 1 不等于 2
console.log({ id: 123 }); // 输出: { id: 123 }
console.table([{ name: 'John', age: 30 }, { name: 'Jane', age: 25 }]);
console.dir(document.body); // 打印真实 DOM 节点
快捷键
1. 调试台位置切换
Ctrl + Shift + D：切换调试台位置。
2. 快速查找
Ctrl + F：快速查找。
3. 打开命令工具
Ctrl + Shift + P：打开命令工具（截图、语言、主题切换等快捷方式）。
4. 硬刷新
Ctrl + Shift + R：硬刷新。
源代码面板
1. Snippets 片段
在 Sources 面板中，可以使用 Snippets 片段来运行脚本。
2. 工作区
链接项目到工作区，直接修改代码并保存。
3. 条件断点
使用条件断点（Conditional Breakpoint）来设置断点条件。例如：
if (x > 10) {
console.log(x);
}
结论
Chrome DevTools 提供了丰富的功能和快捷键，帮助开发者更高效地调试和优化代码。通过掌握这些高级功能和快捷键，你可以大大提高开发效率，解决各种调试难题。希望这篇文章对你有所帮助！
如果你有更多问题或建议，欢迎在评论区留言讨论。谢谢阅读！
