一、安装

首先确保你的电脑上有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官网下载

网址:https://nodejs.org/en/,点击进入后如下图

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

nodejs中文网下载

网址:http://nodejs.cn/,进入后点击下载,如下图

选择相应的版本下载。

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,只需在手机端刷新一下就可以了。

参考文章链接:https://blog.csdn.net/luckybuling/article/details/81292855

https://www.jianshu.com/p/b0234b7da021

移动端真机调试--weinre的更多相关文章

  1. 移动端真机调试终极利器-BrowserSync(使用方法)

    1. 安装 Node.js BrowserSync是基于Node.js的, 是一个Node模块, 如果您想要快速使用它,也许您需要先安装一下Node.js 安装适用于Mac OS,Windows和Li ...

  2. 移动端真机调试抓包,fiddler web debugger

    小白一枚,在公司大神指导下加之找了好多资料才勉强将fiddler的使用摸透,果然很好用. 一.设置手机 二.设置fiddler

  3. 运用node真机调试移动web项目

    很多时候我们对移动端进行测试的时候,有pc端的测试,也有真机上的测试,pc的测试就不多说了,因为其实基本上大家都懂的.真机测试上也有几种方法,这里就推荐三种: 移动端真机调试方法 chrome真机调试 ...

  4. Android+Chrome 真机调试H5页面实践

    前言 使用weinre在真机上调试H5页面,有一个突出的缺点,就是无法调试真机上的样式,真机上页面动态创建的dom在weinre的Elements面板显示不出来,所以调试真机上的页面样式也就无从谈起. ...

  5. uni-app真机调试报错request:fail abort解决方法

    Android端真机调试访问本地接口数据时报错:request:fail abort 报错代码 onLoad: function(e) { uni.request({ url: 'http://loc ...

  6. 如何实用便捷的在本地真机调试WEB端HTML5网页

    先简单介绍两款常用但需要一定条件或限制的工具 1.如果你能FQ chrome在32版本后就自带了移动端调度工具,可以在Android直接联调,但唯一遗憾的是,在我大天朝要FQ后才能行的通,我自己试了后 ...

  7. 移动端真机debug调试神器 vConsole学习(一)之基础

    参考 使用方法 移动端真机debug调试神器 vConsole的引入说明(原生态与WebPack) 移动端使用vconsole调试console vConsole ——开源的前端 console 调试 ...

  8. android开发期间使用真机调试但系统无法识别出真机

    前言 前些天重装了系统,好不容易把所有的软件装好,结果发现打开android studio真机调试却出了问题. 一.症状: 1.手机端设置完全没问题(打开了调试模式......) 2.电脑端右下角不出 ...

  9. 移动前端页面与Chrome的远程真机调试

    一年不见,博客园都长草啦...... 前几日刚入手新手机小米5,系统真心流畅呀.为啥要买小米5呢,因为要提高生产力呀,好好玩移动前端开发呀哈哈哈 那么问题来了,要怎么调试手机上的前端页面呢? 很久很久 ...

随机推荐

  1. [Leetcode][动态规划] 买卖股票的最佳时机IV

    一.题目描述 给定一个数组,它的第 i 个元素是一支给定的股票在第 i 天的价格. 设计一个算法来计算你所能获取的最大利润.你最多可以完成 k 笔交易. 注意: 你不能同时参与多笔交易(你必须在再次购 ...

  2. [C++] 访问控制与继承详解

      1.访问控制中有三种角色:基类及其友元,派生类,类用户(对象):访问说明符分为public/protected/private,类的成员也相应的分为了3种.   2.访问说明符又分为两种:一个是基 ...

  3. Cocos Creator 中 _worldMatrix 到底是什么(上)

    Cocos Creator 中 _worldMatrix 到底是什么(上) 1. (矩阵)Matrix是什么,有什么用 (矩阵)Matrix一个神奇的存在?在开发过程中对里边各项值的含义是不是抓耳挠腮 ...

  4. 【linux】【ELK】搭建Elasticsearch+Logstash+Kibana+Filebeat日志收集系统

    前言 ELK是Elasticsearch.Logstash.Kibana的简称,这三者是核心套件,但并非全部. Elasticsearch是实时全文搜索和分析引擎,提供搜集.分析.存储数据三大功能:是 ...

  5. 云原生生态周报 Vol. 21 | Traefik 2.0 正式发布

    作者 | 浔鸣.心水.元毅.源三.衷源 业界要闻 CNCF 计划将 TOC 升至 11 人 技术监督委员会(TOC)是 CNCF 的三大核心管理机构之一,从 2020 年 1 月起,TOC 将从 9 ...

  6. 安装sublime text3 、转化为汉化版、安装SublimeREPL使得在交互条件下运行代码,设置快捷键

    一.sublime Sublime Text 3是轻量级的,安装包很小,它的大部分功能是依靠丰富的插件实现的,而且占用资源少.目前主流版本是Sublime Text3,在官网就可以下载,http:// ...

  7. 利用Python进行数据分析:【NumPy】

    一.NumPy:数组计算1.NumPy是高性能科学计算和数据分析的基础包.它是pandas等其他各种工具的基础.2.NumPy的主要功能: # ndarray,一个多维数组结构,高效且节省空间 # 无 ...

  8. JVM 调优 - jmap

    Java命令学习系列(三)——Jmap 2015-05-16 分类:Java 阅读(17065) 评论(9) 阿里大牛珍藏架构资料,点击链接免费获取 Jmap jmap是JDK自带的工具软件,主要用于 ...

  9. Python奇技淫巧 - 持续更新中....

    Python奇技淫巧 人生苦短,我用Python: 编程界这绝对不是一句空话,尤其是对于使用过多个语言进行工作的同学们来说,用Python的时间越长,越有一种我早干嘛去了的想法,没事,啥时候用Pyth ...

  10. 基于C#的机器学习--机器学习建模的基础

    构建ML模型的步骤 现在我们已经看了解到了一些ML应用程序的例子,问题是,我们如何构建这样的ML应用程序和系统? 下图总结了我们使用ML开发应用程序的方法,我们将在下面更详细地讨论这个问题: 如上图所 ...