使用vconsole进行手机端调试

最新推荐文章于 2024-05-15 10:54:59 发布

佛佛ง

最新推荐文章于 2024-05-15 10:54:59 发布

阅读量725

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/LzzMandy/article/details/130710517

版权

1、在线调试，需要引入vconsole.min.js

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>手机端调试</title>
     <!-- 手机端调试 -->
     <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js"></script>
     <script>
       var vConsole = new VConsole();// init vConsole
       console.log('Hello world');
     </script>
  </head>
  <body>
    <div>手机端调试</div>
  </body>
</html>

2、动态加载

在入口文件.js文件中增加下面的代码

inputScript('https://cdn.bootcdn.net/ajax/libs/vConsole/3.4.1/vconsole.min.js', true,()=>{
    console.log("加载完成！追加vConsole")
    let _console = "var vConsole = new VConsole();console.log('Hello world');";
    inputScript(_console, false);
});




function inputScript(url, urlflag,callback) {
	var script = document.createElement("script");
	if (!urlflag) {
		script.innerHTML = url;
	} else {
		script.setAttribute("type", "text/javascript");
		script.setAttribute("src", url);
	}
	var heads = document.getElementsByTagName("head");
	if (heads.length) {
		heads[0].appendChild(script);
	}
	else {
		document.documentElement.appendChild(script);
	}
    //下面的很重要！！！判断js文件加载完成之后需要执行的方法
	script.onload = script.onreadystatechange = function() {
        if (!this.readyState || this.readyState === "loaded" ||this.readyState === "complete" ) {
            script.onload = script.onreadystatechange = null;
            if(callback&&typeof(callback)== 'function'){
                callback();//window[callback]();如果传递字符串过来  调用window['函数名']() 调用方法
 
            }
        }
    };
}

遇到的问题：如果不加载onload 方法，则提示找不到vConsole，这是因为vconsole.min.js还没有加载完，因此需要增加onload，加载完之后再追加打印效果

佛佛ง

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
使用vconsole进行手机端调试

遇到的问题：如果不加载onload 方法，则提示找不到vConsole，这是因为vconsole.min.js还没有加载完，因此需要增加onload，加载完之后再追加打印效果。在入口文件.js文件中增加下面的代码。
复制链接

扫一扫