浏览器开发者工具DevTools中提升效率的小技巧

DevTools 非常强大除了常用的查看元素，进行断点调试或许还有些你不知道的小技巧，小功能。如可以快速的重新发送请求，快速选择元素，在控制台中使用npm库等，让你能够更加高效的进行开发。不定时更新~

打开开发者工具的快捷键

使用快捷键能快速打开 DevTools，但不同的快捷键可以打开不同的 tab :

重新发送请求

有时在调试的使用仅想对某个接口重新请求，但又不想刷新页面，就可以使用重放XHR功能，快速的保留参数重新请求。

修改参数重新发送请求

若是不想使用 postman等工具，且要快速的修改请求参数，可以在将请求复制出来，然后直接修改后发送：

然后在控制台中修改，如是 get 请求修改url，post 请求修改body，然后回车就能发送请求了，它会返回一个 Promise 对象。

VUE3 响应式数据格式化输出

因为 vue3 中响应式系统借助了 Proxy API，所以直接输出时它是个 Proxy 对象，查看起来还是不太直观的，如：

因为 vu3 内部做了自定义格式的实现，所以在设置中打开自定义格式设置工具就可以更直观的查看响应式数据了。

vue3 源码中自定义格式化的实现：

查看请求的资源是否使用了压缩，用的是什么压缩算法

其实就是查看响应的 Content Encoding ，在网络请求中鼠标右键 ==> Response Headers ==> Content Encoding。如下：可以看到资源请求使用了brotli或gzip压缩算法。

快速选择元素

浏览器自身提供了$,$$ 快速的选择页面中的元素，用起来有点像 jquery 中$。$() 是document.querySelector()的简写，
$$() 是document.querySelectorAll()的简写。

`<div id="bar">bar</div>` `<div class="foo">foo1</div>` `<div class="foo">foo2</div>` $ // ƒ $() { [native code] }  说明是浏览器自身提供的 $('#bar') // 返回文档中与指定选择器或选择器组匹配的第一个Element对象。 $$('#bar') // 返回与指定的选择器组匹配的文档中的元素列表 (使用深度优先的先序遍历文档的节点)。返回的对象是 NodeList 。 

日志点

在线上环境可以通过使用日志点，在线上上环境进行console.log，当然大部时候直接断点调试可能会更快。?

控制台使用npm包

借助 console importer (https://chromewebstore.google.com/detail/console-importer/hgajpakhafplebkdljleajgbpdmplhie) 插件可以直接在控制台中使用npm上或cdn上的包。

安装插件后可以使用$i('包名或cdn资源')导入三方包，如使用day.js:

更多技巧

https://devtoolstips.org/ （英文）
https://developer.chrome.com/docs/devtools/tips （英文，有视频讲解）