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

酸萝卜
779 阅读4分钟

简介

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

本文共分为以下几部分：

主体内容

调试压缩文件

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

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

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

调试压缩.gif

观察某个对象实时变化

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

Console => Create live expression（灰色眼睛）

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

定时观察.gif

快速复制请求

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

NetWork => Name => 右键某条请求copy => copy as cURL(bash)

curl.gif

寻找含有指定数据的请求

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

Network => 进入面板按下 Ctrl + F => 左上角搜索栏

例如搜索 article_id

search.gif

触发断点的其他方式

可以试试定时器写debug

settimeoutdebugger.gif

找到忘记释放的定时器

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

Sources => Event Listener Breakpoints => Timer => setInterval fired

timerBreakpoints.gif

DOM断点

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

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

nodeBreakpoint.gif

请求断点

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

Sources => XHR/fetch Breakpoints => Add breakpoint(加号)

fetchBreak.gif

查找未使用的js 和 css代码

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

ctrl + shift + p => 输入 show coverage => 点击黑色圈圈（instrucment coverage）开始记录

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

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

coverage.gif

定位页面卡顿原因

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

perfomance => Record(黑色圈圈)

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

record.gif

快速拿到指定dom元素

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

303f871912b360026d654ac3f9e0730d.md.gif

定位请求所走方法栈路径

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

iniatial.png

分析网络情况

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

 NetWork => waterfall => 点击具体请求

Snipaste_2023-12-22_22-30-36.png

Snipaste_2023-12-22_22-33-18.png

调试悬浮样式

ctrl+shift+p => 禁用JavaScript

动画.gif

多窗口调试同域站点

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

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

只看某一域下面请求

network => filter => domain:你的域名

动画.gif

完

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

avatar
文章
阅读
粉丝