Working with component css files in workspaces in chrome with angular cli 6 project
I'm trying to use Google Chrome workspaces with CSS persistent editing in an Angular 6/7 CLI project.
When adding "extractCSS:true" in angular.json configuration and using "--source-map=true" flag I can see the CSS file in the "sources" and "elements" tabs in Chrome, and I can map it to the online CSS file, but when changing the style in the "elements" panel the change is not persistent and is not saved to the file.
Is it possible to edit the component CSS files from within Chrome dev tools with workspaces (without ejecting the app) ?
- In the following GIF you can see that although the little green dot near the file name is on, indicating that the map between the network
resource and the local file has been established, the changes from
the elements panel are not reflected in the file:
angular
google-chrome google-chrome-devtools angular-cli angular-cli-v6 asked Nov 21 '18 at 12:30
rotemx
318310
add a comment |
I'm trying to use Google Chrome workspaces with CSS persistent editing in an Angular 6/7 CLI project.
When adding "extractCSS:true" in angular.json configuration and using "--source-map=true" flag I can see the CSS file in the "sources" and "elements" tabs in Chrome, and I can map it to the online CSS file, but when changing the style in the "elements" panel the change is not persistent and is not saved to the file.
Is it possible to edit the component CSS files from within Chrome dev tools with workspaces (without ejecting the app) ?
- In the following GIF you can see that although the little green dot near the file name is on, indicating that the map between the network
resource and the local file has been established, the changes from
the elements panel are not reflected in the file:
angular
google-chrome google-chrome-devtools angular-cli angular-cli-v6 asked Nov 21 '18 at 12:30
rotemx
318310
add a comment |
I'm trying to use Google Chrome workspaces with CSS persistent editing in an Angular 6/7 CLI project.
When adding "extractCSS:true" in angular.json configuration and using "--source-map=true" flag I can see the CSS file in the "sources" and "elements" tabs in Chrome, and I can map it to the online CSS file, but when changing the style in the "elements" panel the change is not persistent and is not saved to the file.
Is it possible to edit the component CSS files from within Chrome dev tools with workspaces (without ejecting the app) ?
- In the following GIF you can see that although the little green dot near the file name is on, indicating that the map between the network
resource and the local file has been established, the changes from
the elements panel are not reflected in the file:
angular
google-chrome google-chrome-devtools angular-cli angular-cli-v6 asked Nov 21 '18 at 12:30
rotemx
318310
I'm trying to use Google Chrome workspaces with CSS persistent editing in an Angular 6/7 CLI project.
When adding "extractCSS:true" in angular.json configuration and using "--source-map=true" flag I can see the CSS file in the "sources" and "elements" tabs in Chrome, and I can map it to the online CSS file, but when changing the style in the "elements" panel the change is not persistent and is not saved to the file.
Is it possible to edit the component CSS files from within Chrome dev tools with workspaces (without ejecting the app) ?
- In the following GIF you can see that although the little green dot near the file name is on, indicating that the map between the network
resource and the local file has been established, the changes from
the elements panel are not reflected in the file:
angular
google-chrome google-chrome-devtools angular-cli angular-cli-v6 angular
google-chrome google-chrome-devtools angular-cli angular-cli-v6 asked Nov 21 '18 at 12:30
rotemx
318310
asked Nov 21 '18 at 12:30
rotemx
318310
edited Nov 21 '18 at 13:17
asked Nov 21 '18 at 12:30
rotemx
318310
asked Nov 21 '18 at 12:30
rotemx
318310
asked Nov 21 '18 at 12:30
rotemx
318310
318310
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
@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 :(
answered Dec 24 '18 at 20:11
benshabatnoam
1,618820
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412086%2fworking-with-component-css-files-in-workspaces-in-chrome-with-angular-cli-6-proj%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
@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 :(
answered Dec 24 '18 at 20:11
benshabatnoam
1,618820
add a comment |
@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 :(
answered Dec 24 '18 at 20:11
benshabatnoam
1,618820
add a comment |
@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 :(
answered Dec 24 '18 at 20:11
benshabatnoam
1,618820
@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 :(
answered Dec 24 '18 at 20:11
benshabatnoam
1,618820
answered Dec 24 '18 at 20:11
benshabatnoam
1,618820
answered Dec 24 '18 at 20:11
benshabatnoam
1,618820
answered Dec 24 '18 at 20:11
benshabatnoam
1,618820
1,618820
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53412086%2fworking-with-component-css-files-in-workspaces-in-chrome-with-angular-cli-6-proj%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
