VSCode 源映射顯然不起作用

Question

我試圖在 VSCode 上調試 chrome 擴展，在嘗試中我注意到斷點不適用於腳本（例如 background.js）； 所以我用谷歌搜索了一些帖子並嘗試了一些，最后我不知道出了什么問題。

我的 chrome 項目上的 .vscode/launch.json

{
    "version": "0.2.0",
    "configurations": [
        
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:8291",
            "runtimeArgs": ["--load-extension=${workspaceFolder}"], 
            "runtimeExecutable": "C:/Program Files (x86)/Google/Chrome/Application/chrome.exe",

            "webRoot": "${workspaceFolder}",
            "breakOnLoad": true,
            "sourceMaps": true,
            "sourceMapPathOverrides": {
                "*": "${webRoot}/*"
            }
        }
    ]
}

最初我沒有 webRoot、breakOnLoad、sourceMaps、sourceMapPathOverrides 屬性，但在閱讀了文檔和帖子（鏈接下方）之后，我添加了這些屬性。

我提到的帖子： 使用 Visual Studio 代碼（vscode 1.19+）解決“斷點被忽略”Chrome 調試器 | 通過阿南托·戈什 | 前端周刊 | 中等的

我還注意到我有一個已棄用並建議卸載的 vscode-chrome-debug 擴展，我確實卸載了。 （所以確保不會發生任何進一步的棘手問題）

項目上的文件樹：

├── .vscode 
├── background.js
├── bookmarklet.js
├── content.js
├── dialog.html
├── dialog.js
└── manifest.json

現在鍵入 F5 鍵運行項目，打開 chrome，打開開發工具並導航到源選項卡並檢查項目文件是否正確顯示......不，沒有。 （當然斷點還不能像我預期的那樣工作）

在我看來（因為 SO 條款，這不是一個問題，你不需要回答）：

• sourceMap 到底是什么鬼？ 我是否需要在 F5 之前手動創建那個 sourceMaps 東西？ 如果是這樣，醫生到底在哪里？
• URL localhost 有什么用？ 我想確保只指定一個端口就足夠了，對吧？ 還是我需要在 F5 運行之前啟動服務器或其他東西？ 那服務器到底是什么東西。

那么，project/launch.json 有什么問題呢？

Answer 1

你問 *sourceMaps 到底是什么？ 我是否需要在 F5 之前手動創建那個 sourceMaps 東西？ 如果是這樣，醫生到底在哪里？

第一個的答案。 盡管 JavaScript 確實需要編譯，但它通常也是如此。 編譯是刪除空白並使用其他代碼優化其他技巧的過程，以使您的 JavaScript 更快更小，但這會提高可讀性。 sourcemaps 做它聽起來的事情，它將已編譯的代碼映射到已編譯的源代碼。

2樓的答案。

是和不是。 如果您要自己編譯 javascript，則確實需要制作源映射，但這通常使用 webpack、esbuild 或您使用的任何編譯器來完成。 如果包是為你編譯的，你可能不得不去看看你從哪里得到腳本的地方應該有編譯版本。

你最后一個文檔的答案應該是你正在使用的編譯器。