一般调试手机端页面时,基本是在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. [vue]基础篇stepbystep案例实践(废弃)

    去看这个就好了 总结: 1.子组件可以触发父组件的方法,this.$emit() //(通知父组件干活) 2.父组件可以调用子组件的方法() // ref 如果放在组件上 获取的是组件的实例 并不是组 ...

  2. 【LeetCode每天一题】Group Anagrams(变位词组)

    Given an array of strings, group anagrams together. Example: Input: ["eat", "tea" ...

  3. Solutions_issues in pip

    pip fails ssl verification Solution: $ python -m pip <command> --trusted-host files.pythonhost ...

  4. c# 判断文件是否发生了变化

    你这个是想文件发生改变时,自动调用一个函数,做出一些操作呢. 还是有一个按钮(或者别的什么),你去点击一下,然后检测下一个文件,是否发生了变化? 下面的代码,监控d盘下的所有.txt文件的修改 1 2 ...

  5. 从零开始一起学习SLAM | 不推公式,如何真正理解对极约束?

    自从小白向师兄学习了李群李代数和相机成像模型的基本原理后,感觉书上的内容没那么难了,公式推导也能推得动了,感觉进步神速,不过最近小白在学习对极几何,貌似又遇到了麻烦... 小白:师兄,对极几何这块你觉 ...

  6. list异常

    可能定义的时候没有初始化把 private List<Msg> msgList = new ArrayList<>(); 为啥我android老是忘了new ArrayList

  7. hbase-java-api001

    package api; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfig ...

  8. hbase shell operate

    , start hdfs [hadoop@alamps sbin]$ ./start-all.sh This script is Deprecated. Instead use start-dfs.s ...

  9. java中JDBC连接Oracle数据库

    package com.xxxx.lunwen.test;import java.sql.*;public class DBUtil { static { try { // 加载Oracle驱动程序 ...

  10. 向量体系结构(2)----SIMD指令集扩展和GPU

    进行SIMD多媒体扩展的设计,源于一个很容易观察到的事实: 许多多媒体应用程序操作的数据类型比对32位处理器进行针对性优化的数据类型更窄一些. 图像三基色,都是8位.音频采样也都是8位和16位来表示. ...