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

时间：2021-10-06 13:30:52

这段时间发现做移动端的开发调试是一大难题，网上逛了逛发现有一些工具可用，如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的服务就访问不了了，也就做不了调试了

相关文章