Lovelace custom card not updating

Development
1

I’m trying my first lovelace custom card. When I make changes to the js file, they are not updating in the UI. Simple things like changing the text that is printed out. I’m using the content-card-example as a template. When I change the text it doesn’t get reflected on the UI. I’m tried the following.

  1. Flushed my browser
  2. remove the old card and re-added it

Any help will be appreciated.

1 Like
2

did you figure this out - driving me mad too!

2 Likes
3

Anyone having any luck?

4

If you pop over to my front end repo for Philips hue icons you’ll find the JavaScript source includes a couple of things that might help.

  1. Including the file manually via your configuration.yaml:
  extra_module_url:
    - /local/your_script_name_here.js
  1. this addition to the javascript file which helps you identify which version you’re running in the console:
console.info(
    `%c HASS-HUE-ICONS  \n%c  Version 1.0.98    `,
    "color: orange; font-weight: bold; background: black",
    "color: white; font-weight: bold; background: dimgray",
);

The first is a useful way to force the script to load even before the dashboard gets selected. It means that if you open on the default dashboard, your script still runs. The second lets you look at the javascript console and see which version of the script (if any) is loaded.

5

In the lovelace, resources tab in resources

  • Add the resource eg /local/irrigation-card.js?v=1 increment the version number if updating an exsting installation

Then just refresh the browser

4 Likes
6

For whoever is still pulling his/her hair out: You need to open the javascript file in a seperate tab and refresh that a couple of times. Than refresh HA. Caching is a ***

1 Like
7

I do not know if this also fixes your problem, but it might be helpful for others who want to test out writing custom cards:
Disable your browser cache on the dashboard tab!
To do so, go to the network tab of your browser and tick the box saying Disable cache there.

Then I can just edit the code of the card in one tab (preferably in VSCode) and - after saving - refresh the tab that is running the dashboard (where I have disabled the cache) and see the updated card there. This makes it much more convenient to develop a custom card imo.

Hope this helps :slight_smile:

Example from my Chrome Browser:
image

See here how to get to the network tab in your browser: How to Get the Console/Network Tab Screenshot : 10to8.

10 Likes