Changes to style.css in Chrome workspaces not showing up

chrome developer tools - save changes
chrome local overrides
chrome developer console
chrome devtools workspace
changes to this file were not saved to file system
chrome console commands
unable to add filesystem: <permission denied>
save html changes in chrome

I've been trying to use Chrome Workspaces to edit the CSS in my WordPress child theme more efficiently. I followed the tutorial at http://wordimpress.com/using-chrome-devtools-workspaces-for-faster-wordpress-development/ to set it up. It works for the most part, when I edit any element in my child theme, the modification shows up instantly in my browser window and I can save it directly to the local style.css .

The problem occurs when I want to add a new element to my child theme (this element already exists in the parent theme but I did not need to modify it before, so it doesn't exist in the child theme). Using the inspect tool, I found the element in the parent style.css, then copied it over to my child theme editor (in the Source tab of devtools). But making any modifications to that element is not reflected in the live browser once I do that.

For instance, this was the original code in the parent style:

media="all"
.widget a {
color: #777;
}

And I copied this to my child stylesheet and changed it to color: #000 . But there is no change in the color seen in the live browser.

Am I doing something wrong?

If you are using Google Chrome do following

  1. Go to Settings
  2. Clear browsing data
  3. Check all marks
  4. Obliterate the past hour or day, depends on when it worked properly.
  5. Click Clear browsing data

For me it worked.

Edit Files With Workspaces | Chrome DevTools, Use the Styles pane in Chrome DevTools to inspect and modify the CSS The styles pane lets you change your CSS in as many ways as possible, For example, in the screenshot below the selected element inherits display:list-item from user If you are not using the Workspaces feature, the web server must also supply� Hi, This problem is due to the content type the stylesheet is served with. The other stylesheets (core.css & global.css) are served with the correct content type (text/css) in the http response, but the problematic stylesheet (style.css;jsessionid=*) is served without a content type. Since the current version

add !important - to override existing css property

Hope it works

media="all"
.widget a {
color: #777;
}

Change this to

media="all"
.widget a {
color: #000!important;//change
}

Edit Styles | Chrome DevTools, Something in the dev tools changed after the last chrome update which is They are in an external css file which isn't showing up anywhere in dev tools. In Chrome if you go to the DevTools settings, you can disable the cache as long as DevTools is open. Posting to the forum is only allowed for members with active accounts. Please sign in or sign up to post.

It could be down to the cache-busting query string which WordPress adds-

Here is a relevant Chromium bug report.

For now, adding this to functions.php in WordPress in order to remove the cache-busting suffix allows me re-enable persistent edits:

function yourthemename_remove_version( $url ) {
    return remove_query_arg( 'ver', $url );
}

add_filter( 'style_loader_src', 'yourthemename_remove_version' );

In future, it looks like Persistence 2.0, recommended at the end of the bug report, will be the solution. It can be enabled as a Chrome DevTool experiment now. Notice that Chrome Canary doesn't work in Linux yet.

Source: https://stackoverflow.com/a/42542366

CSS file not showing up in styles tab., I'm coming back to it after a long time and it's suddenly not seem to be Add working folder to "workspace" on Chrome; "Map to File System The settings have to be manually changed for each site I'm working on, etc. etc. Initially tried just to have style.css in dev directly and that didn't work for me. Hi Ryan. It was a perfect catch. YES it was due to missing viewport tag. Another question i want to ask is. My phone has a resolution of 480x800. If i write the css as below and rotate my device

"Map to File System Resources" option missing from pop-up window , How many times have you found yourself editing and tuning up CSS or JavaScript code right in the browser, then refreshing the page only to lose all of your changes? using is Google Chrome, you can take advantage of “ Workspaces”, file <link href="/extension/design/front-end/stylesheets/styles.css" � style.css not showing up in index.html I have been following along in NotePad using Chrome on an Asus that uses Windows 7. For some reason my index.html is not reflecting the changes I have made in style.css.

Editing CSS/JS in Google Chrome | Mugo Web, Check out these 20+ Chrome DevTools tips and tricks to help you Any changes will show up in your browser as if the change had Simply select the element you want to edit and under the styles panel you can add/change any CSS see this when selecting the element, but not in Chrome DevTools. Changes in workspace not appearing on web page "Im using Chrome" Hi all, I am not seeing specific changes made to my workspace when loading the preview page. The ones I'm not seeing are my image, top bar colour/ topr bar is missing and background colour not showing up.

Chrome DevTools - 20+ Tips and Tricks, [00:00:17] So not having an editor open just using the dev tools. So it'll be like okay, a style that's CSS comes down and the folder you gave me But you'd have to go through the sources this tab open it up and make changes like an editor,� Use Local Overrides when you want to experiment with changes to a page, and you need to see those changes across page loads, but you don't care about mapping your changes to the page's source code. Step 1: Setup. Complete this tutorial to get hands-on experience with Workspaces. Set up the demo. Open the demo. In the top-left of the editor

Comments
  • How you are adding element ? and which kind of element it is ?..show the code please
  • Thanks for the reply... But why should I have to do this when a child theme is supposed to override the parent theme by default though? Sounds like something else would be wrong somewhere..
  • because it will refer the parent item first, i can explain you properly if you post the detailed code. and one more thing is it working??