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')
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。
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" -> "eval-source-map"
更改为
mode : "development"
.
添加 manifest.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 更改源映射行为的主要内容,如果未能解决你的问题,请参考以下文章
NodeJs:Chrome 检查器可以映射源但无法在原始源上调试