打开开发者工具：F12
打开命令菜单：ctrl+shift+p
DevTool黑色主题：在命令菜单中输入dark theme
截图：命令菜单输入screenshot
dock：undock将开发者工具变成一个独立的出口，dock to right
拥有css调试
1.检查元素：橙色外边距，绿色内边距，蓝色元素本体
移动设备的样式
2.查询dom树
快捷键：ctrl+f
查询方式：文本查询：setting-item，css选择器：section.settings，xpath：//section/div（// 表示不指定标签全局下面去找section，/表示在section下面的div）
3.编辑样式
styles面板：修改样式属性
固定住hover样式：在styles的右侧有一个:hov，将:hover选中即可
清除元素的class，而不是样式：在styles的右侧有一个.cls，可以勾选想要清除的class类
复制样式：选中要复制样式的元素，右击元素在element中展示的标签，右击 - copy - copy styles - 粘贴要需要使用的样式中
computed面板：将所有本身的样式展示出来，点击show all展示所有的样式，包括从父元素中继承过来的样式，group对样式进行功能上的区分
layout面板：grid网格布局，flexbox弹性布局，将网页中所有用到这两种布局的元素展示出来
properties：所有节点的属性
accessibility：构建一个无障碍的界面
1.执行语句
2.$_：返回上一条语句执行的结果
3.$0，$1，$2…：上一个选择的DOM节点
4.console.log，error，warn，table，clear，group，time，assert，trace
5.只展示某个类型的log，搜索框后面的default levels
6.观测变量：点击小眼睛，输入想观测的变量，就可以实时获取到需要观测的变量了
用于js调试
在js代码中输入一个debugger就会在相应的时机进行debugger调试
点击左侧行号就会打一个断点
检测某个变量：在右侧断点区的watch中输入需要监测的变量名
在elements面板中右击元素标签，break on：subtree modifications（节点里面的子节点被修改了代码会被暂停），attributes modifications（节点属性被修改了代码就会被暂停），node removal （节点从文档中被删除了代码会暂停）
发起各种资源请求的面板
preserve log：记录历史请求，页面有跳转的时候会保留之前的请求
disable cache：去除浏览器缓存
no throtting：节流器，在3G或者离线的状态下是什么样子，自定义环境
小wifi样子按钮：user agent（用户代理）：模拟用户使用的浏览器，将浏览器类型放在request headers中发送给后端，方便后端对不同浏览器设备型号做一些操作，accepted content-encodings：浏览器编码格式
上传下载样子的按钮：当客户在访问网页遇到问题时，可以下载发送给我们，我们就可以拿到客户当是发送请求时浏览器和服务器的传输协议的json文件，我们这边导入就可以看到当时客户发起的请求，我们这边再进行分析
查看存在客户端的键值对数据
localStorage：一直存在，直到人为清除，不同域名的local是存在不同域名下的
sessionStorage：会话关闭自动清除
cookie：documnet.cookie=“username=kaka”