❶ 前端調試到xhr.send(null);自動有斷點
會不會是你之前設的斷點沒有清除，然後你又修改了代碼，可能原來你想調試第300行，刪了一些代碼後，現在的第300行是xhr.send了，所以斷點就在那停了。
❷ ASP.netmvc前端怎麼debug
M和C部分都和調試其他.net程序沒有區別，V方面最好在瀏覽器的開發者工具中進行調試，不過vs2017也支持包括chrome在內的斷點跟蹤
❸ 前端怎麼在chrome進行調試
打開Google瀏覽器，打開任意一個網頁，這里以網路首頁為例
按下F12鍵，能看到會彈出如下圖所示的對話框
滑鼠右鍵需要修改的地方
可以看到需要改動的地方，對應區域的CSS樣式都在右側區域顯示
滑鼠左鍵單擊箭頭所指區域，可添加所需的樣式，並且可以實時的顯示出來，當不需要時，去掉勾選即可，也可以直接按刪除，製表符Tab可以自動補全屬性名稱
可以根據標簽的id或者class值獲取其屬性，當提示undefined時，就需要查看是否存在這個標簽值
下圖顯示的是進入網頁所需的文件，同樣的可以在裡面直接修改，但不會保存到本地文件中
8
下面才是調試的重頭戲，以12306購票網為例，按下F12，打開需要調試的JS文件，在行開頭單擊滑鼠左鍵，打下斷點，如下圖所示。快捷鍵F11是進入下一步，shift+F11跳出進入下一步，F8跳到下一個斷點，這樣就可以看到每一步程序運行所顯示的結果，此時可以用步驟6用到的方法來查看標簽的屬性
❹ 如何直接調試線上頁面的JavaScript和C
一個典型的工作場景是：線上的某個頁面出現了bugs，需要緊急修復。這時候有個簡單的傳統做法是，將問題頁面另存為本地html文件，然後瘋狂的尋找並修復bugs，等弄好了，再將修改後的js和css上傳到線上並檢查校驗bugs是否已修正。 上面的方法，對於簡單頁面，是夠用的。但是對於稍微復雜的頁面，IE的另存為經常不保真，如果頁面中涉及Ajax等bugs，保存到本地更是難以調試。這時有個很自然的做法是，將開發環境Run起來，當時怎麼開發的，現在就怎麼調試。這樣做肯定能解決問題，但要調動很多資源，後台開發工程師、前台開發工程師等等都要參與。對於小團隊來說，也許是可行的，對於大團隊來說，如此大動干戈，除非到了最後，是不會這樣做的。那我們應該怎麼做呢？先來看一個工具： Web開發中有個大名鼎鼎的工具：Fiddler. Fiddler是一個http調試代理，它能夠記錄你電腦和互聯網之間的所有http通訊。Fiddler可以讓你檢查所有的http通訊，設置斷點，以及Fiddle（Fiddle的英文意思是胡亂修改，很幽默的表達Fiddler的用途）所有「進出」的數據（指cookie,html,js,css等數據）。 嘿嘿，是否從上面的介紹中嗅探到了某種解決方案？Fiddler可以讓我們Fiddle所有」進出「的數據！我們要調試線上頁面的bugs時，可以先分析是什麼文件引起的，找出這些嫌疑文件，下載到本地，然後利用Fiddler將線上的請求Fiddle到本地的對應文件。這樣我們就可以隨心所欲的修改這些嫌疑文件了，直接刷新線上的頁面就可以看到效果，煩人的環境問題根本就不用考慮，而且一切都是高保真的。 上面說的是思路，下面我會舉個例子來說明。 舉例子之前，請先安裝Fiddler（怎麼下載安裝就不多了，一路Next）。安裝好後，在IE的工具條上會出現Fiddler2圖標，點擊啟動Fiddler. 啟動後，通過IE訪問任何網站時，所有http進出數據都會在Fiddler上顯示出來。但是等等，怎麼老說IE呢？雖然在IE上能通過IE Developer Toolbar和Companion.JS來調試CSS和JS，但被firebug寵壞了的我們，總期望著Firefox上能搞定的問題絕不通過IE去調試。為了我們的美好期望，根據Fiddler的官方說明，我們只要簡單的進行以下操作即可： 首先將要調試的文件下載到本地，啟動Fiddler，在AutoResponder欄勾選啟用，並添加替換規則： 如上圖添加兩條規則後，刷新頁面，上面兩個js文件就從本地獲取了，嘿嘿。接下來，用喜歡的文本編輯器盡情的調試吧，就像當初開發時一樣。等把bugs解決了，壓縮並上傳相應的js文件，並通知後台開發者修改vm中js文件的時間戳，然後等著發布就行。 CSS也是一樣的調試，不贅述。在firefox、Safari、Opera中的的使用方法類似，不多說。 其它和前端開發調試密切相關的技巧： 2.使用DIFF比較http包的統計數據； 3.使用Filter過濾信息。比如禁用JS, 設置斷點等等。 4.使用bpu + Inspectors動態修改Response. 比如修改頁面中的JS代碼片段等等，非常有用。 5.使用Request Buidler測試請求。可以很方便的測試ajax代碼（可惜不支持斷點）。 6.使用Statistics + Timeline + neXpert查看性能等統計數據，可以分析網頁載入慢的原因。 7.使用CustomRules, 自定義配置和命令等。比如修改var m_DisableCaching: boolean = false;的值為true, 就可以默認禁止緩存。還可以自定義命令等等。 8.開發自己的擴展。
❺ 如何調試html網頁中的js代碼
以谷歌瀏覽器Chrome為例（火狐類似），說下前端打「斷點」：
一、按F12快捷鍵打開Chrome控制台，點擊「Sources」選項卡，如圖：
二、刷新當前網頁，代碼執行到「斷點」處會停住，如上圖藍色區域；
三、按F8快捷鍵可以在不同的斷點之間切換、按F10快捷鍵程序代碼會一步步執行，這樣就能很方便定位到錯誤區域，排查錯誤。
說明：火狐瀏覽器的操作方法和谷歌類似，當然界面略有不同。
❻ 前端調試看不到源代碼，不方便
您好！很高興為您答疑。
這個要善用firebug和開發者工具了，其實火狐的前端調試提供的信息較谷歌還更多更細致。您也可以在火狐的js調試過程中加入斷點等以助調試輸出。
如果對我們的回答存在任何疑問，歡迎繼續問詢。
❼ 谷歌瀏覽器怎麼調試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新增的，記得兼容其他瀏覽器的支持情況哦）
❽ 怎麼在chrome調試工具直接修改js代碼
1、在元素標簽上右鍵審查元素。
❾ 怎樣從Firebug設斷點調試JS代碼
打開firebug,點擊「腳本」選項。
❿ JavaScript如何調試有哪些建議和技巧附五款有用的調試工具
瀏覽器開發者工具
我個人最喜歡Chrome開發者工具。雖然Safari和Firefox無法達到Chrome那麼高的標准，但它們也在逐漸改善。在Firefox中，可以將Firebug和Firefox開發者工具組合使用。如果Firefox小組在改進內置開發者工具方面繼續表現優異的話，Firebug有一天可能會被淘汰。
先把個人偏好放在一邊，你應該能夠在目標瀏覽器中對任意代碼進行試驗和調試。你的目標瀏覽器可能包括著名的IE8，也可能不包括。
要熟悉你自己選擇的開發者工具。你還可以從IDE（集成開發環境）或者第三方軟體獲得額外的調試支持。
在各種調試工具中，調試的基礎知識是相通的。事實上，我是在90年代從Borland的C開發者環境中學習的調試基礎。斷點、條件斷點、監視與最新版Chrome開發者工具是完全相同的。2000年左右，我在Java中捕獲到第一例異常。堆棧跟蹤（Stack traces）的概念依然適用，即使JavaScript術語將其稱作錯誤（Error），檢查堆棧跟蹤仍然和以前一樣有用。
有些知識點是前端開發特有的。例如：
DOM檢查
DOM斷點
調試事件
內存泄露分析
斷點
使用debugger語句可以在源代碼中增加斷點。一旦到達debugger語句，執行中斷。當前作用域的上下文出現在控制台中，還有所有的局部變數和全局變數。將滑鼠游標移到變數上可以查看變數的值。
在代碼中還可以創建條件斷點：
JavaScript
if (condition) { debugger;}
還可以根據自己需要在開發者工具中插入斷點和條件斷點。在Chrome開發者工具中，在Sources視圖中點擊行號即可增加斷點。如果在斷點上點擊右鍵並選擇「編輯斷點（Edit Breakpoint）」，你還可以增加斷點條件。
節點變化的斷點
如果你的任務是調試垃圾代碼，你可能會有這樣的問題：為什麼DOM節點在執行過程中發生了改變。Chrome開發者工具提供了一種方便的斷點，可用來檢測元素樹中的節點變化。
在Elements視圖中，右鍵點擊一個元素，從右鍵菜單中選擇「Break on…」。
節點變化的斷點
DOM斷點的類型可能包括：
選定節點樹狀子目錄（sub-tree）中的節點變化，
選定節點的屬性發生變化，
節點被刪除。
避免記錄引用類型
當記錄對象或數組時，原始類型的值在引用對象記錄中可能會發生變化。當查看引用類型時一定要記住，在記錄和查看期間，代碼執行可能會影響觀測到的結果。
例如，在Chrome開發者工具中執行以下代碼：
JavaScript
var wallets = [{ amount: 0 }];setInterval( function() { console.log( wallets, wallets[0], wallets[0].amount ); wallets[0].amount += 100;}, 1000 );
記錄的第二個和第三個屬性的值是正確的，第一個屬性中對象引用的值是不可靠的。當你第一次在開發者工具中顯示這個屬性時，amount域的值就已經確定了。無論你對同一個引用關閉並重新打開多少次，這個值都不會變化。
記錄參考類型
永遠記得你在記錄什麼。記錄原始類型時，使用帶斷點的watch表達式。如果是非同步代碼，避免記錄引用類型。
表格記錄
在一些開發者工具中，你可以用console.table在控制台中記錄對象數組。
嘗試在你的Chrome開發者工具中執行下列代碼：
JavaScript
console.table( [ { id: 1, name: 'John', address: 'Bay street 1' }, { id: 2, name: 'Jack', address: 'Valley road 2.' }, { id: 3, name: 'Jim', address: 'Hill street 3.' } ] );
輸出是非常好看的表格。所有原始類型都立刻顯示出來，它們的值反應記錄時的狀態。也可以記錄復雜類型，顯示內容為其類型，內容無法顯示。因此，console.table只能用來顯示具有原始類型值的對象構成的二維數據結構。
XHR斷點
有時你可能會遇到錯誤的AJAX請求。如果你無法立刻確認提交請求的代碼，XHR斷點可以幫你節省時間。當提交某一特殊類型的AJAX時，XHR斷點將會終止代碼的執行，並將提交請求的代碼段呈現給用戶。
在Chrome開發者工具的Sources標簽頁中，其中一個斷點類型就是XHR斷點。點擊+圖標，你可以輸入URL片段，當AJAX請求的URL中出現這個URL片段時，JavaScript代碼將會中斷。
事件監聽器斷點
Chrome開發者工具可以捕獲所有類型的事件，當用戶按下一個鍵、點擊一下滑鼠時，可以對觸發的事件進行調試。
異常時暫停
Chrome開發者工具可以在拋出異常時暫停執行JavaScript代碼。這可以讓你在Error對象被創建時觀察應用的狀態。
異常時暫停
代碼片段
Sources標簽頁左側面板上有一個代碼片段（Snippet）子標簽頁，可用於保存代碼片段，幫你調試代碼。
如果你堅持使用控制台調試，反復寫相同的代碼，你應該將你的代碼抽象成調試片段。這樣的話，甚至還可以把你的調試技巧教給你的同事。
Paul Irish發布過一些基本的調試代碼片段，例如在函數執行前插入斷點。審查這些代碼片段，並在網上搜索其他代碼片段，這是很有價值的。
在函數執行前插入斷點
如果你可以得到函數調用的源代碼，你還可以在函數調用前插入斷點來終止函數的執行。如果你想調試f函數，用debug(f)語句可以增加這種斷點。
Unminify最小化代碼
（譯者註：unminify 解壓縮並進行反混淆）
盡可能使用 source map。有時生產代碼不能使用source map，但不管怎樣，你都 不應該直接對生產代碼進行調試。
（譯者註：sourcemap 是針對壓縮合並後的web代碼進行調試的工具）
如果沒有source map的話，你最後還可以求助於Chrome開發者工具Sources標簽頁中的格式化按鈕（Pretty Print Button）。格式化按鈕{}位於源代碼文本區域的下方。格式化按鈕對源代碼進行美化，並改變行號，這使得調試代碼更加方便，堆棧跟蹤更加有效。
格式化按鈕只有在不得已時才會使用。從某種意義上來說，丑代碼就是難看，因為代碼中的命名沒有明確的語義。
DOM元素的控制台書簽
Chrome開發者工具和Firebug都提供了書簽功能，用於顯示你在元素標簽頁（Chrome）或HTML標簽頁（Firebug）中最後點擊的DOM元素。如果你依次選擇了A元素、B元素和C元素，
$0 表示C元素
$1 表示B元素
$2 表示A元素
如果你又選擇了元素D，那麼$0、$1、$2和$3分別代表D、C、B和A。
訪問調用棧
JavaScript
var f = function() { g(); } var g = function() { h(); }var h = function() { console.trace('trace in h'); }f();
Chrome開發者工具中的Sources標簽頁也在Watch表達式下面顯示調用棧。
性能審查
性能審查工具通常是很有用的。這些工具可以用於防止內存泄露，還可以檢測到你的網站哪裡需要優化。由於這些工具並不了解你的產品，你可以忽略其某些建議。通常來說，性能分析工具能夠有效范圍，可以使你的網站顯著優化。
審查工具舉例：
Chrome開發者工具的Audit標簽頁
YSlow
熟能生巧
你可能熟悉某些調試技巧，其他技巧也會幫你節省不少時間。如果你開始在實踐中使用這些技巧，我建議你幾周之後重新閱讀本文。你將會驚奇地發現，你的關注點在幾周內就發生了變化。
五個常用的js調試工具
JavaScript被稱作以原型(prototype)為基礎的語言。這種語言有很多特色，比如動態和弱類型，它還有一等函數（first class function）。另一個特點是它是一個多范型(multi-paradigm)語言，支持面向對象、聲明式、函數式的編程風格。
JavaScript最初被用作客戶端語言，瀏覽器實現它用來提供增強的用戶介面。JavaScript在很多現代的網站和Web應用程序中都有應用。JavaScript的一個很棒的功能也很重要，就是我確實可以用它來提高或改善網站的用戶體驗。JavaScript也可以提供豐富的功能和交互的組件。
JavaScript在這技術高速發展的同時變得非常受歡迎。因為受歡迎JavaScript也改進了許多，修改JavaScript腳本有很多事要做。這次我們為開發者帶來了幾個非常有用的JavaScript調試工具。
1）Drosera
可以調試任何WebKit程序，不僅僅是Safari瀏覽器。
5)Venkman
Venkman是Mozilla的JavaScript調試器名稱。它旨在為以Mozilla為基礎的瀏覽器（Firefox, Netscape 7.x/9.x and SeaMonkey）提供一個強大的JavaScript調試環境。