IDX Not Refreshing with new code

General
1

When I changed my CSS code, and yes it is linked to my HTML, it does not refresh when I click reload. This happens sometimes, and same with my JS code. When I changed my JS, my preview output does not display the changes. Can anyone help, thanks!
popup.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Hello World</title>
  <link href='/style.css' rel='stylesheet'>
  <script defer type="text/javascript" src="/popup.js"></script>
</head>
<body>
  <img src="logo.svg" width=100%>
  <h1>chrome.clocker</h1>
  <h2 id="datenow"></h2>
  <h2 id="timenow"></h2>
  <h1>set a timer</h1>
  <h2 id="timer"></h2>
  <div>
    <button onclick="add_sec()">add 1 sec</button>
    <button onclick="sub_sec()">subtract 1 sec</button>
    <button onclick="add_min()">add 1 min</button>
    <button onclick="sub_min()">subtract 1 min</button>
    <button onclick="add_hour()">add 1 hour</button>
    <button onclick="sub_hour()">subtract 1 hour</button>
    <br>
    <button onclick="start_timer()">start timer</button>
  </div>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap');
body {
  font-family: 'Source Code Pro';
  color: #000000;
}
button {
  font-family: 'Source Code Pro';
  color: #000000;
}

popup.js

let total_seconds = 0;
let timer_hour = 0;
let timer_min = 0;
let timer_sec = 0;

function updateDateTime() {
  const timenow = new Date();
  const current_date = timenow.getDate();
  const current_month = timenow.getMonth() + 1;
  const current_year = timenow.getFullYear();
  const formatted_date = `${current_date}/${current_month}/${current_year}`;
  document.getElementById('datenow').textContent = formatted_date;

  let current_second = timenow.getSeconds();
  let current_minute = timenow.getMinutes();
  let current_hour = timenow.getHours();
  let a_pm = 'am';

  if (current_hour >= 12) {
    a_pm = 'pm';
    if(current_hour > 12)
    {
      current_hour -= 12
    }
    
  }
  if (current_hour == 0){
      current_hour = 12;
  }

  current_minute = current_minute < 10 ? `0${current_minute}` : current_minute;
  current_second = current_second < 10 ? `0${current_second}` : current_second;

  const formatted_time = `${current_hour}:${current_minute}:${current_second} ${a_pm}`;
  document.getElementById('timenow').textContent = formatted_time;
}

function updateTimerDisplay() {
  const display_hour = timer_hour < 10 ? `0${timer_hour}` : timer_hour;
  const display_min = timer_min < 10 ? `0${timer_min}` : timer_min;
  const display_sec = timer_sec < 10 ? `0${timer_sec}` : timer_sec;

  const countdown_timer = `${display_hour}:${display_min}:${display_sec}`;
  document.getElementById('timer').textContent = countdown_timer;
}

function updateCountdown() {
    if (timer_sec < 0){
        timer_sec = 0;
    }
    if(timer_min < 0){
        timer_min = 0;
    }
    if (timer_hour < 0){
        timer_hour = 0;
    }
    if (total_seconds < 0){
        total_seconds = 0
    }
    if (total_seconds > 0) {
        total_seconds--;
        timer_hour = Math.floor(total_seconds / 3600);
        timer_min = Math.floor((total_seconds % 3600) / 60);
        timer_sec = total_seconds % 60;
        updateTimerDisplay();
      }
}

setInterval(updateDateTime, 1000);

setInterval(updateCountdown, 1000);


async function add_sec() { 
    timer_sec++; 
    total_seconds++; 
    updateTimerDisplay()
    if (total_seconds < 0){
        total_seconds = 0;
    }
}
async function sub_sec() { 
    if (total_seconds > 0){timer_sec--; 
    total_seconds--;
    updateTimerDisplay()
    }
}
async function add_min() { timer_min++; total_seconds+=60;updateTimerDisplay()}
async function sub_min() {
    if (total_seconds > 0){timer_min--; 
    total_seconds-=60;
    updateTimerDisplay()}}
async function add_hour() { timer_hour++;total_seconds+=3600; updateTimerDisplay()}
async function sub_hour() {
    if (total_seconds > 0){timer_hour--;
    total_seconds-=3600; 
    updateTimerDisplay()}}
function start_timer() {
    total_seconds = timer_hour*3600+timer_min*60+timer_sec;
    if (total_seconds<1) {
        total_seconds = 1
    }
}
1 Like
2

Have you tried a hard restart or full reload?

Sometimes the CSS gets cached. Using something like vite with a dev server will hot swap the module to the browser to prevent the caching in dev mode