痛点:移动 web开发时,在手机上,如果是要看控制台信息,都需要alert
弹窗,这样很不友好,而且还会阻拦进程。
前端工程开发、调优过程中,调试方法、方式是重中之重,最便捷的方式当属拥有一款调试利器,应用它,你可以轻松获取你想要的调试结果。在前期Vue
技术栈开发PC Web端
过程中,我们讲解过debugger
和Vue-devtools
,现简要回顾下。
debugger
是谷歌浏览器提供的调试语句,其主要是通过停止JS
的执行进行断点设置。它的使用方法很简单, 只需要在JS
语句中, 插入一行debugger;
即可,其支持通用的单步、步进、步出等常规调试操作。应用debugger
调试Vue
项目,在项目需要的位置写入debugger
,项目运行后,打开浏览器按F12
,在chrome sources
页签中就会直接进入断点,至此可以进行单步、跳步调试。Chrome
浏览器而设计的开源调试工具。具体使用方式详参博文《Vue进阶(幺陆柒):Vue项目调试技能》。vConsole
是由微信公众平台前端团队研发的网页移动端调试面板,专为移动 web
页面量身设计,可用于展示 console
日志,方便开发、调试,帮助开发者更为便捷地进行开发调试工作。
特性
console
日志;DOM
结构;Cookies
、localStorage
和 SessionStorage
;JS
命令行;dist/vconsole.min.js
到本地。AMD/CMD
规范,可直接在 HTML
中引入 vConsole
模块:<script src="path/to/vconsole.min.js"></script>
(2) 如果使用了 AMD/CMD
规范,可在 module
内使用 require()
引入模块:
var vConsole = require('path/to/vconsole.min.js');
(1) 与 PC
端打印 log
一致,可直接使用 console.log()
等方法直接打印日志:
console.log('Hello World');
未加载 vConsole
模块时,console.log()
会直接打印到原生控制台中;加载 vConsole
后,日志会打印到页面前端+原生控制台
。
(2) 支持 4 种不同类型的日志,会以不同的颜色输出到前端面板:
> - console.log('foo'); // 白底黑字
> - console.info('bar'); // 白底紫字
> - console.debug('oh'); // 白底黄字
> - console.warn('foo'); // 黄底黄字
> - console.error('bar'); // 红底红字
(3) 支持打印 Object
对象,会以 JSON
字符串格式输出:
var obj = {};
obj.foo = 'bar';
console.log(obj); // 打印出 {foo: 'bar'}
(4) 支持传入多个参数,以空格隔开:
var uid = 233;
console.log('UserID:', uid); // 打印出 UserID: 233
(5) 引入模块后,vConsole
会有一段很小的延迟来用于初始化工作。此时若需打印日志,请使用 vConsole.ready()
方法:
// 若未通过 AMD/CMD 方式加载模块,
// vConsole 会自动挂载在全局 window 对象中,即 window.vConsole
vConsole.ready(function() {
console.log('Hello World');
});
执行命令 npm i vconsole
。
然后在文件中加入代码,就可以打印日志了
import VConsole from 'vconsole';
let vConsole = new VConsole();
console.log("test");
vconsole
第三方插件支持列表如下:
以下主要讲解vconsole webpack
插件 vconsole-webpack-plugin
。
npm install vconsole-webpack-plugin --save-dev
webpack.base.conf.js
配置文件vConsole
作为一个调试模块,注定了需要在发布前把它去掉,为了避免人为操作失误而影响线上功能,配置信息如下:
// 引入插件
const vConsolePlugin = require('vconsole-webpack-plugin');
// 接收命令运行参数
const argv = require('yargs')
.describe('debug', 'debug 环境') // use 'webpack --debug'
.argv;
module.exports = {
...
plugins: [
new vConsolePlugin({
filter: [], // 需要过滤的入口文件
enable: !!argv.debug
})
],
...
}
启动脚本的时候增加 --debug
即可。
package.json
配置文件,dev
部分指令如下:"dev": "webpack-dev-server --debug --inline --progress --config build/webpack.dev.conf.js",
引入 vConsole
模块后,页面前端将会在右下角出现 vConsole
的悬停按钮,可展开/收起面板。
若不希望普通用户看到面板,请不要在生产环境中引入 vConsole
模块!
有时候会因为页面布局原因,导致vConsole
调试按钮被挤出可视区域,此时可以通过设置vConsole
样式解决该问题,通过F12查看元素可知,vConsole
应用的样式类为.vc-switch
,可以设置为
.vc-switch {
right : 100px;
}
通过以上样式设置,就可以解决遮挡问题。
版权说明 : 本文为转载文章, 版权归原作者所有 版权申明
原文链接 : https://blog.csdn.net/sunhuaqiang1/article/details/119299287
内容来源于网络,如有侵权,请联系作者删除!