① 前端有哪些好用的調試工具
Postman
幾乎所有前端應用程序都發送和接收JSON響應和請求。應用程序通過請求 API 可以做很多事情，例如身份驗證，用戶數據傳輸，甚至是一些簡單的事情，例如獲取所在位置的當前天氣。
CSS Lint
你不僅可以使用CSS Lint工具驗證代碼，還可以使用它選擇要測試的錯誤和警告。它執行基本的語法檢查，並對代碼應用一組規則，以查找有問題的模式或低效的跡象。
JSON格式和驗證器
在未格式化的JSON中，很難發現語法錯誤或值不正確的鍵，因為它很難讀取。當縮小的JSON文件中有缺行返回沙空格時，讀取和發現錯誤可能很有挑戰性。你需要能夠快速掃描該對象並檢查格式或內容中的錯誤。
Sentry
一旦你發布了你的應用程序，它將會運行在一系列的設備上。在任何軟體開發生命周期中，測試階段都是作為一個標准過程實現的。該階段包括單元測試、系統測試、集成測試等。
JSHint
這是一個在JS代碼中檢測錯誤和潛在問題的工具,靜態代碼分析工具(如JSHint)可以幫助開發人員發現很難發現的問題。JSHint掃描一個用JavaScript編寫的程序，並報告常見的錯誤和潛在的bug。潛在的問題可能是語法錯誤、隱式類型轉換導致的錯誤、泄漏變數或其他完全的問題。
BrowserStack
BrowserStack是一組工具，可以幫助你模擬用戶所經歷錯誤的確切環境。設備+操作系統+瀏覽器是一個非常大的組合，這時這個工具的使用就顯得十分必要了。輔助使用Sentry等錯誤記錄工具，你可以充分發揮該工具的作用。
② 前端開發是怎麼調試的
如果是網頁開發的話呢 可以使用瀏覽器的f12 開發人員工具調試。如果是安卓或者ios呢可以抓包獲取介面請求信息，或者使用日誌輸出來檢測。
③ 前端開發工具有哪些
前端開發工具是開發必不可少的，現在的開發工具功能很強大，但是還是有一些不同，下面詳細介紹一下，看看哪款適合你
HBuilder
HBuilder工具是支持一些html和js等開發，主要編寫一些c和web等語言，最大的優勢就是速度比較快，強大的代碼提示和代碼輸入，大大增加了開發者的開發效率。
Sublime Text
編輯器里邊支持emmet比較好的的唯一一款。多功能插件，還可以自定義鍵綁定，功能有很多，包括多選擇和多窗口和python api等功能，為開發者提供了開發方便。
webstorm
js開發工具，web前端開發神器，功能十分強大，界面清晰，人性化設計，使用方便。
所有編輯器里邊唯一內置emmet的一款，並且將emmet的精神往前推動的一款。
phpstorm
測試後端 API 介面時非常好用。GET、POST、DELETE、OPTIONS、PUT 這些方法都支持。
idea
phpstorm、idea包括所有webstorm的功能。只是phpstorm是針對phper的，idea是針對javaer，webstorm針對前端er。
Prettier Playground
代碼格式化工具，支持格式化 JavaScript 代碼，包括 [ES2017]、[JSX]、[Angular]、[Vue]、[Flow]、[TypeScript] 等。
IDE 大多支持 Prettier 工具， 也有在線版本，可以在瀏覽器里格式化代碼。
Dreamweaver
Dreamweaver是一款網頁代碼編輯器，利用一些前端代碼對網頁進行快速的開發，可以通過智能搜索引擎對網頁進行訪問，開發者可以直觀的開發減少出現的錯誤。
④ 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。
它可快速的審計你的網站，給你提出非常實際有效的優化你的網站的建議和方法。
⑤ 前端開發一般用什麼工具
1、Responsively App：網頁調試必備法寶
2、D3.js：網紅級數據可視化工具
3. CodePen：實現新創意代碼
4、bit.dev：很棒的組件中心
5、Npkill：系統打掃型工具
⑥ Web前端開發需要哪些工具
前端開發中需要掌握最基礎的技能就是HTML、CSS，JavaScript。前端的開發中，在頁面的布局時， HTML將元素進行定義，CSS對展示的元素進行定位，再通過JavaScript實現相應的效果和交互，在進行開發前，需要對這些概念弄清楚，才能進行合理的開發。
在網頁建設的過程中，為了避免代碼的繁瑣雜亂，更高效快速地完成任務，就會使用到一些有代碼高亮提示和語法提示等便捷功能的前端開發工具。
1，Dreamweaver：中文名「夢想編織者」。是集網頁製作和管理網站於一身的所見即所得網頁代碼編輯器。它可以使用所見即所得的介面，亦有HTML編輯的功能，藉助經過簡化的智能編碼引擎，輕松地創建、編碼和管理動態網站。訪問代碼提示，即可快速了解 HTML、CSS 和其他Web 標准。 使用視覺輔助功能減少錯誤並提高網站開發速度。
2，Sublime：Sublime Text 是一個代碼編輯器，也是HTML和散文先進的文本編輯器。Sublime Text 的主要功能包括：拼寫檢查，書簽，完整的 Python API ， Goto 功能，即時項目切換，多選擇，多窗口等等。
3，HBuilder：是DCloud,推出的一款支持HTML5的Web開發IDE。 HBuilder的編寫用到了Java、C、Web和Ruby。HBuilder本身主體是由Java編寫。
有了工具，接下來還得靠我們人來操作。你必須熟悉三種語言，把這些概念弄明白，才能開發出好的作品。
⑦ web前端開發需要哪些工具
Web前端是一個新興職業，市場需求大，薪資待遇高，吸引了很多人加入學習。無論是初學小白亦或是自身前端開發人員，好用的軟體工具可以幫助他們更好的工作。今天千鋒武漢給大家分享一下Web前端開發用什麼軟體。
1、Sublime Text
Sublime Text是一個代碼編輯器也是HTML和散文先進的文本編輯器。漂亮的用戶界面和非凡的功能，例如迷你地圖，多選擇，Python的插件，代碼段，等等。完全可自定義鍵綁定，菜單和工具欄。Sublime Text的主要功能包括：拼寫檢查，書簽，完整的Python API，Goto功能，即時項目切換，多選擇，多窗口等等。
2、Dreamweaver
Adobe Dreamweaver使用所見即所得的介面，亦有HTML(標准通用標記語言下的一個應用)編輯的功能，藉助經過簡化的智能編碼引擎，輕松地創建、編碼和管理動態網站。 訪問代碼提示，即可快速了解 HTML、CSS 和其他Web標准。使用視覺輔助功能減少錯誤並提高網站開發速度。
3、Visual Studio Code
Visual Studio Code中文版是微軟推出的帶 GUI 的代碼編輯器，軟體功能非常強大，界面簡潔明晰、操作方便快捷，設計得很人性化。軟體主要改進了文檔視圖，完善了對 Markdown的支持，新增PHP語法高亮。
4、HBuilder
HBuilder是專為前端打造的開發工具，具有飛一樣的編碼、最全的語法庫和瀏覽器兼容數據、可以方便的製作手機APP、最保護眼睛的綠柔設計等特點。支持HTML、CSS、JS、PHP的快速開發。從開放注冊以來深受廣大前端朋友們的喜愛。
5、WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。目前已經被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
想知道「Web前端開發用什麼軟體」，通過網上搜索你可以發現很多，而能否很好的藉助這些軟體完成項目，關鍵還要看你的技術。千鋒武漢網站上有以上這些工具的安裝包，需要的小夥伴自己去下載吧。
⑧ 前端怎麼在chrome進行調試
打開Google瀏覽器，打開任意一個網頁，這里以網路首頁為例
按下F12鍵，能看到會彈出如下圖所示的對話框
滑鼠右鍵需要修改的地方
可以看到需要改動的地方，對應區域的CSS樣式都在右側區域顯示
滑鼠左鍵單擊箭頭所指區域，可添加所需的樣式，並且可以實時的顯示出來，當不需要時，去掉勾選即可，也可以直接按刪除，製表符Tab可以自動補全屬性名稱
可以根據標簽的id或者class值獲取其屬性，當提示undefined時，就需要查看是否存在這個標簽值
下圖顯示的是進入網頁所需的文件，同樣的可以在裡面直接修改，但不會保存到本地文件中
8
下面才是調試的重頭戲，以12306購票網為例，按下F12，打開需要調試的JS文件，在行開頭單擊滑鼠左鍵，打下斷點，如下圖所示。快捷鍵F11是進入下一步，shift+F11跳出進入下一步，F8跳到下一個斷點，這樣就可以看到每一步程序運行所顯示的結果，此時可以用步驟6用到的方法來查看標簽的屬性
⑨ 前端用哪些常見的開發工具
Web前端是一個新興職業，市場需求大，薪資待遇高，吸引了很多人加入學習。無論是初學小白亦或是自身前端開發人員，好用的軟體工具可以幫助他們更好的工作。今天優就業給大家分享一下Web前端開發用什麼軟體。
1、Sublime Text
Sublime Text是一個代碼編輯器也是HTML和散文先進的文本編輯器。漂亮的用戶界面和非凡的功能，例如迷你地圖，多選擇，Python的插件，代碼段，等等。完全可自定義鍵綁定，菜單和工具欄。Sublime Text的主要功能包括：拼寫檢查，書簽，完整的Python API，Goto功能，即時項目切換，多選擇，多窗口等等。
2、Dreamweaver
Adobe Dreamweaver使用所見即所得的介面，亦有HTML(標准通用標記語言下的一個應用)編輯的功能，藉助經過簡化的智能編碼引擎，輕松地創建、編碼和管理動態網站。 訪問代碼提示，即可快速了解 HTML、CSS 和其他Web 標准。使用視覺輔助功能減少錯誤並提高網站開發速度。
3、Visual Studio Code
Visual Studio Code中文版是微軟推出的帶 GUI 的代碼編輯器，軟體功能非常強大，界面簡潔明晰、操作方便快捷，設計得很人性化。軟體主要改進了文檔視圖，完善了對 Markdown的支持，新增PHP語法高亮。
4、HBuilder
HBuilder是專為前端打造的開發工具，具有飛一樣的編碼、最全的語法庫和瀏覽器兼容數據、可以方便的製作手機APP、最保護眼睛的綠柔設計等特點。支持HTML、CSS、JS、PHP的快速開發。從開放注冊以來深受廣大前端朋友們的喜愛。
5、WebStorm
WebStorm 是jetbrains公司旗下一款JavaScript 開發工具。目前已經被廣大中國JS開發者譽為「Web前端開發神器」、「最強大的HTML5編輯器」、「最智能的JavaScript IDE」等。與IntelliJ IDEA同源，繼承了IntelliJ IDEA強大的JS部分的功能。
想知道「Web前端開發用什麼軟體」，通過網上搜索你可以發現很多，而能否很好的藉助這些軟體完成項目，關鍵還要看你的技術。
⑩ 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調試環境。