開發人員工具

之前的文章提到,早期開發JavaScript要進行Debug並不容易,不過現在的瀏覽器大多都已經有內建的開發人員工具,能夠讓我們方便的進行觀察DOM元素和CSS屬性等不同的功能。

這邊介紹一些常見的瀏覽器如何使用除錯模式來進行開發工作。

Chrome

Chrome瀏覽器內建開發人員工具,可以從功能選單中開啟或者直接按熱鍵F12即可開啟,畫面如下:

debug_chrome  

Safari

Safari瀏覽器雖然內建了開發人員工具,但預設是關閉的,所以要先進入選單的偏好設定,在進階的標籤下勾選"在選單列中顯示"開發人員"選單"。

debug_safari2    

之後一樣可以從選單中開啟,或是按右鍵的檢視元件,或是直接按熱鍵Ctrl + Alt + C開啟,畫面如下:

debug_safari

Firefox

Firefox瀏覽器需要額外安裝Firebug的擴充套件,從選單的附加元件進入管理畫面,搜索Firebug後安裝即可使用。

除了可以從畫面社找到Firebug的圖示開啟之外,也可以直接使用熱鍵F12開啟,畫面如下:

debug_firefox  

Opera

Opera有內建的開發人員工具,可以按右鍵選擇檢查元件開啟或是使用熱鍵Ctrl + Shift + I開啟,畫面如下:

debug_opera  

IE

較新版的IE有內建的開發人員工具,一樣可以從選單或是熱鍵F12開啟,畫面如下:

debug_ie  

原本想和其他瀏覽器一樣的選取Google的Logo來比較,不過IE因為沒辦法正確的選到Logo物件,所以只好選取<body>。

這邊展示的是IE9的版本,可以看到紅色圈起來的部分,能夠利用文件模式切換IE的版本(IE8和IE7),提供測試不同版本功能的。

主控台(Console)

各瀏覽器的開發人員工具可能略有不同,不過基本上都會有主控台的面板,可以在JavaScript中利用console的指令,將訊息輸出至這個面板,例如:

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="content-type" content="text/html; charset=utf-8">
		<meta charset="utf-8">
		<title>Debug</title>
		<script>
			(function(){
				var value = "Hello";
				console.log(value);
				console.log(Math);
			})();
		</script>
	</head>
	<body>
	test
	</body>
</html>

可以在主控台看到以下結果:

debug_console    

比起以前使用alert()的指令還Debug輕鬆多了。

中斷點(Breakpoint)

開發人員工具也提供了中斷點的功能,能夠讓我們逐行執行程式,以觀察程式變數的變化等情況;同樣以Chrome為例,在Sources的面板可以看到JavaScript程式碼,即可以直接設定中斷點和相關功能:

debug_breakpoint  

文章標籤
創作者介紹

小殘的程式光廊

emn178 發表在 痞客邦 PIXNET 留言(0) 人氣()