When I'm experimenting with css (in the dev tools) in the browser, I sometimes need to refresh the page. However, this causes me to lose the changes I've made. Is there a way to prevent this from happening or at least save the state of the last css.
First of all: You can't edit temporarily in the dev-tools and reuse it after you reload the site.
You will need an addon to do this. You could use Stylish to save it into a fake-implementation.
I hope this helps you.
Frustrating it is indeed. What solved the issue for me is using this tool called Browser-sync, this way you can update the css and see the changes at the same time. Give it a go, it's worth it.
Related
Hello I am developing a website on ASP.NET and while developing it I am also testing its behavior and changes. The problem I am facing is some times when I make change on .CSS file those changes does not appear on the browser even when I refresh it or rerun the project but when I run that project on different browser it began to show those changes. If it is a code related or browser related or IDE related please let me know. Thanks
Try hitting ctrl-F5 - that will force a re-load.
Unless you change the name of the css file or other resource, the browser can cache that information for months on end.
In fact, some utilities will even add say a dummy parameter to the linked css file - thus on each build the parameter is updated - and thus the browser will not use the older cached value (but, I not found a great working and easy to use utility that does this).
The other way? Empty your browser cache. So yes, the cache can be a REALLY nasty issue during development. And in fact it can be REALLY nasty when you update your site - users will not see say a modify css file, since it been cached, and with the same name, then users will not see new fixes/style changes or even even things like text alignment that you fixed in the css file.
As noted, in most cases, if you launch a page, then try hitting Ctrl-F5 (I think this works in most browsers). If that fails, then you have to in the browser re-set the cache (empty the cache), and then you see the new changes.
I wish had a better solution, and I wish one could just say:
Ok, please re-set ONE time for all past users - since they will often not see your changes - and you don't have much control with any real great ease to re-set the cached information. There are truck-loads, book sized articles in dealing with this issue, but sadly, there not really a great solution right now. If you want say things like cached css stuff to go away client side? Then you have to change the name of the css file - and that can be painful.
At least during development? Well, let the page load, then try Ctrl-f5 - that works well in most cases.
Is this common? When I save my external stylesheet and update my browser the changes applies directly for the most of the time, but after a while when I save again the changes does not apply at all. Nothing I do to the stylesheet at this moment will apply for a while. Then it continues to work for a while and then it stops working again for a while and so on and on and so on.
Any thoughts?
Take care
Good question. In general browsers try to cache any resource they have loaded previously.
Checkout this post that details this behaviour a bit more: Browser Caching of CSS files
I want to automatically refresh chrome immediately after an change of my less files. For some reason chrome can not even read my less file. So i always need to wait until the lessc have created my .css file. There a tools out there that are checking resources for changes and reload the page. I've even written my own: Luba Autoreload. What i annoying is the waiting time between less compiles and the extension request resources to detect changes. Chrome DevTools seems do not solve the problem as well. After mapping my style.css to a network resource i always need click inside the source in chrome to refresh for some reason (no auto reload).
I really prefer a way to immediately detect a less change and reload the browser. I can write a solution but i do not can spend all my time in stuff like these. Maybe somebody have an idea. Maybe there a solutions for Firefox ? I'm also using a prefixer, but i think i can forget it in this context.
Use LivePage extension. It supports LESS also. It also works offline and for file:// too.
EDIT:
Increase the refresh duration to 1000ms in LivePage's option page. It may help you. And don't select the option for "Entire Domain". It will monitor whole domain and will slow down your system, if you have many files in your domain. Use LivePage for the file, or files you are currently working on.
I have looked into this time and again and have read solutions but they simply do not work.
Supposedly, one can bypass the cache in Chrome by hitting F12, clicking the gear in the bottom-right corner, and checking "Disable cache." This does not work for me. I still get a page with cached CSS. In Firefox, I go under Net and check "Disable Browser Cache" to no avail. HTML is not an issue, just the CSS and, possibly, JS.
IE, however, doesn't have this problem. I update the page's CSS and IE updates accordingly. For obvious reasons this is not an ideal situation.
I go to my-site.com/style.css in Chrome and Firefox and the file there is not the file I see with FTP/SSH/IE. If this looks like a bug (it does to me), then please let me know. If I'm just being dumb, then please tell me what I am missing. Please.
Thank you.
One way to avoid caching is to explicitly change the url in someway. What I would suggest is to append a querystring parameter to the css url like:
http://mysite.com/content/css/File.css?version=1234
and update the version or another way is to attach the DateTimeOffset instead of an auto incremented number.
Here's my current workflow for editing CSS:
Me: "Take a look at this page!"
Guys: "Try making the post titles bigger"
Right click on a post title, choose "inspect" (to inspect it in firebug)
Find the appropriate CSS statement in Firebug (h2.post_title or something)
Modify the CSS in Firebug, ask friends how it looks
If it looks good, make the change again in Textmate
I want to avoid step 6. I.e., I want the ability to edit CSS via a Firebug-like UI and be able to commit my changes to the relevant file immediately (rather than having to copy them by hand as I do with Firebug)
Edit: Something that works on a Mac would be ideal
Have you tried "Web Developer" extension in Firefox? It allows you to open, edit and save CSS files.
http://www.skybound.ca/
Go forth and be enlightened. This is truly a life changing program.
Another possible workflow:
"Hey guys, take a look at this page!"
"Try making the post titles bigger"
Make the change to the CSS file
Hit reload
I only use Firebug for debugging (eg: "why is this thing getting that style?") not for making changes when I know where they need to go in the CSS. This workflow does depend somewhat on being able to reload the CSS easily. If you're working on an app where hitting reload completely disrupts your state it might not be ideal.
Check out Backfire:
http://blog.quplo.com/2010/08/backfire-save-css-changes-made-in-firebug/
Haven't tried it, but sounds promising.
Check out my contribution to this problem:
http://www.cssupdater.com
Step 6 would then be:
6: One click on the "Sync now" button in Firebug!!
The click sends your changes to the desktop application, which syncs your orignal css files.
You can also choose the changes you want to sync in the application. It works with your favorite text editor or IDE and on both Windows and Mac!
Heureka?
XRefresh with "Soft Refresh" enabled may help your workflow, but you still need to know what CSS selectors do you want to add/edit.
What's why I'm developing LIVEditor, because I don't want to manually redo the change again in the text editor after tweaking my css styles in Firebug (or the likes).
Backfire (see post below) was created specifically for Quplo (http://quplo.com), which is a tool that specificly does what you describe. You write html and css, then talk about what needs to be changed, make the changes (using firebug or web developer toolbar) and hit save.