# 你需要的App内h5的调试方法 > 在工作中经常会遇到在原生app中嵌套h5，但是在某些需要在app里面调试的内容，却没有像chrome开发者工具这样的工具来帮助我们快速的定位问题，经过最近项目的开发，让我对app内h5开发有了些新的认识 - URL: https://tenggouwa.com/posts/h5-console/ - 发布: 2019-09-05 - 标签: h5, app, 调试 ## 移动端调试 + 在工作中经常会遇到在原生app中嵌套h5，但是在某些需要在app里面调试的内容，却没有像chrome开发者工具这样的工具来帮助我们快速的定位问题，经过最近项目的开发，让我对app内h5开发有了些新的认识，故记录下（以下方法是个人认为比较好用的调试方式，如有其它方式，欢迎补充，指正。） + **IOS** + 先说结论：**Xcode-simulator** + 相关**app debugger**包 + **safari浏览器**的开发者模式 + 首先需要在AppStore中下载**Xcode** => **open developer tool** => **simulator** ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/20/16fc240e435da9da~tplv-t2oaga2asx-image.image) + 你会得到一个模拟器 ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/20/16fc24312ae86ccb~tplv-t2oaga2asx-image.image) + 初始化simulator后，将app拖入到模拟器中，打开h5入口， + 打开safari浏览器，safari浏览器 => 偏好设置 => 高级 => 在菜单栏中显示“**开发**”选项,点击勾选 ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/20/16fc28a395ea30ff~tplv-t2oaga2asx-image.image) + 在safari菜单栏上，开发 => 选择你的模拟器 => 选择对应的页面 ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/20/16fc289298187584~tplv-t2oaga2asx-image.image) + 完成！ + **Android** + 先说结论：安卓机 + 一根数据线 + chrome + 首先数据线连接手机和电脑 + 打开手机开发者模式: 设置 => 关于手机 => 版本号 => 连续点击 + 在设置中找到**开发者选项** => 打开USB调试，USB调试(安全设置) ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/21/16fc5b4571b39894~tplv-t2oaga2asx-image.image) + 将手机内app里的h5打开 + 在PC端chrome地址栏内输入`chrome://inspect/#devices` ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/21/16fc5b49bae9e589~tplv-t2oaga2asx-image.image) + 在chrome中点击你想调试的h5下面的inspect ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/21/16fc5b1ed1b7dfc0~tplv-t2oaga2asx-image.image) + 电脑上会自动弹出一个带页面，带调试器的窗口，供你调试开发使用 ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2020/1/21/16fc5b60f3a6888e~tplv-t2oaga2asx-image.image) + 完成！ + 希望看完的你能够点个赞，再收藏下，下次不记得的时候，还可以回来看呀！