前言

• 当我们在开发手机版网页时，可能会出现以下情况：
• 自己电脑调试运行好好的，手机打开就挂掉了，并且手机端看不到日志信息。

一、vconsole 插件

• vconsole 是腾讯开源的一款轻量级、可扩展的前端开发调试面板工具。
• 功能：查看控制台日志、网络请求、审查元素、Cookie、LocalStorage、SessionStorage
• npm install vconsole -D

在 webpack 中使用

const vConsolePlugin = require("vconsole-webpack-plugin");const isProduction = process.env.NODE_ENV == "production";// 省略...    plugins: [      // 手机调试插件 （生成环境不开启）      new vConsolePlugin({        filter: [],        enable: !isProduction,      }),    ],

二、chrome devtools

• 支持远程调试，可以调试android上的页面（手机需开启USB调试）
• 在浏览器地址栏输入 chrome://inspect看到如下图页面，在手机上打开的网页、

app debug包中的 webview 会出现在这。

• 点击 inspect就会同步出现手机端的界面，此时可以审查页面元素，查看手机端的

Network 信息

三、浏览器 Via

• 一个轻量级浏览器，可高度自定义，非常适合我们开发者。
• 页面查找、源码查看、资源获取、网络日志都可以查看