学习背景
说起来开发者工具一直都在用,但是常用的就是看看元素标签,改改CSS,看看请求信息以及缓存信息.
当有一天,在网上不小心看到,可以在开发者工具里面直接修改css源文件,以前可以在浏览器里面调试看效果,然后再跑到IDE里面重新写一次刚刚调试的代码,才知道原来有这么简单的方法,而我还停留在原始社会
当有一天,在网上不小心看到,可以在network里面直接限制网络访问速度,以前要调试某个请求看页面效果时,由于网速太快,不得不一直不停的刷新才能偶尔看到效果,才知道可以这么方便的解决之前的疼点,而我居然还停留在原始社会
这还是不小心发现的2个黑科技,那肯定在开发者工具里面还隐藏着更多未知的好用的东西,而开发者工具几乎每天都要打交道的.不学这个去学webpack?去学单元测试?去看vue源码?NONONO,先把基础的弄好了再搞那些高深的.
SO,决定从头到尾把开发者工具文档过一下,并且是过英文版的,顺序练习一下英文阅读能力..GOGOGO
1.1 打开面板
| 快捷键 | 用途 |
|---|---|
| ctrl + shift + i | 打开/关闭开发者工具 |
| ctrl + shift + c | 打开元素面板 |
| ctrl + shift + j | 打开js面板 |
| ctrl + shift + b | 打开/关闭收藏夹 |
1.2 全局快捷键
| 快捷键 | 用途 |
|---|---|
| ctrl + shift + d | 切换面板停靠位置 |
| ctrl + shift + m | 切换手机/pc模式 |
1.3 其他快捷键
| 快捷键 | 用途 |
|---|---|
| ctrl + [ | 向左滑动选项卡 |
| ctrl + ] | 向右滑动选项卡 |
