1.主要功能有什么?
元素面板——通过操作DOM和CSS调整和检查页面;
控制台面板——记录诊断信息、作为 shell 在页面上与JS交互;
源码面板——设置断点来调试 JS、连接本地文件实时编辑;
网络面板——查看请求和下载的资源文件来优化网页加载性能;
性能面板——记录和查看网站生命周期内发生的各种事件;
内存面板——生成内存使用快照,分析页面占用内容情况;
应用面板——检查加载IndexedDB 、 Web SQL 数据库、本地和会话存储、cookie 、应用程序缓存、图片样式资源等等;
安全面板——调试混合内容问题,证书问题等等;
LightHouse——用于审核并提高页面质量的自动化工具;
2.通用技巧
1、copy()方法——通过copy拿到console的资源
2、Store as global——保存为全局变量
3、Save as——将日志信息保存到本地
4、HTML Copy——复制HTML元素
5、快捷键——常用的快捷键
6、命令面板——有意思的几个命令
3. Console技巧
3.1、$——经典的选择器
3.2、Console.log()的“bug”?
我们使用 console.log() 来打印某个对象,并且,两次打印之间,还会对这个对象进行修改,最后我们查看打印的结果发现,修改前的打印和修改后的打印内容一样。
举个例子:
为什么?
console 中打印出的对象,在你打印出他内容之前,是以引用的方式保存的,引用指向的是同一个地址。
如何解决?
解构方法{…object}。
使用资源面版中加断点。
使用 JSON.stringify() 方法处理。
3.3、Console中的异步
console默认是被 async 包裹的,因此我们在代码中使用的await可以直接在console中使用。
console中的await还可以直接获取Web APIs(https://developer.mozilla.org/zh-CN/docs/Web/API)
3.4、Console与Breakpoints
我们在source面板中可以添加Add conditional breakpoint…(条件断点),在满足条件表达式时触发断点。在调试过程中,不必修改代码,直接利用条件断点,可以在条件表达式中添加console.log()/console.time()/console.table()等等。
5、Console自定义格式
在DevTools的Settings中启用自定义:
如何定义formatter?
formatter是一个对象,包含三个方法:
- header : 处理如何展示在 console 的日志中的主要部分
- hasbody : 显示一个用来展开对象的 ▶ 箭头,返回 true;直接显示则返回false;
- body : 定义将会被显示在展开部分的内容中
其中,header 方法返回了一个 JsonML (JSON Markup Language - JSON 标记语言) 数组,由这些组成 标签名、属性对象、内容 (文本值或者其他元素)。举个例子:
比较有意思的formatter:
更多自定义formatter可以参考https://github.com/andrewdavey/immutable-devtools以及https://facebook.github.io/immutable-js/
3.6、Console的对象&方法
(1) queryObjects(ClassA)(对象查询)方法 —— 查询共有多少个实例化的ClassA对象。
(2) monitor(func) 方法 —— 每当一个 被monitor 的方法运行的时候,console控制台会把它的实例打印出来,包含 函数名 以及 调用它的参数。
(3) monitorEvents(element,event)方法 —— 监听事件,每次触发事件时,打印出其事件对象。
3.7、Console.log()之外的其他选择
(1) console.assert(assertValue, Msg) —— 断言打印,当我们传入的第一个参数为 假 时,console.assert 打印跟在这个参数后面的值。
(2) console.table() —— 表格形式打印
(3) console.dir() —— 打印节点所关联的js对象
(4) ctrl + shift + p -> show timestamps —— 给打印加上时间
(5) console.log() 基于堆栈自动缩进
(6)console面板中的“小眼睛” —— 实时表达式
在 Create live expression 中定义任何JS表达式,会不断更新
4.关于Network的操作
4.1、右键列出其他信息
右键列表表头,可以选择展示更多关键信息
4.2、给XHR请求加断点
在Source面板中,添加XHR/fetch Breakpoints,在页面发送与填入的url相匹配(contains)的请求时添加断点。
5.关于Elements的操作
1、选中元素后按 H 键可以快速隐藏元素,再次按 H 键可以显示
2、元素移动——鼠标按住拖拽/选中后ctrl+上下键
3、阴影编辑器——直观的展示阴影效果
ps:颜色选择器与动画编辑器同理
4、快速添加样式
5、快速展开所有DOM
6、DOM断点 —— 监听节点被添加或者移除 / 属性被改变
6.Drawer里都有什么
1、如何打开?
在DevTools中任意的选项卡里按 ESC 键就可以打开或者关闭;
通过 crtrl + shift + P 显示drawer的选项;
Drawer的选项卡:
Animations
Changes
Console
Coverage
Network conditions
Performance monitor
Quick source
Remote devices
Rendering
Request blocking
Search
Sensors
What’s new
2、Sensors(传感器)
Drawer 里的 Sensors(传感器) 面板可以让你模拟特定的位置——支持从预定义的位置中进行选择,添加自己的位置,或者手动键入纬度/经度。
3、Network conditions(模拟网络条件)
Network conditions可以模拟特定的网络行为——模拟互联网为典型的3G网络甚至离线! 除此之外,Network conditions 面板还可以模拟特定的用户代理。