前言

在pc端我们可以非常方便的打开开发者工具来查看页面的元素、网络请求或console日志等，甚至对代码进行调试，这样会很快的帮助我们定位问题解决问题。那么如果开发手机端的网页应用，我们如何来查看这些信息或者调试呢？

vConsole

vConsole是腾讯开源的移动端的前端开发者调试工具，安装它之后会在所有页面悬浮一个按钮，点击即可弹出一个简易版的开发者工具，这里面可以查看页面元素、网络请求、本地存储和日志。

首先通过pnpm进行安装：

pnpm install vconsole --save

然后在App.vue中创建一下即可：

import VConsole from "vconsole";
const vConsole = new VConsole({ theme: "dark" });

这样当我们运行时就会发现每个页面上都悬浮一个vConsole的按钮。

但是我们不希望用户也看到这个按钮，所以我们添加一个判断，比如通过域名判断，如下：

if (window.location.hostname != "xxxxx") {
  const vConsole = new VConsole({ theme: "dark" });
}

如果不是线上环境的域名才进行创建，这样线上环境就不会显示用户就看不到了。

虽然vConsole可以看到大部分重要的信息和日志，但是却无法进行代码调试，而且在移动端使用起来也不是那么方便。这时候我们就可以使用Chrome Inspect。

Chrome Inspect是Chrome提供的移动调试工具，是基于adb的，所以需要我们打开手机的开发者选项，并允许usb调试。

在Chrome中打开chrome://inspect/#devices，将手机通过usb连接上电脑，这时候就会看到相关设备，如果用浏览器打开了网页，在对应设备下就可以看到，如下：

我们点击inspect就可以打开开发者工具了，如下：

这就与pc端一模一样了，可以进行代码调试。