手机上Webview及html5页面调试方法

文章编写背景：

本来呢，开发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才可以使用此功能，注意哟！！！

 

至于调试使用体验，那是非常的好。