調試js方法,js調試工具的基本功能

本文目錄一覽：

• 1、如何調試JS?
• 2、dreamweaver里如何調試javascript代碼
• 3、有哪些 JS 調試技巧？
• 4、chrome 如何調試js
• 5、如何進行html調試和js腳本調試
• 6、有哪些 JS 調試技巧

如何調試JS?

說下幾種方法吧：br1.用alert 這個最最直觀 把你想要的內容彈出來給你看，但是要看哪裡 就要在哪裡加，比較麻煩br2.用firefox 或者chrome瀏覽器 裡面有debug工具的br3.如果想用ie來debug的話 記得用ie8 或者以上版本

dreamweaver里如何調試javascript代碼

目前，常用的瀏覽器IE、Chrome、Firefox都有相應的腳本調試功能。我們先來看IE的：

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

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

如果你打開的時候沒有固定在網頁底部，可以點擊右上角菜單欄中的按鈕來完成。

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

在HTML標籤窗口中，工具欄中的按鈕所執行的操作如下圖：

CSS標籤是用來查看樣式的；控制台顯示網頁中JS的各種輸出信息，包括錯誤信息、用戶日誌等；打開腳本標籤頁，這裡面才是我們想要的內容。

我在圖中用黃色矩形選中連個控制項，左側的下拉列表用來選擇文件，右側的按鈕用來啟動調試。當點擊啟動調試後，調試程序會將窗口最大化，我們在選中的文件中找到需要調試的位置，點擊左側邊欄添加斷點即可進行調試。

當有程序運行到我們的斷點處時，就可以進行調試了：

在這裡，我們可以使用快捷鍵進行操作，常用的快捷鍵如下：

F9：添加/移除 斷點

F10：逐過程，即跳過該語句中的方法、表達式等

F11：逐語句調試，即單步調試，會跳入方法、表達式，進行逐語句的跟蹤調試

在執行過程中，如果我們要執行即時的代碼，我們就需要在右側的窗格中輸入代碼，按回車即可：

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

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

按F12鍵進入開發者工具，可以查看源代碼、樣式和js：

點擊Scripts按鈕，可以打開這個調試窗口，裡面包含了網頁中腳本文件源碼，點擊左側的按鈕可以打開選擇文件的側窗口。

2、使用debugger關鍵字進行調試

這種方法很簡單，我們只需要在進行調試的地方加入debugger關鍵字，然後當瀏覽器運行到這個關鍵字的時候，就會中斷：

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

有哪些 JS 調試技巧？

其實當你經驗足夠的時候，有些錯誤不需要調試就能想明白。當然，新手而言，從調試做起。

主要的技巧取決於你使用的調試工具，這裡以我使用的chrome為例。首先跳出chrome的調試工具，右鍵選擇檢查。。

接著彈出開發者窗口，如圖

這個就是調試頁面了，然後單擊頂頭的source，找到你的js腳本，如圖：

圖片中那個藍色的小框框就是斷點了，設置方法就是單擊那裡。

可以見到，窗口下面紅色鮮紅的值就是錯誤了，單擊後面的錯誤位置就能定位了(語法錯誤能顯示定位，但是邏輯錯誤無法定位。內置api出錯定位會出錯，比如JSON.parse()出錯就定位到html文件去了)

左下角有一個藍色小箭頭，後面是能輸入的，輸入一下試試，

我輸入了cookie，就返回了cookie的值。其他的同理。

另外也可以在js腳本裡面使用console.log()，在console一欄會顯示的。更多的方法，嘗試才知道。

chrome 如何調試js

是可以調試js的。

使用的工具：谷歌瀏覽器、測試的網站；

可以按照下面的方法進行調試：

1、f12 打開開發者工具，控制台介紹：

Elements：頁面元素，可以進行編輯，保存後實時查看頁面效果；

Network： 查看js模擬的http請求，例如下圖中修改購物車中商品數量，可以實時的看到請求地址，直接上圖。

2、點擊請求地址，會把請求的頭信息和響應信息等數據展示出來，此處非常便捷，展示樣式比firebug更直觀，直接上圖，可以點擊查看頭信息，preview，響應信息，cookie，timeline對我們有用的。注意，preview是此處模擬http請求的發送數據，直接預覽出來了。

3、Sources：次功能是js頁面調試中最突出的功能，上圖。

功能介紹：左側sources目錄可以展開，查看載入本頁面所調用的資源，如js，css，php。此處先介紹斷點調試，可以順序的看到程序的執行過車，勾選右側的Any XHR 按鈕，上圖。

4、一步一步執行，如添加數量的時候，可以看到右側的call stock進程，可以看到此處出發了js中changePrice()函數，在此處我們可以進行邏輯分析了。或則在代碼行處單擊設置斷點，英文選項是add breakpoints，單擊右擊都可以，最是好用，上圖。

5、可以查看你設置的所有斷點，右側展開，如圖，斷點調試用的比較多，當然了還可以在js里直接寫代碼，查看實時數據變化，查看要注意ctrl+s 保存操作。

6、Timeline：次功能是查看頁面性能，頁面渲染速度的，一般是用不到的。測試人員可以查看，圖中展示一些性能參數供參考，上圖。

Profile：次功能主要測試載入文件速度參考，可以在此處上傳我們的文件供測試用。點擊 Load上傳即可，一般用不著。

備註：Console：此功能是模擬js控制台，直接寫代碼，查看結果。高級功能使用時開啟斷點，查看變數的變化過程。還可以條用函數。

如何進行html調試和js腳本調試

工具/原料

chrome瀏覽器   Mozilla firefox   電腦

方法/步驟

1、以chrome為例，首先打開需要調試的頁面，按F12快捷鍵打開調試工具。

2、選擇指定的dom節點進行查看和編輯。

3、js斷點調試：chrome非常強大，在chrome調試工具欄中，你可以進行js斷點調試以及格式化查看（一些大型的門戶網站都會將js壓縮成無任何格式的代碼這在研究時特別費勁）：我先寫一段簡單的js代碼：function debug(){for (var i=0;i10;i++){alert(i);}調試截圖如下：

4、js ajax調試，ajax技術如今越來越頻繁使用，所以，ajax調試也必不可少：在chrome調試工具中，可以查看到當前頁面所以的請求，包括ajax請求，以下是頁面打開後所有發起的請求。

有哪些 JS 調試技巧

代碼格式化

可以將被壓縮的代碼自動展開

實時代碼編輯

可以在運行時動態改變 JS 代碼，並且不需要刷新頁面就可以看到效果，一般用這個實時的在代碼里插 console.log

DOM 事件/XHR 斷點

可以針對 DOM 結構改變/屬性改變/鍵盤滑鼠事件 等下斷點，直接斷到事件的第一個 listener 函數上。還可以對 XHR 請求下斷點，斷到發起請求的那一行代碼上

調用棧分析

這個非常常用，Scripts 面板下右上角的那一部分

自動異常斷點

當代碼執行出錯時，可以自動斷到出錯的代碼行上，直接分析出錯時的運行時環境

分析 HTTP 請求

Network 面板下列出了所有的 HTTP 請求，可以很方便的查看請求內容、HTTP 頭、請求時間等信息

以線上代碼出 Bug 為例。一般上手第一步是使用代碼格式化功能將被壓縮的線上代碼展開，然後開啟自動異常斷點，嘗試重現 Bug。當 Bug 出現時代碼會自動斷到出錯的那一行。然後通過調用棧分析結合控制台找

到最開始出錯的那個函數上。一般的 Bug 到這裡就算找出來了，但是如果這個 Bug 是在事件回調函數或者 XHR 回調函數上，就得結合 DOM

事件斷點和 XHR 斷點 進一步往上找哪個函數出錯。另外，如果是發給伺服器請求沒有得到正確的 response，可以通過 Network

面板查看請求的參數、Cookie、HTTP 頭是否有誤。

另外，還可以通過 Charles/Nginx/Fiddler 等工具將遠程 js 代碼映射到自己的電腦上，免去了代碼格式化的麻煩，還可以直接編輯。

還有些比較小的 Tips:

console.group/console.groupEnd 可以將 log 信息分組展示，看起來更舒服

console.warn/console.error 可以輸出 warning 和 error log

element 面板右側實時編輯的 css 樣式，可以在 resource 面板里保存起來

關於樣式還有個技巧，Elements 面板右上角的 styles 欄，右側有三個圖標，功能依次是：根據當前元素創建一個 css 樣式、模擬 :hover/:active 等偽類、顏色值類型選擇。實用

resource 面板可以刪除和修改 cookie/localstorage

scripts 面板下的 ctrl+o 可以快速跳轉腳本文件，ctrl+shift+o 快速跳轉函數

右下角的齒輪圖標里有個選項是開發者工具和網頁左右分屏（Dock to the right，默認是上下分屏），寬屏必備

接上，還有個選項是禁用 Cookit，必點

接上，在選項面板里還可以手工編輯 user agent 和模擬觸摸事件

最後說說 IE 6 的調試，我是這麼個流程：

首先嘗試在 Chrome 下重現該 Bug，如果能重現，就先把 Chrome 里能重現的 Bug 修了。確定 Chrome 里 OK，但是 IE 6 有問題，再繼續下一步

到

IE 里首先嘗試高版本 IE，比如 IE 9。E 9 的開發者工具還不錯，也可以下斷點，調用棧分析、控制台樣樣都有。如果 IE 9

里沒問題，那就繼續嘗試 IE8，一直定位到能重現該問題的最高版本的 IE 上。即使是 IE

7，其開發者工具也還是勉強能用的……如果不幸的碰上一個 IE 6 only 的 Bug，那就只有繼續下一步

到這一步的話一般就是

最苦逼的時刻。IE 6 實在是沒有太好用的 JS 調試工具（據說 Visual Studio

可以調，我沒用過，歡迎補充）。這時候一般就是二分+alert的土法定位到出錯行，加上耐心和時間，還有一點點運氣。這一步的話強烈推薦開

Fiddler。