配置移动前端开发调试环境（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的服务就访问不了了，也就做不了调试了