使用vconsole进行手机端调试

最新推荐文章于 2024-01-22 11:16:31 发布

佛佛ง

最新推荐文章于 2024-01-22 11:16:31 发布

阅读量1k

点赞数

分类专栏：项目开发实践文章标签： javascript 前端 vue.js

本文链接：https://blog.youkuaiyun.com/LzzMandy/article/details/130710517

版权

项目开发实践专栏收录该内容

4 篇文章

订阅专栏

文章介绍了如何在手机端进行调试，通过引入vConsole.min.js库并在HTML中初始化，实现页面的调试功能。同时，文章提到了动态加载vConsole.js的方法，通过创建script标签并设置onload事件确保脚本加载完成后执行特定代码，解决未加载完成导致的错误问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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，加载完之后再追加打印效果