配置移动前端开发调试环境（nodejs+npm+weiner的安装和配置使用)

这段时间发现做移动端的开发调试是一大难题，网上逛了逛发现有一些工具可用，如chrome的远程调试，实际测试过程中我始终调试不成功，听说被墙后是不行的，所以最终找了如下的方法。

因为基于nodeJS环境，之前又没有搞过它，所以做一下备忘。

Node环境配置

Node.js的安装很方便，打开下载页https://nodejs.org/#download，直接install按钮提示下载，完成后一路next就可以了，安装完成后首先要验证一下看是否安装成功：

1.运行中输入cmd

2.在命令提示符下输入 node -v

　　结果如下：

C:\Users\Administrator>node -v
v0.12.2

　　说明 node安装成功

3.在命令提示符下输入 npm -v

　　结果如下：　

C:\Users\Administrator>npm -v
2.7.4

　　说明自带了npm

4.测试npm安装功能，输入 C:\Users\Administrator>npm install express -g，等待下载安装express

　　注意：安装完node后需要把安装目录的安全权限设置成可写可修改，不然用npm安装其它包有可能不成功，因为它会在node目录下会建立两个目录 "node_cache"、“node_global"，当然你也可以自己手工建立这两个目录并设置相应的权限。

　　返回结果：

C:\Users\Administrator>npm install express -g
express@4.12.3 C:\Program Files\nodejs\node_global\node_modules\express
├── merge-descriptors@1.0.0
├── utils-merge@1.0.0
├── cookie-signature@1.0.6
├── methods@1.1.1
├── fresh@0.2.4
├── escape-html@1.0.1
├── range-parser@1.0.2
├── cookie@0.1.2
├── finalhandler@0.3.4
├── content-type@1.0.1
├── parseurl@1.3.0
├── vary@1.0.0
├── serve-static@1.9.2
├── content-disposition@0.5.0
├── path-to-regexp@0.1.3
├── depd@1.0.1
├── qs@2.4.1
├── on-finished@2.2.1 (ee-first@1.1.0)
├── debug@2.1.3 (ms@0.7.0)
├── type-is@1.6.1 (media-typer@0.3.0, mime-types@2.0.10)
├── accepts@1.2.5 (negotiator@0.5.1, mime-types@2.0.10)
├── send@0.12.2 (ms@0.7.0, destroy@1.0.3, mime@1.3.4)
├── proxy-addr@1.0.7 (forwarded@0.1.0, ipaddr.js@0.1.9)
└── etag@1.5.1 (crc@3.2.1)

测试刚才安装的express

1.输入node进入node

2.输入 require('express')，返回如下结果说明安装成功

注意：运行上面的命令之前需要

进入环境变量对话框，在系统变量下新建"NODE_PATH"，输入”C:\Program Files\nodejs\node_global\node_modules“，这一步相当关键。
上面的用户变量都要跟着改变一下（用户变量"PATH"修改为“C:\Program Files\nodejs\node_global\”），要不使用module的时候会导致输入命令出现“xxx不是内部或外部命令，也不是可运行的程序或批处理文件”这个错误。

{ [Function: createApplication]
application:
{ init: [Function],
defaultConfiguration: [Function],
lazyrouter: [Function],
handle: [Function],
use: [Function: use],
route: [Function],
engine: [Function],
param: [Function],
set: [Function],
path: [Function],
enabled: [Function],
disabled: [Function],
enable: [Function],
disable: [Function],
checkout: [Function],
connect: [Function],
copy: [Function],
delete: [Function],
get: [Function],
head: [Function],
lock: [Function],
'm-search': [Function],
merge: [Function],
mkactivity: [Function],
mkcol: [Function],
move: [Function],
notify: [Function],
options: [Function],
patch: [Function],
post: [Function],
propfind: [Function],
proppatch: [Function],
purge: [Function],
put: [Function],
report: [Function],
search: [Function],
subscribe: [Function],
trace: [Function],
unlock: [Function],
unsubscribe: [Function],
all: [Function],
del: [Function],
render: [Function],
listen: [Function] },
request:
{ header: [Function],
get: [Function],
accepts: [Function],
acceptsEncodings: [Function],
acceptsEncoding: [Function],
acceptsCharsets: [Function],
acceptsCharset: [Function],
acceptsLanguages: [Function],
acceptsLanguage: [Function],
range: [Function],
param: [Function: param],
is: [Function],
protocol: [Getter],
secure: [Getter],
ip: [Getter],
ips: [Getter],
subdomains: [Getter],
path: [Getter],
hostname: [Getter],
host: [Getter],
fresh: [Getter],
stale: [Getter],
xhr: [Getter] },
response:
{ status: [Function],
links: [Function],
send: [Function: send],
json: [Function: json],
jsonp: [Function: jsonp],
sendStatus: [Function: sendStatus],
sendFile: [Function: sendFile],
sendfile: [Function],
download: [Function: download],
type: [Function],
contentType: [Function],
format: [Function],
attachment: [Function: attachment],
append: [Function: append],
header: [Function: header],
set: [Function: header],
get: [Function],
clearCookie: [Function],
cookie: [Function],
location: [Function],
redirect: [Function: redirect],
vary: [Function],
render: [Function] },
Route: [Function: Route],
Router:
{ [Function]
param: [Function: param],
handle: [Function],
process_params: [Function],
use: [Function: use],
route: [Function],
checkout: [Function],
connect: [Function],
copy: [Function],
delete: [Function],
get: [Function],
head: [Function],
lock: [Function],
'm-search': [Function],
merge: [Function],
mkactivity: [Function],
mkcol: [Function],
move: [Function],
notify: [Function],
options: [Function],
patch: [Function],
post: [Function],
propfind: [Function],
proppatch: [Function],
purge: [Function],
put: [Function],
report: [Function],
search: [Function],
subscribe: [Function],
trace: [Function],
unlock: [Function],
unsubscribe: [Function],
all: [Function] },
query: [Function: query],
static:
{ [Function: serveStatic]
mime:
{ types: [Object],
extensions: [Object],
default_type: 'application/octet-stream',
Mime: [Function: Mime],
charsets: [Object] } } }
>

　　

至此node环境安装配置完成

weinre安装配置

1.根据安装express的方式，在命令提示符下输入：

C:\Users\Administrator>npm install weinre -g

返回：

C:\Program Files\nodejs\node_global\weinre -> C:\Program Files\nodejs\node_globa
l\node_modules\weinre\weinre
weinre@2.0.0-pre-I0Z7U9OV C:\Program Files\nodejs\node_global\node_modules\weinr
e
├── underscore@1.7.0
├── nopt@3.0.1 (abbrev@1.0.5)
└── express@2.5.11 (mime@1.2.4, qs@0.4.2, mkdirp@0.3.0, connect@1.9.2)

C:\Users\Administrator>

安装成功

2.运行weinre

C:\Users\Administrator>weinre --boundHost -all-
2015-04-23T02:29:10.030Z weinre: starting server at http://localhost:8080

3.用浏览器验证

在浏览器地址栏输入：http://localhost:8080/，会看到一些weinre的一些信息，说明运行成功

4.配置调试信息，在要调试的页面中引用：http://localhost:8080/target/target-script-min.js#anonymous,如下所示

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1,minimum-scale=1 maximum-scale=1, user-scalable=no">
<title>帮助</title>
<script src="http://10.11.48.103:8080/target/target-script-min.js#anonymous"></script>

</head>

　　记得要把localhost换成运行weinre的主机IP，不然访问不到的

5.在weinre主页点击“http://localhost:8080/client/#anonymous”进入调试工具界面了

剩下的就像用firebug一样方便了

最后说一句，要保持运行weinre的命令提示符窗口一直处于运行状态，不然weinre的服务就访问不了了，也就做不了调试了