惊!还能这样调试WebView页面

  • 2018-09-07
  • 0
  • 1

作者:黄志成

博客:地址

作为一个前端开发工程师,需要经常调试页面!

调试PC页面相对简单一些.我们可以直接使用Chrome提供的开发者工具.

image

这是一个神器!可以调试网络,调试js性能,各种意想不到的功能!

但是调试嵌套在APP内的页面,就有些余力不足了.

image

这是一款APP中内嵌的一个WebView。

如果想知道这个页面在手机上性能消耗和网络请求该怎么办?

当然你可以通过抓包软件获取页面的URL,将这个页面在pc浏览器上打开然后再去调试.

但是你就无法知道在WebView中的性能消耗.资源是否走了缓存.

但是!万能的Chrome调试功能提供了一个调试WebView的方法.

在谷歌浏览器地址栏输入 chrome://inspect/#devices .

image

进入到一个开发者工具.它可以通过代理或者USB调试来连接手机中的WebView.

下面来操作一下USB调试的方法.

  • 首先将我们的手机连接电脑(这里手机用的是红米Note4 电脑是Mac)

  • 打开手机的调试模式

image

(一般在设置 -> 开发者选项中找.)

  • 然后查看开发者工具的页面

image

会多出一个 Redmi Note 4X , 这就是我的手机.已经成功连接上调试工具了.

我们在手机中打开一个WebView的页面.

image

这时,电脑上也应该显示出你打开的页面.

点击 inspect 进入调试页面.

如果是第一次打开需要翻墙去下载这个调试工具的一些资源包.如果不能翻墙,可能就会显示空白或者404页面.

这里我就不演示如何翻墙了. 自行百度 . 推荐大家使用 lantern .

image

进入之后,你可以滑动页面,点击这个交互按钮.当然手机上也会跟随改变.

image

你可以使用最熟悉的NetWork,当然也可以像调试pc页面一样来调试WebView页面.

这篇博客主要就是介绍有这么一个调试利器.那么如何玩转这个神器.我将在之后的文章中介绍.

评论

  • 大风

    谢谢博主