【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 ...
随机推荐
- create genil component
https://help.sap.com/viewer/79ef8b1636dd492d8fd430d2d309b90f/MDG92_SP01/en-US/16a5115454744a18e10000 ...
- [django]http请求
请求参数 http基本认证 https://zxc0328.github.io/2015/11/04/http-basic-auth/ 我们看到在http请求的header里有一个Authorizat ...
- DAX/PowerBI系列 - 参数表(Parameter Table) - 大客户分析(Top N)
DAX/PowerBI系列 - 参数表(Parameter Table) - 大客户分析(Top N) 难度: ★☆☆☆☆(1星) 适用范围: ★★★☆☆(3星) 概况:此文为DAX/PowerBI系 ...
- openshift 容器云从入门到崩溃之三《安装openshift》
准备好环境,在安装之前请先了解openshift提供的ansible有大量的安装选项 文档地址:https://docs.okd.io/latest/install/configuring_inven ...
- ts转化为js
1.安装步骤:npm/cnpm install -g typescript 2.tsc -v (查看版本是否安装成功) 3.demo文件下detail步骤操作 i:新建一个demo.html 页面[引 ...
- Jmeter-----邮件观察仪
设置邮件观察仪的目的,将测试结果通过邮件的方式发送给相关的人员,可及时获取到当前测试结果情况. 说明: 本人公司使用的为腾讯企业邮箱,因此下面的介绍方式将以腾讯企业邮箱为准来进行描述 必要的设置: 邮 ...
- cocos2dx JS 游戏切到后台再进入游戏的处理
由于Cocos引擎中,游戏切入后台后定时器后停掉会让某个Animation动作停止. 导致当重新进入游戏时,看到的不是你想要的画面.或者定时器倒计时的时间对不上等问题. cc.game.EVENT_H ...
- JS怎么控制input框的背景颜色
$("input").css("background-color","red"); 参考:https://zhidao.baidu.com/ ...
- python 定义类 简单使用
在test.py文件里面 #coding=utf-8 #类的定义 class user: #定义私有属性 __name = '' __age = 0 #定义基本属性 sex = '' #定义构造函数 ...
- IE8 CSS hack
IE8正式版出来有一段日子了,但是针对ie8正式版的CSS hack却很少,其实这是值得庆幸的,因为ie8修复了很多IE6和IE7的一些BUG,更加接近W3C标准. 针对IE8正式版的CSS hack ...