浏览器调试技巧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...

相关推荐
姑苏洛言5 分钟前
编写产品需求文档:黄历日历小程序
前端·javascript·后端
知识分享小能手29 分钟前
Vue3 学习教程,从入门到精通,使用 VSCode 开发 Vue3 的详细指南(3)
前端·javascript·vue.js·学习·前端框架·vue·vue3
姑苏洛言1 小时前
搭建一款结合传统黄历功能的日历小程序
前端·javascript·后端
你的人类朋友2 小时前
🤔什么时候用BFF架构?
前端·javascript·后端
知识分享小能手2 小时前
Bootstrap 5学习教程,从入门到精通,Bootstrap 5 表单验证语法知识点及案例代码(34)
前端·javascript·学习·typescript·bootstrap·html·css3
一只小灿灿2 小时前
前端计算机视觉:使用 OpenCV.js 在浏览器中实现图像处理
前端·opencv·计算机视觉
前端小趴菜053 小时前
react状态管理库 - zustand
前端·react.js·前端框架
Jerry Lau3 小时前
go go go 出发咯 - go web开发入门系列(二) Gin 框架实战指南
前端·golang·gin
我命由我123454 小时前
前端开发问题:SyntaxError: “undefined“ is not valid JSON
开发语言·前端·javascript·vue.js·json·ecmascript·js