你需要的App内h5的调试方法
- 在工作中经常会遇到在原生app中嵌套h5,但是在某些需要在app里面调试的内容,却没有像chrome开发者工具这样的工具来帮助我们快速的定位问题,经过最近项目的开发,让我对app内h5开发有了些新的认识,故记录下(以下方法是个人认为比较好用的调试方式,如有其它方式,欢迎补充,指正。)
- IOS
- 先说结论:Xcode-simulator + 相关app debugger包 + safari浏览器的开发者模式
- 首先需要在AppStore中下载Xcode => open developer tool => simulator
![feb4e4cef9ae80c39f24a0d084bbd845.png](https://img-blog.csdnimg.cn/img_convert/feb4e4cef9ae80c39f24a0d084bbd845.png)
-
-
- 你会得到一个模拟器
-
![4d059961169a0053575afcfa6725c9cf.png](https://img-blog.csdnimg.cn/img_convert/4d059961169a0053575afcfa6725c9cf.png)
-
- 初始化simulator后,将app拖入到模拟器中,打开h5入口,
- 打开safari浏览器,safari浏览器 => 偏好设置 => 高级 => 在菜单栏中显示“开发”选项,点击勾选
![47e921b2fbd7a381f54f0c713281c0ed.png](https://img-blog.csdnimg.cn/img_convert/47e921b2fbd7a381f54f0c713281c0ed.png)
-
- 在safari菜单栏上,开发 => 选择你的模拟器 => 选择对应的页面
![ed6d4d1ac7e32f15465bf997b37d7a8b.png](https://img-blog.csdnimg.cn/img_convert/ed6d4d1ac7e32f15465bf997b37d7a8b.png)
-
- 完成!
- Android
- 先说结论:安卓机 + 一根数据线 + chrome
- 首先数据线连接手机和电脑
- 打开手机开发者模式: 设置 => 关于手机 => 版本号 => 连续点击
- 在设置中找到开发者选项 => 打开USB调试,USB调试(安全设置)
![cc981ab8fa6702885b19ed735fb612b1.png](https://img-blog.csdnimg.cn/img_convert/cc981ab8fa6702885b19ed735fb612b1.png)
-
- 将手机内app里的h5打开
- 在PC端chrome地址栏内输入
chrome://inspect/#devices
![14297cf5942c2734ac2f940aa26ad848.png](https://img-blog.csdnimg.cn/img_convert/14297cf5942c2734ac2f940aa26ad848.png)
-
- 在chrome中点击你想调试的h5下面的inspect
![a163c117b2ae208f01b81f5090c1df7e.png](https://img-blog.csdnimg.cn/img_convert/a163c117b2ae208f01b81f5090c1df7e.png)
-
- 电脑上会自动弹出一个带页面,带调试器的窗口,供你调试开发使用
![97ef59f9f25d5a21becb41538c79645e.png](https://img-blog.csdnimg.cn/img_convert/97ef59f9f25d5a21becb41538c79645e.png)
-
- 完成!
- 希望看完的你能够点个赞,再收藏下,下次不记得的时候,还可以回来看呀!