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

Install Docker on Windows 11 with WSL Ubuntu 22.04

This is to install Docker within Ubuntu WSL without using the Windows Docker application. Follow the below steps. Install Ubuntu 22.04 WSL 1. Enable Windows Subsystem for Linux and Virtual Machine platform Go to Control Panel -> Programs -> Programs and Features -> Turn Windows features on or off 2. Switch to WSL 2 Open Powershell and type in the below command. wsl --set-default-version 2 If you don't have WSL 2, download the latest WSL 2 package and install it.  3. Install Ubuntu Open Microsoft Store and search for Ubuntu. Select the version you intend to install. I'd use the latest LTS version Ubuntu 22.04. Click on the Get button. It will take a couple of minutes to download and install. 4. Open up the installed Ubuntu version that was installed. If you get an error like the below image, make sure to install the WSL2 Kernel update .  If it's an older Ubuntu version the error message would be something like the image below. Error: WSL 2 requires an update to its
1 comment
Read more

How to fix SSLHandshakeException PKIX path building failed in Java

TL ; DR 1. Extract the public certificate of the website/API that you are trying to connect from your Java application. Steps are mentioned in this post 2. Use the Java keytool to install the extracted certificate into the "cacerts" file (Trust store) keytool -import -trustcacerts -alias <domain name> -file <public certificate>.cert -keystore /path_to_java_home/jre/lib/security/cacerts -storepass changeit 3. Restart your Java application Exception A typical exception stack trace would look like below. javax.net.ssl. SSLHandshakeException : sun.security.validator.ValidatorException: PKIX path building failed : sun.security.provider.certpath.SunCertPathBuilderException: unable to find valid certification path to requested target at sun.security.ssl.Alerts.getSSLException(Alerts.java:192) at sun.security.ssl.SSLSocketImpl.fatal(SSLSocketImpl.java:1959) at sun.security.ssl.Handshaker.fatalSE(Handshaker.java:302) at sun.security.ssl.Handshake
Post a Comment
Read more

How to set terminal title in Ubuntu 18.04 LTS

In older Ubuntu versions, you could have just right-clicked on the Ubuntu Terminal window's title bar and set any title you would like. But unfortunately after Ubuntu 18.04 LTS this feature is gone. I used to love this feature because I'm multiple tabs in the single terminal window kind of a guy. I usually like to work in multiple named terminal tabs like below. By default, in newer Ubuntu version, it is showing just the current directory. Let's see how we can do this. Ubuntu prompt In ubuntu's Bash, there's an environment variable $PS1 which is responsible for the details that the command line prompts. You'll be able to echo this and see what's inside it. If I echo it it will print something like this. echo $PS1 \[\e]0;\u@\h: \w\a\]${debian_chroot:+($debian_chroot)}\[\033[01;32m\]\u@\h\[\033[00m\]:\[\033[01;34m\]\w\[\033[00m\]\$ If you really want to understand what this means, you can refer this page .  Updating the termina
6 comments
Read more