Firefox下javascript除錯方法
阿新 • • 發佈：2019-01-26
前面博文談了一下IE瀏覽器下javascript的除錯方法，今天沒事幹就把火狐瀏覽器（Firefox）下的javascript除錯方法也看了一下，記錄在此，希望對大家有所幫助。
我們這次使用的程式碼頁面為document獲取物件博文中的按name屬性獲取物件的程式碼。
<html> <head> <title>getElementsByName</title> </head> <body> <form id="form1" action="#"> <a href="http://www.baidu.com/" name="clj" >百度</a></br> <a href="http://www.google.cn/" name="clj" >谷歌</a></br> <a href="http://www.gougou.com/" name="clj" >狗狗</a></br> </form> <script> <!--getElementsByName--> var hrefs = document.getElementsByName("clj"); for (var i=0; i < hrefs.length; i++) { var aHref = hrefs[i]; // var aHref = hrefs.item(i); if (aHref.innerHTML == "百度") { alert(aHref.href); break; } } </script> </body> </html>
用Firefox瀏覽器開啟該頁面，在瀏覽器的開啟瀏覽器的工具欄，找到開發者選項按鈕
點選進入，勾選開發者工具欄
完成後，看到瀏覽器最下方出現開發者選項的工具標識和關閉開發者工具欄的x標識
單擊開發者選項的工具標識進入檢視器頁面
檢視器頁面有檢視器，控制檯，偵錯程式，樣式編輯器，效能，網路等tab頁。
點選偵錯程式tab頁，重新整理要除錯的頁面，偵錯程式主視窗會出現要除錯的程式碼
點選點選暫停 按鈕，點選後按鈕狀態改變，同時右邊的三個除錯步驟變為可操作狀態，除錯步驟的作用可參考IE瀏覽器javascript除錯篇的講解。同時，在程式碼行上面打斷點。點選斷點後，程式碼自動進入除錯狀態，取消斷點，程式碼直接執行過去。
打斷點後，重新整理頁面，頁面會停留在斷點處，按下F10按鈕，讓程式碼繼續，會看到後邊變數窗口出現所有的變數資訊。
點選hrefs 變數，可以看到該集合屬性的各物件，三個物件均為超連結，跟IE瀏覽器除錯時看到的基本相同。
點選第一個物件，物件展開後會出現物件屬性資訊等內容
說到這裡，Firefox瀏覽器的javascript除錯基本就講完了。