文章编写背景:
本来呢,开发html5页面用浏览器的调试模式就非常的方便,在浏览器里按F12键就可以立即调试,找出布局的问题,以及log输出。但是偏偏把页面放在手机或平板里运行,总有不对劲的地方。就拿Android设备来说,6.0的系统都显示的很好,但是在5.1的系统里面各有各的布局差错。很郁闷。
然后看到博客说chrome有调试功能,可以调试装在Android设备上的chrome浏览器以及Android的WebView。真是救命稻草呀,很轻松的就解决了一天没有解决的问题。因为这个工具帮你快速的定位到问题。
(Chrome DevTools调试移动设备Brower PageTabs/WebViews)
使用方法:
电脑里面得chrome浏览器,尽量是最新版本。
用数据线连接手机并启动调试模式(对于开发人员来说这是基本需求,不多记录)
在chrome浏览器地址栏输入chrome://inspect 或者about:inspect
就会出现如下界面。这里我的手机打开了一个内嵌的webview,显示如下。
点击inspect即可进入调试界面:
注意一般你会发现出现一个空白的界面,无法显示内容。那么很高兴的告诉你,你需要(fan)(qiang),即你需要能访问google才可以使用此功能,注意哟!!!
至于调试使用体验,那是非常的好。