[精讚] [會員登入]
485

[Javascript] 偵錯方式 (火狐中的javascript偵錯)

javascript 並不是很容易偵錯(debug)的語言,但那是以前,現在有很多瀏覽器支持很多的工具,此文以火狐為例談談偵錯...

此文完整連結 http://n.sfs.tw/10284

複製連結 [Javascript] 偵錯方式 (火狐中的javascript偵錯)@新精讚
(文章歡迎轉載,務必尊重版權註明連結來源)
2017-03-07 21:43:36 最後編修
2016-11-24 15:44:57 By 張○○
 

[Javascript] 火狐(Firefox)中的javascript偵錯方式

javascript 並不是很容易偵錯的語言,但那是以前,現在有很多瀏覽器支持很多的工具。此文以火狐為例,因為我喜歡火狐,雖然他這近一直亂當機

alert偵錯方法

用一個alert()的函數把你想顯示的變數跳出來:

alert( some_value );

優點是1在跳出來的同時程式是暫停的狀態等你按下確定再繼續 2可以用來測試alert前的程式碼有沒有錯誤,如果有錯誤,就不會執行到這個alert的函式

但是缺點很致命,就是要看一個變數就得去改一次alert要顯示的程式碼,看到的東西如果是物件,就只會得到一個object,資訊很少。

設定方便性:==========| 高
資訊掲露性:==| 低
除錯難易度:===| 不易

console.log偵錯方法

這種方法是少部分人會用的方法,前提是必需支援console的瀏覽器才有效,他使用console.log的方法,把變數值印在瀏覽器的console中:

console.log( some_value);

此時只要程式有執行到這一行,會在主控台(console)中顯示,火狐可用「工具」-->「網頁開發者」-->「網頁工具箱」-->點上面的「主控台頁籤」。

優點是資料詳細,右側的小視窗中也可以看到物件的內容,也可以藉此發現"隱藏的錯誤"(就是運作看能來正常,但事實上會有不確定的因素,以下圖為的第一行警告),這算是除錯的首選。

設定方便性:==========| 高
資訊掲露性:==========| 高
除錯難易度:========| 佳

console.log +firebug 偵錯方法

同上,但這次不使用火狐原生提供的主控台,而是使用這種「firebug」附加元件,可按F12叫出,雖然看起來功能很多,但以js偵錯來說我還是比較推薦火狐原生提供的主控台,清楚明暸。

設定方便性:======| 中
資訊掲露性:==========| 高
除錯難易度:=======| 佳

使用 debugger 設定中斷點

從[1]讀到,javascript 提供一個設定中斷點的功能,可以用來取代我之前用的 alert(),叫 debugger;

請參看下圖中的第313行

這個指令在一般瀏覽的情況下並不會影響 JavaScript 的執行,但當瀏覽器本身已經進入指令碼偵錯模式的話,就會讓偵錯工具在 debugger 指令這一行進入中斷點 (Breakpoint),

在此中斷點系統會將變數儲存以供除錯,算是非常方便的用法。

結論

1. 火狐原生的開發者工具很好用,請善用。

2. debugger 可以設定中斷點。

參考資料

[1] Will will will 善用 JavaScript 的 debugger 指令讓網頁主動進入中斷點


原文 2016-08-22 00:33:23

你可能感興趣的文章

[jQuery] 利用load()來達成ajax的寫法 jQuery中利用load()來達成ajax的寫法,也有人稱他是假的ajax,作法就是..

[jQuery] checkbox 及 radio 設定值 jQuery 之 checkbox 及 radio 取值及設定值的方法

[CKeditor4] 修改調色盤 修改ckeditor預設的調色盤

[Javascript] NaN是什麼? javascript 的NaN和取得整數

[Bootstrap] Datepicker使用/Bootstrap日期選日期選擇器的使用 Bootstrap日期選日期選擇器的使用

[Ckeditor4] 讀、寫與插入內容到欄位 Ckeditor4 提供非常多方法,可以插入、讀取和寫入到TEXTAREA中

[CKeditor4] 設定區塊樣式、段落格式、字型名稱及字型大小 CKeditor4中要自訂設定區塊樣式、段落格式、字型名稱及字型大小。

[Javascript] 偵錯方式 (火狐中的javascript偵錯) javascript 並不是很容易偵錯(debug)的語言,但那是以前,現在有很多瀏覽器支持很多的工具,此文以火狐為例談談偵錯...

[Jquery] 複選的checkbox取值 遇到複選的checkbox該如何取值?

[jQuery] textarea 的取值和給值 HTML 的 TEXTAREA 標籤若要用 jquery 取值,不能使用 .text() 或 .html() ,使用 .

我有話要說


限制:留言最高字數1000字,超過部分會被截掉。請注意:留言不可帶有網址,會被濾掉。 限制:未登入訪客,每則留言間隔需超過10分鐘,每日最多5則留言。

訪客留言

[無留言]

隨機好文

安裝SPHINX支援中文 新版本的 sphinx 和舊版不同,網路上很多範例和教學是不能用的。此文是安裝和設定方法分享

為什麼要重造輪子? 什麼輪子?造什麼輪子?我為什麼要重造輪子?

Smarty安裝 smarty 是著名的樣版引擎,非常的好用,用多了突然發現拿掉smarty反而不會寫php了,以下是安裝過程..

[PHP] 檢查檔案是否是圖檔 使用getimagesize函數檢查檔案是否是圖檔

「許功蓋」的字以及源由 有玩過電腦一段時間的人,都聽過這個人(有一天我才發現7年級的竟然都不認識這個"人")。 在古老的年代