chrome 72更改了源地图的行为 [英] chrome 72 changes sourcemap behaviour

问题描述

我正在为Chrome开发Webextension，代码是用Typescript编写的，所以我需要源地图.

I'm developing a Webextension for Chrome, the code is written in Typescript, so I need sourcemaps.

该扩展程序与ParcelJS捆绑在一起，但我认为我的问题与捆绑器无关.

The extension is bundled with ParcelJS, but I believe that my problem is not related to the bundler.

从Chrome 70更新到72后，源地图不再起作用.作为最小的示例，我可以使用以下代码在MacOS 14和Ubuntu 18.04，Chrome 72上重现该问题.

After updating from Chrome 70 to 72, sourcemaps no longer work. As a minimal example, I can reproduce the problem on MacOS 14 and Ubuntu 18.04, Chrome 72 with the following code.

此问题似乎仅适用于Chrome72.不幸的是，在撰写本文时，这是当前的稳定版本:

This problem seems to be isolated to Chrome 72. Unfortunately, at the time of writing, that's the current stable version:

• 版本73.0.3683.27(正式内部版本)测试版(64位)，没问题
• 版本71.0.3578.98(官方内部版本)稳定的Chromium 64位，没问题
• 版本72.0.3626.96(正式版本)(64位)不起作用

为方便起见，我建立了一个github仓库.克隆它并运行以下命令(对不起，我不确定您是否需要在全球范围内安装包裹捆绑器.为方便起见，我总是这样做)

For convenience, I have set up a github repo. Clone it and run the following commands (sorry, I'm not sure if you need to install the parcel bundler globally. I always do that for convenience)

git clone https://github.com/lhk/contentscript_smap.git
cd contentscript_smap
# npm install -g parcel-bundler 
npm install -d
parcel build manifest.json

要遵循Stackoverflow规则(如果您链接到代码，则还应该在问题中包含它，该链接有时可能会断开):

To follow the Stackoverflow rules (if you link to code, you should also include it in your question, the link might go down at some point):

content.ts:

console.log('log from typescript')

manifest.json:

{
    "manifest_version": 2,
    "name": "sourcemaps messed up",
    "version": "0.0.1",
    "description": "",
    "author": "",
    "content_scripts": [
        {
            "matches": [
                "<all_urls>"
            ],
            "js": [
                "./content.ts"
            ]
        }
    ],
    "permissions": [
        "activeTab",
        "<all_urls>"
    ]
}

package.json:

{
  "name": "contentscript_smap",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/lhk/contentscript_smap.git"
  },
  "author": "",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/lhk/contentscript_smap/issues"
  },
  "homepage": "https://github.com/lhk/contentscript_smap#readme",
  "dependencies": {
    "parcel-bundler": "^1.11.0",
    "parcel-plugin-web-extension": "^1.5.1",
    "typescript": "^3.3.3"
  }
}

Parcel将捆绑扩展并生成一个dist/文件夹，您可以从该文件夹中将其安装在Firefox和Chrome中.

Parcel will bundle the extension and produce a dist/ folder, from there you can install it in Firefox and Chrome.

Firefox运行良好(查看对内容 .TS 的源代码引用):

Firefox works nicely (look at the sourcecode reference to content .TS ):

Chrome找不到源地图:

Chrome doesn't find the sourcemap:

不仅仅是控制台仅显示编译的源代码，而不是显示源映射的原始源代码.我根本无法在Chrome中找到打字稿代码.

And it's not just that the console simply displays the compiled source instead of the sourcemapped original source. I can't find the typescript code in Chrome at all.

推荐答案

对我来说，这是解决问题的方法.

For me here's what solved the issue.

1. 使用 webpack配置更改devtool : "source-map" -> "eval-source-map" mode : "development".

添加 manifest.json

除此之外，还请确保您确实通过单击 Chrome Devtools中的将文件夹添加到工作区，将您的源文件夹(不是由webpack生成的dist)链接到chrome devtools- >来源->文件系统.

Apart from this, also make sure that you do link your Source Folder ( not dist generated by webpack ) with chrome devtools by clicking on Add folder to your workspace in the Chrome Devtools -> Sources -> FileSystem.

恐怕我没有足够的时间去研究如何解决此问题.也许以后我会通过适当的推理来更新答案.

I am afraid I don't have enough time to delve into how this fixed the issue. Maybe I'll update the answer later with proper reasoning.

这篇关于chrome 72更改了源地图的行为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！