转载文章,主要是用来标记这个较为古老的h5调试工具

​​​​​​​l移动端真机调试:spy-debugger调试教程 - SegmentFault 思否在window下安装:npm install spy-debugger -g 在MAC下安装:sudo npm install spy-debugger -ghttps://segmentfault.com/a/1190000019238719在window下安装:npm install spy-debugger -g 在MAC下安装:sudo npm install spy-debugger -ghttps://segmentfault.com/a/1190000019238719

另有 spy-debugger

一、安装

首先确保你的电脑上有node环境,然后使用cnpm或npm 安装

windows下

npm install weinre -g --registry=https://registry.npm.taobao.org

mac下

sudo npm install weinre -g --registry=https://registry.npm.taobao.org

安装成功后会提示安装的位置(留意这个地址,下文还会用到)

【nodejs安装】

1 、下载nodejs

nodejs官网下载

网址:Node.js,点击进入后如下图

左边的LTS是正式版,右边的Current是测试版,一般开发常用的就是LTS正式版。

nodejs中文网下载

网址:Node.js 中文网,进入后点击下载,如下图

选择相应的版本下载。

2 、安装

双击安装包,一路下一步,指定安装路径,我的安装位置:C:\Program Files\nodejs

3 、配置环境变量

1.右键我的电脑-属性-高级系统设置-高级-环境变量,打开环境变量设置窗口

2.在下面的系统变量中找到Path,点击编辑--编辑文本,在后面加入nodejs的安装目录,我这里就是C:\Program Files\nodejs

3.然后打开cmd,输入node -v回车显示node版本,输入npm -v回车,显示npm版本,则表示node安装成功。

二、运行weinre

在命令行输入:
weinre –httpPort 8080 –boundHost -all-
8080是调试服务器运行的端口号,
boundHost是调试服务器绑定的ip地址或域名,默认是localhost,设置为-all-是为了在本地能使用localhost打开(也可以设置成自己的ip),在移动设备或本地环境用ip地址打开weinre调试工具
然后会看到服务启动:

(注意:在调试过程中不要关闭cmd)

三、开始调试

设置好端口之后我们在本地打开http://192.168.0.7:8080(换成你自己的ip)然后就可以看见weinre的基本信息,如下图:

(ip的查询方式:在cmd输入ipconfig,然后ipv4中后面跟的就是本机的ip地址)

接着我们需要在需要调试的页面上加上一段script标签

<script src="http://192.168.0.7:8080/target/target-script-min.js#anonymous"></script>
需要改为你自己的ip地址

手机打开需要调试的链接

在staticWebDir目录下

本地的源文件貌似只能在staticWebDir目录下才可以访问到(这是因为在没有使用任何服务器的情况下,weinre自带有服务器,所以只能放在默认的根目录下),将你的源文件放在staticWebDir目录下(我的源文件名字是JD),staticWebDir的目录是你安装weinre的根目录,我的是:C:\Users\Administrator\AppData\Roaming\npm\node_modules\weinre\web,然后手机访问:http://192.168.0.7:8080/JD/index.html,然后在电脑上打开刚刚的页面http://192.168.0.7:8080

点击debug client user interface之后出现

链接为绿色的之后就说明链接成功了。在后面的elements和其他的tag就可以进行调试了。注意在这个调试过程中必须保证手机和电脑在同一个网络下。如果Targets为none,只需在手机端刷新一下就可以了。

参考文章链接:nodejs - 安装及环境变量配置_luckybuling-CSDN博客_nodejs环境变量怎么配

移动端真机调试实战经验 - 简书

移动端真机调试--weinre相关推荐

  1. 移动端真机调试,手机端调试,移动端调试

    移动端真机调试方法 一.chrome真机调试:局限性:只能调试手机端的chrome浏览器,其他浏览器均不适用:优点是: 简单快捷: 二.spy-debugger调试:spy-debugger,安装稍微 ...

  2. 分享移动端真机调试几种方法(更新中)

    最新更新请参考移动端真机调试 文章目录 安卓 浏览器场景 X5内核类 IOS windows调试ios MAC调试ios 跨平台通通用JS 注入类 Vconsole Eruda weinre 拓展 E ...

  3. 移动端真机调试修改手机host

    移动端真机调试修改手机host 一.电脑开热点 最简单方便快速修改手机host的方式 如果电脑是windows系统,可以通过电脑开热点,手机连接热点,修改电脑HOSTS文件.即通过修改电脑HOSTS文 ...

  4. 移动端真机调试的两种方法

    本文参考https://github.com/YvetteLau/Blog/issues/5 1.引入: 我们进行移动web开发时常常会接触到真机调试,但是手机端的浏览器却不想PC端这样有开发人员工具 ...

  5. 微信H5移动端真机调试--vConsole

    在移动端实际开发中,还是会碰到一些棘手的bug,想看看到底哪里出了问题,苦于移动端不能F12啊.友好的微信给我们提供了这么一个入口,使开发者可以真机调试.给微信开发者点赞.然后就可以看到你打印的内容及 ...

  6. 移动端真机调试工具--weinre

    目录 1. weinre (1)weinre安装 (2)weinre使用 虽然当前各种浏览器都为开发者提供了很多模拟手机设备的功能,但是模拟毕竟是模拟,模拟环境中正常的代码到了真机上访问,仍旧会有各种 ...

  7. 干货!移动端真机调试指南,对调试说easy

    大家好,我是漫步,分享一篇移动调试的,最后一个不错,喜欢记得关注我并设为星标. 关注 前端开发博客,回复"加群" 加入我们一起学习,天天进步 前言  前端开发博客 这么快就年终了, ...

  8. web移动端 真机调试(chrome 浏览器)

    [说明: 本人谷歌浏览器版本:98.0.4758.102(正式版本) 本人开发工具:微软的 Vscode 这里] 一.首先在你的PC以及移动端(Android)上装载有Chrome浏览器 下载谷歌浏览 ...

  9. errorEruda解决移动端真机调试,bug收集问题

    github:errorEruda移动调试,bug收集工具 demo: 点击打开链接 1kb(gzip)代码搞定开发调试发布,错误监控上报,用户问题定位. 支持错误监控和上报 支持 Eruda错误展示 ...

最新文章

  1. java报数编码,报数选队长代码 - 奇鸢iceDomain的个人空间 - OSCHINA - 中文开源技术交流社区...
  2. cassandra集群搭建
  3. python tuple类型,Python基础数据类型(四) tuple元祖
  4. 五十一、微信小程序云开发中的云函数
  5. C语言删除链表的算法(附完整源码)
  6. .NET使用VS2010开发Web Service
  7. PHP-php.ini中文版
  8. echarts x轴像直尺一样设置刻度_MATLAB作图实例:6:指定轴刻度值和标签
  9. 前沿 | VLDB 2019论文解读:阿里巴巴大规模数据库智能参数优化的创新与实践
  10. 安装Visual Studio 2008系统要求
  11. 俄罗斯方块c语言代码及注释,俄罗斯方块C语言代码
  12. 如何将MKV的字幕提取出来
  13. 核心单词Word List 2
  14. ARM的存储控制器以及如何使用SDRAM
  15. 未来新型计算机可分为哪三种,未来有可能引起计算机技术革命有哪几种呢
  16. fir.im Weekly - 揭秘直播移动 APP 技术实现
  17. python多任务,线程详解
  18. 【Java Web基础】(十一)Ajax示例:根据用户输入的学号填充用户信息
  19. OpenSSL SSL_read: Connection was reset, errno 10054
  20. 如何高逼格的写java代码

热门文章

  1. 单片机VIN VOUT VCC GND是什么
  2. 【C++】算法集锦(6):快慢指针
  3. P1325 雷达安装
  4. 【STM32F407的DSP教程】第33章 STM32F407不限制点数FFT实现
  5. Docke初始(一)
  6. WordPress插件 | 在WordPress中使用FontAwesome
  7. 自制WordPress响应式主题-9IPHP 上线了~~
  8. TRIZ系列-创新原理-2-抽取原理
  9. 名人电子北京研发部门关闭
  10. 宽带功率放大器的应用