Skip to main content

JavaScript and CSS changes don't show up in my web page

 This could be a common issue you may face if you just started some web development. Sometimes you may feel that a change you made in your CSS or Javascript, never work in your browser. Practically you may waste more time troubleshooting your CSS or Javascript issues without actually understanding why it doesn't show up when you run it in the web browser.

Mostly this happens when you have externalized Javascript or CSS with something like below.


<link rel="stylesheet" href="mystyles.css" />

<script src="myjavascript.js"></script>


The issue with this would be caching. Web browsers tend to cache any styles or javascript files in the clientside so the browser can save up bandwidth without downloading the same set of Javascript and CSS files every time you open the website.

You can see this behavior if you open the developer tools' network section in the Chrome browser.

Browser cache
Browser caching


Yet, when you try to make some changes, it wouldn't show up if you try to view that changes in the browser, because the browser already has a cached version of that Javascript or CSS with it so it doesn't want to download a new copy from the website again.


Solution (During Development)

The solution to this also in the same dev tools. Notice the small checkbox Disable Cache. If you check this, it will force the browser to always download the latest copy from the server instead of reusing the cache.

Disable Browser cache
Disable browser cache


This is a simple trick, but most of the time you may end up wasting lots of time by troubleshooting non-existing errors in your Javascript or CSS. It is a good practice to always keep your Disable Cache checkbox checked while you are developing. 


Note: Even if you have checked this Disable cache checkbox, it works only when the developer tools window is opened.


Solution (During the release)

Imagine that you are updating your website with some new features, bug fixes, or changes related to Javascript or CSS. Actual endures also end up having the same issue if they have a cached copy of your Javascript file or the CSS in their browsers. They usually do. So they won't be able to see the updates in your Javascript or stiles.

The solution for this would be versioning your style sheet and the Javascript like below.

<link rel="stylesheet" href="mystyles.css?v=1" />

<script src="myjavascript.js?v=2"></script>

This is very important to update your script and style version whenever you do any change. If you forget to do this, it could lead to various issues due to having the browser cache in the client's browsers.


This could be just common practice for most of the web developers, but if you are just starting, hope this would be helpful.

Labels:

Comments

Post a Comment

Popular posts from this blog

VLC skins

It's been a while from my first blog post, so today I thought to make a blog post about skins in VLC player. I think you all are familiar with VLC player if not, here's the link for the website www.videolan.org/vlc/index.htm l In brief, VLC player is a free and opensource player that can play almost all the types of media formats. Even though it is a such a nice player, it looks kind of old and rusty, like the windows classic look. But you can make it prettier by just adding some new skins to it.  You can download skins for the player from here http://www.videolan.org/vlc/skins.php Then place the downloaded skin file (.vlt file) in the " skin " folder in the installation directory.           eg:- in windows:    C:\Program Files\VideoLAN\VLC\skins           or in linux systems:  ~/.local/share/vlc/skins Then, open the VLC player and go to the preferences. ...
2 comments
Read more

Java, how to create a list with a single element

 I wanted to create a Java List with a single element. Yet, I wanted to add more elements later. So, I was looking for a couple of ways to do this. So far there are multiple elegant ways to create a list with a single element with a one-liner. Not so much for a modifiable list though. Here's what I gathered so far. Followings are a few ways of creating a list with strictly a single entry. Can't add more elements. 1. Collections.singletonList() This returns an immutable list that cannot be modified or add more elements. // An immutable list containing only the specified object. List<String> oneEntryList = Collections. singletonList ( "one" ) ; oneEntryList.add( "two" ) ; // throws UnsupportedOperationException 2.  Arrays.asList() This returns a fixed-size list consisting of the number of elements provided as arguments. The number of elements provided would be an array hence the size is fixed to the length of the array. // Returns a fixed-size list List...
Post a Comment
Read more

Find command: How to find and delete 0 bytes files in Linux

In Linux, "find" command is a powerful command that we can use not only to find files. I've used it for different requirements, so thought of posting some of the convenient usages of find commands in a series of posts. For some application issue, I've got one of my directories in Ubuntu system swarmed with empty files with 0 bytes. Some of the files got data in them but some of them were empty. I just wanted to delete the empty files and it wasn't possible to identify them by file names or dates. So find command comes to rescue. find . -size 0 -type f  If I needed to isolate the files by file extension, we can use something like this. find . -size 0 -type f -name "*.tar" You can get the file count by piping it to wc command. find . -size 0 -type f -name "*.tar" | wc -l The awesome thing about the find command is you can use it for deleting files just by adding the -delete flag to the command. find . -size 0 -type f -name "*.tar" -dele...
Post a Comment
Read more