背景:
开发PC页面的时候使用chrome浏览器的开发者工具,可以很容易的捕获到页面的dom元素,并且可以修改样式,方便调试;
但是手机上却很麻烦,因为手机上没有办法直接打开开发者工具查看元素。其实可以通过将设备连接到PC,使用PC的开发者工具检测。

1.安卓手机调试工具chrome DevTools
调试步骤
a、需要满足安卓系统版本为Android 4.4以上,并且需要再你的APP内配置相应的代码,在WebView类中调用静态方法setWebContentsDebuggingEnabled,如下:
if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.KITKAT) {
WebView.setWebContentsDebuggingEnabled(true);
}
即需要app支持追加代码打包
b、把Android设备设置为开发者模式,把手机USB调试模式打开(“设置”->”开发人员选项”->”USB调试”) 
c、用USB数据线将电脑和手机连接
d、chrome浏览器,建议最新版本,浏览器地址输入chrome://inspect/#devices
e、操作APP内H5页面,浏览器内会有webview视图,可以捕获页面的dom元素,控制台输出调试,查看接口请求和报错

APP调试页面(试用IOS和安卓)
页面追加如下代码进行调试,可以采用参数动态控制如下代码的追加和调试
<script type="text/javascript" src="https://hd.qingyidai.com/m/activity/wheel/air/vconsole.min.js"></script>
<script type="text/javascript">
var vConsole = new VConsole();
</script>

Fiddler抓包工具
Fiddler是强大的抓包工具,它的原理是以web代理服务器的形式进行工作的,使用的代理地址是:127.0.0.1,端口默认为8888,我们也可以通过设置进行修改。
代理就是在客户端和服务器之间设置一道关卡,客户端先将请求数据发送出去后,代理服务器会将数据包进行拦截,代理服务器再冒充客户端发送数据到服务器;同理,服务器将响应数据返回,代理服务器也会将数据拦截,再返回给客户端。
Fiddler可以抓取支持http代理的任意程序的数据包,如果要抓取https会话,要先安装证书。

使用:
a、手机端和电脑端同在一个wifi局域网下
b、电脑上打开Fiddler软件
c、手机设置wifi代理,代理地址是电脑的IP地址,端口默认为8888
d、手机操作浏览器H5页面,Fiddler会有接口请求

Android的WebView调试工具(无需FQ,可同时调试多个设备,永不过期)

https://www.cnblogs.com/hjblog/p/9078147.html#4055020

微信打开X5调试,使手机与微信开发者工具都可以进行调式

https://www.jianshu.com/p/e4a8ef68c35b

UC 浏览器开发者版本

https://dev.ucweb.com/download/?spm=ucplus.11199946.banner.1.53974692harejG

开发者版本 (Developer Edition) 支持 DevTools Protocol,它允许开发者使用任何兼容该协议的客户端(如 Chrome 开发者工具)进行远程调试。最新版基于 Chromium 57 构建,对 PWA 、ES2015+ 等新特性支持良好。

移动端H5调试的更多相关文章

  1. 移动端h5调试方法

    charles代理 使用技巧如下: http://www.jianshu.com/p/fdd7c681929c 1.手机wifi连接代理 以iphone为例,长按住wifi, 进入下一页,可看到 HT ...

  2. 移动端 h5调试技巧

    一 安卓 一 chrome 1.安卓手机安装chrome浏览器,手机打开开发者模式,用usb线链接电脑,并且允许调试. 2.电脑chrome地址栏输入 chrome://inspect 进入后点击 i ...

  3. 移动端H5测试调试利器 chrome://inspect/#devices

    使用 chrome://inspect/#devices,可以使安卓手机里的WebView也能和chrome一样审查元素,调试和测试移动端H5页面. 我使用的是三星S6 (该功能支持安卓系统4.4及以 ...

  4. 移动端H5混合开发设置复盘与总结

    此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏 实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了, ...

  5. 移动端H5的一些基本知识点总结

    移动端H5的一些基本知识点总结 来到这家公司之后,和曾经的工作发生了非常大的转变.曾经我一直是做PC端页面的.来到如今这家公司之后,主要是做手机移动端的页面. 移动端的页面在我这个做习惯了PC端页面的 ...

  6. 移动端H5微信分享

    移动端H5微信分享功能,可以使项目更好地传播. 微信官方教程文档:  微信JS-SDK说明文档 步骤一:绑定域名 先登录微信公众平台进入"公众号设置"的"功能设置&quo ...

  7. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  8. 解惑好文:移动端H5页面高清多屏适配方案 (转)

    转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makeg ...

  9. 移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

    机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为c ...

随机推荐

  1. C++走向远洋——33(静态成员的应用)

    */ * Copyright (c) 2016,烟台大学计算机与控制工程学院 * All rights reserved. * 文件名:time.cpp * 作者:常轩 * 微信公众号:Worldhe ...

  2. 【Geek议题】合理的VueSPA架构讨论(上)

    前言 web前端发展到现代,已经不再是严格意义上的后端MVC的V层,它越来越向类似客户端开发的方向发展,已独立拥有了自己的MVVM设计模型.前后端的分离也使前端人员拥有更大的自由,可以独立设计客户端部 ...

  3. C++ const用法,看这一篇就够了!

    本文主要介绍const修饰符在C++中的主要用法,下面会从两个方面进行介绍:类定义中使用const.非类定义中使用const 1. 非类定义中使用const 非类定义中使用const是指:在除了类定义 ...

  4. XCTF---easyjava的WriteUp

    一.题目来源     题目来源:XCTF题库安卓区easyjava     题目下载链接:下载地址 二.解题过程     1.将该apk安装进夜神模拟器中,发现有一个输入框和一个按钮,随便输入信息,点 ...

  5. springboot连接redis错误 io.lettuce.core.RedisCommandTimeoutException:

    springboot连接redis报错 超时连接不上  可以从以下方面排查 1查看自己的配置文件信息,把超时时间不要设置0毫秒 设置5000毫秒 2redis服务长时间不连接就会休眠,也会连接不上 重 ...

  6. DOM是什么(初级版)

    js新手村出村之路--基础知识 在这里默认你已经粗粗的自学过了一遍js知识.(也许是在昏昏欲睡的课堂上听了两分钟,也许是跟着b站上的视频打了一遍.who cares) 在下面的内容中我将整理一些在平常 ...

  7. Java继承中构造器的调用原理

    Java的继承是比较重要的特性,也是比较容易出错的地方,下面这个例子将展示如果父类构造器中调用被子类重写的方法时会出现的情况: 首先是父类: public class test { void fun( ...

  8. 什么是RPM

    RPM是RedHat Package Manager(RedHat软件包管理工具)的缩写,这一文件格式名称虽然打上了RedHat的标志,但是其原始设计理念是开放式的,现在包括OpenLinux.S.u ...

  9. Upload-labs 测试笔记

    Upload-labs 测试笔记 By:Mirror王宇阳 2019年11月~ 文件上传解析学习 环境要求 若要自己亲自搭建环境,请按照以下配置环境,方可正常运行每个Pass. 配置 项 配置 描述 ...

  10. ESLint {} 内部强制有空格 .eslintrc.js 配置文件 'object-curly-spacing': ["error", "always"],

    module.exports = { root: true, 'extends': [ 'plugin:vue/essential', '@vue/standard' ], rules: { 'obj ...