【web前端】移动端控制台插件,手机端页面查看相关页面控制台信息
一般调试手机端页面时,基本是在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前端】移动端控制台插件,手机端页面查看相关页面控制台信息的更多相关文章
- PHP判断客户端是PC web端还是移动手机端方法
PHP判断客户端是PC web端还是移动手机端方法需要实现:判断手机版的内容加上!c550x260.jpg后缀变成缩略图PHP用正则批量替换Img中src内容,用正则表达式获取图片路径实现缩略图功能 ...
- JS前端开发判断是否是手机端并跳转操作(小结)
JS前端开发判断是否是手机端并跳转操作(小结) 这篇文章主要介绍了JS前端开发判断是否是手机端并跳转操作,非常不错,具有参考借鉴价值,需要的朋友可以参考下 常用跳转代码 ? 1 2 3 4 5 6 7 ...
- web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址
web前端/移动端H5博客专家博客大全--值得收藏的前端技术大牛博客地址 Huang Jie Blog .Com-前端开发 http://www.huangjieblog.com/?feed=rs ...
- Chrome谷歌浏览器web前端开发好用插件(自己用)备忘
Chrome谷歌浏览器web前端开发好用插件(自己用)备忘 一.总结 英语好一点的话要什么工具就直接去Chrome插件里面找非常方便. 二.测试题-简答题 1.Chrome修改页面字符集是什么? 解答 ...
- web前端--移动端适配总结
转自:https://segmentfault.com/a/1190000011586301 作者:Devinnn meta标签到底做了什么事情 做过移动端适配的小伙伴一定有遇到过这行代码: < ...
- EasyDSS高性能流媒体服务器前端重构(六)- webpack-dev-server 支持手机端访问
很多时候,前端开发的页面,不仅要在PC端测试效果, 还要在手机端测试效果. 在开发阶段, 我们以 webpack-dev-server 来启动浏览器, 打开正在开发的页面. webpack-dev-s ...
- web前端 —— 移动端知识的一些总结
个人在移动端的一些总结归纳,有新的知识点会一直更新 一.css部分 1.meta标签 <meta name="viewport" content="width=de ...
- DT6.0二次最后一次开发插件-手机端熊掌号定时提交
今天写完这个,就是DT6.0最后开放的插件,因为群里的朋友需要,就写了一个适合DT6的手机端定时插件.不过个人还是喜欢7.0的版本,7.0的插件在上几期分享了,今天就不过多说了! 我这个是初成品,改善 ...
- web前端-移动端响应式与自适应
一. 在HTML的头部加入meta标签 在HTML的头部,也就是head标签中增加meta标签,告诉浏览器网页宽度等于设备屏幕宽度,且不进行缩放,代码如下: <meta name="v ...
随机推荐
- tf之get_Variable()
转自:https://blog.csdn.net/UESTC_C2_403/article/details/72327321 1. tf.get_variable(name, shape, init ...
- 2018-2019-1 20189221《Linux内核原理与分析》第一周作业
Linux内核原理与分析 - 第一周作业 实验1 Linux系统简介 Linux历史 1991 年 10 月,Linus Torvalds想在自己的电脑上运行UNIX,可是 UNIX 的商业版本非常昂 ...
- PHP Fatal error: Uncaught ErrorException: preg_match_all (): JIT compilation failed: no more memory in phar
PHP 升级到 7.3 后,出现 BUG: 解决办法:修改php.ini文件,;pcre.jit=1 => pcre.jit=0
- 《Java程序设计》第一周学习记录(2)
目录 使用JDB调试程序 系统文件被覆盖的挽救 参考资料 使用JDB调试程序 JDB是JDK自带的基于命令行的调试程序.我们先来man一下吧(说到这里,我之前在翻娄老师的博客的时候看到一篇文章:做中学 ...
- Amber中的一些option设置及名词
详细请见AMBER官方文档第18章第6节(18.6) Amber16.pdf The settings can be summarized as follows: imin=1 Choose a m ...
- ROSETTA使用技巧随笔--PyMOL实时观测ROSETTA模拟过程中的结构变化
没有梦想的人,就是一只咸鱼,像我,就有一个梦想,就是让蛋白模拟过程变成动画,动起来! 虽然MD中有很多方法可以方模拟过程像动画一样播放出来,但是我一直想在ROSETTA中也找一个这样的功能,这不,我发 ...
- xml文档对象模型doc
对与DOM来说 ,一切都是节点Node; ②Document可以看成一个节点,Element可以看成一个节点,Text可以看成一个节点, 封装出来的对象都可以看成节点Node; ③在JDK中,Node ...
- json_encode转义中文问题
默认情况下php的 json_decode 方法会把特殊字符进行转义,还会把中文转为Unicode编码形式. 这使得数据库查看文本变得很麻烦.所以我们需要限制对于中文的转义. 对于PHP5.4+版本, ...
- 删除SQL Server大容量日志的方法(转)
删除SQL Server大容量日志的方法 亲自实践的方法 1.分享数据库,如果提示被其他连接占用,不能分离,刚勾上drop connections 2.复制下所有文件,一定要备份好,以防自己操作失误 ...
- 提示“此Flash Player与您的地区不相容,请重新安装Flash”的解决办法
问题原因: 因为Flash相对于HTML5,有着运算效率低.资源占用大.安全性不高等缺点,随着HTML5越来越普及,Adobe已宣布2020年正式停止支持Flash这项技术. 但Adobe公司为了利益 ...