使用chrome调试

PC端Chrome可以调试安卓WebView与手机端Chrome网页，PC端调试移动端为开发定位问题提供了强有力的工具。

Dcloud框架实现基于安卓组件WebView，使用chrome调试Dcloud类似于调试安卓原生WebView组件。chrome调试webview组件需要设置：

WebView.setWebContentsDebuggingEnabled(true);

Dcloud则读取其项目配置文件属性最后解析为设置该属性。

S1.环境准备

Dcloud工程；

PC谷歌浏览器版本高于30.xxx；

FQ连接到谷歌服务；

Android设备或模拟器的系统版本为4.4及以上(>= API-19)；

S2. Dcloud工程配置

s1.manifest.json设置节点 "distribute": {"debug": "true"}

s2. assets\data\dcloud_control.xml文件设置debug="true"

<hbuilder version="1.9.9.39354" debug="true"></hbuilder>

S3. 在Chrome地址栏，输入"chrome://inspect"或通过“菜单”->“工具”->“检查设备”打开设备检查页面。

 

 

    已连接设备可调试应用列表如上图。

S3.点击inspect，启动chrome调试窗口

    CSS样式修改会实时同步到真机上。

 

CSS样式修改模式窗口

 

JS断点调试模式

Chrome浏览器调试js

 

P1.格式化代码{ }；

P2.断点调试；

    断点调试F8暂停-继续/F10单步/F12

P3.资源视图、CSS/ID/HTML视图；

 

相关问题

Q1. Chrome Inspect调试出现空白页面

关键Log或描述:

Inspect后出现空白页面

 

解决方案：

 

需要FQ/代理访问google服务

 

 

Q2. ADB端口修改chrome设备发现问题

关键Log或描述:

Chrome无法发现adb设备

 

解决方案：

 

1.查询手机webview_devtools_remote_xxx

adb shell cat /proc/net/unix

2.adb forward tcp:9222 localabstract: webview_devtools_remote_xxx

 

REF:

   

   

 

 

参考：

    -MUI

    WebView

    -PC6

    -CSDN