VSCODE 擴展之 Debugger for Firefox 的使用

有什么用?

• 可以讓你在 VSCODE 里打的斷點在瀏覽器中可用

• 運行時發生的錯誤在 VSCODE 中可以更直觀的發現

安裝 Debugger for Firefox

配置

1. 在項目根目錄的.vscode目錄(沒有則新建)中新建launch.json.

2. 基本配置項,針對Vue項目

{
  "configurations": [
    {
      "type": "firefox",
      "request": "launch",
      "name": "開始調試", // 項目名字,自己定義
      "url": "http://localhost:8080", // 打開調試瀏覽器的首頁
      "webRoot": "${workspaceFolder}/src",
      "pathMappings": [{ "url": "webpack:///src/", "path": "${webRoot}/" }],
      "profile": "dev-edition-default" // 瀏覽器的用戶檔案,見下文
    }
  ]
}

將上面的代碼復制到 launch.json 中.

module.exports = {
  configureWebpack: {
    devtool: 'source-map'
  }
}

將上面的代碼復制到 vue.config.js 中

3. 關於 profile

其實去掉profile這個屬性是完全可以正常調試的

但會發現每次都是打開一個全新的瀏覽器,自定義的瀏覽器設置全部變為默認,甚至擴展都沒有了(Vue Devtools也沒有了)

那么就需要用到這個設置了

profile 是配置使用哪個設定檔案的.因為火狐瀏覽器的設置可以存為多份,這個就是設置使用哪一份的.

在火狐的地址欄中輸入about:profiles即可查詢出所有的檔案

然后選擇要使用哪個設定檔案,把名字填入profile中即可.我使用的是dev-edition-default,你也可以自己新建一份.

目前發現的問題

瀏覽器的密碼填充功能在調試模式下不會自動運行,每次都需要重新設置

參考

https://github.com/firefox-devtools/vscode-firefox-debug/issues/45