-
Notifications
You must be signed in to change notification settings - Fork 12k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Editing CSS in the inspect menu is broken in Chromium browsers #24414
Comments
This has been reported before in angular/angular#48151; this is seemingly a Chromium bug in DevTools as Angular does not have control over how that behaves. The hard thing is trying to figure out what the root cause is; I suspect there may be some build optimizer rule that changes the CSS such that the bug is avoided, perhaps running |
I looked at this briefly and this seems to be caused by sourcemaps. Couple of points:
Transferring to the CLI repo as this looks more of a tooling issue. |
Looked a bit more into this and it appears that this is caused by the [_nghost-ogu-c13] {
display: flex;
flex-direction: column;
min-height: 1px;
min-width: 1px;
border: 1px solid lightgreen;
border-radius: 12px;
background-color: lightgreen;
padding: 12px 8px;
margin-bottom: 4px;
}
/*# sourceURL=webpack://./src/app/b/b.component.scss */
/*# sourceURL=webpack://./src/styles.scss */
/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIndlYnBhY2s6Ly8uL3NyYy9hcHAvYi9iLmNvbXBvbmVudC5zY3NzIiwid2VicGFjazovLy4vc3JjL3N0eWxlcy5zY3NzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBO0VDS0UsYUFBQTtFQUNBLHNCQUFBO0VBTkEsZUFBQTtFQUNBLGNBQUE7RURDQSw0QkFBQTtFQUNBLG1CQUFBO0VBQ0EsNEJBQUE7RUFDQSxpQkFBQTtFQUNBLGtCQUFBO0FBRUYiLCJzb3VyY2VzQ29udGVudCI6WyJAaW1wb3J0IFwiLi4vLi4vc3R5bGVzLnNjc3NcIjtcclxuXHJcbjpob3N0IHtcclxuICBAaW5jbHVkZSBmbGV4LWNvbHVtbjtcclxuICBib3JkZXI6IDFweCBzb2xpZCBsaWdodGdyZWVuO1xyXG4gIGJvcmRlci1yYWRpdXM6IDEycHg7XHJcbiAgYmFja2dyb3VuZC1jb2xvcjogbGlnaHRncmVlbjtcclxuICBwYWRkaW5nOiAxMnB4IDhweDtcclxuICBtYXJnaW4tYm90dG9tOiA0cHg7XHJcbn1cclxuIiwiQG1peGluIGZsZXgtZml4IHtcbiAgLy9maXhlcyBuZXN0ZWQgZmxleGJveGVzXG4gIG1pbi1oZWlnaHQ6IDFweDtcbiAgbWluLXdpZHRoOiAxcHg7XG59XG5cbkBtaXhpbiBmbGV4LWNvbHVtbiB7XG4gIGRpc3BsYXk6IGZsZXg7XG4gIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47XG4gIEBpbmNsdWRlIGZsZXgtZml4O1xufVxuXG5AbWl4aW4gZmxleC1yb3cge1xuICBkaXNwbGF5OiBmbGV4O1xuICBmbGV4LWRpcmVjdGlvbjogcm93O1xuICBhbGlnbi1pdGVtczogY2VudGVyO1xuICBAaW5jbHVkZSBmbGV4LWZpeDtcbn1cblxuLy8gKiB7XG4vLyAgIGNvbG9yIDpyZWRcbi8vIH1cbiJdLCJzb3VyY2VSb290IjoiIn0= */ |
In this case the `sourceURL` is not needed as the entire sourcemap which cotains all the information is being embeeded. Multiple `sourceURL` is also causing issues when in Chrome devtools. See: angular/angular-cli#24414 for more information.
In this case the `sourceURL` is not needed as the entire sourcemap which contains all the information is being embedded. Multiple `sourceURL` is also causing issues when in Chrome devtools. See: angular/angular-cli#24414 for more information.
In this case the `sourceURL` is not needed as the entire sourcemap which contains all the information is being embedded. Multiple `sourceURL` is also causing issues when in Chrome devtools. See: angular/angular-cli#24414 for more information.
In this case the `sourceURL` is not needed as the entire sourcemap which contains all the information is being embedded. Multiple `sourceURL` is also causing issues when in Chrome devtools. See: angular/angular-cli#24414 for more information.
Closed via #24436 |
This issue has been automatically locked due to inactivity. Read more about our automatic conversation locking policy. This action has been performed automatically by a bot. |
Which @angular/* package(s) are the source of the bug?
Don't known / other
Is this a regression?
Yes
Description
To re-create this issue, perform the following steps:
Create a new project with "ng new demo"
When creating the project, make sure to enable SCSS
Create 2 components, each with its own unique SCSS file.
Create a mixin in the generated styles.scss.
Import styles.scss in both components and utilize the shared mixin in both.
Include both components in the generated app component template.
Run "ng serve".
In Google Chrome, or any other Chromium-based browser open up to http://localhost:4200/
Right-click and inspect one of the components. In the Styles tab, edit one of the styles. The styles of the other component will have become corrupted and cannot be undone until the page is refreshed.
For this demo, I have 3 instances of Component A and 3 instances of Component B.
![image](https://user-images.githubusercontent.com/3828371/206784460-151784c1-7d0a-45f4-9c3e-4fdf1a0ee544.png)
I inspected the last instance of Component B.
I changed the background from lightgreen to darkgreen and the styles for Component A no longer apply.
![image](https://user-images.githubusercontent.com/3828371/206784674-6d91db80-783f-41bd-8203-cb6d0a34c207.png)
I changed the color back to lightgreen and styles for Component A are still in a broken state.
![image](https://user-images.githubusercontent.com/3828371/206784811-ef1aa214-22c3-4288-808f-65ada56ce81d.png)
Please provide a link to a minimal reproduction of the bug
https://www.icloud.com/iclouddrive/029Z8W6H1o12qpP8GR4bJ6m4g#demo
Please provide the exception or error you saw
Please provide the environment you discovered this bug in (run
ng version
)Anything else?
The issue exists in any Chromium-based browser, but does not exist in Firefox or Safari.
The issue only exists when running on localhost using the command "ng serve". It does not exist when you run "ng build" and serve the files separately.
I've personally tested this on the latest iterations of macOS and Windows 11 and the issue exists in both Operating Systems.
The issue did not appear in Angular 14, but appeared when we upgraded our projects to Angular 15 and could no longer edit the CSS in the browser during development.
The text was updated successfully, but these errors were encountered: