安卓手机在浏览器中调试页面展示

Posted 2023-05-04

参考技术A 为什么要用此方法进行调试不再赘述，请看上篇文章ios调试。但是不同于iOS的是：此方法安卓手机上必须装Chrome浏览器，但是一般app都是用的手机系统自带的浏览器来展示webview页面，所以并不能针对手机兼容性进行调试。但是调试真机页面展示还是OK的。
1、准备：
（1）装有Chrome浏览器的安卓手机一台，并打开手机的USB调试（一定要准备一根可以传输数据的线连接手机）
（2）电脑端Chrome浏览器
2、数据线连接手机并允许USB调试
3、连接成功后打开电脑端的Chrome浏览器，打开控制台，选择「右侧三个点」-- 「More tools」-- 「Remote devices」，如图1-1：

如何使用电脑上的谷歌浏览器来调试安卓手机上的移动端页面

本教程用的是我自己的手机三星A9，其他安卓手机方法也相同。

第一步首先你得打开手机的开发者选项，确保USB调试和通过USB验证应用程序保持打开状态，如图所示

第二步，确保你的电脑和安卓手机都已经安装了谷歌浏览器

第三步，打开你电脑的上谷歌浏览器，调出控制台，，点击如图所示这个3旁边的3个点，这里面有更多的功能，会出现这个选项，我们点击More tools，再选择，在之后的页面中如图所示的选项必须打钩，然后用你数据链连接你的电脑和手机，手机就会弹出一个连接提示，你点是就可以了，连接成功就会跟上图中红色箭头标注的一样，出现带绿色小圈的你的手机型号。

第四步，在电脑上的谷歌浏览器输入这个网址chrome://inspect/

就会出现这个面

第五步，打开你手机上的谷歌浏览器，输入你想要调试的网页，我一般都是把网页放到我的本地服务器，在手机浏览器上输入我的本地网址，如果是一个百度页面的例子

最后一步，我们点击inspect就可以审查手机页面了，，审查方法就跟审查PC网页一样了。

第一次发表博客，以前也想着写一些，一直很忙，今天心血来潮，就写了一遍，接下来会再接再历分享更多经验，谢谢大家~本人还创建了一个前端技术交流qq群，群号是399627992，感兴趣的朋友可以加下。我下次分享如何使用safari浏览器调试ios手机上的移动网页。