配置移动前端开发调试环境（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 [email protected] C:\Program Files\nodejs\node_global\node_modules\express ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ├── [email protected] ([email protected]) ├── [email protected] ([email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) ├── [email protected] ([email protected], [email protected], [email protected]) ├── [email protected] ([email protected], [email protected]) └── [email protected] ([email protected])
测试刚才安装的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 [email protected] C:\Program Files\nodejs\node_global\node_modules\weinr e ├── [email protected] ├── [email protected] ([email protected]) └── [email protected] ([email protected], [email protected], [email protected], [email protected]) 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的服务就访问不了了，也就做不了调试了