Chrome
元素面板(Elements)
- HTML: 完整展示HTML文件内容(包含iframe的内容)
- Styles: 站点的样式文件
- Computed : 计算后的真实样式
- Event Listeners: DOM中事件的监听
- DOM Breakpoints: DOM变化时的监听
- Properties: …
- Accessibility: 无障碍相关
HTML
完整的展示HTML内容, 包含JS方法的绑定, 元素样式等等, Ctrl + F 开启搜索
支持 字符, 选择器及XPATH 选择, 例如 //*[@id="index-kw"]
Styles
用于更改样式并直接预览, 遵循标准的CSS规范, 点击+按钮即可添加选择器样式
EventListeners
对当前选中的DOM元素的绑定的事件, 默认会包含上层的事件代理, 将Ancestors前面的对勾关闭即可看到本层正确的事件监听
DOM Breakpoints
对当前选中的DOM元素的状态发生时候的断点监听
右键点击DOM, 或点击左侧..., 选择 break on
- subtree modifications: 添加、删除、移动 时触发
- attribute modifications: 属性修改 时触发
- node removal: 删除 时触发
控制台(Console)
console
.log: 打印信息.debug: 调试信息.info: 等同log.warn: 输出警告信息.error: 输出错误信息.time(<GROUP_NAME>)/.timeEnd(<GROUP_NAME>): 打印时间间隔(分组名称需要对应, 只能使用一次).table(<LIST_OBJECT>): 表格形式打印列表对象.group(<STRING>)/.groupEnd(): 分组打印信息.assert(<Boolean>, <MESSAGE>): 断言! 第一个参数为false则输出.trace: 堆栈信息.count: 代码被调用的次数.dir: 树状展开对象.dirxml: 展开xml/html
除了以上用法, 包括占位符, 打印样式字符, 输出图片 等等 感兴趣的同学搜索学习即可
观察对象
点击小眼睛后, 出现 Expression(表达式), 输入 需要监听的对象, 对象每次更改则都能看到变化
1
2
3
let now = (new Date()).toLocaleString() // 定义变量, 添加监听
setInterval(() => now = (new Date()).toLocaleString(), 1000) // 每秒刷新
// 添加监听后查看变化
网络(Network)
- 响应内容搜索: 支持正则和大小写区分, 回车触发搜索
- 禁用缓存: 勾选
Disable cache即可禁用所有缓存(未打开控制台不生效) - 网络类型 : 点击网络列表, 选择
add..., 新窗口点击add custom profile添加自定义的网络状态, 切换使用即可 - 快捷过滤: 根据文本框/响应类型快捷过滤请求列表, 以及时间线过滤(此处是两种过滤的交集), 常用的过滤支持如下:
- 文本: 路径过滤
- domain: 仅显示来自指定域的资源
- has-response-header: 包含指定HTTP响应头的资源
- method: 指定请求方法, 例如GET, POST等(区分大小写)
- mime-type: 响应 MIME 类型的资源, 对应 Content-Type 的类型
- status-code: HTTP 状态代码 200, 301, 400, 500 等
- 瀑布时间线: 请求列表内的
waterfall列查看网页请求过程的耗时及状态
分析耗时
- 请求: 请求内容体上传到服务器接受花费的时间
- 等待: 服务器处理逻辑的时间(响应体第一个字节接受的时间)
- 响应: 响应体下载花费的时间
性能分析(Performance)
…
内存分析(Memory)
…
其他
命令
唤醒命令窗口: Ctrl + Shift + P 或 Command + Shift+ P（Mac）
实用技巧
阻止请求
开启命令, 输入 >block 后 选择 Show Request blocking 命令后, 根据下方窗口提示操作
