浏览器调试技巧gif(或许有你想要的)

简介

本文主要介绍了一些谷歌浏览器的使用小技巧,来方便大家平时的开发和调试,有需要的朋友可以参考下。

本文共分为以下几部分:

主体内容

调试压缩文件

想要调试线上环境的时候,代码经常是压缩成一行,无法进行断点和修改,利用下面的操作便可以简单进行压缩文件调试。

dart 复制代码
source => 左上角Overrides => 开启Enable LocalOverrides(本地代理) => 找到调试源文件 => 右键Save for overrides => Pretty print(格式化代码) => 刷新页面

这里以掘金为例,测试跟踪掘金的登录流程。

观察某个对象实时变化

有时候想观察某个元素的变化规律,特别是鼠标拖动时,可以用Create live expression

ini 复制代码
Console => Create live expression(灰色眼睛)

例如实时观察body元素的宽度

快速复制请求

有时候想用postman调试接口参数,复制cookie步骤太繁琐?可以试试将请求直接复制成Curl命令

dart 复制代码
NetWork => Name => 右键某条请求copy => copy as cURL(bash)

寻找含有指定数据的请求

想要找某个字段是哪个接口返回的,可以用network隐藏的搜索栏

ini 复制代码
Network => 进入面板按下 Ctrl + F => 左上角搜索栏

例如搜索 article_id

触发断点的其他方式

可以试试定时器写debug

找到忘记释放的定时器

忘记释放的定时器会对性能造成影响,想要快速找到,可以试试定时器Breakpoints

dart 复制代码
Sources => Event Listener Breakpoints => Timer => setInterval fired

DOM断点

找到元素是在哪条js语句被修改

scss 复制代码
Elements => 右键元素 => Break on => subtree modification(子节点被修改时触发) || attribute modification(该节点属性被修改时触发) || node removal(该节点被移除时触发)

请求断点

想要对某条特点请求发送时进行断点,可以用 XHR/fetch Breakpoints

ini 复制代码
Sources => XHR/fetch Breakpoints => Add breakpoint(加号)

查找未使用的js 和 css代码

Chrome DevTools中的Coverage标签可帮助您查找未使用的JavaScript和CSS代码,它会实时更新js css 覆盖率,并帮你定位到未使用的代码

dart 复制代码
ctrl + shift + p => 输入 show coverage => 点击黑色圈圈(instrucment coverage)开始记录

例如:有如下代码,每次点击button按钮便使用一个css样式和一个js方法,观察coverage记录的js和css使用情况变化

注意下面git图的中间区域(我们的代码区,coverage会帮我们标注未使用和已使用的样式)和下边区域(统计区,统计已使用的总字节数)

定位页面卡顿原因

通过perfomance选项卡的录制功能记录下卡顿时期浏览器运行状况,然后通过分析Main(主线程)的带红色三角形的Task,找到耗时的js和dom操作。

ini 复制代码
perfomance => Record(黑色圈圈)

从下图可以看到,有两块带三角形的Task,一个是我们的点击事件(在里面生成3万个dom节点),另一个是浏览器事件(将3万个dom节点渲染到页面上)

快速拿到指定dom元素

console面板下,可以通过$0,$1,$2,$3,$4拿到最近点击过的五个元素,也可以通过('选择器')拿到元素, $('选择器')拿到所有符合条件元素

定位请求所走方法栈路径

ini 复制代码
NetWork => initiator => 鼠标悬浮指定请求就可查看请求方法栈路径

分析网络情况

对某个接口速度进行分析,到底是同时请求过多,还是服务器响应太慢,又或者内容太大

ini 复制代码
 NetWork => waterfall => 点击具体请求

调试悬浮样式

ini 复制代码
ctrl+shift+p => 禁用JavaScript

多窗口调试同域站点

应用场景:同域模式下,A页面在cookie种下临时信息(非幂等信息无法二次操作),然后点击按钮打开B页面,B页面利用完临时信息后立马删除,然后进行逻辑操作。需要查看B的打开时的逻辑,此时往往来不及打断点或者打开F12进入断点。 那么可以尝试下面步骤。利用同域页面共享渲染进程来进行debug

css 复制代码
在窗口一打开B页面,并打开F12并加入断点 => 在A种完cookie后进行跳转B之前进行断点阻止下一步执行 => 刷新B页面,放开A页面断点

只看某一域下面请求

ini 复制代码
network => filter => domain:你的域名

更多内容,可参考谷歌开发者文档,基本涵盖了devTools的所有操作 developers.google.cn/web/tools/c...

相关推荐
小小小小宇14 分钟前
前端实现合并两个已排序链表
前端
yngsqq32 分钟前
netdxf—— CAD c#二次开发之(netDxf 处理 DXF 文件)
java·前端·c#
mrsk34 分钟前
🧙‍♂️ CSS中的结界术:BFC如何拯救你的布局混乱?
前端·css·面试
jonssonyan36 分钟前
我自建服务器部署了 Next.js 全栈项目
前端
A了LONE40 分钟前
h5的底部导航栏模板
java·前端·javascript
专注VB编程开发20年42 分钟前
各版本操作系统对.NET支持情况(250707更新)
开发语言·前端·ide·vscode·.net
Zsnoin能1 小时前
AI + TailwindCSS快速搭建一个属于自己的TailwindCSS学习网站
前端·css
五号厂房1 小时前
聊一聊Javascript 中 hasOwnProperty和in操作之间的区别
前端
摆烂为不摆烂1 小时前
😁深入JS(六): 一文让你完全理解浏览器进程与线程
前端·javascript
qiyue771 小时前
Cursor 深度使用指南(二) - 新能力使用教程
前端·ai编程·cursor