Javascript – how can I check if event listener is fired when I open chrome dev tool and set responsive size

Thank you everyone and sorry for making a confusing. I attached some part of codes. But I don't think it's about code and it's related to my settings of dev tool since this always happens. I found solution that I can check the implemented event listener in dev tool like the picture I attached. But I want to see visually event working when I apply The Toggle Device Toolbar.

This video is the tutorial I'm working on and 2:05:30 is what I want to do but I can't do. I can't click the menu bar and it doesn't open on responsive size. But he clicks menu bar and opens successfully(click event is working visually) on same responsive size as mine in dev tool. https://youtu.be/P8YuWEkTeuE

Every project, when I open dev tool and apply The Toggle Device Toolbar, event listener can't be visible even if it's working successfully. And there's no problem when I don't apply the toggle device toolbar and I can see event firing visually.

It might be small problem but I have been really struggling with this. Sorry for my English.

javascript*

const bar = document.getElementById("bar");
const nav = document.getElementById("navbar");
const close = document.getElementById("close");

if (bar) {
  bar.addEventListener("click", () => {
    nav.classList.add("active");
    console.log("click");
  });
}

if (close) {
  close.addEventListener("click", () => {
    nav.classList.remove("active");
    console.log("remove");
  });
}

*****html

<div>
        <ul id="navbar">
          <li><a class="active" href="index.html">Home</a></li>
          <li><a href="shop.html">Shop</a></li>
          <li><a href="blog.html">Blog</a></li>
          <li><a href="about.html">About</a></li>
          <li><a href="contact.html">Contact</a></li>
          <li id="logo-bag">
            <a href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a>
          </li>
          <a href="#" id="close"><i class="fa-solid fa-xmark"></i></a>
        </ul>
      </div>
      <div id="mobile">
        <a href="cart.html"><i class="fa-solid fa-bag-shopping"></i></a>
        <i id="bar" class="fa-solid fa-bars"></i>
      </div>

*****************css

#mobile {
  display: none;
  align-items: center;
}

#close {
  display: none;
}

@media (max-width: 799px) {
  .section-p1 {
    padding: 40px 40px;
  }
  #navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    right: -300px;
    height: 100vh;
    width: 300px;
    background-color: #e3e6f3;
    box-shadow: 0 40px 60px rgba(0, 0, 0, 0.1);
    padding: 80px 0 0 10px;
    transition: 0.3s;
  }

  #navbar .active {
    right: 0;
  }

  #navbar li {
    margin-bottom: 25px;
  }

  #mobile {
    display: flex;
    align-items: center;
  }

  #mobile i {
    color: #1a1a1a;
    font-size: 24px;
    padding-left: 20px;
  }

  #close {
    position: absolute;
    display: initial;
    top: 30px;
    left: 30px;
    color: #222;
    font-size: 24px;
  }