因为在开发中使用到了webview,因为出现一些问题,所以需要对webview进行跟踪调试,但因为app,h5与微信小程序不一样,所以需要单独说一下。

    一、H5

    这个比较简单,因为都是在chrome,用F12就可以

开发uniapp过程中对app、微信小程序与h5的webview调试_webview

 二、对微信小程序

      因为普通的uniapp页面上都能通过F12可以显示出来,但嵌入webview的相关内容就看不到了,这样就很不方便。

       但微信小程序开发工具可以有方便的地方,就是下面红标注的爬虫的图标就可以跟踪webview里的内容。

开发uniapp过程中对app、微信小程序与h5的webview调试_webview_02

三、app

    手机端跟踪webview的方式,网上官方也有介绍,

 1.打开​​webview​​调试(在Hbuild中打开项目,选择 视图-->显示Wbeiview控制台)

开发uniapp过程中对app、微信小程序与h5的webview调试_小程序_03

 2.chrome浏览器打开: chrome://inspect/#devices 这个页面

开发uniapp过程中对app、微信小程序与h5的webview调试_微信小程序_04

 我是上面的标识的这个页面,点击对应页面的inspect,就可以看到样式等了,好像打不开

用hbuilderX的视图,webview调试,好像也是检测不到手机

开发uniapp过程中对app、微信小程序与h5的webview调试_webview_05

 但是我用手机都可以进行真机的调试了,也是可以检测到手机的,所以目前还找不到原因。

开发uniapp过程中对app、微信小程序与h5的webview调试_chrome_06