移动端调试利器-vConsole
2024-08-28 19:08:48
现在移动端开发越来越火,随之而来的问题也越来越多,今天给大家介绍一款移动端调试神器,vconsole。
一、先引用文件,可以从https://www.bootcdn.cn/vConsole/下载,也可以下载保存在本地,直接引用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>demo.html</title>
<script src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>
</head>
<body>
<script type="text/javascript">
let vConsole = new VConsole();
</script>
</body>
</html>
浏览器显示如下:
基本的一些用法,大家可以上网查找,我着重写一下我在配置时候的一些小问题
首先我们是一个成熟的项目,而且我想在整个页面里面都引用整个方法,显然每个页面直接引用再实例化不怎么合适,而且工作量有点大,下面是我遇到的一些小坑以及小技巧
- 我们需要动态添加一个script标签,可以选择原生添加,或者jQuery添加
- 原生添加
function loadJs(url,callback){
var script1=document.createElement('script');
script1.type="text/javascript";
if(typeof(callback)!="undefined"){
if(script1.readyState){
script1.onreadystatechange=function(){
if(script1.readyState == "loaded" || script1.readyState == "complete"){
script1.onreadystatechange=null;
callback();
}
}
}else{
script1.onload=function(){
callback();
}
}
}
script1.src=url;
document.body.appendChild(script1);
}
loadJs("vconsole.min.js",function(){
let vConsole = new VConsole();
});
页面里面直接引用js文件,谷歌报错如下
这是因为js引用位置错误引起的,需要把js文件放置在body里面,不然会加载不到,调换位置,错误完美解决。
- jQuery引入,代码如下,先引用jQuery
$.getScript('../vconsole.min.js',function(){
var vConsole = new VConsole();
});
谷歌报错如下
这是同源策略的限制,需要我们本地启动一个服务,来运行这个index文件,
使用http-server或者xampp都可以,根据个人喜好,这个问题也迎刃而解。
2. 我们的项目是H5项目,使用的库是zepto,直接引用会报错,说这个$.script这个方法不存在,这样需要我们先往zepto这个库里添加一个$.script方法才可以向上面那样使用,添加方法如下:
;
(function() {
/**
* 动态加载js文件
* @param {string} url js文件的url地址
* @param {Function} callback 加载完成后的回调函数
*/
var _getScript = function(url, callback) {
var head = document.getElementsByTagName('head')[0],
js = document.createElement('script'); js.setAttribute('type', 'text/javascript');
js.setAttribute('src', url); head.appendChild(js); //执行回调
var callbackFn = function(){
if(typeof callback === 'function'){
callback();
}
}; if (document.all) { //IE
js.onreadystatechange = function() {
if (js.readyState == 'loaded' || js.readyState == 'complete') {
callbackFn();
}
}
} else {
js.onload = function() {
callbackFn();
}
}
} //如果使用的是zepto,就添加扩展函数
if(Zepto){
$.getScript = _getScript;
} })();
按您所需,使用原生或者$.script这个方法都可以引用成功了。
感谢您的阅读,欢迎留言评论,大家一起探讨。
最新文章
- [Asp.net 5] ApplicationBuilder详解
- java 调用 sql server存储过程
- linux下查看系统信息
- :nth-child
- ASP.NET使用Razor语法无法正确识别.cshtml文件
- Jdeveloper 太慢 slowly
- QRadioButton分组且无边框的简单实现
- 轻量级应用开发之(04)UIScrollView-1
- javascript单例模式的理解
- postgresql 关闭自动提交
- speex的基本编码和解码流程
- java类集框架(ArrayList,LinkedList,Vector区别)
- 一步操作关闭iOS状态栏(电池栏)
- [转帖]十二 个经典 Linux 进程管理命令介绍
- Redis学习笔记之Redis基本数据结构
- Linux 查看IP
- 可快速生成增删curd改查功能的插件
- vue组件通信之任意级组件之间的通信
- 生成器 yield
- PHP中header的用法总结
热门文章
- >; Task :app:transformDexArchiveWithExternalLibsDexMergerForDebug FAILED
- springboot 简单使用shiro登录
- Webpack+Vue构建项目
- P1067 多项式输出(模拟水题)
- notepad++的tab设置为4个空格
- POJ 1061青蛙的约会。求解(x+mT)%L=(y+nT)%L的最小步数T。
- Jmeter-性能测试工具
- 在项目中导入import javax.servlet 出错解决办法
- 初学struts2-入门案列
- linux解压与参数介绍