Chrome浏览器调试使用技巧

快捷键

shift+enter：Console中换行

ctrl + shift + D (⌘ + shift + D Mac)：切换控制台位置，右侧底部相互切换

ctrl + [ 和 ctrl + ]：左右切换面板

ctrl + 1 到 ctrl + 9：按索引切换面板（需Settings >>Preferences>>Appearance 打开此功能）

ctrl + f：查找，任何面板都支持

Ctrl + Shift + P (Mac： ⌘ + Shift+ P )：打开命令输入框，可搜索命令等

Ctrl+P：搜索框，输入?可查看帮助

控制台命令

复制内容到剪切板：copy(…)，当然你亦可在elements面板直接鼠标右键复制元素

输出结果保存为全局变量：控制台右击 它，并选择 “Store as global variable” (保存为全局变量) 选项。

保存日志：控制台右击选Save as保存日志

截图：Elements面板，鼠标右击元素选Capture node screenshoot截图，或在命令输入框数入screenshoot搜索相关命令

控制台布局：在命令输入框输入layout搜索

切换主题：命令输入框输入theme切换dark、light主题

切换页面保留控制台输出：Console面板->Console Setting->勾选Preserve log即可

控制台脚本

控制台支持直接运行js代码，复制回车运行即可，若想储存脚本到浏览器，命令输入框输入snippet打开Snippets面板进行添加/运行脚本，Ctrl+P搜索框键入!可快捷搜索Snippets。

$0：对我们当前选中的 html 节点的引用。$1是对上一次我们选择的节点的引用，$2是对在那之前选择的节点的引用，等等。一直到$4

$_：上次执行结果

$i：安装npm插件，如$i('moment')

$：类似jQuery元素选择器，如$('body')

$$：类似$但它返回的是节点的 数组 ，等价于Array.from(document.querySelectorAll('div'))

$x：xpath选择器，例如$x('/html/body/div[4]/div[2]/div[2]/div[2]/div[2]/div[2]/div')[0].textContent

异步：console 默认就被 async 包裹，因此可以直接执行promise

res=await fetch('https://hu60.cn/q.php/index.index.json'); 
await res.json()

queryObjects(x)：对象查询，例如

class Person {
 constructor(name, role) {
 this.name = name;
 this.role = role;
 }
 greet() {
 return this.getMessage('greeting');
 }
 getMessage(type) {
 if (type === 'greeting') {
 return `Hello, I'm ${this.name}!`;
 }
 }
}
let john=new Person('John','kid')
let kids=[new Person('Mary','kid'),new Person('Luke','kid')]
new Person('tom','kid')
queryObjects(Person)

console.assert()：console.assert() 方法在第一个参数为 false 的情况下会在控制台输出信息。

console.assert(document.getElementById("demo"), "没有 ID 为 'demo' 的元素");

console.table()：将集合数组或对象以表格形式展示，例如console.table([{"name":"张三","age":18}]);

执行耗时：如下，括号中定义定时器名称，可以留空

console.time('timer1');
console.timeEnd('timer1');

Live Expression：Console界面点击眼睛图标，可给当前网站添加动态脚本，执行250ms一次。例如可以监控页面某元素是否变化

监听事件：Elements中选择元素鼠标右键Store as gload variable，一般会保存为temp1类似变量名，使用

monitorEvents(temp1); //开始记录
unmonitorEvents(temp1); //停止记录
monitorEvents(temp1, ['mouse', 'focus']); //记录指定事件

Conditional breakpoints：在Sources里鼠标右键Add Conditional breakpoints或在断点上鼠标右击编辑，当条件符合才执行断点

若条件为console.log则会直接执行，因此可以通过断点直接打印数据到控制台

参考：https://www.frontendwingman.com/Chrome/