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

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

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

vConsole

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

直接通过 scirpt 注入

!(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.安装依赖

npm install vconsole

2. 新建 vsconle.js 文件

import VConsole from 'vconsole'
export default new VConsole()

3. 在 main.js 文件中引入

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

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

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
或者手机扫码

Tips：

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