工具介绍：weinre

百度搜索关键词weinre，就可以看到如下信息

可以看到第一页的内容都是关于这个工具的介绍，所以从此可见这个工具的调试方案还是比较OK的。

因为从百度检索中可以看到关于这个工具介绍的最新一篇博客都是18年的，距今对于我们开发人员也算是就远了，所以这里我对使用这个依赖工具过程从头到尾梳理了一下

安装开启服务

第一步，安装全局依赖，windows+r输入cmd打开终端，输入

cnpm install -g weinre

使用cnpm前提是你本地npm加载了淘宝镜像包

第二步,查看是否安装成功

weinre -v

如果出现以下状态，说明你安装成功了

weinre默认会帮你开启一个8080的本地服务,ctrl+c两下即可退出

如果本地已有一个8080的服务，需指定端口的话，使用以下方式开启weinre工具

weinre --httpPort 8090 --boundHost -all-

好了，这时浏览器中输入网址http://localhost:8090即可,展示如下界面

,服务开启成功的话，直接到开始调试，如果使用weinre开启服务不成功，并提示mime.lookup不是一个函数,那么这时你需要去更改一下weinre工具包中的源码，

，因为这个工具是依赖nodejs的，而weinre工具好像没有同步维护，有些语法上不再支持了，不过问题不大，改两行代码即可，

先找到nodejs安装目录，我本地是用nvm管理nodejs版本的，所以本地有多个nodejs版本的，请找到安装weinre工具时的nodejs环境版本文件夹位置

找到文件夹后，打开当前nodejs文件夹下的node_modules文件夹，下面存放了你安装的全局依赖包，打开weinre文件夹

最后循着文件存放路径，找到static.js

使用一个编辑器打开该文件，我用的notepad++，使用vscode或者其它编辑器都行，ctrl+f全局搜索mime.lookup,

将第一处的lookup函数，换成getType函数即可，检索一下nodejs中mime模块这个方法的作用就可得知是获取类型值的，而在mime模块2.x.x版本后函数名

改为了getType，所以weinre执行报错。

第二处的lookup是在一个条件判断中，将其改为如下保存后即可成功运行

var charset = type;
res.setHeader('Content-Type', (charset ? '; charset=' + charset : ''));

连接项目开始调试

weinre工具开发服务后的页面是这样的，点击http://localhost:8090/client/#anonymous

目标target为空，那是因为weinre没有与你的服务关联上，回退到上一页面，查看target demos

页面中有示例，将以下内容放入你需要调试的页面中，单页面应用中，只有一个index.html文件，将其放入head下直接引入即可

<script src="http://localhost:8090/target/target-script-min.js#anonymous"></script>

这里的localhost换成你的本地ip地址，因为这样项目启动后，手机中对项目页面进行操作时，weinre服务才会捕捉到。

wienre与项目关联上后的样子

这时点击element元素面板即可查看你手机移动端中的网页元素，这些面板功能与谷歌浏览器的开发者工具大同小异，没什么太大的差别，就不详细介绍了。

Vue移动网页开发调试过程（第二篇）——weinre相关推荐

基于Ardupilot/PX4固件，APM/PIXhawk硬件的VTOL垂直起降固定翼软硬件参数调试（第二篇）软硬件参数调试
基于Ardupilot/PX4固件,APM/PIXhawk硬件的VTOL垂直起降固定翼软硬件参数调试(第二篇)软硬件参数调试本文内容大部分来自Kris,我们的K大,在VTOL领域的大牛,在此,非常感 ...
ASP.NET自定义控件组件开发第一章第二篇接着待续
ASP.NET自定义控件组件开发第一章第二篇接着待续 ASP.NET自定义控件组件开发第一章第二篇接着待续很感谢大家给我的第一篇ASP.NET控件开发的支持!在写这些之前,我也看了一些例 ...
OC开发笔记之第二篇
OC开发笔记之第二篇讲的是方法的使用,有参,无参的调用,命名规范等分为类的声明和实现 @interface 类名 : NSObject { } 方法的声明: @end @implementatio ...
推荐3款移动端网页开发调试神器
web前端教程用大白话,来讲编程最近有小伙伴在微信上跟我聊到了移动端网页开发调试困哪的问题,这个相信很多前端开发者都遇到过. 有一天,测试妹子拿着测试手机过来找你,说页面打不开. 你心想:怎么可能 ...
rk3568硬件开发笔记（第二篇）外围模块设计
rk3568硬件开发笔记(第二篇 ) 外围模块设计前言: rk3568处理器属于中高端通用型SOC,RK3568兼具CPU.GPU.NPU.VPU于一身,是一款高性能低功耗四核应用的处理器. rk3 ...
移动端html怎么调试工具,移动端网页开发调试神器Eruda的介绍与使用技巧
前言众所周知,我们在做移动端Web开发的一大痛点就是,在真机运行下无法查看console.log日志和其他信息如网络请求.显示本地存储等信息.如果网页是运行在手机浏览器中还算好,可以把网址在电脑上打 ...
Eclipse开发调试过程中经常使用到的常见按钮
在项目过程中一些刚刚入行的同学经常出现一些类似于"刚刚那个窗口怎么不见了"."我的控制台呢"这样的问题,总的来说就是对eclipse这个工具使用不熟练.于是我就 ...
海康威视web无插件开发包webVideoCtrl.js+vue做网页开发
最近项目需要在网页上预览海康的摄像头实时画面,遇到一些问题和踩了一些坑,在这里梳理一下. 我本次前端开发使用的是vue-admin-template. 一.上来第一步,先不要着急开发,先看看公司的摄像 ...
IOS开发高手课第二篇 App 启动速度怎么做优化与监控？
02 | App 启动速度怎么做优化与监控? 我已经在专栏的第一篇文章中,和你梳理了一份 iOS 开发的知识体系框架图.今天,我们就正式从基础出发,开始自己的 iOS 开发知识体系构建之路吧.接下来, ...

Vue移动网页开发调试过程（第二篇）——weinre

工具介绍：weinre

安装开启服务

连接项目开始调试

Vue移动网页开发调试过程（第二篇）——weinre相关推荐

最新文章

热门文章