WebEnh

.net7 mvc jquery bootstrap json 学习中 第一次学PHP,正在研究中。自学进行时... ... 我的博客 https://enhweb.github.io/ 不错的皮肤:darkgreentrip,iMetro_HD
随笔 - 1079, 文章 - 1, 评论 - 75, 阅读 - 174万
  首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

版权归作者所有,任何形式转载请联系作者。
作者:U_U(来自豆瓣)
来源:https://www.douban.com/note/289846168/

调试前端页面我一直使用着神器Chrome开发人员工具, 那个方便, 大家都懂的.

但当我们要调试为移动设备设计的Web页面时, 是不是觉得有点力不从心了?
平时开发时我们可以一直都是在桌面调试这个页面, 但最终的运行环境是移动设备, 最终还是要在手机上验证一下, 这个时候各种兼容性问题就有可能接踵而来.

当我们在手机上打开这个页面时, 发现有个地方样式有问题, 但桌面上展现正常, 这个时候怎么办?
我们是不是只能推理下某个地方样式有兼容性问题, 逐步将问题范围缩小, 猜想/修改/刷新手机, 无限循环下去, 直到解决问题为止.

这个时候要是有一个像Chrome开发人员工具一样的调试工具能远程实现调试手机上打开的页面该多好啊.

其实是还真有, 只是我不知道而已, 下面就有请 weinre 闪亮登场!!

weinre is WEb INspector REmote.
weinre is a debugger for web pages, like FireBug and Web Inspector, except it's designed to work remotely, and in particular, to allow you debug web pages on a mobile device such as a phone.
weinre reuses the user interface code from the Web Inspector project at WebKit, so if you've used Safari's Web Inspector or Chrome's Developer Tools, weinre will be very familiar.

我这里只是简单介绍下怎么使用, 详情资料大家还是去官网看吧

---------------------------------------------------------------------------------------------------------------------------

接下来我们实战一把
1. 安装
    需要Node.js平台, 先安装好后, 打开Node.js command prompt, 通过NPM来安装 weinre

npm -g install weinre


2. 启动
    安装完成后, 我们接着启动 weinre

weinre -httpPort 8081 -boundHost -all-


能打开这个地址就说明weinre启动成功了

    可以配置 .weinre/server.properties 让启动 weinre 变得更方便, 具体方法请参考官网, 配置好后, 以后想启动 weinre, 直接运行weinre命令即可, 无需每次都追加那些参数了.

3. Instrumenting your web page to act as a debug target
    将如下脚本追加到你将要调试的页面上
    <script src="http://你的IP地址:8081/target/target-script-min.js#anonymous"></script>

4. 折腾这么久, 快点让我远程调试吧
    在手机上打开要调试页面的地址

 

    在 weinre Access Points 中开始远程调试

点击anonymous Access Points


点击一下激活target


    终于可以调试了! 接下来随便怎么玩都可以了, 大家应该都很熟练了吧...

 

编辑推荐:
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
阅读排行:
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
历史上的今天:
2020-12-10 MYSQL连接字符串参数详细解析(大全参考)
2019-12-10 c# .net core + .net framework mongodb nuget 包
点击右上角即可分享
微信分享提示

喜欢请打赏

扫描二维码打赏

了解更多