WebDebugx移动端网页调试实用技巧大全

张开发
• 2026/4/17 20:24:31 • 15 分钟阅读

最新文章

推荐文章

相关文章

分享文章

WebDebugx移动端网页调试实用技巧大全
在移动端网页开发中调试是关键环节。WebDebugx 作为一款专业的跨平台移动端网页调试工具提供类似 Chrome DevTools 的完整调试体验支持 iOS 和 Android 设备远程调试网页和 WebView 内容包括网络监控、性能分析和控制台集成等功能。以下技巧在 WebDebugx 环境中同样适用能显著提高调试效率。1. 一键重新发起请求场景在和后端联调时用的比较多快速的重发请求不用再在页面上点击步骤选中“Network”点击 Fetch/XHR选择要重新发送的请求鼠标点击一下右键选择Replay XHR2.在控制台快速发送请求场景在和后端联调时用的比较多快速的在控制台重发请求不用再在页面上点击可能会有跨域问题这个可以给浏览器安装插件解决步骤选中“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(一款日期格式化插件非常好用)或者lodashJavaScript方法库封装了很多常用的功能函数好用的某个API但是又不想去官网查如果可以在控制台直接试出来就好了。Console Importer 就是这么一个插件用来在控制台直接安装npm包。步骤安装Console Importer插件$i(‘name’)安装npm包

更多文章