一、 Console知识点:
1、console.log('%c123', 'color: red'); 改变打印的样式
PS: %s:字符串占位符 %d:整数占位符 %f:浮点数占位符 %o:对象占位符(注意是字母o) %c: CSS样式占位符
// 注意:此API只能通过浏览器控制台获取,无法通过网页脚本来进行访问。
2、$相当于document.querySelector()
3、?相当于document.querySelectorAll(); 返回数组不是类数组
4、$x(path):返回一个与给定XPath表达式匹配的DOM元素数组。 PS: $x('//div[p]')表示返回包含<p>元素的所有<div>元素。
5、$0,$1,$2,$3,$4; 指向你当前在Element中选中的元素,就近原则
6、$_; 记录了最后一次在Console计算的表达式
7、getEventListeners(document); 返回在DOM元素上注册的所有的事件
8、debug(fn); 接收一个函数作为参数,当每次该函数被调用时,Debugger就会在该函数的第一行中断执行。可以与getEventListeners(document)结合使用
9、copy(anything) 工具函数,方便你将任何东西拷贝到系统的粘贴板暂存。
10、await不需要在async函数中使用。在DevTools支持直接使用。
11、使用条件断点在生产环境中注入console.log();
12、console.dir(document.body)和console.log(document.body);可看差异
13、console.table([{ id: 1, name: 'z', age: 12, class: '5班' }, { id: 12, name: 's', age: 23, school: '中国大学' }], ['id', 'name']); PS: 第二个参数可选
14、console.assert(); assert即断言,该方法接收多个参数,其中第一个参数为输入的表达式,只有在该表达式的值为false时,才会将剩余的参数输出到控制台中。
15、console.trace();该方法用于在控制台中显示当前代码在堆栈中的调用路径,通过这个调用路径我们可以很容易地在发生错误时找到原始错误点 PS: function foo(data) { if (data === null) { console.trace(); return []; } return [data.a, data.b]; }
function bar1(data) {
return foo(data);
}
function bar2(data) {
return foo(data);
}
bar1({a: 1, b: 2}); // -> [1, 2]
bar2(null);
16、console.count(); 计数器,记录调用次数,一般在循环或多次调用使用
17、console.time() & console.timeEnd(); 跟踪程序执行时间,这两个方法参数要一致,一般是字符串
18、console.group() & console.groupEnd(); 对数据信息进行分组,与time用法类似
19、document.body.contentEditable = true; 浏览器:只读模式 => 编辑模式
20、monitorEvents($('selector'), 'eventName'); 将监视选择器匹配的元素的某个特定的事件,第二个参数也可以为string[]
21、unmonitorEvents($('selector')); 停止监视
22、inspect($('selector')); 将检查与选择器匹配的元素,并且会自动跳转到Chrome Developer Tools的Elements选项卡中
23、Sensors 模拟当前设备的位置和模拟手机水平传感器参数
24、Quick source 边写边生效
二、 Elements知识点
1、Alt + Click dom展开
2、Event Listeners 查看绑定的事件
3、直观查看dom层级
4、直接调试css样式,可查看所在的文件
5、取色
6、查看盒模型
7、快速调节数值
8、Properties 快速查看选中元素的信息
9、CSS阴影图形化编写
10、图形化CSS动画编写
三、 Sources
1、ctrl + p 文件查找, :10:10 定位到当前文件10行10列
2、增加条件断点
3、普通断点
4、watch
5、DOM事件断点
6、
四、 Network
1、请求文件上右键,如复制,不想加载该文件
2、过滤器 lager-than:100k,status-code:200,mime-type:img/gift;不能留空格
五、 Performance
六、 Memory