使用vconsole进行手机端调试

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



  
    
    
    手机端调试
     
     
     
  
  
    
手机端调试

使用vconsole进行手机端调试_第1张图片

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

你可能感兴趣的:(javascript,前端,vue.js)