[英]Chrome extension development with Angular: how to include source maps
On Windows 10 I have this pesky issue that Chrome is not allowing me to pull map files that start with the chrome-extension protocol handler:在 Windows 10 我有这个讨厌的问题,Chrome 不允许我提取以 chrome 扩展协议处理程序开头的 map 文件:
DevTools failed to load SourceMap: Could not load content for chrome-extension://ophhkjncpgcjadncildcofemdojplgpp/main.js.map: HTTP error: status code 404, net::ERR_UNKNOWN_URL_SCHEME
DevTools 无法加载 SourceMap:无法加载 chrome-extension://ophhkjncpgcjadncildcofemdojplgpp/main.js.map 的内容:HTTP 错误:状态代码 404,net::ERR_UNKNOWN_URL_SCHEME
How can I debug my Angular based Chrome Extension web page?如何调试基于 Angular 的 Chrome 扩展 web 页面?
Tested with Chrome 89 and 90. Using Angular 11.使用 Chrome 89 和 90 进行测试。使用 Angular 11。
Using https://github.com/larscom/ng-chrome-extension as a starter project.使用https://github.com/larscom/ng-chrome-extension作为入门项目。
I was able to inline the map files into the generated javascript files.我能够将 map 文件内联到生成的 javascript 文件中。 The Angular cli itself does not provide a configuration setting to enforce this behavior.
Angular cli 本身不提供配置设置来强制执行此行为。 I applied
ngx-build-plus
:我应用
ngx-build-plus
:
npm i -D ngx-build-plus
Apply the schematics to your Angular project:将原理图应用于您的 Angular 项目:
ng add ngx-build-plus
Add an ngx-build-plus plugin file to your project, eg with the name build-customization-plugin.js
:将 ngx-build-plus 插件文件添加到您的项目中,例如名称为
build-customization-plugin.js
:
const { mergeWithCustomize, customizeObject } = require('webpack-merge');
const webpack = require("webpack");
exports.default = {
config: function (cfg) {
// first, we replace devtool in the webpack used by the angular cli to have the value 'inline-source-map'
const strategy = mergeWithCustomize({
customizeObject: customizeObject({
'devtool': 'replace'
})
});
const result = strategy(cfg, {
devtool: 'inline-source-map'
});
// then we find SourceMapDevToolPlugin and remove it
// This is because we should never use both the devtool option and plugin together.
// The devtool option adds the plugin internally so you would end up with the plugin applied twice.
// See https://webpack.js.org/configuration/devtool/
const index = result.plugins.findIndex((plugin) => {
return plugin instanceof webpack.SourceMapDevToolPlugin;
});
result.plugins.splice(index, 1);
return result;
}
}
Run the Angular cli with an additional --plugin
parameter:使用附加的
--plugin
参数运行 Angular cli:
ng build --plugin ~build-customization-plugin.js
The tilde (~) is enforcing ngx-build-plus to look into the current directory instead of resolving to a node module.波浪号 (~) 强制 ngx-build-plus 查看当前目录,而不是解析到节点模块。
Package.json entries: Package.json 条目:
Note: My solution is based out of an example that was using merge.strategy
.注意:我的解决方案基于使用
merge.strategy
的示例。 This resulted in a runtime error merge.strategy is not a function
.这导致运行时错误
merge.strategy is not a function
。 I guess webpack-merge
has changed its API when moving from major version 4 to 5. 5.0.0 became available around August 2020.我猜
webpack-merge
在从主要版本 4 迁移到 5 时更改了其 API。5.0.0 于 2020 年 8 月左右推出。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.