一般调试手机端页面时,基本是在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. element ui table 导出excel表格

    https://blog.csdn.net/u010427666/article/details/79208145 vue2.0 + element UI 中 el-table 数据导出Excel1. ...

  2. (转)Fabric 1.0 读写集

    本文译自Fabric 1.0 文档,这篇文档详述了当前读写集语义实现的细节.文档地址为: https://hyperledger-fabric.readthedocs.io/en/latest/rea ...

  3. 如何使用向量代表文档doc或者句子sentence

    1.“句向量”简介word2vec提供了高质量的词向量,并在一些任务中表现良好. 关于word2vec的原理可以参考这几篇论文: https://arxiv.org/pdf/1310.4546.pdf ...

  4. 【Redis】主从同步

    Redis提供了主从复制功能,主要是为了保证服务的高可用性.在redis.conf配置文件中通过设置,可以开启主从复制功能.或者在客户端中使用slaveof 命令开启该功能. slaveof < ...

  5. Elasticsearch5.x创建索引(Java)

    索引创建代码使用官方给的示例代码,我把它在java项目里实现了一遍. 官方示例 1.创建索引 /** * Java创建Index */ public void CreateIndex() { int ...

  6. 移动开发--移动web特别样式处理

    高清图片:100px*200px的图片 设置100px*100px的大小,会被拉大,变模糊,应该用100dp*100dp(物理像素)去渲染. 一像素边框: 相对单位rem: 多行文本溢出.

  7. Mac下android studio卡,居然这么解决了。。。。

    一直修改build.app直接卡死.... 最后把网线拨了,居然不卡了.. 直接设置代理为127.0.0.1直接不卡了,无语了...

  8. Hibernate框架第二天

    ### Hibernate的持久化类 ### ---------- **什么是持久化类** 1. 持久化类:就是一个Java类(咱们编写的JavaBean),这个Java类与表建立了映射关系就可以成为 ...

  9. InstallShield 读注册表函数 RegDBGetKeyValueEx ()执行失败

    注: rtn = RegDBGetKeyValueEx(szKey, szNumName, nvType, svNumValue, nvSize); 调用失败如果这个函数的几个参数没有初始化的值,调用 ...

  10. html5-css的使用强制优先级

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...