使用weinre调试手机页面
介绍Weinre
Weinre(Web Inspector Remote),是一种远程调试工具。功能与Firebug及chrome调试器类似,可以帮助我们即时更改页面元素、样式,调试JS等。
待调试的页面。你需要在页面中嵌入一小段js。它将通过XHR方式与debug server通信,进行调试信息的收发。
安装Weinre
执行:sudo npm install -g weinre(mac的)
安装完之后,还需要监听服务器,我的IP是 10.58.184.219
执行:
weinre -boundHost 10.58.184.219 -httpPort 8081
通过Weinre调试页面
首先你访问:http://10.58.184.219:8081/ ,会看到下面的页面,列出了weinre的文档及用于调试的url。
然后点进去:http://10.58.184.219:8081/client/#anonymous,会发现并没有Targets,同时列出了client及server端信息。
启动target
在调试页面加一段js:
1 | <script src= "http://10.58.184.219:8081/target/target-script-min.js#anonymous" ></script> |
当然,如果要调试的页面很多,不方便在每一页都直接插入上文的代码。可以浏览器“书签”的方式保存一下面一段js,以动态方式插入script
1 | javascript:(function(e){e.setAttribute( "src" , "http://10.136.30.144:8081/target/target-script-min.js#anonymous" );document.getElementsByTagName( "body" )[0].appendChild(e);})(document.createElement( "script" )); void (0); |
因为我要调试的demo运行在http://10.58.184.219:9080/BrowsersyncExample/
当我们用手机访问这个调试页面 http://10.58.184.219:9080/BrowsersyncExample/时,浏览器上会出现
切换到Elements时就是这样
这个时候就跟谷歌审查元素的模式是一模一样了。
参考文章:http://www.cnblogs.com/tugenhua0707/p/4681482.html#_labe1
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战