使用谷歌浏览器Chrome://inspect调试 cordova 项目

男娘i 2023-02-24 03:44 20阅读 0赞

![format_png][]

## 一 你需要准备? ##

*  版本 83.0.4103.116（正式版本） （64 位）
 *  android 版本 8.0.0

以上是我本次测试的环境,但大家测试不限于此。

## 二 准备工作 ##

首先，我们需要通过usb线将我们设备连接到开发机.开启你的设备的usb调试,由于每个设备开启方式不同,需要大家自行百度.

接下来,大家可以参考我的这篇文章[Cordova项目使用Android Studio真机调试][Cordova_Android Studio]将cordova项目导入android studio,这样做的目的是为了方便我们快速安装app到自己的设备.

其实细心的同学会发现,配置完真机调试,我们也能在console窗口看到日志信息

![format_png 1][]

至于为什么还要搞chrome这一套,主要是很多人太熟悉它的debug调试,用起来顺手.

## 三 演示 ##

在PC端输入[chrome://inspect][chrome_inspect]，打开DevTools页面,如果一切顺利,你会发现远程目标已经上线

![format_png 2][]

要开始调试，请点击您想要调试的 WebView 下方的 inspect。

![format_png 3][]

这时候你会发现,查看日志会变得更加方便.

**这里会有一个小坑,我当时点击之后报了一个404的页面,最后翻墙之后解决,可能要通过外网下载什么东西,网上的加速器很多,大家随便找一个就行.**  
**还遇到有时候console里面不打印日志,大家加速器又可以了,很奇葩,不知道原因**

推荐我用的[穿云加速][Link 1],每天签到送流量,基本够用

当然左侧的页面你可以直接点击操作,就和操作h5页面一样,由于涉及隐私,我打了马赛克.

## 四 总结 ##

由于我也是刚接触客户端项目,可能总结的不到位,有问题大家留言

> 参考文章
> 
> \[1\].[使用Chrome://inspect调试 Android 设备上Webview][Chrome_inspect_ Android _Webview]\[N\] Hyelim

[format_png]: /images/20230209/04a3259e4fce45eea707442b0d248a80.png
[Cordova_Android Studio]: https://blog.csdn.net/Milogenius/article/details/107156385
[format_png 1]: /images/20230209/25ef2e03a41746cf978a7f159c3c8826.png
[chrome_inspect]: https://link.jianshu.com/?t=chrome%3A%2F%2Finspect
[format_png 2]: /images/20230209/90734f85fbd64f579f981e9b0b28deec.png
[format_png 3]: /images/20230209/64a96b27aeb045fabcc354adf20b1ca0.png
[Link 1]: https://jianguo01.com/auth/register?code=Fnl8
[Chrome_inspect_ Android _Webview]: https://www.jianshu.com/p/66896bec620e