chrome-devtools 谷歌浏览器开发者工具 使用总结

一直在用Chrome devtools，用了6、7年，十分好用，在此总结一些非常有用的东西(需要一定基础和知识),功能强大不一一介绍下贴文档自行查阅
官方文档

动态修改页面

老练的前端开发同学应该非常熟悉，我曾以为是每个前端开发的必备技能，但是事实上很多人不知道，f12打开开发者工具选择elements可以定位元素(快速)、修改css样式（直观）、查看事件等等，注意是临时修改，刷新则还原，满意的时候需要自行持久化到自己代码中。这些老生长谈的就不说了，说点比较偏的
你是不是还在console使用document.getElementById或者有jquery加载的话$("")?其实当你鼠标选择dom元素后$0就能取得该element

格式化压缩的js

适配移动设备分辨率

调试js、拦截报错

执行页面点击事件

你是不是见过奇葩页面翻页的时候按钮总是跳来跳去,这时候选择翻页按钮

$0.click()console调用ta的click（点击）方法

就能翻页
如果需要再翻页,按方向键上键找到之前输入的命令再回车即可,如果还觉得麻烦可以next=$0暂存一页按钮句柄，然后再选择一个元素$0.onclick=()=>{next.click();}将翻页动作绑定在这个小元素的点击事件上，然后点此元素即可翻页(不适用与页面刷新的翻页类型[现在基本都是不刷新页面翻页的])

模拟JIRA输入标签（jq）

$("#issuelinks-issues-textarea").val("test");//设置id为issuelinks-issues-textarea的输入控件标签
$("#issuelinks-issues-textarea").blur();//触发标签计算

页面截图

ctrl + shift + p打开命令菜单输入>capture选择一种截图方式,其中full size screenshot比较常用

刷新图标

这个一般人不知道,很多人疑惑为什么我开发的网图标不刷新，ctrl+f5是更彻底的刷新,按即加载图标