2. 程式人生 > >IE瀏覽器javascript除錯

IE瀏覽器javascript除錯

阿新 • • 發佈：2019-01-17

 之前的博文，簡單瞭解了一下Dom物件，這一講本想繼續通過程式碼學習Dom，但是本人在寫博文的過程中，寫的程式碼經常出錯，這裡就先介紹一下javascript的除錯方法吧。

  1. <html>
  2.     <head>
  3.         <title>Demo</title>
  4.     </head>
  5.     <body>
  6.         <formid="form1"action="#">
  7.             <ahref="http://www.baidu.com/"name="clj"id="baidu">
    百度</a></br>
  8.             <ahref="http://www.google.cn/"name="clj"id="google">谷歌</a></br>
  9.             <ahref="http://www.gougou.com/"name="clj"id="gougou">狗狗</a></br>
  10.         </form>
  11.         <script>
  12.             <!--getElementsByName-->
  13.             var hrefs
     = document.getElementsByName("clj");  
  14.             for (var i=0; i <hrefs.length; i++) {  
  15.                 var aHref = hrefs[i];  
  16.                 if (aHref.href.search("http://www.baidu.com") > -1) {  
  17.                     alert(aHref.href);  
  18.                     break;  
  19.                 }  
  20.             }  
  21.         </script>
  22.     </body>
  23. </html>

    上面是這次學習主要的程式碼了，我們現在進入到javascript的除錯狀態去看看。

    怎麼進入javascript的除錯狀態呢，各瀏覽器的實現是不同的，像火狐瀏覽器有自己的firebug，chrome瀏覽器本身就自帶了除錯。

    這裡講一下IE瀏覽器的除錯，畢竟當前瀏覽器市場IE還是佔了很大的份額的。

    想在IE瀏覽器中除錯程式碼，可以像java程式碼一樣，給程式碼打斷點。

    Javascript中斷點的方式為 debugger 關鍵字，在需要除錯的地方新增上debugger，再開啟javascript的除錯，就可以進入除錯模式了。

    接下來，我們演示一下javascript的具體除錯。

    首先，將上面的程式碼進行些許改造，在var hrefs = document.getElementsByName("clj"); 上面新增一行debugger;

[javascript] view plain copy
  1. <script>  
  2.     <!--getElementsByName-->  
  3.     debugger;  
  4.     var hrefs = document.getElementsByName("clj");  
  5.     for (var i=0; i < hrefs.length; i++) {  
  6.         var aHref = hrefs[i];  
  7.         if (aHref.href.search("http://www.baidu.com") > -1) {  
  8.             alert(aHref.href);  
  9.             break;  
  10.         }  
  11.     }         
  12. </script>  

    然後開啟該頁面

    其次，按下F12，進入開發者模式

    開發者模式下，點選指令碼頁籤，點選啟動除錯 按鈕，進入除錯模式


    進入除錯狀態後，debugger所在的行會有一個箭頭指向，意味著除錯從這裡開始，就跟java程式碼裡面的breakpoint 一樣。

    最後按下F5，重新整理一下頁面，開始除錯。

除錯快捷鍵

    除錯的時候，有幾個快捷鍵簡單介紹一下。

F5 繼續

    F5繼續除錯，跳到下一個debugger

    再改造一下上面的程式碼

[javascript] view plain copy
  1. <script>  
  2.     <!--getElementsByName-->  
  3.     debugger;  
  4.     var hrefs = document.getElementsByName("clj");  
  5.     for (var i=0; i < hrefs.length; i++) {  
  6.         debugger;  
  7.         var aHref = hrefs[i];  
  8.         if (aHref.href.search("http://www.baidu.com") > -1) {  
  9.             alert(aHref.href);  
  10.             break;  
  11.         }  
  12.     }  
  13. </script>  

    開始除錯，下圖是剛啟動除錯的程式碼樣子，即按F5之前的樣子。


    按下F5之後，程式碼直接從14行調至17行，即下一個debugger斷點的地方，如下圖。


F11 逐語句

    F11 逐語句，即每一行程式碼都走

    接著上面的斷點，按下F11，繼續除錯

    按下F11 後，我們發現斷點向下走了一行，走到了18行。

    F11 就是這個作用，一行行的走讀程式碼，除錯程式碼。

F10 逐過程

    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斷點，怎麼辦呢，直接找到該頁面，新增斷點就可以了。

    去掉上面程式碼中的debugger，啟動除錯後，在var hrefs = document.getElementsByName("clj");前面單擊就可以了，單擊後

    頁面就出現了斷點，就可以接續按照上面的方法除錯了。

相關推薦

IE瀏覽器javascript除錯

 之前的博文，簡單瞭解了一下Dom物件，這一講本想繼續通過程式碼學習Dom，但是本人在寫博文的過程中，寫的程式碼經常出錯，這裡就先介紹一下javascript的除錯方法吧。 <html>     <head>         <t

IE瀏覽器除錯工具不能使用

Mac 使用VMware Fusion虛擬機器，安裝Windows 7 Service Pack 1 (SP1)。 移除自帶的IE8，下載並安裝IE11（64位）。 IE 11 除錯工具不能使用，並且呼叫IE外掛（AnyChat）提供的API會導致瀏覽器崩潰。 解決方案：安裝補丁 64位系

Chrome - JavaScript除錯技巧總結（瀏覽器除錯JS）

Chrome 是 Google 出品的一款非常優秀的瀏覽器，其內建了開發者工具（ Windows 系統中按下 F12 即可開啟），可以讓我們方便地對 JavaScript 程式碼進行除錯。 為方便大家學習和使用，本文我對 Chrome 的除錯技巧做個系統的

IE瀏覽器下OCX控制元件的相容問題(續集)——Javascript程式碼實現

根據上一篇 http://blog.csdn.net/yangyuyu77584/article/details/39694387  博文方案，現給Javascript程式碼實現。 1.瀏覽器的判斷程式碼。（jQuery新版我還沒有使用，不知道是否已經修改了）這裡我自己補充

谷歌瀏覽器安裝firebug lite外掛（輕量級不支援JavaScript除錯）

         如果網路狀態允許或者使用者直接在谷歌提供的服務中獲取的Chrome外掛，就可以點選其提供的一鍵跳轉按鈕直接根據提示安裝到Chrome瀏覽器中，這種安裝Chrome外掛的方式最為簡單，但是要求使用者的網路狀態良好，並且使用者可以從谷歌的相關服務中獲取Chro

EasyNVR流媒體伺服器網頁相容除錯：ie瀏覽器下的介面呼叫成功但頁面無法顯示實時的資料

許多問題很難在開發的過程中就想的面面俱到，都是在實際應用、除錯的過程中一一的優化的。由於easynvr的受眾越來越多，因此也出現了好多在開發之初並沒有留意的一些細節。我這次發現的問題就是給客戶遠端解決問題過程中發現的。在此記錄下來方便自己，也方便大家瞭解。

谷歌瀏覽器"審查元素"javascript除錯教程

怎樣開啟Chrome的開發者工具？你可以直接在頁面上點選右鍵，然後選擇審查元素：或者在Chrome的工具中找到：或者，你直接記住這個快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接開啟控制檯)，或者直接按F12。開啟的開發者工具就長下面的樣子：不過我一般習慣與點左下角的那個按鈕，將開

如何利用IE進行JavaScript指令碼除錯

做B/S模式的程式好多時候都要用到JavaScript指令碼，它的功能十分強大，但是除錯卻非常麻煩，因為沒有合適的工具，其實IE就支援對JavaScript進行指令碼除錯，只是需要對IE和指令碼進行相應的設定。 1。Internet選項->高階->禁用指令碼除錯 把它後面的隊勾去掉。就使得IE支援

GridView，IE瀏覽器去掉行右邊豎的黑線

alt pan blog nes lis nat img clas src GridView在IE瀏覽器下有黑線。 加上如下屬性 <asp:GridView ID="GridView1" runat="server" CssClass="table-list

IE瀏覽器從頁面向後臺Controller傳中文值出現亂碼問題

亂碼問題 editable com combo url 面向 val textfield bsp 地址前面添加encodeURI() 1、 1 var url = encodeURI(‘xxxAction.action?para=‘+中文); 2 3 $(‘#

js判斷是否為ie瀏覽器

win active spa nbsp 兼容性問題 else -s ont 非ie 　　之前在開發時遇到瀏覽器的兼容性問題，涉及到對ie瀏覽器的判斷。現在此做個筆記。 　　這裏我以函數的形式來判斷，在用的時候直接調用即可。 　　var isIE = !!window.A

chrome-Firefox-IE瀏覽器兼容總結

enter ren ont 標準 距離 tro tac oev turn 作為一名WEB前端程序員,相信每個人對瀏覽器的兼容都"情有獨鐘",下面就一些常用的瀏覽器的兼容列舉一二。 一、塊級元素（block）一般不轉化為inline-block,其實是因為瀏覽器的兼容問題，I

卸載完百度影音以後天氣助手還在，而且總是自己主動打開ie瀏覽器，解決方式

通過 -m == 第三方 post uninstall ria pan xms 今天暴風影音不好用了。我就安裝了百度影音，還有意外發現。相同的視頻，用百度影音看不清楚，然後我就直接卸載了。結果卸掉以天氣小助手還是在，而且總彈白色小框框，各種廣告。最

IE瀏覽器兼容

其他 request對象 shift charset option gamma 同步 element document IE6下面元素的寬高小於16PX時 會默認以16PX顯示（最小寬高） 解決辦法：設置元素overflow:hidden; 當文字全是

兼容ie瀏覽器的方法

但是 hat textarea tar 文檔 wid min-width contain js文件 讓IE6 IE7 IE8 IE9 IE10 IE11支持Bootstrap的解決方法 最近做一個Web網站，之前一直覺得bootstrap非常好，這次使用了bootstr

duilib 的IE瀏覽器控件去邊框和去滾動欄的代碼

del bin als theme type navi pla 觸發 man 轉載請說明原出處，謝謝~~ 近些天在duilib群裏常常有朋友問起，怎麽讓duilib的IE控件能夠去邊框。去滾動欄的問題，或者是怎樣去控件IE控件的行為。為了避

ie瀏覽器中的不同

blog ges 瀏覽器兼容 偶數 org .cn ie6 建議 字號 ie瀏覽器中不支持奇數的單位他自己會取整 IE6會自動把奇數字號+1 ==》 建議使用偶數 瀏覽器兼容詳解 http://w3help.org/zh-cn/causes/ ie瀏覽器中的不同

bootshrap會改變IE瀏覽器滾動條樣式

device 自動隱藏 發現 客戶 ice 現在 出現問題 觀察 css 在某個小網站的開發中客戶一直抱怨在IE11中網頁右邊滾動條不一樣後來發現在IE11中，有2個頁面滾動條會自動隱藏，一開始以為是瀏覽器默認行為，改了overflow:scroll後也沒有用。仔細觀察後發

判斷IE瀏覽器版本

dex agent int app ide ros useragent function soft function IEVer(){ var rv = -1; if (navigator.appName == ‘Microsoft Internet Expl

js判斷是否IE瀏覽器

alert 瀏覽器 str sta spa tar bject art window //ie? if (!!window.ActiveXObject || "ActiveXObject" in window){ //是