打开Chrome开发者工具
- 在Chrome菜单中选择更多工具>开发者工具
- 在页面元素上右键点击,选择检查
- 使用快捷键Ctrl+Shift+I(Windows)或Cmd+Opt+I(Mac)
- 打开最近使用的面板Cmd+Option+I(Mac)或Ctr+Shift+I(Windows)
Elements元素面板
- 检查元素,点击右上角的检查按钮(箭头符号)
快捷键Cmd+Opt+C(Mac)或Ctrl+Shift+C(Windows,Linux,Chrome OS)
- left or right找到层级对应的父(子)集,打开关闭元素对应的层级
- up or down往上(下)移动
- 迅速将页面滚动到选中元素,点击右键,选择Scroll into view
- 查找对应内容的节点,快捷键Ctrl+F or Cmd+F
- 编辑标签内的内容,双击标签中间内容
- 编辑标签对应的属性,双击开始标签
- 重构DOM节点,鼠标拖拽移动对应的标签到对应位置
- 强制改变状态,点击:hov,选中想要的状态
- 隐藏节点,选中节点按H键,显示隐藏对应的标签
- 删除节点,选中节点,按Delete键,或者点击右键选择Delete Element,然后按Ctrl+Z 或Cmd+Z,返回删除前的状态
- 控制台选中节点
按Escape键调出Console控制台,选中对应的节点,输入$0,鼠标移到对应的输出结果上,页面选中对应的节点 - 将对应的节点存储为全局变量
选中节点点击右键,选中Store as global variable,在控制台输出temp1…… - 复制JS路径,选中节点,点击右键选择Copy > Copy JS path,在控制台粘贴回车
- DOM节点改变打断点,选中节点,右键Break On > Attribute Modifications.点击DOM Breakpoints,点击回车跳转到改变样式的js文件
- 对应移除DOM节点,节点修改
- 按HTML格式进行修改
打开more actions菜单并选择Edit as HTML
- 按F2(Windows/Linux)或Fn+F2(Mac)
- 按Esc可以退出编辑而不保存
- 查看元素事件侦听器Event Listeners
- 如果启用Ancertors复选框,除了当前选定节点的事件监听器外,还会显示其祖先实体的事件侦听器
- 启用Framework listeners复选框时,DevTools会自动分析事件代码的框架或内容库封装部分,然后告诉你实际复选框,事件侦听器代码可能会在框架或内容库代码的地方解析
DevTools修改CSS
点击空白处新增样式属性及值
点击.cls旁边的加号增加选择器样式
Console控制台面板
- 快捷键Cmd+option+J(Mac)或Ctrl+Shift+J(Windows,Linux,Chrome OS)
- 以抽屉式导航栏打开,按ESC(点击Console时隐藏)
- 点击选择Show Console
- 消息堆叠,左侧显示一个数字,表明重复次数
- 不堆叠时选择show timestanps
- 处理控制台历史记录
- 清除,点击右键clear console,控制台输入clear()
- 按Ctrl+L
Sources源代码面板
一般在这个面板进行断点调试,找出对应代码问题
在要进行断点的那一行点击右键,会出现如下面板
其中:
- Add breakpoint 在这行增加一个断点,当代码执行到这一步时会暂停
- Add conditional breakpoint 在这行增加条件断点,满足某种条件时,代码执行到这步会暂停,一般用于复杂场景具体使用
- Add logpoint 在Console面板输出你想要看的变量,不用在代码中添加一行,后续又要删除对应代码具体使用
- Never pause here 在这行永远都不暂停,当在一个遍历中增加debugger时,断点不停的进入,可用点击此属性,跳过当前断点具体使用
- Add script to ignore list 在Settings > ignore List中增加忽略的代码,断点不会进入
Network网络面板
Open in new tab 在新的页面打开
Clear browser cache 清除浏览器缓存
Clear browser cookies
Copy 复制对象
Copy Link Address:将请求的网址复制到剪贴板
Copy Response:将响应包体复制到剪贴板
Cop as cURL:以 cURL 命令形式复制请求
Copy All as cURL:以一系列 cURL 命令形式复制所有请求
Copy All as HAR:以 HAR 数据形式复制所有请求
Copy as fetch 复制一条请求,可修改i请求参数后在控制台重新发送请求
Replay XHR 重新发送请求
Performance性能面板
Memory内存面板
Application应用面板
Audits审计面板
Security安全面板
常用快捷键
-
审查元素Cmd+Opt+C(Mac)或Ctrl+Shift+C(Windows,Linux,Chrome OS)
-
打开控制台面板Cmd+option+J(Mac)或Ctrl+Shift+J(Windows,Linux,Chrome OS)
-
刷新页面F5,Ctrl+R或Cmd+R
-
刷新页面并忽略保存Ctrl+F5,Ctrl+Shift+R/Cmd+Shift+R
-
放大DevTools Ctrl+‘+’/Cmd+Shift+‘+’
-
缩小DevTools Ctrl+‘-’/Cmd+Shift+‘-’
-
DecTools恢复大小 Ctrl+0/Cmd+0
强制改变元素状态Force element state
Shift + click,颜色的切换
Console
勾选Preserve log,保留页面加载前的日志输出
网页性能优化,查看网页代码的使用率****
查看页面重绘的标签****
More tools > .Rendering >
监控页面动画的变更****
More tools > .Animations>
网络条件与User Agent设置****
More tools > .Network Conditions>
调试Android设备的方法Remote Devices****
快速以编辑状态查看一个站点加载的所有资源
快速搜索文件:
Ctrl + P 查看文件(字段搜索)
打开文件后:
Ctrl + F根据字段搜索对应文件里面的字段
按住Ctrl点击鼠标进行多处编辑
Ctrl + D 选择多个相同字段
Ctrl + G 跳转到对应的行数
查找所有文件的字段****
More tools > Search
Ctrl + Shift + F 搜索文件里面所有字段
浏览器阻止一些资源****
More tools > Request blocking设置自己想要的正则表达式
如何在浏览器中模拟传感器的数据****
More tools > Sensors
性能分析****
Performance
FPS帧
Network
快捷键WASD
Call tree 跳转到源码
内存监控的原理和方法****
值类型与引用类型的区别
栈和堆
什么是 manifest****
Service workers****
快速清空所有的本地存储资源****
Indexeddb****
https://caniuse.com/
http://www.tfan.org/using-indexeddb/
Web SQL****
关系型数据库,已经被废弃
快速转存站点资源****
Security节点功能讲解****
Ssl-checker.online-domain-tools.com
全站https
audit的使用详解****
Lighthouse
yslow
文档