前端Chrome调试技巧最全汇总

注：本文测试、截图均为Edge浏览器（内核是Chromium），浏览器内核可了解《有哪些浏览器/内核？[1]》

00、基础操作汇总

操作类型	快捷键/说明
切换浏览器标签	🔸 Ctrl+1到8切换到对应序号的浏览器标签 🔸 Ctrl+PgUp/PgDn标签页左右切换
浏览器全屏	F11 (⌘ + shift + F Mac)
打开调试模式	🔸 F12，Ctrl + Shift + I (Windows) 或 Cmd + Opt + I (Mac) 🔸 页面右键菜单“检查”，浏览器菜单“开发者工具”
切换调试工具位置（下面、右边）	ctrl + shift + D (⌘ + shift + D Mac)
切换 DevTools 的面板标签	ctrl + [ 和 ctrl + ]左右切换调试工具面板
内容搜索查找	Ctrl+F：元素、控制台、源代码、网络都支持搜索查找
使用命令Command面板	Ctrl] + [Shift] + [P] （Mac： [⌘] + [Shift]+ [P]） 类似VSCode的命令面板，有大量的隐藏功能，可以在这里搜索使用
复制元素	🔸 元素面板：选中元素》Ctrl+C 🔸 元素面板：选中元素》右键菜单》复制元素 🔸 copy($0) 控制台中代码复制当前选中元素
控制台：快速访问当前元素'$0'	$0代表在元素面板中选中元素，$1是上一个，支持到$4
控制台：全局copy方法	复制任何对象到剪切板，copy(window.location)
控制台：queryObjects(Type)	查询指定类型（构造器）的对象实例有哪些
控制台：保存堆栈信息( Stack trace )	报错信息可以右键另存为文件，保存完整堆栈信息
控制台：$、$$查询Dom元素	- $ = document.querySelector - $$ = document.querySelectorAll
Store as global（存储为全局变量）	🔸 控制台（右键）：把一个对象设置为全局变量，自动命名为temp* 🔸 元素面板（右键）：把一个元素设置全局变量，同上
元素：h快速隐藏、显示该元素	选中元素，按下h快速隐藏、显示该元素。
元素：移动元素	🔸 鼠标拖动到任意位置 🔸 上下移动，[ctrl] + [⬆] / [ctrl] + [⬇] （[⌘] + [⬆] / [⌘] + [⬇]on Mac）

🔸Store as global（存储为全局变量）：类似copy方法，将一个对象保存为全局变量，变量命名依次为temp1、temp2。 

**🔸保存堆栈信息( Stack trace )**：错误堆栈信息另存为文件，保存完整堆栈信息。 

🔸Command面板：同VSCode的命令面板，可以找到调试工具的所有的（隐藏）功能。Ctrl] + [Shift] + [P]（Mac： [⌘] + [Shift]+ [P]）