1。打开DevTools菜单>MoreTools>DeveloperTools快捷键F12option+command+i(mac)Open会选择Elementsoption+command+j(mac)Open会选择Console2.command用快捷键ctrl+shift+打开菜单pcommand+shift+p(mac)修改DevTools的主题颜色command+shift+p进入主题快捷截图在命令菜单中输入screenshot移动窗口位置在命令菜单中输入Dock3.ElementsTabbar3-1DOM部分查看Dom元素可以在Dom元素上右击，然后选择查看查询Dom快捷键ctrl+fcommand+f（mac）查询方式文本查询直接输入标签名或类名：div，anony-navcss选择器输入css选择器:.container,#listXpathInputxpathexpression://div/ulInspect(element)---consolefunction在console中输入这个函数：inspect(document.body)3-2Stylesection3-2-1StylesPanelstyle面板是当前样式表的样式。使用element.style添加样式以使状态永久化。例如：使:hover样式永久化。添加或删除某个类类名复制样式样式描述3-2-2计算面板这个面板会列出所有当前使用的样式，不像Styles，以元素和类名分隔3-2-3布局面板这个面板会列出页面上所有的flex布局和grid布局flex布局grid布局在Styles中和flex类似，还有一些图形属性可以点击设置，这里就不一一列举了。3-2-3EventListeners面板这个面板会列出页面中所有绑定的事件3-2-4DOMBreakpoints面板这个面板后面会在js中介绍3-2-5Properties面板这个面板会显示属性选中的dom节点3-2-6Accessibilitypanel这个面板可以用来帮助我们构建无障碍的页面。4.ConsoleTab栏4-1语句执行和$_$_可以返回前面语句的执行结果4-2$0,$1...在控制台中，$0可以用来返回前面选中的dom元素，同理,$1会返回到上一个,$2会....在Elements中选中一个节点时,还会有提示4-3控制台的一些方法控制台的一些方法,比如:log,error,warn,table,group,time,trace,clear4-4日志级别筛选4-5变量跟踪点击这个小眼睛，可以添加变量，然后在控制台修改更改，上面的值也会实时更新5.SourcesTab如果在vue和react框架中使用时，断点调试时会跳转到框架的代码，只要框架在CallStack中设置为不检索，添加5-后就会有这个效果1.在js代码中编写Debugger触发调试5-2.单击SourcesTab5-3中的行号。Dom节点变化触发断点（暂停执行）5-4.通过EventListener触发断点6.NetworkTab栏6-1。面板说明6-2.增加网速显示。Chrome自带Fast3G；3G慢，也可以自己加网速限制6-3。更多网络设置（ua、传输方式）6-4．导入导出请求文件点击到处都会有一个json文件，里面包含了所有的请求信息。假设客户端的请求有问题，开发环境无法复现，可以让客户端去har文件，然后在开发环境导入har文件，检查问题。
