• 总结调试webview的方式(安卓)


    通过chrome直接进行调试

    chrome调试_准备工作

    • 请保证已经kexue上网
    • 确定数据线为传输线, 不是充电线.
    • 确保手机处于开发者模式, 链接电脑.
    • 手机打开USB调试
    • 图1_01
    • 确认手机已开启USB调试模式
    • 图1_02
    • 打开Chrome, 地址栏输入chrome://inspect
    • 在Devices选项, 打开发现USB设备选择
    • 看到自己的手机出现在设备列表中
    • 图1_03
    • 手机上打开chrome浏览器
    • 输入任意网址, 可在设备列表看到
    • 点击inspect按钮, 即可进行调试
    • 图1_04
    • 可以通过window.location.href = "http://xxx.com"

    遇到的问题

    • 所有的问题全部来自于kexue上网
    • 首先在PC端, 显示空白, 后显404页面, 未能再次复现
      • 使用小米手机, 打开浏览器, 看到了这种情况, 必现, 未解决
      • 小米手机进webview也不能调试
      • 找到原因: kexue上网
    • 有些老手机, 进行调试的时候, 遇到的问题
      • 无法看到请求
      • 不能在console栏中直接输入代码
      • 找到原因: kexue上网
    • 在控制台不能输入代码
      • 找到原因: kexue上网

    问题原因

    注意:使用 Chrome Inspect 查看页面时,Chrome 需要从 https://chrome-devtools-frontend.appspot.com 加载资源,如果你得到的调试界面是一片空白,那你可能需要kexue上网。

    安卓抓包

    安卓抓包_准备工作

    • 配置Charles代理端口号

    • 图2_01

    • 安卓手机处于同一个wifi下

    • 进入WiFi设置, 设置代理, 代理地址到pc

    • 图2_02

    • 设置前面配置的端口号

    • 图2_03

    • pc弹出提示框, 是否同意进行代理, 同意

    • 图2_04

    • 此时遇到问题, 手机所有的链接变成不可信任(已关闭翻墙软件)

    • 进入charles, 选择Proxy -> SSL Proxiyng Settings ->勾选 “Enable SSL Proxying”

    • 图2_05

    • 下面是之前安装的, 这次没有验证

    • 安装证书到电脑,选择 Help->SSL Proxying->Install Charles Root Certificate 按提示安装即可

    • 在“加密套接字协议层(SSL)”一栏选择始终信任

    • 安装证书到手机上: Install Charles Root Certificate on a Mobile Device or Remote Browser

    • 图2_06

    • 显示安装成功, 并给出地址

    • 图2_07

    • 手机浏览器打开后, 输入chls.pro/ssl, 下载

    • 点击后, 进行安装, 并输入名称即可

    • 图2_08

    链接后无法上网问题

    • 全部无法上网
      • 网页报错, 链接并不可靠
      • app无法正常发送请求
      • 猜测需要使用代理解决
    • 已打开的app, 再去代理, 可以上网
      • 已经打开的app, 代理后, 不关闭, 可以正常上网
      • 打开浏览器后, 网页不能用
      • 再次重启app后, 不可上网
    • 排除代理问题
      • 访问使用http的网站正常
      • 网站地址: http://mayang.wicp.vip/
    • 确认使用https
      • 网站中的http图片均可以使用
      • https的图片不可以使用

    使用Charles进行代理

    代理本地地址

    • 首先进入Tools -> Map Local 打开本地代理
    • 图3_01
    • 选择Add添加代理地址
    • 图3_02
    • 关掉翻墙, 软件, 并打开Charles的代理开关
    • 图3_03
    • 测试成功
    • 图3_04

    如何使用charles代理https

    代理远程地址

    • 和本地地址一个样子, 只不过是这是在Tools -> Map Remote里进行设置

    总结

    有了这三样, 调试真机上的所有, 不是问题.

  • 相关阅读:
    令人惊艳的算法——蒙特卡洛采样法
    肺炎确诊人数增长趋势拟合和预测(截止1月28日)
    「07」回归的诱惑:深入浅出逻辑回归
    实现一个简易版Webpack
    nrm——快速切换npm源
    7个有用的JavaScript技巧
    JSON Web Token 是什么?
    【译】强化表单的9个Vue输入库
    【译】如何使用Vue过渡效果来提升用户体验
    【译】JavaScript Source Maps浅析
  • 原文地址:https://www.cnblogs.com/zhangrunhao/p/11436949.html
Copyright © 2020-2023  润新知