IE瀏覽器javascript調試，iejavascript調試
之前的博文，簡單瞭解了一下Dom對象，這一講本想繼續通過代碼學習Dom，但是本人在寫博文的過程中，寫的代碼經常出錯，這裡就先介紹一下javascript的調試方法吧。
<html><head><title>Demo</title></head><body><form id="form1" action="#"><a href="http://www.baidu.com/" name="clj" id="baidu">百度</a></br><a href="http://www.google.cn/" name="clj" id="google">Google</a></br><a href="http://www.gougou.com/" name="clj" id="gougou">狗狗</a></br></form><script><!--getElementsByName-->var hrefs = document.getElementsByName("clj");for (var i=0; i < hrefs.length; i++) {var aHref = hrefs[i];if (aHref.href.search("http://www.baidu.com") > -1) {alert(aHref.href);break;}}</script></body></html>
上面是這次學習主要的代碼了，我們現在進入到javascript的調試狀態去看看。
怎麼進入javascript的調試狀態呢，各瀏覽器的實現是不同的，像Firefox瀏覽器有自己的firebug，chrome瀏覽器本身就內建了調試。
這裡講一下IE瀏覽器的調試，畢竟當前瀏覽器市場IE還是佔了很大的份額的。
想在IE瀏覽器中調試代碼，可以像java代碼一樣，給代碼打斷點。
Javascript中斷點的方式為 debugger 關鍵字，在需要調試的地方添加上debugger，再開啟javascript的調試，就可以進入偵錯模式了。
接下來，我們示範一下javascript的具體調試。
首先，將上面的代碼進行些許改造，在var hrefs = document.getElementsByName("clj"); 上面添加一行debugger;
<script><!--getElementsByName-->debugger;var hrefs = document.getElementsByName("clj");for (var i=0; i < hrefs.length; i++) {var aHref = hrefs[i];if (aHref.href.search("http://www.baidu.com") > -1) {alert(aHref.href);break;}}</script>
然後開啟該頁面
其次，按下F12，進入開發人員模式
開發人員模式下，點擊指令碼頁簽，點擊啟動調試 按鈕，進入偵錯模式
進入調試狀態後，debugger所在的行會有一個箭頭指向，意味著調試從這裡開始，就跟java代碼裡面的breakpoint 一樣。
最後按下F5，重新整理一下頁面，開始調試。
調試的時候，有幾個快速鍵簡單介紹一下。
F5繼續調試，跳到下一個debugger
再改造一下上面的代碼
<script><!--getElementsByName-->debugger;var hrefs = document.getElementsByName("clj");for (var i=0; i < hrefs.length; i++) {debugger;var aHref = hrefs[i];if (aHref.href.search("http://www.baidu.com") > -1) {alert(aHref.href);break;}}</script>
開始調試，是剛啟動調試的代碼樣子，即按F5之前的樣子。
按下F5之後，代碼直接從14行調至17行，即下一個debugger斷點的地方，如。
F11 逐語句，即每一行代碼都走
接著上面的斷點，按下F11，繼續調試
按下F11 後，我們發現斷點向下走了一行，走到了18行。
F11 就是這個作用，一行行的走讀代碼，調試代碼。
F10 上面顯示的是逐過程，但是本人在調試的時候，發現它的作用跟F11相同，都是一行行的走讀代碼，這裡參考F11的作用就可以了。
如果有朋友知道或瞭解到F10的其它作用，可以跟本人講一下，定虛心學習。
Shift + F11 跳出Shift + F11 顯示的是跳出調試，但是在操作過程中，發現它也只是跳到下一個debugger斷點處，即跟F5的作用相似，這裡參考F5即可。
如果有朋友知道或瞭解到Shift + F11的其它作用，可以跟本人講一下，定虛心學習。
斷點行代碼跟蹤
瞭解了調試的關鍵字，似乎還不夠用啊。
還不知道走到每一行代碼，怎麼繼續看變數的具體內容。不急，接下來，我們就看斷點到每一行的時候，我們能做哪些事情。
接著F11 處的代碼繼續看吧
選中變數aHref ，右鍵看到菜單
這裡太多的功能表項目我們暫時不看了，我們關注添加監視(W) 菜單，因為它能讓我們看到具體的變數內容，看到變數有哪些屬性，有哪些方法。
是點擊添加監視後的視圖。
因為這一行代碼還沒走，變數還沒有初始化，所以暫時變數值為undefined，類型為Undefined。
繼續按下F10，
值變為了{…} ，類型變為了DispHTMLAnchorElement。
{…} 表示該變數為物件類型或集合類型
點擊aHref 前面的小+ 號，展開aHref 變數，看看有哪些東東。
最上面的是Events ，表示該對象上面有哪些可以綁定的事件。
接下來是Methods ，表示該對象有哪些可以操作的方法。
然後就是可供使用的屬性資訊了，在屬性資訊中，我們可以看到每個具體屬性項的值，看到該項的值是否是我們想要的值，方便理解代碼，調試代碼。
像accessKey 就是一個屬性，對應值為空白字串。
all 是個集合屬性，值為{…}，點擊開後，就可以繼續看all裡面的每項具體屬性值了。
好了，這裡的方法部分介紹完了。
如果我們拿到的是別人的代碼，無法繼續添加debugger斷點，怎麼辦呢，直接找到該頁面，添加斷點就可以了。
去掉上面代碼中的debugger，啟動調試後，在var hrefs = document.getElementsByName("clj");前面單擊就可以了，單擊後
頁面就出現了斷點，就可以接續按照上面的方法調試了。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
