移动端H5调试
来源:互联网 发布:教学绘图软件 编辑:程序博客网 时间:2024/05/22 08:16
Chrome Remote Debug
参考:https://developers.google.com/chrome-developer-tools/docs/remote-debugging
PC准备:
1、安装chrome
2、chrome 打开 Remote devices,勾选 Discover USB devices
(1)地址方式打开:地址栏输入 chrome://inspect/#deviceswebview
(2)DevTool入口打开:打开DevTool -》右上角点点点 -》 More tools -》Remote devices
3、用蓝灯(Lantern)翻墙
Android准备:
1、设置 -》开发者选项 -》打开USB调试
2、安装驱动
(1)手动安装:https://developer.android.com/studio/run/oem-usb.html
(2)自动安装: PC上安装360手机助手,USB连接手机,即会启动自动安装
3、待调APP设置webview
WebView.setWebContentsDebuggingEnabled(true);
调试:
1、手机USB连接PC
2、手机上访问浏览器 或 webview
3、在 Remote devices 里 找到手机浏览器或webview访问的地址,点击inspect ,即可打开调试工具进行调试
Weinre
Weinre(WebInspector Remote) web远程检查器
1、安装命令行工具:npm -g install weinre
2、启动Debug Server(Agent):weinre --boundHost 本地IP
3、用浏览器访问服务说明:http://本地IP:8080/
4、植入Debug Target脚本:复制服务说明上”Target Script“ 下的<script>到项目代码里
5、在其他浏览器(例如手机浏览器)访问项目
6、访问Debug Client: 访问服务说明上“Access Points” 下的 “debug client user interface” 链接
7、选择Target:在 Debug Client 上 Remote -> Targets 下,点击一个链接,即选择了一个Target。(有多处同时访问项目就会有多个Target)
8、调试
vconsole
npm install vconsole
require('vconsole');
let vconsole = console;
vconsole.info(3);
阅读全文
0 0
- 移动端H5调试
- 爱测未来移动-移动端H5调试与自动化
- H5移动端知识
- H5移动端开发
- H5移动端常见问题
- app移动端H5页面开发调试之Chrome远程调试
- H5移动端知识点总结
- H5移动端知识点总结
- H5 移动端 时间选择器
- H5移动端知识点总结
- H5移动端知识点总结
- h5移动端知识小结
- 移动端H5性能优化
- [H5]移动端页面Demo
- H5移动端性能优化
- H5移动端知识点总结
- h5移动端知识要点
- H5移动端知识点总结
- Kafka快速上手教程 3
- Scala_(1)_基础
- 面试心得 --- Zenjoy数据开发笔试题
- css3开发:flexbox布局实例分析
- 用maven创建第一个maven项目
- 移动端H5调试
- 数据挖掘2-----数据挖掘与数据建模的9个经验之谈
- 鼠标经过切换图片
- Html:标签
- 开涛老师对Java的全部理解,很透彻。
- Okhttp源码解析之Interceptor(拦截器)
- quit()推出python的linux编辑状态
- java static
- ADC 采集电池电量