一般调试手机端页面时,基本是在PC端使用手机模式进行断点或console调试、或查看有用的控制台信息的,但依旧有部分功能无法在PC端调试,经常需要使用alert进行断点,然后在手机端看效果,但是这样并不好。

所以如果说有一种插件,可以在手机端查看控制台相关日志,那可比alert强多了。

最近找到了一款,还挺好用的。

插件名:vconsole

比如我们要调试一个移动端页面

我们在页面中注入一段代码:引入vconsole,并创建一个控制台对象。

<!--//www.wuhairui.cn/build/vconsole.min.js-->
<script type="text/javascript" src="//wap.cmread.com/rbc/t/content/repository/ues/js/s109/vconsole.js"></script>
<script type="text/javascript">
var vConsole=new VConsole();
</script>

(请最好放在head标签内)

下面我们打开页面就能看到一个控制悬浮框:

点击该悬浮框可打开该页面的控制台

可以看到console日志、页面信息、请求列表、页面dom、页面缓存等信息。基本构成控制台信息了。

更多功能请自行研究。

【web前端】移动端控制台插件,手机端页面查看相关页面控制台信息的更多相关文章

  1. PHP判断客户端是PC web端还是移动手机端方法

    PHP判断客户端是PC web端还是移动手机端方法需要实现:判断手机版的内容加上!c550x260.jpg后缀变成缩略图PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 ...

  2. JS前端开发判断是否是手机端并跳转操作(小结)

    JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...

  3. web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址

    web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址   Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=rs ...

  4. Chrome谷歌浏览器web前端开发好用插件(自己用)备忘

    Chrome谷歌浏览器web前端开发好用插件(自己用)备忘 一.总结 英语好一点的话要什么工具就直接去Chrome插件里面找非常方便. 二.测试题-简答题 1.Chrome修改页面字符集是什么? 解答 ...

  5. web前端--移动端适配总结

    转自:https://segmentfault.com/a/1190000011586301 作者:Devinnn meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码: < ...

  6. EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问

    很多时候,前端开发的页面,不仅要在PC端测试效果, 还要在手机端测试效果. 在开发阶段, 我们以 webpack-dev-server 来启动浏览器, 打开正在开发的页面. webpack-dev-s ...

  7. web前端 —— 移动端知识的一些总结

    个人在移动端的一些总结归纳,有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=de ...

  8. DT6.0二次最后一次开发插件-手机端熊掌号定时提交

    今天写完这个,就是DT6.0最后开放的插件,因为群里的朋友需要,就写了一个适合DT6的手机端定时插件.不过个人还是喜欢7.0的版本,7.0的插件在上几期分享了,今天就不过多说了! 我这个是初成品,改善 ...

  9. web前端-移动端响应式与自适应

    一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下: <meta name="v ...

随机推荐

  1. Spring MVC 简介及入门小例子

    说明:文章内容全部截选自实验楼教程[Spring MVC 简易教程] 一.什么是 Spring MVC Spring MVC 属于 SpringFrameWork 的后续产品,已经融合在 Spring ...

  2. node-rsa 非对称加密和解密

    使用公钥和私钥的加密和解密: 非对称加密的关键在于 有 公钥 / 私钥用法:a.生成一对公钥私钥b.公钥加密 -> 对应私钥解密c.私钥加密 -> 对应公钥解密 非对称加密的常见应用方式a ...

  3. 工作流引擎--swamp

    什么是工作流引擎(Workflow Engine )   例如开发一个系统最关键的部分不是系统的界面,也不是和数据库之间的信息交换,而是如何根据业务逻辑开发出符合实际需要的程序逻辑并确保其稳定性.易维 ...

  4. android SDK打包app

    SDK  软件开发工具包(Software Development Kit) JDK  开发工具包(Java Developer's Kit) 1.搜索java jdk 进入官网 http://www ...

  5. vector erase的错误用法

    直接写 a.erase(it)是错误的,一定要写成it=a.erase(it)这个错误编译器不会报错.而且循环遍历删除的时候,删除了一个元素,容器里会自动向前移动,删除一个元素要紧接着it--来保持位 ...

  6. 10.C# 构造函数

    1.构造函数 构造函数是用来初始化对象的,只能由new运算符调用.构造函数与类同名,没有返回值,不能用void修饰,可以有public和private两种修饰符,当用private修饰时外界不能访问到 ...

  7. (已解决)Xcode 运行cocos2dx弹出内部错误对话框(Internal Error)

    cocos2dx未捕获的异常升高.选择“继续”继续运行在一个不一致的状态.选择“崩溃”停止应用和崩溃报告一个错误文件. 莫名其妙,代码没有报错,运行时却弹出(内部错误)对话框出来: 再看看崩溃的底层代 ...

  8. 网络编程之Socket异步编程

    看了上篇socket入门,相信你已经对socket有一定的了解了http://www.cnblogs.com/nsky/p/4501782.html 现在来回顾一下.上篇在循环接收客户端连接和循环接收 ...

  9. Spring.之.jar包官网下载

    jar包官网下载 1. 官网下载网址:http://repo.spring.io/libs-release 2. 用到的jar包所在路径:org/springframework/spring/ ,在此 ...

  10. C#项目中关于多个程序集下App.config文件的问题

    在项目中我们会经常用到App.config文件,有的是自动生成的,比如引用webservice.wcf服务时生成:也有手动建立的配置文件直接默认名就为app.config.这些配置有的保存当前程序集用 ...