手机调试打开控制台方法vconsole

比眉伴天荒 2023-10-01 04:58 71阅读 0赞

功能简介：

手机调试网页，看不到控制台，无法获取接口相关信息，引入vconsole可以实现

代码演示：

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    	</head>
    	<body>
    	</body>
    	<script src="https://cdn.jsdelivr.net/npm/vconsole@3.11.0/dist/vconsole.min.js"></script>
    	<script>
    	  // 初始化
    	  var vConsole = new VConsole();
    	  console.log('vConsole init');
    	</script>
    </html>

外部引入：

function addScript(url){
    	var script = document.createElement('script');
    	script.setAttribute('type','text/javascript');
    	script.setAttribute('src',url);
    	document.getElementsByTagName('head')[0].appendChild(script);
    }
    
    addScript("https://cdn.jsdelivr.net/npm/vconsole@3.11.0/dist/vconsole.min.js");
    
    var vConsole = new VConsole();
    console.log('vConsole init');

效果图：

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA546L5a625LqU5ZOl_size_14_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA546L5a625LqU5ZOl_size_17_color_FFFFFF_t_70_g_se_x_16][]

另一款：

![ea36137f5821446da3da8aaed70c7a62.png][]

[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA546L5a625LqU5ZOl_size_14_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/c44b30eae41c4b96b7bf561e91d54210.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA546L5a625LqU5ZOl,size_14,color_FFFFFF,t_70,g_se,x_16
[watermark_type_d3F5LXplbmhlaQ_shadow_50_text_Q1NETiBA546L5a625LqU5ZOl_size_17_color_FFFFFF_t_70_g_se_x_16]: https://img-blog.csdnimg.cn/a89bf9a2b4c84a92b0e9d529df0e1fc4.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA546L5a625LqU5ZOl,size_17,color_FFFFFF,t_70,g_se,x_16
[ea36137f5821446da3da8aaed70c7a62.png]: https://img-blog.csdnimg.cn/ea36137f5821446da3da8aaed70c7a62.png