ReactNative 进阶(四十七):移动端调试利器 vConsole
一、前言
痛点:移动 web
开发时,在手机上,如果是要看控制台信息,都需要alert
弹窗,这样很不友好,而且还会阻拦进程。
前端工程开发、调优过程中,调试方法、方式是重中之重,最便捷的方式当属拥有一款调试利器,应用它,你可以轻松获取调试结果。在前期Vue
技术栈开发PC Web端
过程中,我们讲解过debugger
和Vue-devtools
,现简要回顾下。
debugger
是谷歌浏览器提供的调试语句,其主要是通过停止JS
的执行进行断点设置。它的使用方法很简单, 只需要在JS
语句中, 插入一行debugger;
即可,其支持通用的单步、步进、步出等常规调试操作。应用debugger
调试Vue
项目,在项目需要的位置写入debugger
,项目运行后,打开浏览器按F12
,在chrome sources
页签中就会直接进入断点,至此可以进行单步、跳步调试。Vue-devtools调试工具是为针对
Chrome
浏览器而设计的开源调试工具。具体使用方式详参博文《Vue进阶(幺陆柒):Vue项目调试技能》。
二、vConsole 简介
vConsole
是由微信公众平台前端团队研发的网页移动端调试面板,专为移动 web
页面量身设计,可用于展示 console
日志,方便开发、调试,帮助开发者更为便捷地进行开发调试工作。
特性
查看
console
日志;查看网络请求;
查看页面
DOM
结构;查看
Cookies
、localStorage
和SessionStorage
;手动执行
JS
命令行;自定义插件;
三、使用方法
3.1 引用 JS 文件方式
下载模块checkout 文件
dist/vconsole.min.js
到本地。引入模块(1) 如果未使用
AMD/CMD
规范,可直接在HTML
中引入vConsole
模块:
(2) 如果使用了 AMD/CMD
规范,可在 module
内使用 require()
引入模块:
打印 log 日志
(1) 与 PC
端打印 log
一致,可直接使用 console.log()
等方法直接打印日志:
未加载 vConsole
模块时,console.log()
会直接打印到原生控制台中;加载 vConsole
后,日志会打印到页面前端+原生控制台
。
(2) 支持 4 种不同类型的日志,会以不同的颜色输出到前端面板:
(3) 支持打印 Object
对象,会以 JSON
字符串格式输出:
(4) 支持传入多个参数,以空格隔开:
(5) 引入模块后,vConsole
会有一段很小的延迟来用于初始化工作。此时若需打印日志,请使用 vConsole.ready()
方法:
3.2 npm 依赖包方式
执行命令 npm i vconsole
。
然后在文件中加入代码,就可以打印日志了
3.3 第三方插件
vconsole
第三方插件支持列表如下:
以下主要讲解vconsole webpack
插件 vconsole-webpack-plugin
。
npm install vconsole-webpack-plugin --save-dev
修改
webpack.base.conf.js
配置文件。
vConsole
作为一个调试模块,注定了需要在发布前把它去掉,为了避免人为操作失误而影响线上功能,配置信息如下:
启动脚本的时候增加 --debug
即可。
修改
package.json
配置文件,dev
部分指令如下:
四、注意事项
引入 vConsole
模块后,页面前端将会在右下角出现 vConsole
的悬停按钮,可展开/收起面板。
若不希望普通用户看到面板,请不要在生产环境中引入 vConsole
模块!
五、vConsole 遮挡问题解决
有时候会因为页面布局原因,导致vConsole
调试按钮被挤出可视区域,此时可以通过设置vConsole
样式解决该问题,通过 F12 查看元素可知,vConsole
应用的样式类为.vc-switch
,可以设置为
通过以上样式设置,就可以解决遮挡问题。
六、拓展阅读
版权声明: 本文为 InfoQ 作者【No Silver Bullet】的原创文章。
原文链接:【http://xie.infoq.cn/article/14dc716483374c4c6b1d018b9】。文章转载请联系作者。
评论