移动端（微信等使用vConsole调试console的方法

2023年6月10日下午6:46 • JavaScript

移动端开发中，使用vConsole调试console是非常常用的一种调试手段。下面我将详细讲解如何在微信等移动端应用中使用vConsole跟踪和调试console。

准备工作

首先，我们需要在移动端应用中引入vConsole。可以通过引入vConsole的CDN，或者将vConsole下载到项目中并引入文件的方式来实现。

使用示例1：在微信中调试console

在微信中调试console是移动端开发中比较常见的需求，下面我将介绍如何在微信中使用vConsole调试console。

在微信中打开调试窗口

在微信中访问需要调试的页面，长按页面右上角的按钮，弹出菜单，选择“打开调试”。

打开vConsole

在弹出的调试窗口中，选择“调试工具”菜单，找到并点击“vConsole”按钮，即可打开vConsole调试窗口。

调试console

在vConsole调试窗口中选择“Console”标签页，即可看到对应的console输出信息，并可以在输入框中输入console命令进行调试。

使用示例2：在自定义移动端应用中调试console

在自定义移动端应用中开发时，我们同样可以使用vConsole来调试console。下面我将介绍如何在自定义移动端应用中使用vConsole调试console。

引入vConsole

在移动端应用中引入vConsole。假设我们在HTML文件中引入vConsole：

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <title>Hello World</title>
    <script src="http://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
  </head>
  <body>
    <h1>Hello World</h1>
  </body>
</html>

打开vConsole

在移动端应用中，使用手势或者按钮触发打开vConsole。下面是一个示例代码，可以通过点击一个按钮来打开vConsole。

var vConsole = new VConsole();
var dom = document.createElement('div');
dom.innerText = '打开vConsole'; 
dom.addEventListener('touchstart', function(){
    vConsole.show();
}, false);
document.body.appendChild(dom);