How to Edit My Angular Project's CSS Files Directly from Chrome Devtools

Can I edit my angular project's CSS files directly from chrome DevTools?

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

Working with component css files in workspaces in chrome with angular cli 6 project

@Kayce Basques, the technical writer of Chrome DevTools commented on a question similar to this one, saying:

DevTools technical writer here. The workflow that benshabatnoam posted is the best we've got. Set up a Workspace and then edit your files from the Sources panel. Editing from Elements panel > Styles pane works on basic projects, but has trouble with frameworks (such as Angular) that use sourcemaps and do a lot of build transformations. Sucks, I know, but I recall that we've looked into it in-depth and our hands are tied until sourcemap usage is standardized.

Unfortenatly the answer to your question is NO, we can't (as for today) edit the component CSS files from within Chrome dev tools with workspaces :(

How to Source Map Angular CLI css files in Chrome Dev Tools?

Angular-cli uses webpack, but it comes with its own configuration files in /node_modules/angular-cli/models.

You can modify them, but if you upgrade angular-cli it will overwrite your files. So make sure to back them up.

Yes, it is meant to go inline <style> tags. I agree that this seems weird and should be in a separate file, mainly so it can be cached by the user and reduce your views chunk size. It might be that they think inline is good as when you're in development mode you don't want it cached, which is fine, but on 'ng build' it should be compiled to its own file.

I know you can configure webpack to do that using the "extract-text-webpack-plugin", but I am not too familiar with it.

I would like to see angular-cli do that on build or have an option in the configuration for that.

How to use Chrome Workspaces to save CSS changed locally with Angular2 + webpack?

Yes, you can. Read the Webpack your Chrome DevTools Workspaces article for a detailed walkthrough of configuring your webpack config.

How to get a summary of your CSS changes in Chrome dev tools?

You can see all changes via the Changes Drawer

In Dev Tools, you can locate the Changes Drawer via either:

• A) Open Command Palette (Ctrl + Shift + P) and type "changes"

  
  
  
  

• B) Open Drawer (Esc), click on the more options menu (triple dot), and select Changes

  

Further Reading

• How to get a summary of your CSS changes in Chrome dev tools?
• Export CSS changes from inspector (webkit, firebug, etc)

Updates

• Dev Tools 98 added More precise changes to automatically pretty prints changes
• Issue #1296143 opened User-Select: none in Changes drawer makes it very hard to utilize

Telling Angular to serve `styles.css` instead of `styles.scss`

Edge

When you open up styles.scss by clicking on it in the styles tab of your devtools in Edge, you can just select the format you want in the tabs above the stylesheet it presents to you. I you can't see it you can click the >> arrows to show the option in a dropdown.

However, you will only see the global styles there. Not the component styling.

Click on the styles.scss on the right:

Select whatever presentation you prefer in the tabs:

Chrome

Go to devtools settings and disable CSS sourcemaps. (Second column, next to last check mark.)

Now you will see styles.css only in the right of your styles tab.

Typescript files not showing in Angular 2 CLI project using chrome web developer tools

I was able to get this to work. You have to to add the angular CLI src folder to your workspace, and then you have "map to network resource" on one of your .ts files.

Note: this example assumes the case where the client and server are
running on the same machine. If you have the situation where the
client is on a windows machine, but the server is running on linux for example,
then on the client machine you have to mount the linux server source directory as a windows
share and then specify something like

\\192.168.1.134\myShare\myProject\src\client

as your workspace folder.

I recently had to do this, and while it's a little more complicated, it fundamentally works the same as the local case

I took screen shots of the entire process, so it's probably easiest just to show these.

1. Select one of the ts files that resides under your dist directory (that corresponds to the directory that ng serve is serving from), and select "Add folder to workspace":

2. Select your src/client folder:
   

3. Say "Allow" to the subsequent prompt allowing dev tools to access the src dir:
   

4. Observe that the src folder is now listed under Dev Tools sources. You can now browse all the ts files (not just the one you added), but any breakpoints you set won't take effect until you "establish a mapping":
   

5. You can enable the mapping as shown in the next two screen prints:
   

Select the appropriate mapping and click on it to enable

Now I can set a breakpoint in the .ts file and drill down on error messages to the .ts source.

The basic trick is the you have to add the source ts file directory to Chrome manually, since the files are not under the serving directory. The mapping stays in effect until you either manually remove it (by right-clicking on a .ts file and selecting "remove network mapping") or until you close the browser (it will retain the mapping on refreshes however)

---

Related Topics