1. 工具：Weinre

2. 安装：npm -g install weinre | npm install weinre -g --registry=https://registry.npm.taobao.org

3. 获取 ip：ifconfig（Linux / Mac） |  ipconfig（Windows）

　　　　　 Mac：按住 「option」按键，再点击屏幕右上角的 wifi 图标，可以看到 IP 地址

4. 启动服务： weinre --boundHost ip（如  172.16.1.120） --httpPort 9090

5. 根据提示打开网页（这里是 http://172.16.1.120:9090）

网页显示如下：

6. 要调试的页面中引入上述图片中 Example 下的 script，这里是 <script src="http://172.16.1.120:9090/target/target-script-min.js#anonymous"></script7. 点击 Access Point 下的第一个链接（debug client user interface），这里是 http://172.16.1.120:9090/client/#anonymous

网页显示如下：（此时还没有设备）

7. 在移动设备上打开要调试的 web 页面，加载成功后开始调试：（默认选中最新打开 web 页面）

上面的 elements、network、console 等都可使用了。

记一个在移动端调试 web 页面的方法的更多相关文章

  1. 移动端调试Web页面

    移动端调试Web页面 虽然可以在PC下,通过开发者工具,模拟移动端,但是这样只能模拟页面样式,对于代码的执行情况是无法模拟的,所以在此结合实际调试经验,针对安卓与IOS设备,进行总结. IOS 安卓 ...

  2. dr-helper项目设计介绍（一个包括移动端和Web端的点餐管理系统）

    一.源代码路径 https://github.com/weiganyi/dr-helper 二.界面 通过浏览器訪问Web服务,能够看到界面例如以下: ADT-Bundle编译project生成dr- ...

  3. HTTP lab01 做一个简单的测试用 web页面

      做一个简单的测试用 web页面     1.安装httpd服务   yum install httpd   安装完httpd服务后,系统就自动生成了/var/www/html目录     创建一个 ...

  4. Weinre 远程调试移动端手机web页面

    调试场景 1.调试页面在手机上.2.调试工具在PC的chrome3.手机跟pc要在同一个网络环境下,也就是都使用一个wifi 一.安装 Weinre 1.Weinre是基于nodejs实现的,所以使用 ...

  5. 「移动端」Web页面适配

    一.什么是移动端适配 移动端 Web 页面,就是常说的手机 h5页面.webview页面.公众号开发的网页等. 由于手机机型较多,各个手机的屏幕尺寸不一样,所以做移动端页面,需要考虑在安卓和ios的各 ...

  6. SiteMesh：一个优于Apache Tiles的Web页面布局、装饰框架

    一.SiteMesh项目简介 OS(OpenSymphony)的SiteMesh是一个用来在JSP中实现页面布局和装饰(layout and decoration)的框架组件,能够帮助网站开发人员较容 ...

  7. 一个简单的修改 iis默认页面的方法..

    1. IIS 默认打开的是欢迎页面 2. 然后找到了一个比较简单的修改默认界面的方法: 找到这个文件的默认路径 C:\inetpub\wwwroot 然后修改 iisstart.htm 文件 在hea ...

  8. web 页面传值方法

    一. 使用QueryString变量    QueryString是一种非常简单也是使用比较多的一种传值方式,但是它将传递的值显示在浏览器的地址栏中,如果是传递一个或多个安全性要求不高或是结构简单的数 ...

  9. WEB页面实现方法

    页面分类 :添加页.修改页.列表页.详情页.功能页.删除 一.添加 1) 准备tpl.action(添加页.添加页保存公用一个action),并确认是否登录才显示2) 书写添加页action代码,例如 ...

随机推荐

  1. vue将网页中的特定部分转成pdf并下载（仅供个人学习记录）

    先安装支持 将页面html转换成图片npm install --save html2canvas 将图片生成pdfnpm install jspdf --save 组件引用: import html2 ...

  2. fdisk -l查看硬盘分区信息及硬盘分区介绍

    原文:https://blog.csdn.net/a1809032425/article/details/79692035 linux fdisk 命令和df区别是什么? fdisk工具是分区工具:d ...

  3. python学习第四次笔记

    python学习第四次记录 列表list 列表可以存储不同数据类型,而且可以存储大量数据,python的限制是 536870912 个元素,64位python的限制是 1152921504606846 ...

  4. java 二分法学习

    假设有一个数组 { 12, 23, 34, 45, 56, 67, 77, 89, 90 },现要求采用二分法找出指定的数值并将其在数组的索引返回,如果没有找到则返回 -1.代码如下: package ...

  5. oracle针对某列让特定信息排序[decode]

    在ORACLE查询中,如果在没有排序,但又想让某列中特定值的信息排到前面的时候,使用oracle的decode(字段,'字段值',数字) 如 select name from user 查询出来的所有 ...

  6. java数组的定义

    class ArrayDome { public static void main(String[] args) { //元素类型[] 数组名 创建一个 元素类型[元素个数或数组长度] /* 需要一个 ...

  7. Apache Druid架构原理与应用场景

    为了帮助卖家提高运营水平,卖家管理后台会展示一些访客.订单等趋势和指标数据,如PV,UV,转化率,GMV等: 这些指标的计算依靠前端埋点和订单详情等数据,其特点是数据量大,并有一定的实时性要求. Dr ...

  8. Feign get接口传输对象引发一场追寻

    一个报错引发的追寻之路: Feign get接口传输对象,调用方接口代码: @FeignClient(name = "manage") public interface Acces ...

  9. H5视频直播扫盲

    H5视频直播扫盲 2016-05-25 • 前端杂项 • 14 条评论 • lvming19901227 视频直播这么火,再不学就out了. 为了紧跟潮流,本文将向大家介绍一下视频直播中的基本流程和主 ...

  10. node.js设置跨域

    app.all('*', function(req, res, next) { res.header("Access-Control-Allow-Origin", "*& ...