移动端真机调试方法汇总

在写移动端项目中,开发阶段大都是直接在 Chrome 浏览器模拟手机调试模式下进行调试可以说是非常便捷的。但真机上的一些特性是无法模拟的,例如手指触摸,还有很多手机兼容适配问题。只有在手机上出现的一些问题,需要我们去解决。

在页面上添加调试面板,通过JS注入的方式

eruda

Eruda 是一个专为手机网页前端设计的调试面板,类似 DevTools 的迷你版,其主要功能包括:捕获 console 日志、检查元素状态、捕获XHR请求、显示本地存储和 Cookie 信息等等。

1
2
3
4
5
6
7
8
(function() {
var script = document.createElement('script');
script.src = '//cdn.jsdelivr.net/npm/eruda';
document.body.appendChild(script);
script.onload = function() {
eruda.init()
}
})()

vConsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板。

1
2
3
4
5
6
7
8
(function(){
var script = document.createElement('script');
script.src = '//pages.c-ctrip.com/amsweb/tools/vconsole.min.js';
document.body.appendChild(script);
script.onload = function() {
var vConsole = new VConsole();
}
})()
  1. 微信x5内核浏览器提供的调试办法
    手机打开 http://debugx5.qq.com
    或者手机扫码
    X5内核调试专用页面

Tips:

  • 只支持Android手机
  • 调试面试貌似有延时的机制,会在页面代码初始化后面才出现(还是别用了吧)