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

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

Node环境配置

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

1.运行中输入cmd

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

  结果如下:

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

  说明 node安装成功

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

  结果如下: 

  1. C:\Users\Administrator>npm -v
  2. 2.7.4

  说明自带了npm

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

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

  返回结果:

  1. C:\Users\Administrator>npm install express -g
  2. express@4.12.3 C:\Program Files\nodejs\node_global\node_modules\express
  3. ├── merge-descriptors@1.0.0
  4. ├── utils-merge@1.0.0
  5. ├── cookie-signature@1.0.6
  6. ├── methods@1.1.1
  7. ├── fresh@0.2.4
  8. ├── escape-html@1.0.1
  9. ├── range-parser@1.0.2
  10. ├── cookie@0.1.2
  11. ├── finalhandler@0.3.4
  12. ├── content-type@1.0.1
  13. ├── parseurl@1.3.0
  14. ├── vary@1.0.0
  15. ├── serve-static@1.9.2
  16. ├── content-disposition@0.5.0
  17. ├── path-to-regexp@0.1.3
  18. ├── depd@1.0.1
  19. ├── qs@2.4.1
  20. ├── on-finished@2.2.1 (ee-first@1.1.0)
  21. ├── debug@2.1.3 (ms@0.7.0)
  22. ├── type-is@1.6.1 (media-typer@0.3.0, mime-types@2.0.10)
  23. ├── accepts@1.2.5 (negotiator@0.5.1, mime-types@2.0.10)
  24. ├── send@0.12.2 (ms@0.7.0, destroy@1.0.3, mime@1.3.4)
  25. ├── proxy-addr@1.0.7 (forwarded@0.1.0, ipaddr.js@0.1.9)
  26. └── 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不是内部或外部命令,也不是可运行的程序或批处理文件”这个错误。
 
  1. { [Function: createApplication]
  2. application:
  3. { init: [Function],
  4. defaultConfiguration: [Function],
  5. lazyrouter: [Function],
  6. handle: [Function],
  7. use: [Function: use],
  8. route: [Function],
  9. engine: [Function],
  10. param: [Function],
  11. set: [Function],
  12. path: [Function],
  13. enabled: [Function],
  14. disabled: [Function],
  15. enable: [Function],
  16. disable: [Function],
  17. checkout: [Function],
  18. connect: [Function],
  19. copy: [Function],
  20. delete: [Function],
  21. get: [Function],
  22. head: [Function],
  23. lock: [Function],
  24. 'm-search': [Function],
  25. merge: [Function],
  26. mkactivity: [Function],
  27. mkcol: [Function],
  28. move: [Function],
  29. notify: [Function],
  30. options: [Function],
  31. patch: [Function],
  32. post: [Function],
  33. propfind: [Function],
  34. proppatch: [Function],
  35. purge: [Function],
  36. put: [Function],
  37. report: [Function],
  38. search: [Function],
  39. subscribe: [Function],
  40. trace: [Function],
  41. unlock: [Function],
  42. unsubscribe: [Function],
  43. all: [Function],
  44. del: [Function],
  45. render: [Function],
  46. listen: [Function] },
  47. request:
  48. { header: [Function],
  49. get: [Function],
  50. accepts: [Function],
  51. acceptsEncodings: [Function],
  52. acceptsEncoding: [Function],
  53. acceptsCharsets: [Function],
  54. acceptsCharset: [Function],
  55. acceptsLanguages: [Function],
  56. acceptsLanguage: [Function],
  57. range: [Function],
  58. param: [Function: param],
  59. is: [Function],
  60. protocol: [Getter],
  61. secure: [Getter],
  62. ip: [Getter],
  63. ips: [Getter],
  64. subdomains: [Getter],
  65. path: [Getter],
  66. hostname: [Getter],
  67. host: [Getter],
  68. fresh: [Getter],
  69. stale: [Getter],
  70. xhr: [Getter] },
  71. response:
  72. { status: [Function],
  73. links: [Function],
  74. send: [Function: send],
  75. json: [Function: json],
  76. jsonp: [Function: jsonp],
  77. sendStatus: [Function: sendStatus],
  78. sendFile: [Function: sendFile],
  79. sendfile: [Function],
  80. download: [Function: download],
  81. type: [Function],
  82. contentType: [Function],
  83. format: [Function],
  84. attachment: [Function: attachment],
  85. append: [Function: append],
  86. header: [Function: header],
  87. set: [Function: header],
  88. get: [Function],
  89. clearCookie: [Function],
  90. cookie: [Function],
  91. location: [Function],
  92. redirect: [Function: redirect],
  93. vary: [Function],
  94. render: [Function] },
  95. Route: [Function: Route],
  96. Router:
  97. { [Function]
  98. param: [Function: param],
  99. handle: [Function],
  100. process_params: [Function],
  101. use: [Function: use],
  102. route: [Function],
  103. checkout: [Function],
  104. connect: [Function],
  105. copy: [Function],
  106. delete: [Function],
  107. get: [Function],
  108. head: [Function],
  109. lock: [Function],
  110. 'm-search': [Function],
  111. merge: [Function],
  112. mkactivity: [Function],
  113. mkcol: [Function],
  114. move: [Function],
  115. notify: [Function],
  116. options: [Function],
  117. patch: [Function],
  118. post: [Function],
  119. propfind: [Function],
  120. proppatch: [Function],
  121. purge: [Function],
  122. put: [Function],
  123. report: [Function],
  124. search: [Function],
  125. subscribe: [Function],
  126. trace: [Function],
  127. unlock: [Function],
  128. unsubscribe: [Function],
  129. all: [Function] },
  130. query: [Function: query],
  131. static:
  132. { [Function: serveStatic]
  133. mime:
  134. { types: [Object],
  135. extensions: [Object],
  136. default_type: 'application/octet-stream',
  137. Mime: [Function: Mime],
  138. charsets: [Object] } } }
  139. >

  

至此node环境安装配置完成

weinre安装配置

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

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

返回:

  1. C:\Program Files\nodejs\node_global\weinre -> C:\Program Files\nodejs\node_globa
  2. l\node_modules\weinre\weinre
  3. weinre@2.0.0-pre-I0Z7U9OV C:\Program Files\nodejs\node_global\node_modules\weinr
  4. e
  5. ├── underscore@1.7.0
  6. ├── nopt@3.0.1 (abbrev@1.0.5)
  7. └── express@2.5.11 (mime@1.2.4, qs@0.4.2, mkdirp@0.3.0, connect@1.9.2)
  8.  
  9. C:\Users\Administrator>

安装成功

2.运行weinre

  1. C:\Users\Administrator>weinre --boundHost -all-
  2. 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,如下所示

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

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

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

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

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

配置移动前端开发调试环境(nodejs+npm+weiner的安装和配置使用)的更多相关文章

  1. PHP开发调试环境配置

    ——基于wamp和Eclipse for PHP Developers 引言 为了搭建PHP开发调试环境,我曾经在网上查阅了无数的资料,但没有一种真正能够行的通的.因为PHP开发环境需要很多种软件相互 ...

  2. 玩转VSCode-完整构建VSCode开发调试环境

    随着VSCode的不断完善和强大,是时候将部分开发迁移到VS Code中了. 目前使用VS2019开发.NET Core应用,一直有一个想法,在VS Code中复刻VS的开发环境,同时迁移到VS Co ...

  3. 配置Windows 2008 R2 64位 Odoo 8.0 源码PyCharm开发调试环境

    安装过程中,需要互联网连接下载python依赖库: 1.安装: Windows Server 2008 R2 x64标准版 2.安装: Python 2.7.10 amd64 到C:\Python27 ...

  4. 配置Windows 2008 R2 64位 Odoo 8.0/9.0 源码开发调试环境

    安装过程中,需要互联网连接下载python依赖库: 1.安装: Windows Server 2008 R2 x64标准版 2.安装: Python 2.7.10 amd64 到C:\Python27 ...

  5. (转 留存)Windows环境下的NodeJS+NPM+GIT+Bower安装配置步骤

    Windows环境下的NodeJS+NPM+GIT+Bower安装配置步骤 标签: NodeJSnpmbower 2015-07-17 16:38 3016人阅读 评论(0) 收藏 举报  分类: G ...

  6. PHP开发调试环境配置(基于wampserver+Eclipse for PHP Developers )

    1 软件准 WampServer 下载地址:http://www.wampserver.com/en/#download-wrapper    我下的是 里面包含了搭建PHP必须的4个软件:   1. ...

  7. golang在Windows下Sublime Text开发调试环境的配置

    一.前言 近期本人有工作调动,进入了一个全新的领域[golang]服务端开发.在此写下本文,希望给那些没接触过golang开发调试环境及还在犹豫选择那家golang IDE而纠结的朋友们一点点帮助,如 ...

  8. 在Mac系统上配置Android真机调试环境

    在Mac系统上配置Android真机调试环境 mac上配置安卓环境还说挺方便的,真机调试也比win上要好一些.win上被各种软件强行安装了xxx助手. 在mac上就了一个干净的感觉. 下载Androi ...

  9. windows下用eclipse+goclipse插件+gdb搭建go语言开发调试环境

    windows下用eclipse+goclipse插件+gdb搭建go语言开发调试环境   http://rongmayisheng.com/post/windows%E4%B8%8B%E7%94%A ...

随机推荐

  1. 2017微软秋招A题

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 There is an integer array A1, A2 ...AN. Each round you may ch ...

  2. vue.js组件

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  3. Java JIT(Just-In-Time) Compilation

    http://www.oracle.com/technetwork/articles/java/architect-evans-pt1-2266278.html

  4. 虚拟机拷贝后网卡eth0变成了eth1的解决办法

    一.修改/etc/udev/rules.d/70-persistent-net.rules文件 将之前的eth0那行删了,将eth1改为eth0 二.配置ifcfg-eth0脚本,注意HWADDR那行 ...

  5. Android—Work—1day

    1.view 跟Activity 的数据传递通过 adapter 实现. http://blog.csdn.net/tianfeng701/article/details/75578192.Activ ...

  6. C#实现队列

    队列(Queue)是插入操作限定在表的尾部而其他操作限定在表的头部进行的线性表.把进行插入操作的表尾称为队尾(Rear).把进行其他操作的头部称为队头(Front). 队列的操作使按照先进先出后进后出 ...

  7. oracle免客户端安装 plsql连接

    开发的过程中,往往没有必要在自己的电脑上安装oracle,也实在太大了. 这里介绍一种使用plsql连接oracle的方法,类似于navicat之连接mysql. 先下载plsql,进行安装,这里提供 ...

  8. ant批量执行Jmeter脚本

    JDK,Jmeter默认已经装了 ANT下载:http://ant.apache.org/bindownload.cgi ant环境变量需要配置 ant_home,你解压之后的地址 然后PATH环境变 ...

  9. Tiny6410 LCD设置

    1.注意LCD的硬件连接 2.LCD初始化 2.1 初始化步骤 LCD时序设置 LCD芯片 2.2 引脚初始化 2.3 配置 MIFPCON 寄存器及SPCON 寄存器 2.4 配置VIDCONx 2 ...

  10. tomcat7 ajax请求服务中文乱码

    在确保请求服务编码格式为utf-8的情况下,确保tomcat的配置 <Connector connectionTimeout="20000" port="8080& ...