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

配置移动前端开发调试环境(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. Android学习笔记(十三)

    Android中的广播机制 Android提供了一套完整的API,允许应用程序自由地发送和接受广播. 发送广播的方法借助于Intent,接受广播的方法需要广播接收器(BroadcastsReceive ...

  2. MVC4中 访问webservice 出现无法找到资源的错误

    出现这个情况,是mvc将webservice.asmx解析成了控制器,下面先将这个控制器忽略 继续访问出现这样的错误: 下面修改配置文件 访问成功

  3. Stanford NLP学习笔记:7. 情感分析(Sentiment)

    1. 什么是情感分析(别名:观点提取,主题分析,情感挖掘...) 应用: 1)正面VS负面的影评(影片分类问题) 2)产品/品牌评价: Google产品搜索 3)twitter情感预测股票市场行情/消 ...

  4. 作业总结(一):IE6下面的那些坑

    考完试就来实习的公司实习了,大概最近有两周时间就一直在做公司给新人布置的大作业.虽然只是很简单的一个小的项目,但却从其中总结到了不少有用的东西.计划将其发出来一系列文章,算是对这两周时间的总结.也算是 ...

  5. PSP(11.16~11.23)

    18号 类别c 内容c 开始时间s 结束e 中断I 净时间T 看书 构建之法 9:00 10:00 0 60m 看书 查资料 10:00 11:15 5 70m 个人 写博客 13:30 14:55 ...

  6. IO操作

    /// <summary> /// 文件读写操作/// </summary> public partial class TestIO : DevComponents.DotNe ...

  7. 为什么SqlTransaction.Rollback会抛出SqlException(11,-2)(即SQL超时异常)

    // System.Data.SqlClient.SqlTransaction public override void Rollback() {     if (this.IsYukonPartia ...

  8. MyEclipse10建立Maven Webapp项目并通过git传到GitHub

    先创建Maven Webapp项目 图文详解MyEclipse中新建Maven webapp项目的步骤(很详细) 在web项目的路径中右键(前提是你机器已经装了git)“Git Init Here”, ...

  9. ssh整合需要那些jar

    struts2  commons-logging-1.0.4.jar -------主要用于日志处理 freemarker-2.3.8.jar ------- 模板相关操作需要包 ognl-2.6.1 ...

  10. CSSText属性批量修改样式

      给一个HTML元素设置css属性 var head= document.getElementById("head");head.style.width = "200p ...