一:远程调式工具---weinre

阅读目录

一:远程调式工具---weinre

Weinre是什么?

Weinre是Web Inspector Remote的缩写(远程web检查器),它的作用就是相当于chrome的审查元素一样,界面和用法也基本一样,无非不同的是:weinre适合在移动端页面调式,比如手机访问页面的时候,我们可以使用chrome浏览器查看页面的html元素和css代码,我们可以对此进行更改,然后在手机端不需要刷新,立即可以看到效果;在移动端调式html和css比较方便。目前weiner也发布到npm上,我们可以使用npm进行安装;npm如下: https://www.npmjs.com/package/weinre

二: 安装weinre

npm install  -g  weinre

安装完之后,需要在本地开启一个监听服务器,比如我现在的IP地址是:172.16.28.162

现在需要执行如下命令:

weinre –boundHost 172.16.28.162

可以开启本地监听服务器如下:

如上面网址 http://172.16.28.162:8080  weinre默认使用8080端口,我们也可以使用如下命令进行更改端口号;如下命令:

三: 访问weinre及在页面上调用

打开浏览器,访问如下地址: 172.16.28.162:8081 如下:

如上截图页面;我们需要在调式的页面中加入远程调式所需要的JS代码即可,比如上图截图的最后一句JS代码:

<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script>

引入到需要远程调式页面即可;

我们现在先访问页面 http://172.16.28.162:8081;如下所示:

现在我们继续使用我手机来访问我本机上的网页后,在查看刚点击进去后的页面显示如下:

如下:

但weinre可以方便我们调式HTML元素及css代码,至于JS,我们可以使用Fiddler替换即可满足前端在移动端基本调式了;

四:多用户

Weinre的默认使用中,都是用anonymous作为id的;

比如上面的代码引用:

<script src="http://172.16.28.162:8081/target/target-script-min.js#anonymous"></script>

但是如果多个用户同时调式各自的页面会有问题,weinre使用多用户机制解决该问题。Weinre默认支持多用户的,这样一个局域网同事只需要一台电脑上安装weinre即可,不需要每个人都安装,多个用户同时使用时,每个用户使用自己的id来区分,每个用户调式信息可以独立,不会相互影响;

操作如下:

然后继续刷新设备中的页面,然后在电脑端就可以看到如下信息:

就可以进行多用户调式了;

移动前端调式页面--weinre的更多相关文章

  1. 移动前端调试页面–weinre

    安装 npm install -g weinre 启动 weinre --boundHost -all- 浏览器查看 http://localhost:8080 插入相关文件 index.html d ...

  2. 刚写完的商城erp + 这个商城前台,新鲜出炉。自己1个人写, 包括php框架和前端html页面.

    刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面. 刚写完的商城erp + 这个商城前台,新鲜出炉.自己1个人写, 包括php框架和前端html页面.

  3. Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇——纯前端多页面)

    Vue 2.x + Webpack 3.x + Nodejs 多页面项目框架(上篇--纯前端多页面) @(HTML/JS) 一般来说,使用vue做成单页应用比较好,但特殊情况下,需要使用多页面也有另外 ...

  4. 前端动态属性页面的 要用id做name 因为这样方便在提交表单时候取到值

    前端动态属性页面的 要用id做name 因为这样方便在提交表单时候取到值

  5. 后端model传入前端JSP页面中的值判断后再取值

    所遇到的问题后端model传入前端JSP页面中的值通过foreach循环内要满足条件才能取值给Div中,我们知道jsp页面中可以直接用EL表达式取值,格式就是${"model中传来的数据&q ...

  6. beego-vue URL重定向(beego和vue前后端分离开发,beego承载vue前端分离页面部署)

    具体过程就不说,是搞这个的自然会动,只把关键代码贴出来. beego和vue前后端分离开发,beego承载vue前端分离页面部署 // landv.cnblogs.com //没有授权转载我的内容,再 ...

  7. 【前端】使用weinre对手机、微信浏览器页面调试

    官方网站:http://people.apache.org/~pmuellr/weinre-docs/latest/ windows下安装以及使用: 1.安装nodejs 下载nodejs引擎,32b ...

  8. 【转】手机web前端调试页面的几种方式

    前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...

  9. 手机web前端调试页面的几种方式

    前言 PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂.从模拟调试到远程调试,大概分为几部分: 1.Chrome DevTools(谷歌浏览器)的模拟手机调试 2.weinr ...

随机推荐

  1. 第七章 美化DetailView界面

    本项目是<beginning iOS8 programming with swift>中的项目学习笔记==>全部笔记目录 ------------------------------ ...

  2. 英语etc怎么发音、单词来历

    etc是等等的意思,与and so on 相同 音标/et'set(a)ra/ 源于法语et cetera,也是等等的意思 在计算机操作系统目录(linux和windows)有一个叫etc的目录 里面 ...

  3. Mobile Web

    Silun来给大家介绍几个常见的移动浏览器标签~ 当当当~ <meta name="apple-mobile-web-app-capable" content="y ...

  4. NABCD模型进行竞争性需求分析

    确定项目:教室管理系统 负责人:李凤娇,高德建 选择比努力更重要.一个项目成功自然离不开组员们的努力.但是,光努力是不够的.还需要用户有需求,能快速实现. 这些东西,看似很虚,却能让我们少走不少弯路. ...

  5. 【URAL 1917】Titan Ruins: Deadly Accuracy(DP)

    题目 #include<cstdio> #include<algorithm> using namespace std; #define N 1005 int n, m, cn ...

  6. 【Gym 100947E】Qwerty78 Trip(组合数取模/费马小定理)

    从(1,1)到(n,m),每次向右或向下走一步,,不能经过(x,y),求走的方案数取模.可以经过(x,y)则相当于m+n步里面选n步必须向下走,方案数为 C((m−1)+(n−1),n−1) 再考虑其 ...

  7. 【CodeForces 618C】Constellation

    题 Cat Noku has obtained a map of the night sky. On this map, he found a constellation with n stars n ...

  8. BZOJ-1001 狼抓兔子 (最小割-最大流)平面图转对偶图+SPFA

    1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec Memory Limit: 162 MB Submit: 14686 Solved: 3513 [Submit][ ...

  9. POJ1995 Raising Modulo Numbers

    Raising Modulo Numbers Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 6373   Accepted: ...

  10. java订电影票系统

    public class Test { public static void main(String[] args) { BookTicket bookTicket = new BookTicket( ...