調試已編譯好的js

Ⅰ 有哪些 JS 調試技巧

一般js調試用firedebug或者Chrome Developer Tool，我大概是從 08、09 年從 Firebug 轉入 Chrome Developer Tool，一直用到現在，越用越喜歡。我平時調錯時常用的功能有：
1、代碼格式化
可以將被壓縮的代碼自動展開
2、實時代碼編輯
可以在運行時動態改變 JS 代碼，並且不需要刷新頁面就可以看到效果，一般用這個實時的在代碼里插 console.log
3、DOM 事件/XHR 斷點
可以針對 DOM 結構改變/屬性改變/鍵盤滑鼠事件 等下斷點，直接斷到事件的第一個 listener 函數上。還可以對 XHR 請求下斷點，斷到發起請求的那一行代碼上
4、調用棧分析
這個非常常用，Scripts 面板下右上角的那一部分
5、自動異常斷點
當代碼執行出錯時，可以自動斷到出錯的代碼行上，直接分析出錯時的運行時環境
分析 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。

Ⅱ 如何使用IE瀏覽器自帶開發人員工具調試JS程序

1、在工具->Internet選項->高級，去掉「禁用腳步調試（Internet Explorer）」項的勾選。
2、去掉「顯示友好http錯誤信息」項的勾選。最後點擊應用，確定按鈕。
3、預覽表單，當要執行的js程序出現錯誤時，瀏覽器會給出提示。
4、在給出的錯誤提示窗口中，選擇「是（Y）」按鈕，進入IE瀏覽器自帶的開發人員工具腳本調試界面。
5、根據JS調試信息可以知道，當前JS報錯是由於沒有找到指定對象「dat」而導致的。需要在表單設計器中，修改JS程序並保存。因演示效果的需要，在本例中是沒有設置id值為dat的單行輸入框控制項的，本例中第二個單行輸入框控制項的id值是data2。
6、將其改成值data2後，再進行測試不會出現JS報錯信息，程序得以正常執行。

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

Ⅳ chrome 如何調試js

是可以調試js的。

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

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

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

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

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

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

Ⅳ 如何調試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

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

Ⅶ 怎麼在瀏覽器中調試JS代碼

在瀏覽器中調試JS代碼的方法

• Chrome瀏覽器

• 按F12或是"設置"--》「工具」--》「開發者工具」，即可打開chrome的調試工具。

• 關於這個工具的用法，請參考「怎麼使用chrome調試工具」。這里主要講怎麼使用source這個選項來調試JS代碼。下圖source選項的窗口。

• 0怎麼使用chrome調試工具

• 下圖中1為source選項卡，2是在小窗口中選中source選項，3是當前頁面的原代碼，這個需要自己確定，一般會是index或是比較具體的jsp的名稱。雙擊3中的頁面，右邊的窗口中會出現頁面的原代碼，如下圖4. 點擊5，會格式化代碼，是代碼有合理換行，比較清晰。

• 下面就是具體的調試了。

• 在下圖1中，先通過元素定位找到一個按鈕，查看原代碼，找到它點擊後的JS方法，然後在source窗口查詢，如圖2中的1，定位到該方法，在方法的第一行代碼的左邊，單擊，窗口上會出現3這樣的箭頭，表示斷點設置在這里。4是一些控制，包括繼續執行，暫停執行，跳入，跳出等。5顯示的是當前所有的斷點的信息。

• 在頁面上點擊按鈕，頁面會進入下圖所示的狀態，表示進入JS方法中的斷點了。代碼執行會停在斷點處。1上面的繼續按鈕，可以是JS方法繼續執行，也可以使用3上面的繼續按鈕。代碼停在2中的代碼行，這時可以將滑鼠懸停在變數上來查看變數值，也可以在console中列印輸出。點擊3上的執行下一行可以執行下一行，也可以跳入某個方法或是跳出。點擊繼續，代碼會跳到下一個斷點或是完成調試。

• FireFox瀏覽器。

• 按F12或是「設置」--》"開發者"--》「Web控制台」

• FireFox和chrome的調試方法是一樣的，只是瀏覽器的調試窗口和按鈕位置有少許區別，請參照chrome瀏覽器的調試方法就可以。下面是FireFox的調試窗口截圖。

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

工具/原料

chrome瀏覽器 Mozilla firefox 電腦

方法/步驟

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

Ⅸ 如何調試html網頁中的js代碼

以谷歌瀏覽器Chrome為例（火狐類似），說下前端打「斷點」：

一、按F12快捷鍵打開Chrome控制台，點擊「Sources」選項卡，如圖：

二、刷新當前網頁，代碼執行到「斷點」處會停住，如上圖藍色區域；

三、按F8快捷鍵可以在不同的斷點之間切換、按F10快捷鍵程序代碼會一步步執行，這樣就能很方便定位到錯誤區域，排查錯誤。

說明：火狐瀏覽器的操作方法和谷歌類似，當然界面略有不同。

Ⅹ 谷歌瀏覽器怎麼調試js

首先我們打開開發者工具，你可以直接在頁面上點擊右鍵，然後選擇審查元素或者在Chrome的工具中找到或者你直接記住這個快捷方式： Ctrl+Shift+I (或者Ctrl+Shift+J直接打開控制台)，或者直接按F12。

1、Elements標簽頁
這個就是查看、編輯頁面上的元素，包括HTML和CSS：

左側就是對頁面HTML結構的查看與編輯，你可以直接在某個元素上雙擊修改元素的屬性，或者你點右鍵選;Edit as Html;直接對元素的HTML進行編輯，或者刪除某個元素，所有的修改都會即時在頁面上得到呈現。（註：看到上面右鍵菜單的最後一個選項;審查元素了么？這是不是說明這個開發者工具的頁面也是HTML來的呢？你點一下就知道了哦，嘿嘿）
你還可以對某個元素進行監聽，在JS對元素的屬性或者HTML進行修改的時候，直接觸發斷點，跳轉到對改元素進行修改的JS代碼處：

Elements標簽頁的右側可以對元素的CSS進行查看與編輯修改：

你還可以通過這里看到各CSS選擇器設置的CSS值的覆蓋情況。
下面的Metrics可以看到元素占的空間情況（寬、高、Padding、Margin）

注意到上面的Properties沒有？這個很有用哦，可以讓你看到元素具有的方法與屬性，比查API手冊要方便得多哦（要注意某些方法和屬性在IE、FireFox等其他瀏覽器下面的支持情況哦）。
2、Resources標簽頁

Resources標簽頁可以查看到請求的資源情況，包括CSS、JS、圖片等的內容，同時還可以查看到存儲相關的如Cookies、HTML5的Database和LocalStore等，你可以對存儲的內容編輯和刪除。
這里的CSS文件有一個好玩的特性，你可以直接修改CSS文件，並且修改即時生效哦：

3、Network標簽頁

Network標簽頁對於分析網站請求的網路情況、查看某一請求的請求頭和響應頭還有響應內容很有用，特別是在查看Ajax類請求的時候，非常有幫助。注意是在你打開Chrome開發者工具後發起的請求，才會在這里顯示的哦。
點擊左側某一個具體去請求URL，可以看到該請求的詳細HTTP請求情況：

我們可以在這里看到HTTP請求頭、HTTP響應頭、HTTP返回的內容等信息，對於開發、調試，都是很有用的。
4、Scripts標簽頁
很明顯，這個標簽頁就是查看JS文件、調試JS代碼的，直接看下圖的說明：

還有你可以打開Javascript控制台，做一些其他的查看或者修改：

你甚至還可以為某一XHR請求或者某一事件設置斷點：

5、Timeline標簽頁
注意這個Timeline的標簽頁不是指網路請求的時間響應情況哦（這個在Network標簽頁里查看），這個Timeline指的JS執行時間、頁面元素渲染時間：

點擊底部的Record就可以開始錄制頁面上執行的內容。
6、Profiles標簽頁
這個主要是做性能優化的，包括查看CPU執行時間與內存佔用：

7、Audits標簽頁
這個對於優化前端頁面、加速網頁載入速度很有用哦（相當與Yslow）：

點擊run按鈕，就可以開始分析頁面，分析完了就可以看到分析結果了

它甚至可以分析出頁面上樣式表中有哪些CSS是沒有被使用的哦：

8、Console標簽頁
就是Javascript控制台了：

這個除了查看錯誤信息、列印調試信息（console.log()）、寫一些測試腳本以外，還可以當作Javascript API查看用。
例如我想查看console都有哪些方法和屬性，我可以直接在Console中輸入;並執行：

怎麼樣，一目瞭然了吧 ？再例如我想查看日期函數都有哪些方法：

（註：注意在這里看到的某些方法和屬性是ES5新增的，記得兼容其他瀏覽器的支持情況哦）