1. 前端開發是怎麼調試的
如果是網頁開發的話呢 可以使用瀏覽器的f12 開發人員工具調試。如果是安卓或者ios呢可以抓包獲取介面請求信息，或者使用日誌輸出來檢測。
2. Web前端用什麼工具調試
Web前端開發中，為編寫高效的HTML/CSS/JavaScript，優化Web前端性能，不可避免要分析HTTP請求頭和響應頭，調試HTML/CSS/JavaScript。這時候，我們就需要用到一些Web前端的開發調試工具。以下的工具，是Web前端工程師最常用的：
1.FireBug
2012年以前，火狐狸幾乎是所有前端開發者最喜歡的瀏覽器，基於FireFox的插件FireBug成了Web前端工程師開發調試網頁的首選利器。
2.Chrome Developer Tools
自從2011年FireBug的開發者J.Barton跳槽到Google，負責開發Chrome Developer Tools後，Chrome Developer Tools就有了本質性的變化。於是，Web前端開發工程師最喜歡的瀏覽器又變成了Chrome，Chrome Developer Tools也就順理成章成為開發調試網頁的不二利器了。
3.Fiddler 2
FireBug和Chrome Developer Tools雖好，只是分別針對FF和Chrome，那麼有沒有針對所有瀏覽器或者針對HTTP協議的調試工具呢？那就是Fiddler 2了。
這些工具都提供了種類繁多的功能，要完全掌握並非易事。初學者打開一看，密密麻麻的，往往有無從下手的感覺。其實呢，工具的使用很簡單，無它，唯手熟爾。初學者有無從下手的感覺，是因為不了解工具背後的原理而已。
3. js前端調試的幾個小技巧
1. debugger;
我以前也說過，你可以在JavaScript代碼中加入一句debugger;來手工造成一個斷點效果。
需要帶有條件的斷點嗎？你只需要用if語句包圍它：
if(somethingHappens){
debugger;
}但要記住在程序發布前刪掉它們。
2. 設置在DOM node發生變化時觸發斷點
有時候你會發現DOM不受你的控制，自己會發生一些奇怪的變化，讓你很難找出問題的根源。
谷歌瀏覽器的開發工具里有一個超級好用的功能，專門可以對付這種情況，叫做「Break on…」，你在DOM節點上右鍵，就能看到這個菜單項。
斷點的觸發條件可以設置成這個節點被刪除、節點的屬性有任何變化，或它的某個子節點有變化發生。
3. Ajax 斷點
XHR斷點，或Ajax斷點，就像它們的名字一樣，可以讓我們設置一個斷點，在特點的Ajax調用發生時觸發它們。
當你在調試Web應用的網路傳輸時，這一招非常的有效。
tumblr_inline_n1s7ceQ08c1r2
4. 移動設備模擬環境
谷歌瀏覽器里有一些非常有趣的模擬移動設備的工具，幫助我們調試程序在移動設備里的運行情況。
找到它的方法是：按F12，調出開發者工具，然後按ESC鍵(當前tab不能是Console)，你就會看到第二層調試窗口出現，裡面的Emulation標簽頁里有各種模擬設備可選。
當然，這不會就變成了真正的iPhone，只是模擬了iPhone的尺寸，觸摸事件和瀏覽器User Agent值。
tumblr_inline_n1s71kb2NL1r2
5. 使用Audits改進你的網站
YSlow是一個非常棒的工具。谷歌瀏覽器的開發者工具里也有一個非常類似的工具，叫Audits。
它可快速的審計你的網站，給你提出非常實際有效的優化你的網站的建議和方法。
4. 前端的開發調試測試的環境怎麼搭建
前端環境搭建系列的目的是把前端團隊作為一個整體，如何有效的團隊協同開發，第一部分開發環境。
1.代碼版本管理
SVN是必不可少了，版本號的規劃按照項目三位版本，開發四位版本來部署。比如我要做A項目，版本號為1.0.0，我第一次提測的代碼版本為1.0.0.1。每次四位版本按照tag區分。QA按照這個tag部署測試代碼，OP則部署線上代碼。
如果多個項目同時開發，就開分支。這些需要一個項目管理平台來管理版本。
2. 開發環境
我假設前端team的范疇是HTML CSS JS MVC中的V 和 C。最佳的環境是每個人一個開發環境，代碼通過SVN同步別人的代碼。但是文件的路徑全部都一致。
比如
css的img.xx.com/css
js的img.xx.com/js
flash的img.xx.com/swf
後台環境，假設每個後端開發也都有獨立的環境，如果和誰聯調代碼就讓他把配置指向你的V C目錄進行調試。
QA環境的debug問題，你的環境和QA環境代碼部署一致，能夠通過host切換靜態文件，如css js flash。畢竟前端的大部分問題是前端代碼的問題，V 和 C的問題就在自己的環境調試了，靜態資源切換到QA的host。
數據問題，最後有個大的造數據平台，通用一份資料庫，提供數據增加和修改的介面，這是理想狀態，當然這個平台也會很麻煩，實在不行就通過後端的數據操作介面操作數據。
3.編譯環境
可惡的前端代碼裸上，會有很多問題，大部分是性能問題，還有部分是緩存問題。
所以需要提供編譯環境，編譯流程放在提測前是安全的，因為會經過QA的質量檢測，如果在OP環節應該比較麻煩，編譯代碼的bug也沒人去測。
編譯一般解決的事情
1、批量的一些操作，比如版本號
2、代碼的合並和壓縮
3、代碼的優化或者職能替換，比如資源打包
我遇到過的開發狀況都不樂觀。所以有時間自己搭下試試有多復雜。
一般有公用開發環境，就一台機器一個host，不管主幹分支都放在那裡，可想又多混亂，還有前端無版本管理軟體，人肉維護多個並發版本。
或者有版本管理，開發環境還是多人一個，而且沒有host，靜態資源引入都是通過模板conf管理路徑的。這樣的代碼不利於資源路徑管理，特別是圖片，加入png半透明的需要全路徑，多個css合並的最好是根目錄路徑。
各種悲劇，此文到此結束。下篇為開發模式和模塊化。
5. 前端怎麼添加debugger調試
在JS代碼中加入debugger關鍵字即可
var str=100;
for(var i=0;i<10;i++)
{
str +=i*2;
debugger;
}
6. 怎樣方便的調試前端代碼
最簡單的方式就是 live reload 。可以看看 Browsersync ，command line 的方式應該不用寫代碼，不過你要裝個 node + npm 。
7. 前端怎麼在chrome進行調試
打開Google瀏覽器，打開任意一個網頁，這里以網路首頁為例
按下F12鍵，能看到會彈出如下圖所示的對話框
滑鼠右鍵需要修改的地方
可以看到需要改動的地方，對應區域的CSS樣式都在右側區域顯示
滑鼠左鍵單擊箭頭所指區域，可添加所需的樣式，並且可以實時的顯示出來，當不需要時，去掉勾選即可，也可以直接按刪除，製表符Tab可以自動補全屬性名稱
可以根據標簽的id或者class值獲取其屬性，當提示undefined時，就需要查看是否存在這個標簽值
下圖顯示的是進入網頁所需的文件，同樣的可以在裡面直接修改，但不會保存到本地文件中
8
下面才是調試的重頭戲，以12306購票網為例，按下F12，打開需要調試的JS文件，在行開頭單擊滑鼠左鍵，打下斷點，如下圖所示。快捷鍵F11是進入下一步，shift+F11跳出進入下一步，F8跳到下一個斷點，這樣就可以看到每一步程序運行所顯示的結果，此時可以用步驟6用到的方法來查看標簽的屬性
8. 怎麼在移動端調試web前端
可以直接用satari開發工具調試。chrom
+android也有類似的工具組合，但是沒有實際
過。樓主如果覺得不太滿意的話，可以去後盾人看看，那裡也許會有不錯的答案
9. 如何用手機進行本地前端調試
第一步：連接電腦與手機
1. 手機打開「開發者選項」
安卓手機進入「設置」—>「關於手機」—> 在「版本號」上點7次（或其他的版本號位置，一個個試肯定有……）
然後「開發者選項」就出現在「設置」裡面了。
2. 手機打開「USB調試」
進入「開發者選項」—>打開「USB調試」（如果想手機長亮還要打開「不鎖定屏幕」）
3. 連接並允許調試
用USB數據線將手機與電腦連接—>手機上出現「允許該電腦調試」時點「允許」（可能會晚點出現，先去第二步）
第二步：用電腦啟動手機瀏覽
1. 打開chrome的inspect
在電腦chrome地址欄中輸入chrome://inspect—>勾選「Discover USB devices」
如無意外在Devices中會出現手機型號。
如果沒有，再確認下：開發者選項、USB調試、允許該計算機調試
2. 手機打開chrome app
在手機中打開chrome，這時電腦的chrome inspect中會出現輸網址的地方。
3. 測試手機瀏覽的控制
在電腦chrome inspect輸入框中隨便輸個在線網址，點Open，手機chrome就會打開該頁面。用電腦chrome可以控制刷新、關閉，但是用來調試的inspect點開是空白，應該是被牆了。
第三步：用手機測試本地頁面
1. 開啟本地伺服器
對的，很遺憾手機chrome不能進行靜態頁面的調試。
所以必須開本地伺服器，所幸現在有gulp+webserver，用法這里不講了。
總之，完成這一點後，你應該在電腦上用 http://localhost 來瀏覽網頁了。
2. 電腦chrome開啟埠轉發
在chrome inspect中點「Port forwarding...」—>把埠和localhost鏈接輸進去（比如8000和localhost:8000）—>勾選「Enable port forwarding」—>Done
3. 打開手機瀏覽localhost
如：輸入http://localhost:8000 點Open
這樣手機就能打開頁面了。
10. jsp文件前端怎麼調試
在jsp頁面進行調試，需要使用IE瀏覽器自帶的開發人員工具。
首先打開你的項目，運行。
然後打開你要調試的jsp頁面。
點擊 瀏覽器右上角的工具按鈕。