前言：
在PC端，我们调试网页一般直接打开chrome或者firefox的开发者工具就OK了，chrome也有手机模式，可以粗略地预览下移动网页，但是这都太粗糙了，PC上看到的，和移动设备上看到的页面，可能根本不是一回事，并且放入webview之后，也可能大变样，并且还会经历数不清的设备兼容性问题，我们需要能够在PC端，直接调试移动设备上的网页，甚至直接调试app中的webview
本人工作环境：
电脑：Mac；移动web开发工具：Hbuilder
1. IOS中webview以及IOS中safari如何在Mac中采用safari调试
你可能需要一台mac，这会让你和ios之间的调试变得无比简单
1. 在iphone中设置safari，开启web检查
2. USB线连上Mac，然后打开Mac中的safari，点开开发者工具，就可以看到你的移动设备，然后可以调试其中的网页和webview
就这样简单两步，就可对ios设备进行真机调试
2. Android中webview以及chrome dev浏览器如何在Mac中采用chrome调试
android中的webview调试略显麻烦，我们一步一步来
1. Mac中需要装有Chrome，Android设备中装有Chrome Dev，尽量偏新版本
2. 需要AndroidSDK中的ADB工具，帮助移动设备和Mac间通信，个人建议，直接装一个Android Studio，会带上Android的开发环境，比较方便
3. 安装好Android Studio后，我们先找到sdk中的adb这个工具，然后把adb服务启动起来，我们需要保证adb是一直运行着的，启动过程如下
4. 用USB连接Mac和Android设备，打开Mac中的Chrome，在地址栏输入
chrome://inspect
即可进入设备管理页面，我们可以看到，检测到了android设备上正在运行的webview，同时也是可以检测到android中chrome dev里开启的网页，我们点击inspect，就会开启一个调试页面，进行debug，（注意：第一次点击inspect之前，需要翻墙，被debug的webview，也需要android设置一下，开启webview调试，如果是Hbuilder打包的应用，默认是开启了webview调试的）
3. 借助Hbuilder，在开发过程中调试webview
以上方法都是调试已经安装在移动设备上的app，开发过程中，我们如何快速调试呢？
那就是借助Hbuilder，一个我认为很好用的工具
1. Hbuilder启动Xcode的移动设备模拟器或者部署到Android真机，运行app，你在Hbuilder的修改也会实时更新到app中
写了这么多，如果看到的朋友有其他更好的方式，欢迎分享
网友评论