我可以直接从 chrome DevTools 编辑我的 angular 项目的 CSS 文件吗? [英] Can I edit my angular project's CSS files directly from chrome DevTools?

问题描述

使用默认视图封装(模拟)在浏览器开发工具中设置组件样式的最有效方法是什么?

我目前的工作流程涉及从开发工具中进行大量繁琐的复制和粘贴，如下所示:

Chrome 开发工具能够将在 DOM 上所做的样式更改保存到源 css 文件 (

这样你会在检查中看到 css 文件，而不是头部中的内部样式标签(您可以在下面的第 3 步中看到示例图片).

2. 打开 chrome devtools，Sources 选项卡，Filesystem left 选项卡并添加您的项目文件夹:

这就是魔术，它可以让你从 devtools 编辑你的本地文件！

3. 现在，当您检查 html 的 css 时，您可以单击 css 文件，您将被重定向到本地文件:

4. 编辑对文件的更改.

5. 保存文件.

魔法！您的本地文件已被修改！

我喜欢 Chrome！

干杯

What is the most efficient way to style components in the browser dev tools with the default view encapsulation (emulated)?

My current workflow involves a lot of tedious copying and pasting from the dev tools like this:

Chrome dev tools has the ability to save styling changes made on the DOM to the source css file (Save Changes To Disk With Workspaces), but I don't know if this will work with the way Angular and Webpack use emulated component styles.

There's got to be a quicker workflow than what I am currently doing. Any tips?

解决方案

You can directly edit your css project files from chrome devtools. Follow this steps:

1. In angular.json add "extractCss": true like so:

This way you'll see the css files in inspection instead of inner style tags in header (you can see an example image in step 3 below).

2. Open chrome devtools, Sources tab, Filesystem left tab and add your project folder:

This is the magic trick, this will let you edit your local files from devtools!

3. now when you inspect your html for css, you can click the css file and you'll be redirected to your local file:

4. Edit your changes to the file.

5. Save the file.

Magic! Your local file was modified!

I LOVE Chrome!

Cheers

这篇关于我可以直接从 chrome DevTools 编辑我的 angular 项目的 CSS 文件吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！