【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 ...
随机推荐
- Cartographer源码阅读(3):程序逻辑结构
Cartographer早期的代码在进行3d制图的时候使用了UKF方法,查看现有的tag版本,可以转到0.1.0和0.2.0查看,包含kalman_filter文件夹. 文件夹中的pose_track ...
- 关于时间的SQL语句
取当前时间: select current_timestamp; 输出:2016-06-16 16:12:52 select now(); 输出:2016-06-16 16:12:52 取当前时间的 ...
- CentOS系统 cd命令的使用
直接输入 cd 命令 ,它将切换到你的 home 目录下,不管你当前所在的目录是什么: [ec2-user@ip-*** /]$ cd [ec2-user@ip-*** ~]$ cd /var/www ...
- TensorFlow读取CSV数据
代码来源于官方文档,做了一些小小的调整: # -*- coding:utf-8 -*- import tensorflow as tf filename_queue = tf.train.string ...
- (转载)cmd-命令大全及详解
原文地址:http://greatverve.cnblogs.com/archive/2011/12/09/windows-cmd.html 命令简介 cmd是command的缩写.即命令行 . 虽然 ...
- Linux-nmon系统性能监控工具的使用及报表产出
在进行性能测试的时候,需要获取服务器的各项指标,例如 CPU.MEM.I/O.DISK 等.网上有很多的监控工具,nmon 就是其中的一个,其可与 JMeter结合使用,测试系统的性能.其概要的介绍, ...
- 使用Eclipse出现make: *** No rule to make target `all'. Stop.解决办法
在mac下用eclipse开发jni 总是出现如题所示的异常,后来将build command 改成ndk-build就可以了 具体如图所示 输出内容 **** Build of configura ...
- OEMCC13.2 添加监控目标
1.需求描述 2.添加数据库目标 2.1 部署AGENT 2.1.1 直接安装方式 2.1.2 离线安装方式 2.1.3 命令行安装方式 2.2 添加集群资源 2.3 添加数据库 3.添加 ...
- InstallShield2015制作安装包----------安装过程中修改文件内容
//修改安装目录下autostart.vbs里的路径 //打开文件 OpenFileMode(FILE_MODE_NORMAL); strPath=INSTALLDIR+"centerAut ...
- flask orm
#查询 #查第一行 session.query(User.id,User.userName,User.password).first() #查所有行 sessi ...