Chrome开发者工具（DevTools）使用技巧

Chrome开发者⼯具（DevTools）使⽤技巧9⼤功能⾯板1.Elements元素⾯板：检查和调整页⾯，调试DOM和CSS2.Network⽹络⾯板：调试请求，了解页⾯静态资源分布，⽹页性能检测3.Console控制台⾯板：调试JavaScript，查看⽇志，交互式代码调试4.Sources源代码资源⾯板：调试JavaScript页⾯源代码，进⾏断点调试5.Application应⽤⾯板：查看和调试客户端存储，如Cookie、LocalStorage、SessionStorage6.Performance性能⾯板：查看页⾯性能细节，细粒度对⽹页载⼊进⾏性能优化7.Memory内存⾯板：JavaScriptCPU分析器，内存堆分析器8.Security安全⾯板：查看页⾯安全及证书问题9.Audis⾯板：使⽤GoogleLighthouse辅助性能分析，给出优化建议打开⽅式在Chrome菜单中选择：更多⼯具>开发者⼯具在页⾯元素上右键点击，选择“检查”使⽤快捷键：command+option+I(mac)或Ctrl+shift+I(Windows)打开最近关闭的状态command+option+C(mac)或Ctrl+shift+C(Windows)直接打开Elements元素⾯板command+option+J(mac)或Ctrl+shift+J(Windows)直接打开Console控制台⾯板禁⽤缓存1.切换到“Network”⽹络⾯板2.勾选“Disablecache”项⼿动清理⽹站缓存1.按command+shift+p（windows按Ctrl+shift+p），弹出命令输⼊框2.输⼊“clearsitedata”3.敲回车键弹出命令输⼊框输⼊命令此操作能清空Cookies、WebSQL、ServiceWorkers、CacheStorage、IndexedDB、LocalStorage、ApplicationCache展开某标签下所有层级的标签1.切换“Elements"元素⾯板2.按住Alt键点击某个⽂档节点左侧的⼩箭头强制设置元素的状态1.选中元素2.点击Style⾯板下的“:hov”按钮3.勾选要切换的状态查找某元素绑定的事件1.切换“Elements"元素⾯板，点击⽂档节点2.选择“EventListeners”页签3.展开相应的事件名，如“click”4.对“handler”点击右键，选择“Showfuncitondefinition”选择⽂档节点选择EventListeners页签展开事件右键“handler”定位结果打开某个资源⽂件1.按command+p（windows按Ctrl+p），弹出⽂件搜索框2.输⼊⽂件名3.敲回车键弹出⽂件搜索框输⼊⽂件名快速定位源代码⾏数1.按command+p（windows按Ctrl+p），弹出输⼊框2.输⼊:⾏数，如":480"3.敲回车键格式化代码点击已打开⽂件左下⾓的花括号按钮格式化结果对某⾏代码打断点点击代码左侧的⾏号⿏标移⾄代码中的变量可实时查看值QQ20190822-134244.png监听断点环境下的变量1.切换“watch”⾯板2.点击“+”按钮3.输⼊要监听的变量4.敲回车键查找加载图⽚的代码1.切换“Network”⽹络⾯板2.点击“Initiator”列下的⽂件名定位结果全局查询请求头和响应体1.切换“Network”页签2.点击左上⾓的“放⼤镜”按钮3.在弹出的搜索框中输⼊要查询的内容4.敲回车键QQ20190822-090016.png切换⽹络模式1.切换Network⽹络⾯板2.点击“online”下拉⾯板3.选择要切换的⽹络模式限制⽹速1.切换Network⽹络⾯板2.点击“online”下拉⾯板3.选择“add”选项4.点击“Addcustomprofile...”按钮5.依次输⼊“ProfileName”、“Download”、“Upload”等输⼊项6.点击"Add"按钮7.回到Network⽹络⾯板切换所新增的⽹络模式在Console控制台查找DOM1.切换到Console控制台⾯板2.输⼊：document.querySelectorAll("#APP")3.敲回车键，展开输出结果，点击红⾊框位置将会跳转到相应的元素节点跳转结果在控制台中输⼊多⾏代码按住Shift键敲回车即可换⾏换⾏效果⼿动添加Cookie1.在Application⾯板中按esc键，打开控制台⾯板2.输⼊：document.cookie="test=1"⼿动添加LocalStorage1.在Application⾯板中按esc键，打开控制台⾯板2.输⼊：localStorage.setItem('test','1')模拟⼿机调试点击DevTools左上⾓的⼿机图标按钮，如图：⼿机调试⾯板菜单介绍打开传感器设置⾯板1.按command+shift+p（windows按Ctrl+shift+p），弹出命令输⼊框2.输⼊“showSensors”3.敲回车键传感器设置⾯板介绍QQ20190822-235212.png设置⽹页Useragent1.按command+shift+p（windows按Ctrl+shift+p），弹出命令输⼊框2.输⼊“showNetworkconditions”3.取消勾选“Selectautomatically”4.点击“Custom...”下拉框，选择相应的代理设备QQ20190822-235730.png截图1.按command+shift+p（windows按Ctrl+shift+p），弹出命令输⼊框2.输⼊：screenshot3.如下图选择相应的截图⽅式：Captureareascreenshot：截取某个区域（需要选择某个标签）Capturefullsizescreenshot：截取整个⽹页Capturenodescreenshot：截取某个标签节点Capturescreenshot：截取当前可视区域集成Vue.js开发者⼯具1.进⼊官⽹：2.选择“⽣态系统”菜单下的“Devtools”3.下载源码后解压4.在终端切换到解压后的⽂件⽬录5.输⼊打包命令（需安装webpack）：cdshells/chrome&&cross-envN