如何在 Chrome 开发工具中获取 Map Angular CLI css 文件？

Posted 2023-03-07

【中文标题】如何在 Chrome 开发工具中获取 Map Angular CLI css 文件？

【英文标题】：How to Source Map Angular CLI css files in Chrome Dev Tools?

【发布时间】：2017-03-02 23:00:16

【问题描述】：

有没有办法源映射样式，以便在 Chrome 开发工具中进行的编辑可以持久保存到添加的本地工作区？

Chrome 开发工具在元素检查器的 <style>...</style> 标记中显示我在 styles.scss 中的所有样式。

我已经设置了 Chrome 开发工具工作区，类似于@vt5491 在他们的 SO 中的做法：https://***.com/a/37627935/1762493，我相信这适用于 .ts 文件，但元素样式不会链接回源映射元素检查，因为它们是用 ng 构建的，服务到 index.html 的 <style> 元素中。

我正在跑步ng serve -dev -p=8081 并尝试了ng serve -dev -p=8081 --aot=true，但得到了ENONET ng.factory.js missing error 我尝试将样式放入 app.component.css 与 styles.scss 我用ng build 试过这个，但它也把所有的样式都放进去 index.html's <style>

这只是当前使用 Angular CLI 的方式吗？也许调整下面的网络包？似乎为每个编译的样式表添加了<style> 标签。如果这就是 CLI 当前的工作方式，那么这可能不仅仅是一个问题，而是一个功能请求，因为我们正在正确地做前端工作，所以这样工作可以节省时间。

相关：

How to save CSS Style changes to ANGULAR 2.0 components form within Chrome Developer Tools? Angular-cli not generating typescript files with --dev option How to debug angular 2 app using angular-cli webpack?（在 WebStorm 中） SCSS SourceMap 仅指向父选择器。 github.com/angular/angular-cli Issue #2826

感谢您提供的任何建议。

【参考方案1】：

Angular-cli 使用 webpack，但它在 /node_modules/angular-cli/models 中有自己的配置文件。

您可以修改它们，但如果您升级 angular-cli，它将覆盖您的文件。所以一定要备份它们。

是的，它意味着内联<style> 标签。我同意这看起来很奇怪，应该放在一个单独的文件中，主要是这样它可以被用户缓存并减少你的视图块大小。可能他们认为内联很好，因为当您处于开发模式时您不希望它被缓存，这很好，但是在“ng build”时它应该被编译成自己的文件。

我知道你可以使用“extract-text-webpack-plugin”配置 webpack 来做到这一点，但我不太熟悉。

我希望看到 angular-cli 在构建时执行此操作，或者在配置中有一个选项。

【讨论】：

[更新]。 Angular 现在已将其内置到其构建中。正如 Serhiy 所说，您可以使用“-sm”和“-ec”选项。

"ng serve -sm -ec" 显示了 styles.bundles.css 的 css 映射，而不是 scss 或 _scss 文件的实际映射。知道如何实现吗？

@link2pk 感谢您的提问，这似乎仍然是个问题。有没有人解决了 ng serve 显示实际 SCSS 行的问题？

【参考方案2】：

当您键入 ng serve 时，默认情况下，angular cli 不包含 css 文件的 sourcemaps 文件，但您可以通过键入此命令来包含它

ng 服务 -sm -ec

或

ng serve --sourcemap --extractCss

我使用 Angular Cli -v 1.0.3，以及更多信息 - Angular CLI special cases

【讨论】：

在 AngularCLI 1.3.0 ng serve -sm -ec 有效，但 ng serve --sourcemap --extractCss 无效。

嗨，辛达斯。很奇怪。我更新了 AngularCLI 1.3.2 并且一切正常。

检查您的 AngularCLI 版本。我不确定它在较新版本的 AngularCLI 中是否能正常工作。我测试了 Angular CLI 1.3.2 版，一切正常。

普通版本是ng serve --sourcemap --extract-css

@link2pk 嗨，我知道这个问题。这是 AngularCLI 内部的一个问题。我将 AngularCLI 更新到 1.5.0 版，并且 scss 的 sours 地图无法正常工作。