WebView webView = findViewById(R.id.webView);
webView.setWebContentsDebuggingEnabled(true); // 主要是执行这一行,参数传 true
3. 手机端/模拟器安装移动端chrome浏览器,如果是配合pc端chrome调试,手机端chrome版本不能比pc端chrome版本高,否则可能无法成功调试。此外也可以使用手机端chrome+pc端edge调试,同样的,调试之前有必要将pc端edge更新至最新版本,edge版本号不能低于手机端chrome版本。
4. 将设置了1、2步骤的可调试版的app安装到手机/模拟器上,注意,真机调试需要用数据线连接电脑,同时真机需要打开开发者模式并允许调试。如果是模拟器,默认已经打开了调试功能,无需额外设置。然后在模拟器打开需要调试的WebView 页面。再然后在电脑chrome浏览器打开chrome://inspect页面;如果使用电脑的edge浏览器调试,请打开edge://inspect 页面;网上看到也有使用电脑qq浏览器调试的,那么请打开 qqbrowser://inspect;还有其他浏览器则不再例举,请自由发挥。
不出意外你会看到如下界面,红框所示则是你在手机或模拟器打开的WebView页面。
点击链接下方的 inspect 按钮,即可打开页面的快照,其实就是实时同步了移动端的屏幕;还支持在pc界面操作移动端界面,其实就是远程控制(edge支持,chrome貌似不支持,只能在手机上操作)。
当界面成功显示后,会自动在右侧打开chrome的开发者工具,这时候就进入到我们所熟悉的前端开发调试方式了。此时可以在开发者工具中使用 element、network、console、source、application 等面板对页面进行调试,极其方便。
通过pc端的chrome调试时,首次点击inspect按钮后页面可能一直处于加载中(白屏),或是显示 404 not found,这时候我们改用 edge 浏览器尝试,也可以搭好梯子后继续用chrome尝试。出现这种问题的原因是在调试界面需要先通过chrome官方链接加载支持调试功能的相关依赖,但是这个链接应该是被墙了,因此需要挂梯子,之后就不需要了,这个依赖会被浏览器缓存下来。但是edge 浏览器中的这个链接貌似是用了巨硬自己的镜像,且没有被墙,因此edge大概率可以直接无阻碍访问。
如有疑问,欢迎评论区交流。
这一篇是调试两种设备上的浏览器页面(不是应用中的 Webview),等我研究明白了怎么调试应用中的 Webview 会再写一篇。
Android
参考:使用Chrome://inspect调试 Android 设备上Webview
调试安卓设备的浏览器页面很简单,按照参考文章操作没有遇到什么问题。
可以调试安卓自带浏览器和Chrome。
使用 ios-webkit-d...
1、一台安装有chrome for android或cordova app的安卓设备(如果你是调试Cordova app或webview,就不用装chrome了)
2、安卓设备的usb数据线
3、安装有chrome的电脑(需要安装有安卓设备的usb驱动)
1、安卓设备打开USB调试
Android的app中如果直接使用WebView组件加载网页,并且需要进行H5页面inspect调试的话,可以在app中调用如下接口:
WebView.setWebContentsDebuggingEnabled(true);
推荐在Application的onCreate()接口中调用。
如果要在电脑端进行Android app中H5页面的inspect调试,最常用的方式有2种:
1.使用Chrome浏览器:(需要翻墙)
在地址栏中输入:chrome://inspect,即可打开inspect调试页面
调试要求:
● 开发环境安卓桌面版Chrome32+
● 一条USB数据线,连接电脑与移动设备,安装相应机型的USB驱动。驱动程序下载地址:http://developer.android.com/tools/extras/oem-usb.html
如果电脑上安装有百度手机助手、360手机助手这类软件,一般连接后可以自动安装相应的USB驱动程序。
● 如果是调试网页,移动设备需要安装Ch...
声明:本文主要介绍chrome 的inspect 实现的远程调试。要求 Android 4.4 (KitKat) 以上并能开启webview渲染,chrome 版本 32++(建议最新版本)。大部分内容来自谷歌开发者网站,部分图片来自老版本的chrome,但大体上一样。
如果低于上面的硬件要求可以通过weinre来调试,详情见文章。https://segmentfault.com/a/1190
1.前端开发离不开Chrome的开发者工具,尤其是调试Android WebView时。然而,如果使用chrome://Inspect的方法,国内的开发者会惊奇地发现“空白啊”!为此,我发布过这个离线包的解决方案!可以无需FanQ就能调试了。
2.本包主要为了解决调试webview(类似Chrome://inspect的功能)国内404或空白页面的问题。
3.本包内自带Chrome浏览器、离线调试包,用法解压包后文档中会有详细说明亲测保证可用,离线webview调试工具,开发H5混合应用必备。
对于混合开发的app来说,查看webView的一些报错信息是很重要的一个技巧。虽然android的WebView对于报错信息的提示并不是非常友好,好在有第三方工具可以使用。
Chrome浏览器
1. 输入chrome://inspect
打开chrome浏览器输入chrome://inspect即可进入调试页面
在Devices选项中,可以看到要调试的设备(手机已经通过USB调试连接到电脑上)和要调试的页面(手机已经打开要调试的WebView页面)。
2.点击inspect
点击要调试页面的左下角i
无论是调试Web页面还是调试Hybrid混合应用,只要是调试Android的webview,都需要使用Chrome://inspect进行调试。但是国内开发者会出现页面空白和404 Not Found错误:
调试WebView出现404页面的解决方法
翻墙吧~~~
前言Android开发时不时需要与H5交互这个时候如果没有能调试的工具效率简直是极低,我们项目就有一个活动页面需要与H5交互,当时还不知道有这么一个调试工具的时候只能用alert()(关键是这个问题他在本地运行是ok的在服务器才有问题这种问题最不好定位如果有这么一个工具那简直是So Easy)。当我觉得效率这么低的情况下,我在想是不是应该会有调试工具呢?(因为IOS有)
所以我就直接查google
使用 vite2 + vue3 + ant-design-vue2 报错:[vite] Internal server error: Inline JavaScript is not enabled.
12009