移动端web调试指南

移动端web调试指南

移动端web调试指南

开发环境配置

  • Brew
  • Node
  • Android SDK
  • JDK8
  • IOS SDK

调试工具准备

  • Android应用
    • Google Chrome
    • Android Studio
  • IOS应用
    • Xcode
    • Safari 浏览器
  • 真机或模拟器
  • fiddler-everywhere或同类代理应用

开始调试工作

  • Android
    • 打开Android Studio 模拟器
    • 拖拽APP安装包到模拟器
    • APP内打开H5页面
    • chrome 打开 chrome://inspect/#devices
    • Remote Target对应设备
    • 点击inspect(开发工具需要调用Google服务.不能翻墙自行查阅下载Chrome历史版本)
  • IOS
    • 打开Xcode模拟器
    • 拖拽APP安装包到模拟器
    • APP内打开H5页面
    • 手机开启web检查器
    • 打开 Safari 浏览器.点击偏好设置-高级-选中在菜单栏中显示”开发”菜单
    • 任务栏点击开发找到对应模拟器机型
    • 选中对应网址即弹出开发者调试工具

进阶

  • 真机调试本地web

    • 打开fiddler-everywhere.添加https证书和代理端口
    • 手机Wi-Fi添加代理 填写本机10或192号段IP地址.代理端口与上一步软件端口相同
    • 测试手机访问本机IP:端口
    • 打开SwitchHosts配置本机代理
    • 测试手机访问host代理域名
    • 后续同上述开始调试工作章节(真机替代模拟器)

  • 模拟器调试本地web

  • chrome调试IOS应用

    • #安装 ios-webkit-debug-proxy、remotedebug-ios-webkit-adapter
ios_webkit_debug_proxy -f chrome-devtools://devtools/bundled/inspector.html
npm install remotedebug-ios-webkit-adapter -g
# 启动
remotedebug_ios_webkit_adapter --port=9000

    • 打开Google Chrome,输入chrome://inspect/#devices

    • Remote Target 找到对应H5页面 inspect

完结