前端浏览器高级调试技巧整理
1. 一键重新发起请求
场景:
在和后端联调时用的比较多,快速的重发请求,不用再在页面上点击
步骤:
选中“Network”
点击 Fetch/XHR
选择要重新发送的请求(鼠标点击一下)
右键选择Replay XHR
实操演示:
2.在控制台快速发送请求
场景:
在和后端联调时用的比较多,快速的在控制台重发请求,不用再在页面上点击,可能会有跨域问题,这个可以给浏览器安装插件解决
步骤:
选中“Network”
点击 Fetch/XHR
选择Copy as fetch
控制台粘贴代码
修改参数,回车
实操演示:
3.复制JavaScript变量
举例一个使用场景:
后端需要你组装一个数据格式,然后你经过一系列编写逻辑代码后,通过log打印到控制台时,可以使用copy函数将这个数据发给后端。
注意:copy函数不是由 ECMAScript 定义的,而是由 Chrome 浏览器提供的。使用此功能,你可以将 js 变量的值复制,方便在其他位置使用。
4.控制台获取Elements面板选中的元素
场景:
对于嵌套过深的,或者三方框架等复杂结构时使用;
还可以用 $0.width这种形式获取数据
步骤:
控制台
输入$0
鼠标选择页面上的元素
控制台回车或者输入$0.XX获取属性
实操演示:
5.一键展开所有DOM元素
场景:
调试元素时,在层级比较深的情况下,一个个展开去调试会很麻烦,使用这个方法事半功倍
步骤:
alt + 鼠标点击
mac电脑是 opt + 鼠标点击
实操演示:
6.引用上一次结果
场景:
对于想知道每一步结果非常有用,举个典型的例子:js的链式调用
'xiaoMing'.split('').reverse().join('') //'gniMoaix'
步骤:
使用
$_
引用上一次操作的结果,不用每次都复制一遍
实操演示:
7."$
"和"$$
"选择器
场景
在控制台使用document.querySelector
和document.querySelectorAll
选择当前页面的元素是最常见的需求了,不过着实有点太长了,咱们可以使用$
和$$
替代。
步骤:
直接在控制台使用:
$('')代表含义是
document.querySelector选择器
$$('')代表含义是
document.querySelectorAll选择器
实操演示:
8.$i
直接在控制台安装npm包
场景
有时候想使用比如
dayjs(一款日期格式化插件非常好用)
或者lodash(JavaScript方法库,封装了很多常用的功能函数,好用)
的某个API
,但是又不想去官网查,如果可以在控制台直接试出来就好了。Console Importer 就是这么一个插件,用来在控制台直接安装
npm
包。
步骤:
- 安装
Console Importer
插件- $i('name')安装npm包
转自:点击领取 https://www.dianjilingqu.com/
标签:
www.dianjilingqu.com
, 浏览器
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 实操Deepseek接入个人知识库
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库