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

对国足恨铁不成钢

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

使用快捷键能快速打开 DevTools，但不同的快捷键可以打开不同的 tab :
系统元素控制台网络Windows 或 LinuxCtrl + Shift + CCtrl + Shift + JCtrl + Shift + IMacCmd + Option + CCmd + Option + JCmd + Option + I重新发送请求

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

修改参数重新发送请求

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

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

VUE3 响应式数据格式化输出

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

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

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

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

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

快速选择元素

浏览器自身提供了$,$$ 快速的选择页面中的元素，用起来有点像 jquery 中$。

1. `bar`
2. $ // ƒ $() { [native code] }  说明是浏览器自身提供的
3. $('#bar') // 获取dom元素节点
4. $$('#bar') // 获取dom元素对象

复制代码

日志点


在线上环境可以通过使用日志点，在线上上环境进行console.log，当然大部时候直接断点调试可能会更快。
来源:https://www.cnblogs.com/flytree/p/18162755
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！