移动端调试工具神器之 - Vconsole

VConsole是由腾讯开发的移动端网页调试工具，提供类似浏览器控制台的功能。支持CDN或npm安装，集成后在页面右下角显示调试按钮。主要功能包括日志输出、网络监控、DOM查看、存储管理等。适用于H5页面调试和真机测试，可通过URL参数控制调试面板的显示。替代方案有Eruda和Chrome远程调试。该工具轻量易用，解决了移动端开发调试不便的问题。

H5 页面中 我们可以正常调试， 但是发到生产或者测试，我们没有办法调试，所以我找到了一个可以线上调试的利器。他可以在线上调试，可以看打印等。

在日常的移动端开发时，一般都是试用chrome浏览器的移动端模式进行开发和调试，只有在chrome调试完成，没有问题了才会上到真机测试，移动端开发的一大问题就在于此， 各种品牌各种型号手机，手机中各种类型的浏览器APP........还好移动端的相对一致点，但是往往都会有一些各种各样的坑，这时候就蛋疼了，明明chrome调试工具中是正常的， 一到某个浏览器中就炸了，怎么办，又无法像在chrom...

vconsole调试工具使用方法

vConsole 是腾讯推出的一个轻量、可拓展、针对手机网页的前端开发者调试面板。在public文件的index.html引入，并使用，需要的时候打开不需要就注释。在main.js中引入刚刚新建的vconsole.js。安利一款好用的移动端调试工具vConsole。官网:https://alloyteam.

它可以直接嵌入到你的web页面中，提供了控制台日志，网络请求查看，元素查看等功能。：现在，你可以在手机上打开你的网页，然后在页面中看到vConsole的调试面板。

vConsole作为一款前端调试神器，为前端开发者提供了一个便捷的调试解决方案。通过本文的介绍和示例，相信你已经对vConsole有了更深入的了解。然而，vConsole的功能远不止于此，它还有许多高级用法和技巧等待你去发掘。讨论：你在前端开发中是如何使用vConsole的？你有没有发现vConsole的一些隐藏功能或技巧？欢迎在评论区分享你的经验和见解！💝💝💝欢迎来到我的博客，很高兴能够在这里和您见面！

介绍 一个轻量、可拓展、针对手机网页的前端开发者调试面板。 vConsole 是框架无关的，可以在 Vue、React 或其他任何框架中使用。 现在 vConsole 是微信小程序的官方调试工具。 功能特性 日志(Logs)： console.log|info|error|… 网络(Network)： XMLHttpRequest, Fetch, sendBeacon 节点(Element)： HTML 节点树 存储(Storage)： Cookies, LocalStorage, SessionStora

本地调试工具使用

不管是vue项目还是react项目都适用 前言： 平时在web应用开发过程中，我们可以console.log去输出一些信息，但是在移动端，也就是在手机上，console.log的信息我们是看不到的。 这种情况下，可以选择使用alert弹出一些信息，但是这种方法不怎么方便，也会阻断JS线程，导致后面的线程都不执行。也影响调试体验。 那么，如果将console.log应用到移动端呢？ 需要借助第三方插件：vConsole 首先下载依赖 ： // 首先使用 npm 下载依赖 npm install vconsol

在Web开发过程中，对html页面进行开发和调试的时候都会用到浏览器提供的调试工具，小编我最常用的就是Chrome浏览器自带的开发者工具了，可以很方便的对JS代码进行断点调试，log也很方便。但是在移动端的浏览器上进行开发就没有这么方便了，不管是iOS的Safari还是Android的众多浏览器。在这里小编推荐一个移动端的调试神器Eruda。 Eruda 是一个专为手机网页前端设计的调试面板，类...

TCon 基于 try catch 捕获所有异常的移动端调试工具 线上体验 1. 效果图 2. Why TCon 3. 基本用法 4. webpack loader 5. 编写一个tcon插件 1.效果图 tcon 功能 [外链图片转存失败(img-DqXmAnHS-1567176773370)(https://www.theajack.com/tcon/images/TCon.png)] ...