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

目录

工具介绍：weinre

安装开启服务

连接项目开始调试

---

 

前言：前面一篇主要讲的是视图层面上的同步预览效果，这一篇的内容涉及就是像PC端一样调试css和js以及捕捉接口请求

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