远程调试weinre的使用

一.用途

*鉴于在浏览器调试移动端页面无法准确反映移动端实际情况并无法高效调试,故常常使用远程调试工具通过电脑连接手机进行调试,常用远程调试方式:

1.chrome连接安卓机远程调试

2.Mac连接苹果机远程调试

3.使用远程调试工具,比如本文档的主角——weinre

二.weinre安装

1.先在本机全局安装node

2.启动命令行工具执行npm安装程序安装weinre包

npm install weinre -g(需host支持)

npm install [email protected] -g(可随意安装)

*安装完成后,呈现如下所示界面,注意保留安装路径

三.使用weinre调试页面

1.启动命令行工具,启动weinre服务器

weinre --httpPort 8081 -boundHost 192.168.98.172

*httpport参数为所开端口

*boundHost参数为本机ip

*成功启动服务器后如下所示

2.打开浏览器,输入weinre工具页面

地址:http://192.168.98.172:8081

*注意根据自身电脑ip及端口配置打开相应地址

3.成功打开界面如下

*界面下方有如下栏目

--将此栏目example中的script复制到想要调试的页面任意地方,保存页面修改。

4.在电脑上的weinre页面点击debug页面,如下:

打开后的界面如图:

--然后用手机(必须与电脑处于同一个局域网)浏览器打开该添加有weinre调试script标签的页面,此时刷新weinre调试界面,呈现如下所示界面:

--点击箭头所示的链接(选中该链接),即可进入Elements和console以及network查看手机上的该页面的调试工具。

4.使用weinre服务器打开本地文件

*刚刚在安装weinre时,有一个安装路径,此路径也是可以直接通过weinre服务器打开的本地文件夹。

--此文件夹下的web文件夹中可放置想要打开的项目文件,然后通过浏览器访问weinre服务器地址,即可访问本地文件,在这里不再进行演示。

时间: 2024-08-29 18:58:42

远程调试weinre的使用的相关文章

远程调试 Weinre

什么是远程调试? 说白了,就是可以通过PC端[F12开发者工具]查看并调试移动端的页面内容,如html.css.js.Network资源等. (PS:最终效果图在本页面底部) 官方网站 http://people.apache.org/~pmuellr/weinre/docs/latest/Installing.html 安装(需要Nodejs和Npm环境) weinre is also deployed on https://npmjs.org/package/weinre so that y

使用weinre进行移动端页面的远程调试

Weinre是一个移动页面远程调试工具,你可以通过电脑的chrome或者firefox去调试你手机访问的页面,在电脑调试器中的任何操作都能反应到手机上,就和在用电脑访问页面进行调试一样.Weinre现如今已经已经移植到到了node平台,安装部署十分的方便,在也不用安装其他复杂环境了. Weinre的架构介绍 Weinre实现远程调试通过下面三个部分实现: 目标 – 被调试的页面. 客户端 – 页面调试器,对目标进行dom结构修改.样式修改.js的操作 代理 – 是一个http服务器保证这目标和客

使用weinre远程调试

1.调试环境: 1)使用nodejs搭建调试服务器: 先安装node,然后使用npm安装weinre,在node.js安装目录输入以下命令 npm install weinre 2)需要wifi环境和webkit浏览器. 2.远程调试: 1)启动weinre服务器 d: //在命令行中进入d盘 cd Nodejs //进入Nodejs安装目录 此处是d:/Nodejs node.exe node_modules\weinre\weinre --boundHost -all- //启动weinre

Android开发系列10 Cordova架构学习 Weinre远程调试技术

手机上的页面不像桌面开发这么方便调试.可以使用Weinre进行远程调试以方便开发.本文介绍windows下的安装与使用. 安装 使用npm安装,可以运行: npm install -g weinre 安装完路径可能是这样的: 输入命令 weinre 即可启动. 使用浏览器打开网址: http://localhost:8080 推荐使用Chrome. 如果有防火墙,要注意需要允许8080端口数据通行. 现在可以连接Cordova程序进行调试了.把下面代码放到index.html里. <script

移动端Web开发调试之Chrome远程调试(Remote Debugging)

本篇主要说一下Chrome RemoteDebugging 的方法,之前也遇到一些坑,自己总结了一些经验,分享如下. Chrome DevTools调试移动设备Brower Page Tabs/WebViews 安卓远程调试目前支持所有操作系统(Windows,Mac, Linux, and Chrome OS.)中调试,支持: ● 调试站点的页面 ● 调试安卓原生App中的WebView ● 实时将安卓设备的屏幕图像同步显示到开发机器. ● 通过端口转发(port forwarding)与虚拟

发现一款移动web端远程调试工具weinre , 哈哈!

之前调试一直用的是chrome的远程调试,虽然效果很不错,但是在调试cordova,微信时多有不便. 在git上找工具时发现了这个:weinre,使用方法非常简单 附上git地址: https://github.com/apache/cordova-weinre 废话不说,直接开始: 第一步:安装 命令: npm install  -g  weinre 如果安装失败,可以试试加上版本号安装:npm -g install [email protected] 第二步:运行 命令:weinre -bo

非常实用的mobile web application远程调试工具 weinre

在移动web应用中,由于没有类似chrome和firebug的调试工具,调试起来比在PC上相对麻烦一些,有时候只能反复进行修改比对,但使用weinre我们可以轻松做到远程调试的功能. 什么是weinre? 官方解释: we是指web,in是指inspector,re是指remote,合起来就是weinre. http://people.apache.org/~pmuellr/weinre/ 如何安装? weinre基于node,使用npm快速安装: npm install weinre 使用 使

安卓手机移动端Web开发调试之Chrome远程调试(Remote Debugging)

一.让安卓打debug模式的apk包 二.将电脑中的chrome升级到最新版本,在chrome浏览器地址栏中输入chrome://inspect/#devices: 在智能手机还未普及时,移动设备的调试处处是alert的,这估计是最常用的办法了.以前很多时候为了预览页面在移动设备上的效果,需要先将页面上传到测试服务器,再将url输入到设备浏览器,或者使用第三方二维码扫码应用,通过移动设备访问打开浏览实际效果,每次换设备都要重复这些操作,页面多的话这些繁琐的事情就特别让人厌烦了.移动互联网的浪潮,

使用chrome远程调试设备

前言:在做ionic项目的时候,除了发现可以用weinre调试页面之外,还发现了用chrome一样可以远程调试手机上的页面. 使用chrome开发工具远程在Android上远程调试 准备工作 开始远程调试之前,需要做好如下准备: 在你电脑上安装Chrome 32 或者更新的版本 一根连接Android设备的USB线 手机系统是Android 4.0+ 并且在手机上安装 Android版本的Chrome浏览器. 注意:远程调试需要电脑上的chrome浏览器版本比手机上的chrome浏览器版本新.