Chrome扩展程序:未加载源地图

Shy*_*ikh 5 javascript google-chrome-extension google-chrome-devtools source-maps webpack

由于某种原因,我无法在Chrome扩展程序中加载源地图。

正在为Chrome扩展程序加载的文件夹位于文件.map旁边.js。该.js文件的行//# sourceMappingURL=1.9215106f1980d05d2b4c.js.map引用.map文件路径。

但是,由于某些原因,Chrome开发者工具无法加载地图。

我仔细检查了Chrome设置,以确保js源地图已打开并且正在使用简单的Angular项目。

另外,请确保清单文件中包含以下内容:

  "web_accessible_resources":[
    "*.map"
  ],
Run Code Online (Sandbox Code Playgroud)

moc*_*cha 1

注意力!该代码适用于开发目的,不适用于生产环境,因为它使用了 eval。Mozilla 建议不要使用此功能。

在 webpack.config.js 中设置以下属性对我有用:

module.exports = {
    //Configuration parameters

    devtool: 'eval-source-map',

    //Other configuration parameters
}
Run Code Online (Sandbox Code Playgroud)

编辑:您还必须更新manifest.json以允许eval

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
Run Code Online (Sandbox Code Playgroud)

devTool 样式列表: https://webpack.js.org/configuration/devtool/#devtool

webpack.config.js 解释: https: //webpack.js.org/configuration/

  • 这可能不再适用于清单 v3,因为不可能包含 `unsafe-eval` (2认同)