本文提到的前端調(diào)試并不是在瀏覽器的開發(fā)者工具里進行斷點調(diào)試筐付，而是在 VSCode 中以斷點的形式進行代碼跟蹤調(diào)試沪停。
前端調(diào)試配置
- 安裝調(diào)試插件
Debugger for chrome或者Debugger for firefox - 添加配置文件
.vscode/launch.json - 修改 webpack 配置
devtool: 'source-map' - 啟動項目
npm run dev - 運行調(diào)試
Launch.json 文件配置項
{
"version": "0.2.0",
"configurations": [
{
/**
* 配置名稱
*/
"name": "debugger",
/**
* 瀏覽器的遠(yuǎn)程調(diào)試端口
* firefox不需要設(shè)置
*/
"port": 9220,
/**
* 項目地址渴庆，request 為 attach 時地址必須在瀏覽器已打開
*/
"url": "http://localhost:3001/home",
/**
* 運行模式：
* attach 附加模式苍糠，需要打開瀏覽器遠(yuǎn)程調(diào)試模式
* launch 啟動模式
*/
"request": "attach",
/**
* 調(diào)試環(huán)境，需要安裝對應(yīng)插件
* chrome 谷歌瀏覽器
* firefox 火狐瀏覽器
*/
"type": "chrome",
/**
* 路徑映射稠鼻，定位斷點位置
* ${workspaceFolder} 本地項目的根目錄
* chrome 瀏覽器使用 sourceMapPathOverrides 配置
* firefox 瀏覽器使用 pathMappings 配置
*/
"sourceMapPathOverrides": {
"webpack:///src/*": "${workspaceFolder}/src/*"
},
"pathMappings": [
{
"url": "webpack:///src/",
"path": "${workspaceFolder}/src/"
}
]
}
]
}
- 本地運行時瀏覽器上文件路徑查看
10-133526
瀏覽器遠(yuǎn)程調(diào)試模式
-
Chrome
方式一：在瀏覽器目錄下運行cmd命令（端口號可以自定義設(shè)置）
chrome.exe --remote-debugging-port=9220方式二：右鍵設(shè)置瀏覽器屬性
--remote-debugging-port=922010-104826
設(shè)置成功時：打開瀏覽器冈止，訪問 localhost:9220 可以打開 Inspectable pages
10-105029
-
Firefox
需要在
about:config修改配置項配置名 設(shè)置值 描述 devtools.debugger.remote-enabled（必須） true 啟用瀏覽器界面及附加組件的調(diào)試工具箱 devtools.chrome.enabled（必須） true 啟用遠(yuǎn)程調(diào)試 devtools.debugger.prompt-connection false 關(guān)閉調(diào)試連接時提示彈窗 devtools.debugger.force-local false 調(diào)試到在不同的設(shè)備上的火狐瀏覽器
方式一：在瀏覽器目錄下運行cmd命令
firefox.exe -start-debugger-server
方式二：右鍵設(shè)置瀏覽器屬性 -start-debugger-server
10-132348
設(shè)置成功時：打開瀏覽器，地址欄顏色會改變
10-134201
原文鏈接：前端調(diào)試配置
