h5學習筆記：動態載入vconsole 除錯工具

hero82748274發表於2019-03-10
H5筆記除錯

在之前的專案當中使用了騰訊的vconsole 工具，嘗試運用在專案當中，這使得除錯手機應用變得非常好用。經過幾個專案使用，已經習慣了這種除錯工具。下面是官方的一個介紹。

vconsole 工具 是一個輕量、可擴充、針對手機網頁的前端開發者除錯皮膚。
特性
檢視 console 日誌
檢視網路請求
檢視頁面 element 結構
檢視 Cookies、localStorage 和 SessionStorage
手動執行 JS 命令列
自定義外掛

由於在頁面程式碼裡面要加上除錯工具，但是並不想正常的頁面載入速度變慢。於是可以
檢視了一些資料，js能夠實現動態載入指令碼。這類似插入一個元素那樣，這使得看起來非常簡單。於是嘗試在瀏覽器引數裡面加上引數使其在除錯模式下開啟。

1.下載外掛

使用之前需要到git 裡面下載一份程式碼，或者使用git clone 的方式將其倉庫下載本地。

https://github.com/Tencent/vConsole

2 .嘗試編寫除錯模式實驗

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>騰訊工具</title>
		<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" name="viewport">
	</head>
	<body>
		
		<div>		
			使用騰訊H5 發包除錯工具	
		</div>
		
		<script type="text/javascript">
			 
		     var debugModel = getUrlParam("debug");
		     console.log("debugModel:"+debugModel);//開啟除錯模式
		     if(debugModel == "debugmodel")
		     {
		     	loadScript("vconsole.min.js",function(){		     		
		     		var vConsole = new VConsole();	          	
		     	});
		     }
		    
		    function getUrlParam(key){
		    	
		    	 var str = window.location.search  || window.location.hash  || ""
		    	 var str2 = str.substr(1);
		    	 var arr = str2.split("&");
		    	 var obj = {}
		    	 for (var i = 0; i < arr.length; i++) {
		    	 	  var param = arr[i].split("=");
		    	 	  obj[param[0]] = decodeURIComponent(param[1]);
		    	 }
		    	
		    	return obj[key];
		    }
		    
		    
		    function loadScript(path,callback){
		    	
		       var script = document.createElement('script');
		       script.type="text/javascript";
		       script.src = path;
		       script.function(){
		       	  callback && callback();
		       	  console.log("指令碼載入完畢");
		       }
		       
		    	document.body.appendChild(script);
		    }
		    
			
		</script>
		
	</body>
</html>

3. 使用起來

執行網頁當中的連結，加入一個debug=debugmodel 的方式，程式碼裡面通過解析瀏覽器引數即可實現載入裡面騰訊的vconsole除錯工具。

http://127.0.0.1:8020/phptool/jstool/jstool.html?debug=debugmodel

執行結果如下：
在這裡插入圖片描述

這樣子就可以實現在手機裡面除錯h5介面的功能。當然有一臺mac機器 或者谷歌也可以實現這樣類似除錯方式。前提是要有一臺機器達到目的。

實現過程，可以為其加入二維碼，手機裡面就可以通過二維碼進行掃碼進入對應的連結了。

相關文章