I have built a stylesheet but it doesn't appears on the page on the first load. It needs a reload to appear properly. However when I look to the source download on the dev console's network tab, I see the CSS is well downloaded. So what can lead to the non-display of my CSS on the first load since it is well loaded in a CSS module-hash's mode ?
Any hint would be great,
thanks
Related
I'm having a problem with a site that I just made live - I had to correct some CSS issues related to the background and some image placements. Everything of course looks great in VS Code. I open it in Chrome and Firefox and they look completely different - and wrong. Developer tools showed they were using the old CSS stylesheet (which was originally loaded, then replaced). If I open an incognito window, all is perfect. Any reason this would be? I'm new to this (changing careers) so I appreciate your insight!
This is most probably because the css file is cached in your browser. To fix this problem, you can use cache buster in the URL. For ex, your CSS URL is
https://www.abc.xyz/static/css/core.css
So, whenever you make changes in the CSS file, change the URL to this
https://www.abc.xyz/static/css/core.css?version=1.0.1
?version=1.0.1 changes the file URL and hence it is not loaded from cache. Just change the version number when you make the changes to the file so the URL is new again
I'm making an app with node.js and have a few html pages that are styled with one css file. After I click on a link (to a subpage) on the home page and open it in a new tab, everything seems fine. However, after I push ctrl+F12 and open the console, the css styles somehow 'stop working', which means:
the elements are not styled, even though there is the link tag with style.css in 'Elements' tab in html
In Network tab, I can only see style.css file with status 304 listed there (all other js files are not there, even though JS scripts work)
When I return to the home page, the css styles are not visible as well (they were before new tab was open, now it's 304 status in Netwok). After refreshing, styles go back (along with status 200).
After I refresh the subpage, everything is fine again, opening console does nothing to styles (Network tab shows all the files, including style.css with status 200). After closing/ opening console again, everything is okay too.
If I dont't refresh the subage, the styles "come back" when I change window size (although not immediately, after a second). Otherwise there's just html with working js scripts.
This happens only in Chrome (version 53.0.2785.101), only after opening console for the first time. I have no clue why this might be happening.
Please help!
Ok, I managed to solve this. This issue seems to be Chrome bug, discussed for example here:
https://bugs.chromium.org/p/chromium/issues/detail?id=647151
https://bugs.chromium.org/p/chromium/issues/detail?id=648023
I am not sure whether my solution is perfect, but it now it seems to work. I just added one option into express.static in my server.js (I use Express JS):
app.use(express.static('public', {maxAge: '5d'}));
I guess the max-age property is crucial here - it's specified in Cache-Control http header (you can see this in Dev Tools console in Network tab, after clicking on given file). Found this solution mentioned in the first link. If I see further issues, I will update this answer.
I'm sorry I can't explain this problem in details.
Edit: this solution has one major flaw: when I edit my files, the browser still loads the older versions. Therefore, I turn this max-age property off when I wish to see the changes in files. If anyone has better fix, please share.
Try clearing your cache in chrome, then restart chrome and try again.
(A 304 response header is not an error necessarily. It just means that the browser should load the resource from cache. Basically the browser says "Hey, Can I use the same copy of that CSS file that you gave me last time, or has it changed?" and the Server says "It hasn't changed, go ahead and use the copy you have" AKA 304)
If that doesn't fix the issue, you may look into ETags
I have just started exploring the possibility of saving changes made to a page and it's styling in Chrome Dev Tools on the fly.
I've followed this short video tutorial on mapping the project files on disk to the Dev Tools via the Sources tab. Everything works fine until around the 5:17 point where he selects an element in the Elements tab and makes several CSS style changes which automatically persist to the file on disk.
This doesn't work for me. The changes won't save to the file and when I refresh the page reverts to the original styles. I have checked to see if there is an asterisk beside the corresponding CSS file in the Sources panel, to denote changes have been made, but there is nothing there.
I have also tried the solution posted in this SO question but I don't see the link to the stylesheet after editing the style in the Elements tab that will redirect back to the file in the Sources tab allowing the changes to be saved.
Can anyone tell me what I am missing? Thanks!
You need to make sure you map your Workspace to a Network Resource to persist changes automatically. I have produced the steps below to get this working correctly.
Select the folder in Sources and click 'Add Folder to Workspace'
If you open up our stylesheet in Sources and go to the Elements panel to make changes, upon coming back you will see a separate instance of the stylesheet opened with pending changes. The reason is that Chrome doesn't know how to map the URL to the file on your system yet.
Select 'Map to Network Resource...'. You will notice that 'top' disappears.
Make a change in the Elements panel now. When you go back to the Sources panel, the changes will automatically be shown without requiring any explicit save.
You can see exactly what was done by going to the Workspaces section of the DevTools settings panel. We've added a local Workspace, and then mapping the URL, which in my case is on my computer and accessed with the file:// protocol, to the relative path on the system.
Until recently, my Chrome browser was loading CSS source map files correctly. Now, it is not.
The setting is on:
And the CSS files have a source mapping tag at the bottom:
/*# sourceMappingURL=Home.cshtml.css.map */
But the Network tab and Fiddler2 show that Chrome is not even trying to load the source map file.
Is there something that I'm missing? Is the sourceMappingURL syntax correct? I've toggled the "Enable CSS source maps" setting on and off.
Chrome version: 44.0.2403.30 beta-m
Sourcemap files generated by Web Essentials in VS 2013.
You can try the following steps:
1- delete the map file and regenerate it again.
2- Using the chrome inspector, go to Settings > General and then click on the button "Restore defaults and reload"
When the CSS file has the sourcemapping embedded as base64, then it seems to work fine.
For example:
/*# sourceMappingURL=data:application/json;base64,eyJ2....5235== */
OMG! The problem made me crazy! I found that the CSS file is not complete.
Here is what I did to solve the problem:
Make sure that CSS maps are enabled in Dev tools settings.
Check the end of CSS file whether it contains a link to the source map.
Press Shift + Click on the refresh button to force resources update.
Your code seems to be okay, the only reason why it is not reflecting the changes because you are loading the cached CSS file. To load the new CSS file, you need to hold shift and press the reload button to ask chrome to reload all the files instead of to loading it from the cash.
Does each scss file need to be accesible from the outside to make this work? I have css maps configured but I have see that each .scss file that is being processed is not accesible from the browser
I have seem a lot of videos in which developers are changing CSS on the fly in chrome. I tried the same thing but chrome did not allow me to change the code. I can't write on the style sheet.
Is there any specific setting to do this? Kindly help.
EDIT: To edit the CSS, I right click on an element, select inspect element. It will open the console. I select the id of the element and go to style.css in Resources and try to change the CSS. It does not allow me to write there.
You are doing it wrong... the resources panel is not there for live edit, if you want to change the css associated with an HTML element, right click on that element and then in the right panel you will see the css styles associated with the selected element. You can edit that rules and you will see the changes in real time.
Maybe you can check some videos to learn some basics about the Chrome Developer Tools, and after that if you want to learn more, you can check this question:
Chrome Developer Tools: Best resource for learning advanced features?
Here is a great tool for Google Chrome called Stylebot.
In this you can change the style sheet and save your own styles to any website for your own custom website theme!
Here is the link for Stylebot
Check it out and to put the icing on the cake, it's free!
This should not be used to work on your own website projects since the CSS file saves local on your browser!
In Chrome, clicking on something like "all.css:1" in the Styles pane of the Elements tab of DevTools takes one to the Sources tab of DevTools. If you're looking at code on remote server, the CSS rules in this source view are not live-editable (unlike the live-editing Style Editor tab of Firefox*) unless you're:
viewing the "inspector-stylesheet" -- a temporary stylesheet containing new style rules you created with the "+" button in the Styles pane of the Elements tab. Clicking on a new rule's "inpector-stylesheet:1" link will take you to the editable source of the temporary rules you've created.
viewing a persistent local workspace. Setting this up takes a few extra steps, described here: "Set Up Persistence with DevTools Workspaces" .
Basically, you make a local folder on your machine where you can save local copies that you direct Chrome to use in in lieu of the version on the internet. See the instructions at that link. Note that, as it says there, "If you are mapping files from a remote server instead of a local server, when you refresh the page, Chrome reloads the page from the remote server. Your changes still persist to disk and are reapplied if you continue editing in Workspaces." (So just type a space character into the source local CSS file to see your alterations applied again, if you've refreshed or navigated to a different page that uses the same stylesheet.)
* In Firefox, if you right-click on an element on a remote webpage, select Inspect Element, then in the Rules pane of the Inspector tab, click on a link on the right like "all.css:1", you are taken to a "Style Editor" tab where you can immediately live-edit, in contrast to Chrome's requirement of making you map to a local file. This may cause some people some confusion, if they expect the same behavior from Chrome's DevTools.
Another Chrome extension that is similar to Stylebot is Code Cola. It has an inspector that allows selecting elements, and a visual editor which does not require typing the CSS by hand. To see the generated CSS code click the curly brackets icon in the toolbar.