首页 > 其他分享 >手机端调试前端

手机端调试前端

时间:2024-05-28 10:32:50浏览次数:16  
标签:npm console VConsole 前端 vConsole vconsole 手机 调试

新手小白最近弄了个手机端的APP,但是发现前端调试太麻烦了,之前网上找了fidder方案的,但是操作步骤太多太麻烦了,后来发现了一个轻量的针对手机网页的前端开发者调试面板

vConsole

操作也非常简单。

将 vConsole 添加到项目中主要有以下方式:

方法一:使用 npm(推荐)

$ npm install vconsole

Import 并初始化后,即可使用 console.log 功能,如 Chrome devtools 上一样。

import VConsole from 'vconsole';

const vConsole = new VConsole();
// 或者使用配置参数来初始化,详情见文档
const vConsole = new VConsole({ theme: 'dark' });

// 接下来即可照常使用 `console` 等方法
console.log('Hello world');

// 结束调试后,可移除掉
vConsole.destroy();

方法二:使用 CDN 直接插入到 HTML

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
<script>
  // VConsole 默认会挂载到 `window.VConsole` 上
  var vConsole = new window.VConsole();
</script>

可用的 CDN:

https://unpkg.com/vconsole@latest/dist/vconsole.min.js
https://cdn.jsdelivr.net/npm/vconsole@latest/dist/vconsole.min.js

标签:npm,console,VConsole,前端,vConsole,vconsole,手机,调试
From: https://www.cnblogs.com/flyingpig666/p/18217352

相关文章

  • 【讲解下Web前端三大主流的框架】
    ......
  • QShop商城-快速开始-前端
    QShop商城-快速开始-前端工具准备NodeJs前端环境为NodeJs,下载地址:http://nodejs.cn/download/current/。默认会用版本为Node16,如找不到我已分享:https://pan.baidu.com/s/1yM2TysvkH0pD7NdAAeXcag提取码:y9c5visualstudiocode下载最新版的vscode,用来作为前端的......
  • 前端程序员快速学会 Redis
    由于在学习Docker的过程中,使用到了Redis,但是不会,就快速补课一下Redis,以能会基础使用就够了,不求甚解。由于这篇会使用到上一篇文章Docker入门(一),没看的可以看看:前端程序员如何学习Docker(一)-掘金(juejin.cn),下面开始Redis入门:什么是Redis?官方说:"Redisisanin......
  • 华为(荣耀)手机有线快充协议详解
    摘自:https://zhuanlan.zhihu.com/p/555816323?utm_id=0本帖为华为/荣耀手机充电博物馆专栏的第1篇内容,其他内容可以点击以下链接进行跳转:molekshine:华为/荣耀手机充电博物馆(持续更新中)39赞同·4评论文章 众所周知,华为和荣耀在分家之前是同根同源。因此他们使用的快充技术......
  • 解决前端性能瓶颈:高效处理大量数据渲染与复杂交互的策略与优化方法
    ✨✨祝屏幕前的小伙伴们每天都有好运相伴左右,一定要天天开心!✨✨ ......
  • Web系列-前端游戏
    Web系列-前端游戏在CTF比赛web题目中,出题人为了添加趣味性,常有将web小游戏作为题目的,本篇博客会将自己遇到的web前端游戏题目记录在这里。[NewStarCTF2023公开赛道]游戏高手是一个飞机大战的游戏题目说100000分就给flag,F12看看游戏游戏代码在app_v2.js中找到关键代码//......
  • 无界(wujie)微前端子应用elementUI时,dialog中使用Select、TimePicker等组件,弹出框位置
    无界(wujie)微前端子应用elementUI时,dialog中使用Select、TimePicker等组件,弹出框位置可能会异常,如图:解决方法参考:public/index.html文件1、body中加style="position:relative"2、script中加if(window.__POWERED_BY_WUJIE__){Document.documentElement.classList.add(“i......
  • (读后分享)移动Web前端高效开发实战:HTML 5 + CSS 3 + JavaScript + Webpack + React Nat
    链接:pan.baidu.com/s/1tIHXj9HmIYojAHqje09DTA?pwd=jqso提取码:jqsoHTML5新特性与应用:介绍HTML5的新特性,包括语义化标签、本地存储、设备兼容、连接特性等,并讲解如何在移动Web前端开发中充分利用这些特性提升用户体验。CSS3样式与动画设计:详细讲解CSS3的样式设计和动画效果,包......
  • springmvc 前端向后端发送http请求报错“HTTP状态 405 - 方法不允许”
    如图我使用前端向后端发送文件时报错,405方法不允许,于是我就检查了前后端的method方法设置是否一致?  检查后发现明明前后端请求方式一致,都是post遵循文件上传的方式。这个问题令我十分苦恼,最后发现原来是前端提交form表单时设置的选项之间存在逗号,原则是每一项之间都不应......
  • 基于ssm+jsp家政服务网站系统,家政管理系统,附源码+数据库+论文+PPT,包安装调试
    1、项目介绍随着社会的发展,社会的各行各业都在利用信息化时代的优势。计算机的优势和普及使得各种信息系统的开发成为必需。家政服务网站,主要的模块包括查看管理员;个人中心、用户管理、服务类型管理、家政类型管理、家政评价管理、家政资讯管理、家政服务管理、家政预约管理......