Question

我创建了一个用.html和Typescript编写的示例浏览器扩展在Chrome，Firefox和Edge（金丝雀）中运行正常。 Typescript编译器从.ts文件生成.js和.js.map文件。

我想调试源代码，在其中可以将断点放置到打字稿代码上。我可以在Firefox中做到这一点，但不能在Chrome或Edge中做到。 Chrome和Edge注意到要添加.map和.ts文件，我只能从源中加载它们，而断点对我不起作用。

我读了以前的文章。

我尝试了manifest.json中的其他设置。

如果可以的话，我可以将整个zip附加示例扩展名。扩展名中的文件的整个列表为：background.html，background.js，background.js.map，background.ts，base.js，base.js.map，base.ts，content.js，content.js.map ，content.ts，manifest.json，popup.html，popup.js，popup.js.map，popup.ts，readme.md，tsconfig.json，tsext16.PNG，tsext19.PNG，

完整的manifest.json是

{
    "manifest_version": 2,

    "name": "Typescript Sourcemaps in Browser Extensions",
    "version": "1",
    "description": "Sourcemaps with Extensions",

    "icons": {
        "16": "tsext16.png"
    },
    "permissions": [
        "activeTab"
    ],
    "browser_action": {
        "default_icon": {
            "16": "tsext16.png",
            "19": "tsext19.png"
        },
        "default_popup": "popup.html",
        "default_title": "Typescript example popup"
    },
    "background": {
        "scripts": [
            "base.js",
            "background.js"
        ]
    },
    "content_scripts": [{
        "matches": ["http://*/*", "https://*/*"],
        "js": [
            "base.js",
            "content.js"
            ]
    }],
    "web_accessible_resources": [
        "background.js.map",
        "background.ts",
        "*"
    ]
}

查看“源”窗格时，仅显示.js文件。 .js文件的顶部，有一条消息“检测到源映射”。但是，我不知道如何以我自己的方式加载.ts文件（例如popup.ts）可以使断点起作用。我可以在任何.ts文件中标记断点如果我从“文件系统”加载它，但是执行不停止并且文件标签中显示的名称带有一个附加图标（这可能意味着 “仅供查看，未连接到调试器”），类似于“新文档”。

我可以在当前的Firefox 67中调试此示例扩展。我可以将网页的源地图获取到Chrome中。我在Windows 10和Windows 7（均为x64）上尝试过。

Answer 1

这可能是chrome bug, which I reported a year ago，并且仍处于打开状态。

要进行验证，请install chrome <=71并尝试调试。非常欢迎您在错误页面上与chrome开发人员互动。

Answer 2

对于Chrome扩展程序，映射文件分配在开发人员工具下“来源”标签下的“内容脚本”标签下。不在默认的“页面”标签下。

有所有已启用扩展的源代码，还有webpack://文件（如果源映射是使用Webpack创建的）。

还可以使用Cmd + P查找映射文件。

源地图（用于浏览器扩展）在Chrome 75，Edge 77中对我不起作用

2 个答案: