你需要的App内h5的调试方法

tyler-lastovich-e31ANd1PXUw-unsplash.jpg

移动端调试

  • 在工作中经常会遇到在原生app中嵌套h5,但是在某些需要在app里面调试的内容,却没有像chrome开发者工具这样的工具来帮助我们快速的定位问题,经过最近项目的开发,让我对app内h5开发有了些新的认识,故记录下(以下方法是个人认为比较好用的调试方式,如有其它方式,欢迎补充,指正。)
  • IOS

    • 先说结论:<font color="#ff9335">Xcode-simulator</font> + 相关<font color="#ff9335">app debugger</font>包 + <font color="#ff9335">safari浏览器</font>的开发者模式
    • 首先需要在AppStore中下载Xcode => open developer tool => simulator

  • 你会得到一个模拟器

  • 初始化simulator后,将app拖入到模拟器中,打开h5入口,
  • 打开safari浏览器,safari浏览器 => 偏好设置 => 高级 => 在菜单栏中显示“开发”选项,点击勾选

  • 在safari菜单栏上,开发 => 选择你的模拟器 => 选择对应的页面

    • 完成!
    • Android

      • 先说结论:<font color="#ff9335">安卓机</font> + <font color="#ff9335">一根数据线</font> + <font color="#ff9335">chrome</font>
      • 首先数据线连接手机和电脑
      • 打开手机开发者模式: 设置 => 关于手机 => 版本号 => 连续点击
      • 在设置中找到开发者选项 => 打开USB调试,USB调试(安全设置)

    • 将手机内app里的h5打开
    • 在PC端chrome地址栏内输入chrome://inspect/#devices

    • 在chrome中点击你想调试的h5下面的inspect

    • 电脑上会自动弹出一个带页面,带调试器的窗口,供你调试开发使用

    • 完成!
    • 希望看完的你能够点个赞,再收藏下,下次不记得的时候,还可以回来看呀!
    阅读 685

    推荐阅读