chrome 72 更改源映射行为

Posted

技术标签:

【中文标题】chrome 72 更改源映射行为【英文标题】:chrome 72 changes sourcemap behaviour 【发布时间】:2019-07-07 05:52:15 【问题描述】:

我正在为 Chrome 开发一个 Webextension,代码是用 Typescript 编写的,所以我需要 sourcemaps。

扩展与 ParcelJS 捆绑,但我认为我的问题与捆绑器无关。

从 Chrome 70 更新到 72 后,源映射不再工作。作为一个最小的例子,我可以使用以下代码在 MacOS 14 和 Ubuntu 18.04、Chrome 72 上重现该问题。

这个问题似乎与 Chrome 72 无关。不幸的是,在撰写本文时,这是当前的稳定版本:

版本 73.0.3683.27(官方构建)测试版(64 位),没问题 版本 71.0.3578.98(官方构建)稳定 Chromium 64 位,没问题 版本 72.0.3626.96(官方版本)(64 位),不起作用

为方便起见,我建立了一个 github repo。克隆它并运行以下命令(抱歉,我不确定您是否需要全局安装包裹捆绑器。为了方便,我总是这样做)

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

要遵循 *** 规则(如果您链接到代码,您还应该将其包含在您的问题中,链接可能会在某个时候失效):

content.ts:

console.log('log from typescript')

ma​​nifest.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。

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

Chrome 找不到源地图:

这不仅仅是控制台简单地显示编译的源而不是源映射的原始源。我在 Chrome 中根本找不到打字稿代码。

【问题讨论】:

创建一个快速复制并打开一个 crbug? 好主意,这里是链接:crbug.com/931675 @ihk,有同样的问题。你能解决吗。我目前也在使用打字稿进行 chrome 扩展,突然源地图停止工作,而我这边没有任何改变。与您不同,我什至无法更新版本 73。 @bhavya_w 我已经添加了答案,希望对您有所帮助。 【参考方案1】:

Firefox 也有类似的问题:Sourcemaps 无法在弹出和后台脚本中加载。 docs 中甚至提到了这一点,解决方法是将源地图托管在本地网络服务器上。

所以我对此进行了试验,发现它可以解决我的 Chrome 问题。希望您可以通过以下步骤重现它:

安装本地https服务器,如local-web-server:npm install local-web-server 将您的系统配置为信任此服务器的证书:https://github.com/lwsjs/local-web-server/wiki/How-to-get-the-%22green-padlock%22-using-the-built-in-certificate 编辑扩展清单以信任本地主机服务器:"content_security_policy": "script-src 'self' https://127.0.0.1:8000/; object-src 'self'" 将扩展程序中的路径设置为本地主机,您可以使用 parcel 进行此操作:parcel build src/manifest.json --public-url=https://127.0.0.1:8000/ cd dist/ws -https 设置本地服务器

现在在 Chrome 中重新加载扩展程序并且它可以工作(好吧,至少对我来说)。

【讨论】:

【参考方案2】:

对我来说,这就是解决问题的方法。

    webpack 配置 中的 devtool : "source-map" -&gt; "eval-source-map" 更改为 mode : "development".

    添加 ma​​nifest.json

    中的"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"

除此之外,还要确保通过单击 Chrome Devtools 中的 Add folder to your workspace 将源文件夹(不是由 webpack 生成的 dist )与 chrome devtools 链接 - > 来源 -> 文件系统

恐怕我没有足够的时间来深入研究这是如何解决问题的。也许我稍后会用适当的推理更新答案。

【讨论】:

谢谢,它解决了我在 Chrome 73.0.3683.103 上的源地图问题

以上是关于chrome 72 更改源映射行为的主要内容,如果未能解决你的问题,请参考以下文章

Chrome 开发工具未映射 ts 源

我可以在 chrome 扩展中启用源映射吗?

我可以在 chrome 扩展中启用源映射吗?

NodeJs:Chrome 检查器可以映射源但无法在原始源上调试

使用 webpack-2 在 chrome 中检测到源映射但未加载原始源

Chrome 不读取由 elixir browserify 生成的源映射