在Ubuntu中調試前端JavaScript代碼,主要有以下兩種常用方法:
一、使用瀏覽器開發者工具
- 打開瀏覽器:使用Chrome或Firefox瀏覽器訪問目標網頁。
- 打開開發者工具:右鍵點擊頁面元素,選擇“檢查”(或按F12)。
- 調試代碼:
- 在“Sources”(源代碼)選項卡中找到對應的JS文件,點擊行號添加斷點。
- 刷新頁面或觸發事件,代碼執行到斷點時會暫停,可查看變量值、調用堆棧等。
二、使用Node.js調試器(適用于服務端JS)
- 添加斷點:在代碼中插入
debugger;語句。
- 啟動調試模式:
- 終端運行:
node --inspect your_script.js(--inspect啟用調試,可指定端口如--inspect=9229)。
- 或使用
node inspect命令(舊版本)。
- 連接調試工具:
- 打開Chrome瀏覽器,輸入
chrome://inspect,點擊“Open dedicated DevTools for Node”連接。
- 在DevTools的“Sources”面板中查看代碼,支持單步執行、變量監控等。
輔助工具推薦
- VS Code:安裝“Debugger for Chrome”擴展,可直接在編輯器中調試前端代碼,支持圖形化斷點和實時變量查看。
- console.log:快速定位問題,臨時輸出變量值(不推薦長期使用)。
根據需求選擇合適方式,前端代碼優先使用瀏覽器開發者工具,服務端JS則推薦Node.js調試器或VS Code。