`
moneyinto
  • 浏览: 33725 次
  • 性别: Icon_minigender_1
  • 来自: 东台
社区版块
存档分类
最新评论

weinre安装配置

阅读更多

在做手机端的web开发时调样式相当的不方便,可以安装weinre,让工程跑在手机上,在电脑上调节,即使在手机上看到效果。

 

1.首先安装weinre

 

 

npm -g install weinre

 

 

2.让weinre跑起来

 

 

weinre --boundHost -all- 

 

此时终端会显示服务器的端口号,比如我的现在是8080。

 

3.在浏览器上输入localhost:8080打开weinre server



 

在你的index上引用(图中的Target Script)

http://localhost:8080/target/target-script-min.js#anonymous

 

其中的localhost换成电脑的ip

在终端输入命令获取ip

 

ifconfig

 

比如我现在的ip是192.168.1.116,工程跑起来的端口号是3000

 

点击http://localhost:8080/client/#anonymous进入到



 

在移动设备浏览器输入192.168.1.116:3000

刷新移动设备界面,出现如下图的界面表示与移动设备连接成功



 

 

点击Elements进入到下图界面便可以直接调样式,在移动设备上看到调试的效果



 

 

  • 大小: 166.2 KB
  • 大小: 145.3 KB
  • 大小: 154.5 KB
  • 大小: 281.5 KB
0
0
分享到:
评论

相关推荐

    Weinre入门手册.pdf

    通过安装`grunt-weinre`插件,并在Gruntfile中配置相关任务,你可以在构建项目的同时启动Weinre服务。 总的来说,Weinre是移动Web开发中不可或缺的工具,它使得开发者能够跨越设备边界,高效地进行前端调试。结合...

    weinre-jarwap网站开发工具

    因此,"weinre-jar"可能是weinre的可执行文件,开发者可以通过运行这个jar文件来启动weinre服务,然后在目标设备上配置相应的代理设置,从而实现远程调试功能。 总的来说,weinre-jarwap工具是移动Web开发者不可或...

    手机Web页面CSS样式及JS进行PC远程调试【图文】

    - **weinre配置**:在PC上启动weinre服务,命令行输入`weinre --httpPort <任意未被占用的端口>`,如`weinre --httpPort 8080`。记录下这个端口号。 3.3、调试 - 在手机端,访问`...

    ionic安装及常见问题的解决方法

    - **安装Weinre**: ```bash cnpm install weinre -g ``` - **获取本地IP地址**: ```bash ipconfig ``` - **启动Weinre服务**: ```bash weinre --boundHost ``` - **添加脚本标签**:在`index.html`文件...

    移动端开发调试方法1

    - 在命令行中输入命令启动weinre服务(确保已安装JDK): ``` java -jar d:\tools\weinre-jar\weinre.jar –httpPort 8081 –boundHost -all- ``` - `httpPort`用于指定服务端口; - `boundHost`参数设置为`-...

    实时编辑刷新的前端服务器Puer.zip

    提供简单熟悉的mock请求的配置功能,并且配置也是自动更新。 可用作代理服务器,调试开发既有服务器的页面,可与mock功能配合使用 集成了weinre,并提供二维码地址,方便移动端的调试 可以作为connect中间件使用...

    fekit-extension-mdebug:fekit 的移动调试配置

    Fekit Mobile Debugfekit 插件替换html文件中的资源文件路径为本机ip地址,这样就可直接在手机访问该资源文件安装npm install fekit-extension-mdebug -g使用在要替换的html路径下运行fekit mdebug参数说明:-i 指定...

    Phonegap 源码 2.9 最新

    4. 调试工具支持:如使用 Weinre(WebInspector Remote)进行远程调试。 5. 更新的构建工具:可能包含了改进的命令行工具,方便开发者构建和打包应用。 在实际开发过程中,开发者需要理解PhoneGap的生命周期事件,...

    PhoneGAP书内实例

    1. **环境配置**:首先,你需要安装并配置开发环境,包括Node.js、Apache Cordova(PhoneGap的基础)以及各个目标平台的SDK,例如Android Studio或Xcode。确保所有必要的工具链正确安装并设置好,才能进行下一步的...

    PhoneGap-2.9.1

    开发者需要配置Android开发环境,包括安装Eclipse或Android Studio,设置SDK路径,以及创建和管理Android虚拟设备(AVD)来测试应用。 6. **版本兼容性**:PhoneGap 2.9.1相对较老,可能不支持最新的Android版本...

    IOS浏览器调试工具.rar

    虽然Chrome浏览器不在iOS上原生支持,但可以通过安装第三方浏览器,如Puffin或Mercury,它们支持Chrome的远程调试协议。这些浏览器通常需要在设置中开启远程调试选项,然后通过特定的端口连接到你的电脑上的Chrome...

    catproxy:代理服务器

    支持weinre的注入 可做代理服务器使用 原理 将host配置成127.0.0.1或者设置当前设备的代理为catproxy的http服务器(包括端口和ip) 设置后所有请求都会被catproxy接管,catproxy会根据配置文件去请求响应配置的数据...

    webproxy:一个用 node.js 编写的 HTTP(S) 反向代理服务器。 具有 Web 开发功能

    with features for web develop. ...特征: 主机模拟通过一些配置代理转发。 ... 将远程地址添加到响应头X-...node ./webproxy/proxy.js [--weinre | --beautify | --nocache | --debug] 配置 主机(支持第三方代理转发)

    ionic-cordova-gulp-seed:Ionic&Cordova&Gulp组合种子-非常适合从Ionic框架开始!

    特征应用程序可以在本地http服务器上运行,也可以模拟/发布到Android / iOS 很多...例如开发,登台,生产(配置在gulpfile.coffee可用) 测试已配置并可以正常工作:单位(业力+摩卡咖啡)和端到端(量角器) Rollbar支

    npm工具包介绍.zip

    Webpack的核心概念是将所有资源视为模块,通过配置和插件实现模块的加载、打包和优化,支持CommonJS、AMD、ES6模块化规范,广泛用于现代前端项目。 4. **treer** - 快速生成当前目录结构描述。这是一个命令行工具,...

    hello-phonegap:phonegap教程

    3. 调试:PhoneGap提供了远程调试工具,例如Chrome开发者工具或Weinre,可以方便地在设备上查看和修改代码。 五、进阶主题 1. 插件:PhoneGap的扩展能力在于插件,它们提供了更丰富的设备功能。例如,通过安装相机...

    app.zip_APP开发_node_移动端web

    2. **Express框架**:在Node.js中,Express是最流行的Web应用框架,简化了路由设置、中间件使用和模板引擎配置,极大地提高了开发效率。 3. **移动Web适配**:针对不同移动设备的屏幕尺寸和操作系统,需要采用响应...

    ngCordovaDome:ionic ngCordova 示例工程

    7. **调试与测试**:由于应用集成了Web和原生元素,开发者需要使用如Chrome DevTools或Weinre等工具进行远程调试。同时,也需要在实际设备上进行测试,确保在不同设备和操作系统版本上的兼容性。 8. **发布与分发**...

    phoneGap:手机间隙基础项目的回购

    1. **环境配置**:了解如何安装PhoneGap、Cordova(PhoneGap的底层框架)和必要的开发工具,如Node.js、Android Studio或Xcode。 2. **项目结构**:分析phoneGap-master目录下的文件和文件夹,理解PhoneGap项目的...

    口哨声:HTTP,HTTP2,HTTPS,Websocket调试代理

    通过配置主机或例如域,路径,正则表达式,通配符,通配​​符路径等)来操纵http请求和响应。 提供内置的移动调试模式 如果以上不能满足您的要求,您也可以使用来扩展其功能。 具体功能如下: 操作,以HTTP请求...

Global site tag (gtag.js) - Google Analytics