针对你这种Angular 5打包压缩后的场景，这几个实用方法能帮你快速把DevTools里的CSS修改整理出来：

方法1：用DevTools自带的Changes面板（最推荐） #

这是Chrome官方专门做的修改追踪工具，完美适配你的需求：

• 打开DevTools，按下Ctrl+Shift+P（Windows/Linux）或Cmd+Shift+P（Mac）调出命令面板，输入Show Changes并回车，就能打开Changes面板。
• 面板里会清晰列出你所有在DevTools中做的CSS修改：左侧显示原始代码，右侧是你修改后的内容，还会标注对应的选择器和属性。
• 你可以右键单条修改项选择Copy modification复制单个修改；或者右键面板空白处，选Copy all modifications一次性导出所有修改内容。
• 如果你的Angular项目开启了source map（打包时一般默认开启），Changes面板还会直接关联到本地的原始样式文件（比如.scss），能精准看到修改对应到项目里的哪个文件哪一行，省超多时间！

方法2：在Styles面板筛选修改的样式 #

如果你想逐个查看并复制修改内容，可以用这个更直观的方式：

• 打开DevTools的Elements面板，切换到右侧的Styles侧边栏。
• 在Styles面板顶部的筛选框里输入modified，此时面板只会显示你修改过的CSS规则。
• 每个被修改的属性旁边会有蓝色小圆点标记，右键点击规则就能选择Copy rule复制整个修改后的规则，或者直接选中属性值单独复制。

方法3：用Console脚本批量导出（适合进阶需求） #

如果你需要把修改整理成结构化格式（比如JSON），可以在DevTools的Console里执行这段脚本：

// 获取所有CSS修改并复制到剪贴板
const changes = await InspectorFrontendHost.getPreferences('css.modifications');
const changesText = changes.map(c => `${c.selector} { ${c.property}: ${c.value}; }`).join('\n');
copy(changesText);

注意：这个API依赖DevTools的默认设置，如果你改过实验性配置可能会失效，还是前两种方法更稳妥。

额外提示 #

• 如果项目没开source map，打包后的CSS是压缩状态，复制的修改内容里的选择器会是压缩后的短代码，你可以用Chrome的Ctrl+F搜索功能，在Sources面板的打包CSS文件里定位到对应位置再修改。
• 修改本地样式文件后记得刷新页面验证，避免Angular的样式优先级规则导致修改不生效。

内容的提问来源于stack exchange，提问作者S. Robijns