一般调试手机端页面时,基本是在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. kickstart模式实现批量安装centos7.x系统

    1.1 安装系统的方法 l  光盘(ISO文件,光盘的镜像文件)===>>每一台物理机都得给一个光驱,如果用外置光驱的话,是不是每台机器都需要插一下 l  U盘:ISO镜像刻录到U盘==& ...

  2. [py]flask操作cookie&django的seesion和cookie机制

    浏览器同源策略(same-origin policy) csrf攻击防御核心点总结 django的cookie和session操作-7天免登录 flask操作cookie&django的see ...

  3. [js]arguments属性

    类数组 具有length属性的对象称为类数组 观察他的顺序 为什么能转换 for(let i=0;i<arr.length;i++){ console.log(arr[i]); } https: ...

  4. 删除sonarqube仪表盘上无用的工程

    管理员账号登陆,点击进入工程,比如我要删除sonar_source, 1.进入工程 2.配置-->删除

  5. [Java in NetBeans] Lesson 02. Variables, Data Types and Assignment.

    这个课程的参考视频在youtube. 主要学到的知识点有: Data Type: int, char, String, double, boolean. When into printf, int ( ...

  6. H5缩放效果的问题和缓存问题

    https://segmentfault.com/q/1010000000305316 http://blog.csdn.net/hudashi/article/details/50963585 四. ...

  7. node微信公众号开发--设置自定义菜单

    var request = require("request"); const querystring = require("querystring"); re ...

  8. php curl POST multipart/form-data与application/x-www-form-urlencode的区别

    背景 CURL在 a.php 中以 POST方式向 b.php 提交数据,但b.php无法接收到数据,而 CURL 操作显示成功. 原来,"传递一个数组到CURLOPT_POSTFIELDS ...

  9. 记录一则FGA审计“A用户对B用户某张表的更新操作”需求

    环境:Oracle 11.2.0.4 我这里测试A用户为JINGYU,要审计的表为B用户SCOTT下的EMP表.通过FGA来实现. 1.添加审计策略 2.测试审计效果 3.控制审计策略 1.添加审计策 ...

  10. HTML+css+html5基础+css3须知

    1.定位四种 静态定位(static):文档流默认的定位方式:一般不用写.      如果没有指定元素的position属性值,元素也就是静态定位.static是position属性的默认值,它表示块 ...