前端代碼開發調試工具怎麼用,前端 調試

本文目錄一覽：

• 1、前端開發是怎麼調試的
• 2、前端有哪些好用的調試工具
• 3、如何進行html調試和js腳本調試
• 4、前端怎麼在chrome進行調試
• 5、一般程序員做前端代碼開發時用什麼工具寫代碼？

前端開發是怎麼調試的

如果是網頁開發的話呢 可以使用瀏覽器的f12 開發人員工具調試。如果是安卓或者ios呢可以抓包獲取接口請求信息，或者使用日誌輸出來檢測。

前端有哪些好用的調試工具

Postman

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

CSS Lint

你不僅可以使用CSS Lint工具驗證代碼，還可以使用它選擇要測試的錯誤和警告。它執行基本的語法檢查，並對代碼應用一組規則，以查找有問題的模式或低效的跡象。

JSON格式和驗證器

在未格式化的JSON中，很難發現語法錯誤或值不正確的鍵，因為它很難讀取。當縮小的JSON文件中有缺行返回沙空格時，讀取和發現錯誤可能很有挑戰性。你需要能夠快速掃描該對象並檢查格式或內容中的錯誤。

Sentry

一旦你發佈了你的應用程序，它將會運行在一系列的設備上。在任何軟件開發生命周期中，測試階段都是作為一個標準過程實現的。該階段包括單元測試、系統測試、集成測試等。

JSHint

這是一個在JS代碼中檢測錯誤和潛在問題的工具,靜態代碼分析工具(如JSHint)可以幫助開發人員發現很難發現的問題。JSHint掃描一個用JavaScript編寫的程序，並報告常見的錯誤和潛在的bug。潛在的問題可能是語法錯誤、隱式類型轉換導致的錯誤、泄漏變量或其他完全的問題。

BrowserStack

BrowserStack是一組工具，可以幫助你模擬用戶所經歷錯誤的確切環境。設備+操作系統+瀏覽器是一個非常大的組合，這時這個工具的使用就顯得十分必要了。輔助使用Sentry等錯誤記錄工具，你可以充分發揮該工具的作用。

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

工具/原料

chrome瀏覽器   Mozilla firefox   電腦

方法/步驟

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

2、選擇指定的dom節點進行查看和編輯。

3、js斷點調試：chrome非常強大，在chrome調試工具欄中，你可以進行js斷點調試以及格式化查看（一些大型的門戶網站都會將js壓縮成無任何格式的代碼這在研究時特別費勁）：我先寫一段簡單的js代碼：function debug(){for (var i=0;i10;i++){alert(i);}調試截圖如下：

4、js ajax調試，ajax技術如今越來越頻繁使用，所以，ajax調試也必不可少：在chrome調試工具中，可以查看到當前頁面所以的請求，包括ajax請求，以下是頁面打開後所有發起的請求。

前端怎麼在chrome進行調試

打開Google瀏覽器，打開任意一個網頁，這裡以百度首頁為例

按下F12鍵，能看到會彈出如下圖所示的對話框

鼠標右鍵需要修改的地方

可以看到需要改動的地方，對應區域的CSS樣式都在右側區域顯示

鼠標左鍵單擊箭頭所指區域，可添加所需的樣式，並且可以實時的顯示出來，當不需要時，去掉勾選即可，也可以直接按刪除，製表符Tab可以自動補全屬性名稱

可以根據標籤的id或者class值獲取其屬性，當提示undefined時，就需要查看是否存在這個標籤值

下圖顯示的是進入網頁所需的文件，同樣的可以在裏面直接修改，但不會保存到本地文件中

8

下面才是調試的重頭戲，以12306購票網為例，按下F12，打開需要調試的JS文件，在行開頭單擊鼠標左鍵，打下斷點，如下圖所示。快捷鍵F11是進入下一步，shift+F11跳出進入下一步，F8跳到下一個斷點，這樣就可以看到每一步程序運行所顯示的結果，此時可以用步驟6用到的方法來查看標籤的屬性

一般程序員做前端代碼開發時用什麼工具寫代碼？

1、Bootstrap

Bootstrap是快速開發Web應用程序的bai前端工具包。它是一個CSS和HTML的集合，它使用了新的瀏覽器技術，給你的Web開發提供了時尚的版式，表單，buttons，表格，網格系統等等。

2、藍湖

藍湖用於查看標註和切圖下載非常方便

3、Cloud9IDE

Cloud9IDE是一個基於Node.JS構建的JavaScript程序開發WebIDE。它擁有一個非常快的文本編輯器，支持為JS，HTML，CSS和這幾種的混合代碼進行着色顯示。Cloud9IDE還為node.js和GoogleChrome集成調試器，可以在IDE中啟動、暫停和停止。

4、Notepad++

Notepad++是一款非常有特色的編輯器，是開源軟件，可以免費使用。我們開發人員都是必備的。支持的語言:C,C++,Java,C#,XML,HTML,PHP,Javascript!

5、VisualStudioCode

VisualStudioCode是一個運行於OSX，Windows和Linux之上的，針對於編寫現代web和雲應用的跨平台編輯器。

6、GIMP

GIMP是GNU圖像處理程序(GNUImageManipulationProgram)的縮寫。包括幾乎所有圖象處理所需的功能，號稱Linux下的PhotoShop。GIMP在Linux系統推出時就風靡了繪圖愛好者圈。

7、SecureHeaders

SecureHeaders是Twitter送給Web開發者的一份大禮，作為一款Web安全開發工具，Secureheaders能夠自動實施安全相關的header規則，包括內容安全政策(CSP)，防止XSS、HSTS等攻擊，防止火綿羊(Firesheep)攻擊以及XFO點擊劫持等。

8、Fontello

Fontello是個圖標字體生成器。這個工具允許用戶把這些圖標web字體放到自己的項目中。主要特性如下：縮小字形集合，減小字體大小;合併一些字體標記到單個文件中；訪問大量專業級的開源圖標。