初识Webview

原生APP是将页面的布局设计，以及业务代码打包然后用户下载安装使用，而webview是通过加载html文件来进行页面的展示，当需要更新页面布局的或者业务逻辑变更时，如果是原生的APP就需要修改前端内容，升级打包，重新发布才可以使用最新的。

而通过webview方式的页面则只需要修改html代码或者js文件（如果是从服务器端获取，只要新的文件部署完成），用户重新刷新就可以使用更新后的，无需通过下载安装的方式完成升级

坑：

• chrome从62版本开始引入了css标签解析的bug，导致无法很好的去inspect web页面
• chrome://inspect需要翻x 需要下载62版本的chrome

webview的调试

模拟器默认开启webview的debug开关。网易mumu模拟器除外

chromedriver相关的配置

• chromedriverUseSystemExecutable=true 默认使用/usr/local/lib/node_modules/appium/node_modules/_appium-chromedriver@4.14.0@appium-chromedriver/chromedriver/mac/chromedriver
• chromedriverExecutableDir指向chromedriver的存放目录，目前不生效
• chromedriverExecutable执行chromedriver的绝对路径

Webview的识别原理

• appium 会启动 chromedriver /Users/seveniruby/projects/chromedriver/2.20/chromedriver --url-base=wd/hub --port=8000 --adb-port=5037 --verbose
• app 或者浏览器，底层使用的是 android 的 webview 组件，webview 组件有一个 debug 特性，可以在启动的时候，写入一个 domain socket 记录， webview_devtools_remote_3548
• adb -P 5037 -s emulator-5554 shell cat /proc/net/unix 找到对应的webview调试入口
• adb forward tcp:KaTeX parse error: Expected group after '_' at position 43: …devtools_remote_̲pid
• curl http://localhost:7770/json/version
• curl http://localhost:7770/json

自动寻找webview并分析

list_webview ()
{
    port=$1;
    adb shell cat /proc/net/unix | grep -a webview | awk -F_ '{print $NF}' | tr -d '\r' | while read pid; do
        port=$((port+=1));
        adb forward tcp:$port localabstract:webview_devtools_remote_$pid;
        curl http://localhost:$port/json/version;
        curl http://localhost:$port/json;
    done
}
list_webview 7770

真机为了提高性能，默认不开启webview的debug属性，需要研发在webview的组件上调用debug开关
https://developers.google.com/web/tools/chrome-devtools/remote-debugging/webviews?hl=zh-cn