前端必须知道的手机调试工具vConsole

这篇具有很好参考价值的文章主要介绍了前端必须知道的手机调试工具vConsole。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

在日常业务中我相信大家多多少少都有移动端的项目,移动端的项目需要真机调试的很多东西看不到调试起来也比较麻烦,今天给大家分享一个我认为比较好用的调试第三方库VConsole ,有了这个库咱们就在手机上看控制台了,VConsole有两种引用方式,使用方法也很简单
方法一:在public目录下index.html文件中引入
vconsole.min.js
<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>

再到需要查看控制台的页面的created中使用new vConsole 实例

  created() {
    var vConsole = new window.VConsole();
    console.log(vConsole);
 },
beforeDestroy() {
    vConsole.destroy();// 不需要用到时销毁
},

接下来咱们就能在页面上看到

前端必须知道的手机调试工具vConsole

前端必须知道的手机调试工具vConsole

方法二:cmd用npm安装VConsole

npm install vconsole

安装完成直接进入项目引入使用即可

import VConsole from 'vconsole';
creatrd(){
const vConsole = new VConsole();
// 两种方法取其一
const vConsole = new VConsole({ theme: 'dark' });


// 打印测试
console.log('Hello world');
},
beforeDestroy() {
    vConsole.destroy();// 不需要用到时销毁
},

两种方法效果相同,我倾向于第一种方法比较方便

PS:还有注意了,调试完成一定一定一定记得删除

更多vConsole使用教程方法可以去
github:https://github.com/Tencent/vConsole

gitee:https://gitee.com/Tencent/vConsole文章来源地址https://www.toymoban.com/news/detail-524955.html

到了这里,关于前端必须知道的手机调试工具vConsole的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • Visual Studio 2022 程序员必须知道高效调试手段与技巧(下)终章

    🎬 鸽芷咕 :个人主页  🔥 个人专栏 :《C语言初阶篇》 《C语言进阶篇》 ⛺️生活的理想,就是为了理想的生活!    🌈 hello! 各位宝子们大家好啊,上一章给大家介绍了 Visual Studio 2022功能使用,和一些常用快捷键!    ⛳️ 今天来正式来调试环节,带大家看看程序出

    2024年02月15日
    浏览(58)
  • 建议收藏 - 必须知道的4个前端安全编码规范,0基础web前端开发

    2.构造GET和POST请求 若某攻击者想删除某网站的一篇文章,首先获得当前文章的id,然后通过使用脚本 插入图片 发送一个 GET请求 ,或 构造表单 , XMLHTTPRequest 发送 POST请求 以达到删除该文章的目的 3.XSS钓鱼 钓鱼 这个词一般认识是起源于 社会工程学 ,黑客使用这个这门学科

    2024年04月22日
    浏览(40)
  • 2023 年开发者必须知道的 6 个 AI 工具

    自Chat GPT发布以来,AI在各个领域都出现了令人惊艳的产品,在编程方面也是如此。这些由 AI 驱动的工具使用算法快速准确地生成代码,从而节省程序员的时间和精力。虽然目前AI写出来的代码还不能完全替代人类,但开发人员完全可以作为一种辅助的工具。 通过使用深度学

    2024年02月11日
    浏览(44)
  • 微信小程序-开了调试Vconsole能正常运行,不开调试不能正常运行

    这个微信小程序太奇怪了,做了一点小改动要上线,在本地连接真机调试好好的,上到体验环境手机打开就不行了。 而且奇怪,体验版打开调试后又正常了,加载页面的时候报了一个错 \\\"(in promise) MiniProgramErrornInvalid attempt to spread non-iterable instance.nIn order to be iterable, non-arra

    2024年02月11日
    浏览(52)
  • 【Andriod】adb调试安卓手机时连接真机或模拟器的3种方法,你知道么?

    adb 称之为: Android 调试桥 (Android Debug Bridge ) 是一种允许 模拟器或已连接的 Android 设备 进行通信的 命令行工具 ,它可为各种设备操作提供便利,如 安装和调试应用 ,并提供对 Unix shell( 可用来在模拟器或连接的设备上 运行各种命令 )的访问。 - 可以在 Android SDK/platfo

    2024年02月05日
    浏览(71)
  • H5移动端调试方案全解(iOS&Android&Chrome&vConsole)

    在移动端盛行的今天,大家在日常中经常会接触到H5的移动端网页,不仅仅是在浏览器中,在各种的APP中也有存在着许多的H5页面,所以我们作为前端开发者就会有在开发时候进行移动端调试、甚至是真机调试的需求,本文旨在一文带领大家了解iOS、Android等平台的调试以及模

    2024年02月05日
    浏览(52)
  • uni-app 可视化创建的项目 移动端安装调试插件vconsole

     可视化创建的项目,在插件市场找不到vconsole插件了。 又不好npm install vconsole 换个思路,先创建一个cli脚手架脚手架的uni-app项目,然后再此项目上安装vconsole cli脚手架创建uni-app项目 安装插件 项目Terminal运行命令:npm install vconsole   安装完成之后,插件在node_modules/vconsol

    2024年02月10日
    浏览(44)
  • 手机web前端调试页面的几种方式

    PC端web页面调试比较容易,这里主要说几种移动端调试的方法,从简单到复杂、从模拟调试到远程调试,大概分为几部分: 1、Chrome DevTools(谷歌浏览器)的模拟手机调试 2、weinre(web inspector remote)远程调试工具 3、微信的“web开发者工具”,集成了Chrome DevTools和weinre,做的比较好

    2024年02月09日
    浏览(43)
  • 移动端和PC端对比【组件库+调试vconsole +构建vite/webpack+可视化echarts/antv】

    目录 移动端 antv f2 版本问题 jsx 经典配置 自动配置 vue 使用 bar  radar PC端 antv antv G6 Vue2 scss Echarts Vue3 radar React 原生echarts+TS ListChart(列表切换echarts图表,同类数据为x轴的bar) ListChart.tsx ListChart.css ListChartUtil.tsx Recharts​​​​​​​ D3 体量:Echarts支持 按需引用 灵活度:EC

    2024年02月11日
    浏览(54)
  • 【技术干货】测试必须知道的精准测试

        目前说到测试提效,基本上想到的都是自动化测试。然而,不管是手工测试还是自动化测试,都存在下面的问题,即每一次版本更新时,我们不确定这些更新到底影响范围有多大,无法精准地评估出测试范围,所以不得不执行完整的全回归测试,就算是自动化测试,执

    2023年04月19日
    浏览(81)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包