js一步一步調試,js如何調試代碼

本文目錄一覽：

• 1、瀏覽器中怎麼一步一步調試js代碼 逐條代碼執行按什麼鍵
• 2、如何使用firefox進行網頁js調試
• 3、有哪些 JS 調試技巧
• 4、js之斷點調試步驟
• 5、如何調試JS?
• 6、谷歌瀏覽器怎麼調試js

瀏覽器中怎麼一步一步調試js代碼 逐條代碼執行按什麼鍵

應該是你的程序運行還沒有到你要的斷定吧。或者你的瀏覽器設置了什麼什麼和插件運行有衝突的，你可以在火狐瀏覽器中輸進：about:config

—enter鍵打開看下你的插件設置情況。我沒安裝過這個插件建議就只能這麼多。謝謝

如何使用firefox進行網頁js調試

1、首先使用Firefox火狐瀏覽器打開需要調試頁面，也可以在開發工具設置火狐瀏覽器來打開：

2、在打開的Firefox瀏覽器中按F12鍵，接着就會打開「開發者工具」了：

3、此時選擇「調試器」選項，然後選擇需要調試的JS文件，接着就可以在需要調試的位置加入斷點進行調試：

4、按F11或者F10單步調試JS，這裡F11和F10的區別是F11調試，單步執行進入調用的其它函數；而F10調試單步執行，是不進入調用的其它函數的。當然也可以單機頁面上相應的按鈕進行調試。以上就是用Firefox調試網頁的過程：

有哪些 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。

js之斷點調試步驟

1.打開檢查，在sources找到對應的js文件，打上斷點

2.刷新頁面出現灰色區域表示進入調試模式

3.上面的按鈕表示下一步也可以使用快捷鍵f10

4.上面的按鈕表示終止本次調試（終止不了可以多點幾次），但是刷新依然會進入調試模式

5.點擊上面的藍色按鈕，表示取消斷點，再次刷新頁面就不會進入調試模式

如何調試JS?

目前，常用的瀏覽器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

是可以調試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控制台，直接寫代碼，查看結果。高級功能使用時開啟斷點，查看變量的變化過程。還可以條用函數。