手机前端开发调试利器 – vConsole

我们在开发手机版网页的时候,常常会出现下面的情景:

(1) 开发时,在自己电脑上运行得好好的,在手机上打开就挂了,但是手机上又看不到error log;

(2) 上线后,某用户表示页面失灵,但我们自己又重现不出来,看不到用户侧的出错信息。

如果说(1)还可以通过电脑连接手机以查看log来解决,那(2)在没有完善的前端上报体系时就非常被动了。

作为开发者,我们的诉求很简单:有没有快捷的方法在手机前端页面看到log日志?

答案是肯定的。

vConsole:一个轻量、可拓展、针对手机网页的前端开发者调试面板。

使用方法

下载 vConsole 的最新版本。(不要直接下载 dev 分支下的 dist/vconsole.min.js)
或者使用 npm 安装:

npm install vconsole

引入 dist/vconsole.min.js 到项目中:


1

2

3

4

5

<script src="path/to/vconsole.min.js"></script>

<script>

console.log(‘Hello world‘);

// 然后点击右下角 vConsole 按钮即可查看到 log

</script>

如果是通过npm安装,采用webpack的项目可以通过在main.js中这样引用:

let VConsole = require(‘vconsole‘);

new VConsole();

然后就可以在移动端通过控制台查看打印了

原文地址:https://www.cnblogs.com/Marinnn/p/9399338.html

时间: 2024-10-01 12:36:52

手机前端开发调试利器 – vConsole的相关文章

移动端前端开发调试

转自:http://yujiangshui.com/multidevice-frontend-debug/ 通过移动端使用 Web 服务的比率越来越大,例如淘宝今年双十一,移动端交易份额就达到 42.6%.由此可见,掌握移动端的前端开发和测试是非常有必要的. 由于之前做过大量有响应式需求的项目:今年(2014)年初也配合 Denis 的 微信机器人 做了一些用于微信的移动端项目:在淘宝 UED 实习的时候,也有参与过一个针对移动端的游戏的部分开发.所以算是积累了一点移动端调试的经验,在这里分享一

转载 移动端前端开发调试

以下内容转载自:http://yujiangshui.com/multidevice-frontend-debug/ 本文更新说明:第一版是在 2014-06-16 编写的,现在来看,内容不够分明,思路不够清晰,方法不够完全.故再次更新.补充.修改,力求可以作为移动端前端开发测试的基本参考文档.后续还会随着技术的进步不断调整和修改. ———————————————————— 通过移动端使用 Web 服务的比率越来越大,例如淘宝今年双十一,移动端交易份额就达到 42.6%.由此可见,掌握移动端的前

前端h5开发调试神奇vconsole

(1)项目中安装vconcole插件 npm install vconcole (2)在vue项目中main.js中引入插件 import Vconsole from 'vconsole'; const vConsole = new Vconsole(); export default vConsole; (3)上传发布页面,手机端会默认开启vconcole模式进行调试.   原文地址:https://www.cnblogs.com/yifeng0394/p/9317814.html

Safari 前端开发调试 iOS 完美解决方案

在日趋现代化的 Web 网络中,各种现代浏览器和移动终端设备的用户百分比越来越高.对于我们 Web 前端开发者来说,运行 iOS Safari 浏览器的苹果移动设备对我们来说更是不容忽视的.然而当我们需要对前端页面进行测试调试时,桌面版 Safari 的表现并不是与移动版 Safari 一模一样的(主要缘起 CSS 中 device-width 的判断),因此我们只能直接在 iOS 设备上对 Safari 进行测试与调试. 本文主要介绍由苹果官方提供的 iOS 设备上 Safari 浏览器的前端

前端开发调试线上代码的两款工具

用过 Charles 和 Fiddler 这两款,记录如下. 一.Charles Charles 界面简单直观,易于上手,数据请求控制容易,修改也简单,抓取数据的开始暂停也方便.支持 win,mac,linux. 1. 安装前提Charles 需要有 Java 环境,请提前下载安装 JDK.JDK 已经 8 了. 根据自己的系统选择对应的JDK.我的是 win7,双击安装,一直下一步就哦了.在命令行窗口输入以下命令,出现截图所示就表示 JDK 安装成功了 2. 下载 Charles Charle

JavaScript之WEB开发调试利器:Firebug

一.概要介绍 Firebug是Firefox的一个插件,Firebug 和 firefox 整合在一起,使你浏览网页时手边有了一套强大的网页开发工具.你可以编辑.调试和监控任何网页上的 CSS.HTML 和 Javascript.而且可以在线的时候修改dom非常弹大的插件. 怎么说呢,强就一个字啦-NND,上面这个图是我开到了 Ispect 状态,鼠标移动时截下来的.这比看源文件然后再搜索可是方便的太多了,这个世界是怎么了,还有这样的雷峰存在,真是太BT了- 而且还可以对AJAX进行Debug,

移动/手机前端开发入门总结

1.首先是meta标签 1 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> 2 <meta content="yes" name="apple-mobile-web-app-capable"> 3 <meta content=&quo

移动端前端开发真机调试攻略

移动端前端开发真机调试攻略 一.IOS 移动端 (Safari开发者工具) 手机端:设置 → Safari → 高级 → Web 检查器 → 开. mac端:Safari → 偏好设置 → 高级 → 在菜单栏中显示“开发”菜单. 在 OS X 中启动 Safari 之后,以 USB 电缆正常接入 iOS 设备,并在此移动设备上启动 Safari.此时点击计算机上的 Safari 菜单中的“开发”,可以看到有 iOS 设备的名称显示,其子菜单项即为移动设备上 Safari 的所有标签页,点击任意一

一探前端开发中的JS调试技巧

前言:调试技巧,在任何一项技术研发中都可谓是必不可少的技能.掌握各种调试技巧,必定能在工作中起到事半功倍的效果.譬如,快速定位问题.降低故障概率.帮助分析逻辑错误等等.而在互联网前端开发越来越重要的今天,如何在前端开发中降低开发成本,提升工作效率,掌握前端开发调试技巧尤为重要. 本文将一一讲解各种前端JS调试技巧,也许你已经熟练掌握,那让我们一起来温习,也许有你没见过的方法,不妨一起来学习,也许你尚不知如何调试,赶紧趁此机会填补空白. 骨灰级调试大师Alert 那还是互联网刚刚起步的时代,网页前