快捷键
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/