Chrome|Chrome DevTools完全使用攻略
1.打开Dev Tools
- 菜单>更多工具>开发者工具
- 快捷键
F12option+command+i（mac） 打开会选中Elementsoption+command+j（mac） 打开会选中Console
- 打开快捷键
ctrl+shift+pcommand+shift+p（mac）
- 修改Dev Tools主题颜色
command+shift+p- 输入
theme
文章图片
- 快捷截屏
- 在命令菜单中输入
screenshot
文章图片
- 在命令菜单中输入
- 移动窗口位置
- 在命令菜单中输入
Dock
文章图片
- 在命令菜单中输入
文章图片
3-1 DOM部分
- 检查Dom元素可以在Dom元素上右键，然后选择
检查 - 查询Dom
- 快捷键
ctrl+fcommand+f（mac）
- 查询方式
- 文本查询
直接输入标签名或者类名 ：div、anony-nav
- 【Chrome|Chrome DevTools完全使用攻略】css选择器
输入css选择器：.container、#list
- Xpath
输入xpath表达式：//div/ul
- Inspect(element) --- console函数
在console中输入此函数：inspect(document.body)
- 文本查询
- 快捷键
Styles面板
style面板就是当前样式表的样式
- 用
element.style添加样式
文章图片
- 让状态常驻
- 例如：让
:hover样式常驻
文章图片
- 添加或移除某一个class类名
文章图片
- 复制样式
文章图片
- 样式说明
文章图片
文章图片
文章图片
- 例如：让
Computed面板
这个面板会列出来当前所有的使用样式，不会像Styles一样，按照元素、类名分开
文章图片
3-2-3
Layout面板
这个面板会列出来页面中所有的flex布局和grid布局
文章图片
flex布局
文章图片
文章图片
- grid布局
文章图片
- 类似
flex在Styles中也有一些图形化的属性可以点击设置，这里就不列举了
Event Listeners面板
这个面板会列出来在页面中所有绑定的事件
文章图片
3-2-4
DOM Breakpoints面板
这个面板稍后在js部分中介绍3-2-5
Properties 面板
这个面板会显示出所选dom节点的属性
文章图片
3-2-6
Accessibility面板
这个面板可以用来帮助我们构建无障碍的页面。这里就不介绍了4.Console Tab栏
4-1 语句执行以及
$_
$_可以返回上一条语句的执行结果
文章图片
4-2
$0、$1...
在控制台可以通过$0来返回上一个选中的dom元素，同理，$1会返回上上一个，$2会....，当在Elements中选中节点时，也会有提示
文章图片
文章图片
4-3
console的一些方法
console的一些方法，例如：log、error、warn、table、group、time、trace、clear
文章图片
文章图片
4-4 Log级别筛选
文章图片
4-5 变量跟踪
点击这个小眼睛，可以加变量，之后在控制台修改变了，上面的值也会实时更新
文章图片
5.
Sources Tab栏如果使用在vue、react框架，断点调试的时候会跳转到框架的代码中去，只要在5-1. 在js代码中写Call Stack中把框架设置成不检索就行
文章图片
添加后会是这种效果
文章图片
debugger触发调试
5-2. 在SourcesTab中点击行号
文章图片
5-3. dom节点变化触发断点（暂停执行）
文章图片
5-4. 通过
Event Listener 触发断点
文章图片
6.
Network Tab栏6-1. 面板说明
文章图片
6-2. 新增网速显示
chrome 自带了Fast 3G;
Slow 3G，也可以自己新增网速的限制
文章图片
6-3. 网络更多设置(ua、传输方式)
文章图片
6-4. 导入和导出请求文件
文章图片
点击会到处一个json文件，里面包含了所有的请求信息，假设当客户那边请求出现问题，而开发环境无法复现时，可以让客户到处har文件，之后再在开发环境导入har文件，查看问题。
推荐阅读
- 走进Chrome拓展开发，定制自己的图床扩展
- chrome|Selenium Chrome驱动安装(windows系统)
- 如何使用|如何使用 Chrome 调试运行在手机上的 SAP UI5 Cordova 混合应用试读版
- 蓝桥杯|蓝桥杯AcWing学习笔记 6-1双指针的学习（附相关蓝桥真题（日志统计、完全二叉树的权值））
- c++|c++ 11 线程池---完全使用c++ 11新特性
- chrome插件从0到1
- Python使用chrome配置selenium操作详解
- 基础|为何Safari不如Chrome（）
- 其他记录|同样是webkit内核为什么chrome和safari兼容性会不一样（）
- Google|chrome如何手动同步（）