web前端用什麼調試工具

前端可用偵錯工具：1、Web瀏覽器中的開發工具，如使用控制台語句“console.log()”，或使用debugger語句暫停程式碼執行；2、Postman，偵錯介面工具，可以調整請求，分析回應和調試問題；3、CSS Lint，一個用來找出CSS程式碼中問題的工具；4、Sentry，可用於監視錯誤和提取執行適當的事後操作所需的所有資訊；5、 JSHint，一個JS程式碼分析偵測工具。

本教學操作環境：windows7系統、Dell G3電腦。

如果你從事的是前端開發，就應該能理解除錯程式碼還是很有難度的。特別是對於JavaScript，一個小錯誤有時會花費數小時來除錯。對於不同的瀏覽器、作業系統和設備，錯誤又是不可避免的。

本文主要列出一些調試工具，你們可以自己根據情況來選擇。

1、Web瀏覽器中的開發工具

#任何現代的Web 瀏覽器都配有功能強大的工具來調試應用程式。如使用控制台語句console.log()，使用alert()的彈出窗口，也可以使用debugger語句暫停程式碼執行，這些對於我們的偵錯都很有幫助。

我們也可以使用網頁檢查器或CSS樣式檢查器讓偵錯變得更輕鬆流暢。

任何現代網頁瀏覽器都配備了強大的工具來幫助調試您的應用程式。它可以簡單到使用console.log()的控制台語句，使用alert()的彈出窗口，甚至使用偵錯器語句暫停程式碼執行。這些工具對我們的調試任務非常有幫助，尤其是調試器語句。

2、Postman

2、Postman

#「https://www.postman.com/

幾乎所有前端應用程式都發送和接收JSON回應和請求。應用程式透過請求 API 可以做很多事情，例如身份驗證，用戶資料傳輸，甚至是一些簡單的事情，例如獲取所在位置的當前天氣。

Postman 是偵錯介面的最佳工具之一。它適用於 MacOS，Windows 和Linux的系統， 可以快速輕鬆地直接發送REST，SOAP和GraphQL請求。

使用 Postman，我們可以調整請求，分析回應和偵錯問題。當不確定問題出在前端還是後端時，這是很有幫助的。

3、CSS Lint

# 網址：http://csslint.net/

CSSLint 是一個用來幫你找出CSS 程式碼中問題的工具，它可做基本的語法檢查以及使用一套預設的規則來檢查程式碼中的問題，規則是可以擴展的。

4、JSON Formatter & Validator

在無格式JSON 中，我們很難發現文法錯誤或鍵值不正確的情況，因為它很難閱讀。當 JSON 檔案缺少行回傳和空格時，在壓縮的 JSON 檔案中讀取和發現錯誤則更有挑戰性。

你可以使用 JSON 格式化和校驗工具，簡單地插入經過壓縮的 JSON 並獲得正確格式的版本作為輸出。此外，該工具還可以根據 RFC 標準來驗證 JSON。

5、Sentry

####網址：https://sentry.io/welcome/## ####無論測試如何完善的程序，bug總是免不了會存在的，有些bug不是每次都會出現，測試時運行好好的代碼可能在某個用戶使用時就歇菜了，可是當程序在用戶面前崩潰時，你是看不到錯誤的，當然你會說:”Hey, 我有記日誌呢」。但是說實話，程式每天每時都在產生大量的日誌，而且分佈在各個伺服器上，並且如果你有多個服務在維護的話，日誌的數量之多你是看不過來的吧。等到某天某個用戶實在受不了了，打電話來咆哮的時候，你再去找日誌你又會發現日誌其實沒什麼用：缺少上下文，不知道用戶什麼操作導致的異常，異常太多（從不看日誌的緣故）不知如何下手等等。 ######Sentry就是來幫我們解決這個問題的，它是是一個即時事件日誌記錄和聚合平台。它專門用於監視錯誤和提取執行適當的事後操作所需的所有信息, 而無需使用標準用戶反饋循環的任何麻煩。 ###

Sentry是一個日誌平台, 它分為客戶端和服務端，客戶端(目前客戶端有Python, PHP,C#, Ruby等多種語言)就嵌入在你的應用程式中間，程式出現異常就向服務端發送訊息，服務端將訊息記錄到資料庫中並提供一個web節目方便查看。 Sentry 由 python 編寫，原始碼開放，性能卓越，易於擴展，目前著名的用戶有Disqus, Path, mozilla, Pinterest等。

6、JSHint

#網址：https://jshint.com/

JSHint 是一個Javascript 程式碼分析偵測工具，不僅可以幫助我們偵測到JS 程式碼錯誤和潛在問題，也能幫助我們規範程式碼開發。

JSHint 掃描一個用JavaScript寫的程序，並報告常見的錯誤和潛在的bug。潛在的問題可能是語法錯誤、隱式類型轉換導致的錯誤、洩漏變數或其他完全的問題。

JSHint 掃描用 JavaScript 寫的程序，並報告常見的錯誤和潛在的錯誤。潛在的問題可能是語法錯誤，由於隱式類型轉換導致的錯誤，變數洩漏或其他完全原因。

下面是一個範例函數，使用它來查看JSHint 的運行情況：

7、BrowserStack

網址：https://www.browserstack.com/

現在各自核心的瀏覽器越來越多，各自的特性也千差萬別。如果身為一個前端攻城師想要偵測網站在不同的作業系統和行動平台下的各種瀏覽器的兼容性，那是相當痛苦不堪的。看到有在自己電腦上裝虛擬機配置各種環境，有自己的電腦上組建好這樣的環境，然後一一測試，可是人的精力畢竟有限，我們沒法在同一台電腦上裝那麼多系統，那麼多瀏覽器的。幸好出了個 BrowserStack 是前端的福音呀。

BrowserStack 是一款提供網站瀏覽器相容性測試的線上雲端測試工具，從而開發測試人員不必再準備很多虛擬機器或手機模擬器。

BrowserStack 是提供網站瀏覽器相容性測試的線上雲端應用，支援9大作業系統上的100多個瀏覽器。支援本機測試，支援與Visual Studio整合。或者你也可以直接前往http://modern.ie 線上測試，現在註冊可以免費試用三個月，三個月後是收費的，三個月後要是你想用又不想付費作為天朝的開發者你懂得。

8、whistle

#引用官方的定義

whistle ，拼音[wēisǒu])基於Node 實現的跨平台web 調試代理工具，類似的工具有Windows 平台上的Fiddler，主要用於查看、修改HTTP、HTTPS、Websocket 的請求、回應，也可以作為HTTP 代理伺服器使用，不同於Fiddler 透過斷點修改請求回應的方式，whistle 採用的是類似配置系統hosts 的方式，一切操作都可以透過設定實現，支援網域名稱、路徑、正規表示式、通配符、通配路徑等多種匹配方式，且可以透過Node 模組擴充功能

總的來說，whistle 有以下幾個特性

• ##基於Node 實現，跨平台web 偵錯代理工具，window，Linux，Mac 都可以使用

• 用於查看、修改HTTP、HTTPS、Websocket 的請求、回應，也可以作為HTTP 代理伺服器使用

• whistle 採用的是類似配置系統hosts 的方式，一切操作都可以透過設定實現

• 可以透過Node 模組擴充功能

為什麼選擇whistle？

第一，whistle 是一個 web 偵錯代理工具，它的功能十分強大。作為一個前端，我們需要經常跟協定中的應用層打交道，Mock 資料、跨域問題、cookie 的修改、行動裝置調試等等，都是我們必備的技能，而whistle 就能解決其中90% 的問題

個人經常使用的一些場景如下：

• 綁定Host

• 取代請求（Mock 資料）

• 使用Weinre 或vConsole 偵錯行動裝置頁面

• #修改cookie

##往HTML 中插入樣式
在HTML 中插入腳本
...
以下為官方的圖，大家可以感受一下

第二，除了功能十分強大，使用也十分便捷，只需要簡單的命令就能打開網頁進行抓包等操作

第三，不像window 中的Fidder 需要消耗大量CPU，也不像Mac 中Charles 不是免費的，它是免費的，開源的，而且一個跨平台web 調試代理工具

第四，基於Node 模組實作。可以透過Node 模組進行擴充

以上，還沒說服你的話，希望接下來的實戰能讓你感受它的強大

（學習影片分享：web前端）

以上是web前端用什麼調試工具的詳細內容。更多資訊請關注PHP中文網其他相關文章！