調試Javascript代碼(瀏覽器F12及VS中debugger關鍵字)

來源:互聯網
上載者:User

目前,常用的瀏覽器IE、Chrome、Firefox都有相應的指令碼調試功能。作為我們.NET 陣營,學會如何在IE中調試JS就足夠了,在掌握了IE中的調試方法以後,Chrome和Firefox中的調試方法也變得相當簡單了。

在F12開發人員工具中進行調試

開啟IE瀏覽器,按下F12鍵,就會開啟開發人員工具,這是IE內建的開發人員開發工具,方便開發人員對HTML、CSS、Javascript等網頁資源進行跟蹤調試使用的。

如果你開啟的時候沒有固定在網頁底部,可以點擊右上方功能表列中的按鈕來完成。

我們看到在這個工具視窗裡面有幾個標籤頁,分別是:HTML、CSS、控制台、指令碼、探查器和網路,點開每一個標籤,可以執行相應的任務。

在HTML標籤視窗中,工具列中的按鈕所執行的操作如:

CSS標籤是用來查看樣式的;控制台顯示網頁中JS的各種輸出資訊,包括錯誤資訊、使用者日誌等;開啟指令碼標籤頁,這裡面才是我們想要的內容。

我在圖中用黃色矩形選中連個控制項,左側的下拉式清單用來選擇檔案,右側的按鈕用來啟動調試。當點擊啟動調試後,偵錯工具會將視窗最大化,我們在選中的檔案中找到需要調試的位置,點擊左側邊欄添加斷點即可進行調試。

當有程式運行到我們的斷點處時,就可以進行調試了。

在這裡,我們可以使用快速鍵進行操作,常用的快速鍵如下

F9:添加/移除 斷點

F10:逐過程,即跳過該語句中的方法、運算式等

F11:逐語句調試,即單步調試,會跳入方法、運算式,進行逐語句的跟蹤調試

在執行過程中,如果我們要執行即時的代碼,我們就需要在右側的窗格中輸入代碼,按斷行符號即可。

如果要執行多行代碼,點擊運行按鈕右側的雙箭頭,就會開啟多行模式。我就不再片了。

這種直接在瀏覽器中調試的方法同樣適用於Google瀏覽器Chrome和FireFox FireDebug,只不過在細枝末葉上面有些不同罷了,主體的功能都是一樣的。

按F12鍵進入開發人員工具,可以查看原始碼、樣式和js。

點擊Scripts按鈕,可以開啟這個調試視窗,裡麵包含了網頁中指令檔源碼,點擊左側的按鈕可以開啟選擇檔案的側視窗。右側有調試的工具按鈕,不過我不喜歡這些純英文的介面,所以大部分的調試都還是在IE下進行。並且會在IE下轉到VS中。

下面我就介紹如何在VS中調試我們的JS代碼。

使用debugger關鍵字進行調試

這種方法很簡單,我們只需要在進行調試的地方加入debugger關鍵字,然後當瀏覽器運行到這個關鍵字的時候,就會提示是否開啟調試,我們選擇是就可以了。這種調試可以選擇調試工具,是新開啟vs還是在現有的VS中調試,都可以選擇,個人比較喜歡這中調試方式。

當我們運行這段程式的時候,會彈出調試提示視窗:

如果你的瀏覽器沒有彈出這個視窗,你需要進行一下簡單的設定,開啟Internet選項:

將紅色方框中的兩項取消勾選就可以了。

設定以後就可以使用debugger關鍵字進行調試了;進過這樣的設定,我們還可以捕獲到意外的錯誤,進行跟蹤調試。

好了,本文就介紹到這裡,有不明白的地方請和我交流。調試是一個實踐的過程,只有使用次數多了,才能掌握其中的方法和技巧。

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.