移动端Web页面好用的调试面板

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

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

vConsole

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

直接通过scirpt 注入

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();
}
})()

在 vue中 使用

1.安装依赖

1
2
3
4
npm install vconsole
```

2. 新建vsconle.js 文件

import VConsole from ‘vconsole’
export default new VConsole()

1
2
3
4

3. 在 main.js 文件中引入

在vue 实例化前引入,才能记录下完整日志

import vConsole from ‘@/common/vconsole’
console.log(‘vConsole 面板初始化’, vConsole.version)

1
2
3

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

!(function() {
var script = document.createElement(‘script’);
script.src = ‘//cdn.jsdelivr.net/npm/eruda’;
document.body.appendChild(script);
script.onload = function() {
eruda.init()
}
})()
```

微信x5内核浏览器提供的调试办法

手机打开 http://debugx5.qq.com
或者手机扫码
X5内核调试专用页面
Tips:

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