技巧:在移动网络前端调试页面的几种方法

前言

PC端网页调试相对容易，这里主要有几种移动端调试方法，从简单到复杂，从模拟调试到远程调试，大致分为几个部分：

1、Chrome DevTools（Google Chrome）模拟电话调试

2、weinre（Web inspectorremote）远程调试工具

3、集成了Chrome DevTools和weinre的微信“网络开发者工具”做得更好

4、Chrome DevTools远程调试Android和iOS页面

5、Eruda——移动网页的前端调试面板

阅读说明

本文不是一篇小文章，您需要一定的前端基础才能理解；另外，本文不是调试教程，很多细节都不是屏幕截图或描述都非常清楚，正如我所说，读者默认了解一些基本的调试方法；

我主要是在这里总结几种调试方法，以便在阅读本文后方便我自己和其他人了解更多调试方法；如果您遇到无法理解的步骤，可以在百度或评论区域留言，谢谢！

1、Chrome DevTools模拟手机调试

直接使用Google Chrome开发者工具，可以参考下图，也可以使用快捷键F12或ctrl + shift + I；个人认为无论使用哪种浏览器，只要先按F12键，通常就可以打开开发。如果无法打开，请先讨论一下。

此调试方法不仅可以用于模拟手机调试，还可以用于PC端的主要页面调试方法，这里主要用于手机调试。

打开后，您将看到类似于以下界面的开发人员调试界面，Elements可以查看文档元素，Console可以调试js并查看输出结果，Sources可以调试JS并查看相关资源，Network可以查看所有网络请求

在浏览器地址栏中输入要调试的页面的地址，选择模拟的设备，然后可以选择要调试的js。右侧面板中有一个调试操作按钮；您可以在“应用程序”面板的Cookie或其他内容中查看存储在应用程序中的数据

如果没有要模拟的模型怎么办？当然已经添加了。打开DevTools设置面板，左侧图片中的设置点将出现在右侧图片中，如下所示：

2、weinre（Web inspectorremote）远程调试工具

Weinre实际上在要调试的页面中嵌入了一个特定的js，因此weinre可以监视该页面并打开调试面板；请注意，Weinre的调试面板无法调试JS，也不支持断点调试。它只能用于调试页面样式，并且使用场景有限；

根据您的需要选择。请参考具体的安装过程：我不建议使用此工具，因为它使用较少，因此仅在此处进行介绍和理解。如果你想

请仔细阅读参考链接中的内容，以深入了解weinre。

3、微信的“网络开发者工具”

微信的网络开发人员工具集成了Google的DevTools和weinre。可以说是以上两点的集合。对于微信公众号中使用的H5网页，这是最佳选择；

此用于调试常规网页的工具与Google Chrome调试相同，并且您看到的调试面板也相似；但是如果要调试与微信相关的功能，例如JS-SDK，权限列表等，则必须使用此工具

工具下载链接：

除了使用url模拟调试之外，微信的网络工具还可以远程调试Android手机。最新版本不支持iOS远程调试。打开设备监控面板：

打开后，会看到以下界面，可以看到已经连接了华为设备，在进行远程调试时要注意两点：

1、手机和计算机使用USB连接，手机需要打开USB调试模式（不同的手机不同）

2、在手机上安装最新版本的Google Chrome浏览器并打开它

然后单击“检查”以开始调试由当前移动Google浏览器打开的页面。我在这里不做详细说明，也不需要仔细看。我将在下面详细解释

再次查看微信的移动调试。 iOS仅提供普通的代理测试。除了代理测试，Android还具有X5 Blink内核调试功能；但并非所有手机都支持X5 Blink；因此，通常使用代理调试。

为手机的wifi网络配置代理后，单击，开始调试，出现监控界面。我发现它实际上是使用weinre实现的，但微信对其进行了改进。与直接使用weinre相比，它具有以下优点：

1、无需在页面上手动添加weinre调试脚本，这非常方便

2、可以在weinre Network的网络请求页面中看到完整的http请求日志，并且没有限制，只看到ajax

但是也有缺点。因为它是微信开发的工具，所以移动调试只能调试在微信应用中打开的页面，而不能调试所有可以在微信中打开的网页。怀疑该工具已在内部过滤

重新启动微信后，访问微信中的页面，可以对其进行监控，然后可以调试网页的样式，可以在“网络”页面卡中查看每个请求的参数和响应结果

简而言之，如果调试页面是微信中的页面（通常是官方帐户），则使用微信提供的工具非常有效；如果它是常规浏览器中的页面，则也可以使用微信的Chrome DevTools，但最好不要使用weinre

4、Chrome DevTools远程调试Android和iOS页面

在计算机上安装新版本的Google Chrome，然后在地址栏中输入chrome：// inspect打开设备监控页面，您可以在其中监控iOS和Android设备。如果界面与图示不一致，请安装最新版本的浏览器

Android：

先决条件：

1、手机和计算机使用USB连接，手机需要打开USB调试模式（不同的手机不同）

2、在手机上安装最新版本的Google Chrome浏览器并打开它

您会在设备监视页面上发现一个额外的华为设备，并且可以在当前手机上看到由Google浏览器打开的网页的连接

a）：您可以在此处输入要由手机打开的网址，然后再打开，手机上显示的当前页面将会更改

b）：检查意味着开始调试当前页面，调试面板将打开（重要）

c）：“焦点”标签，表示让手机显示当前连接

d）：重新加载是指重新加载页面，即刷新

e）：关闭表示关闭当前手机显示的页面

接下来，单击检查开始调试页面。请注意，如果Google浏览器无法打开墙，则无法打开调试页面。您可以编辑主机文件以打开百度墙

然后，您可以像PC网页一样远程调试移动网页。

iOS（在Windows系统上，如果是Macbook系统，请忽略此部分）：

您可以参考：

先决条件：

1、在计算机上安装iTunes软件，否则将无法正常识别Apple手机。安装后，数据线将连接手机和计算机

2、打开手机的设置-> Sarafi->高级-> Web检查器->启用（默认为关闭，将其打开）

3、下载ios-webkit-debug-prox代理（32位或64位），其作用是在Chrome和Sarafi之间建立代理，以便Chrome在计算机上可以检测到由萨拉菲在电话上

4、在cmd中执行ios_webkit_debug_proxy -f chrome-devtools：//devtools/bundled/inspector.html，在命令-f中使用Google的内置监视器进行调试（默认情况下使用远程）

启动后，它将监视端口9222，然后看到已连接名为jiba的iOS设备，该设备的UDID在括号中；然后查看Google Chrome浏览器是否检查了此端口，右图为端口9222。是的，如果没有，请手动添加

这时，打开手机Sarafi浏览器，打开百度首页，发现浏览器可以检测到它。如果看不到，请刷新监视界面。一般来说，它会在3秒钟内自动出现。

单击检查，调试面板也会出现。如下所示，发现iOS调试面板无法看到电话屏幕在计算机上的投影，但这并不影响调试。但是您可能会在调试js Question时遇到断点不起作用

如果很不幸遇到此问题，请连续两次单击图中红色框中的按钮，首先禁用断点，然后开始恢复端点调试功能。我不知道为什么我想中断是在此过程中恢复的。点的状态；这个问题很奇怪。

这是使用Chrome调试iOS和Android的结尾。这种使用Google浏览器的方式取决于Android上的手机Google浏览器和iOS上的Sarafi浏览器，后者受特定软件的限制；但它毕竟可以理解，远程调试并不像模拟调试那么简单

5、Eruda——移动网页的前端调试面板

什么是eruda？如标题所示，它用于调试手机上的页面。请注意，它不在手机的计算机上。上面提到的几种调试方法都是在计算机上模拟调试或在移动页面上进行远程调试，但是eruda直接在手机的“调试”页面中。

有什么好处？如果不得不说的好处是，您可以像打开电话上的PC开发人员面板一样直接打开调试面板。主要目的是在PC端对电话页进行调试的效果与在电话上运行时不一致时直接在电话上进行调试。

（手机上的调试效果图）：

特定信息：

目前我使用的较少，但这是推荐的调试工具。通常，大多数开发人员都直接在PC上调试页面（无论是PC端页面还是移动端页面），因此建议在开发过程中使用Chrome DevTools或WeChat Web开发人员工具进行调试。

当然，有些学生说我使用360浏览器。实际上，无论使用哪种浏览器，除了内核不同外，调试模式基本上与Chrome DevTools相同。这里我想说的是，调试页面时直接使用PC。调试很好，但是发现在真实计算机上的运行效果与预期不一致

您可以使用Eruda在真实机器上进行调试，以定位和解决问题。

以上工具并不相互独立存在。解决问题很可能需要多种联合调试方式。毕竟，我们不能用一种工具来构架自己，应该利用自己的优势而避免自己的劣势；

最后，由于我是后端工程师，所以我是前端的爱好，并且经验有限。我肯定不知道有很多优秀的调试工具或调试方法。如果您知道的话，请与我联系，每个人都会互相促进。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-345515-1.html