版上各位大大安好：

看影片學習JS時，發現教學會用瀏覽器的主控台來說明每個元素的一些基本資訊，就像下圖（截部份）：

影片中是用firefox，我自己練習則是使用chrome，然而在chrome中我卻沒辦法把元素再攤開來檢視基本資訊，請問chrome中是否有設定可以開啟這個功能？還是這是firefox才有的功能呢？
下圖是chrome的畫面：

兩個瀏覽器用來測試的程式碼如下：
HTML部份

<div class="all-inputs">
        <form>
          <input
            type="text"
            class="class-name"
            placeholder="class category"
            list="opt"
          />

          <input type="text" class="class-num" placeholder="class number" />

          <input
            type="number"
            class="class-credits"
            placeholder="credits"
            min="1"
            max="6"
          />

          <select class="grade">
            <option value=""></option>
            <option value="A">A</option>
            <option value="A-">A-</option>
            <option value="B+">B+</option>
            <option value="B">B</option>
            <option value="B-">B-</option>
            <option value="C+">C+</option>
            <option value="C">C</option>
            <option value="C-">C-</option>
            <option value="D+">D+</option>
            <option value="D">D</option>
            <option value="D-">D-</option>
            <option value="F">F</option>
          </select>
          <button class="del">
            <i class="fa-solid fa-trash"></i>
          </button>
        </form>
</div>

JS部份

function setGPA() {
  let formLength = document.querySelectorAll("form").length;
  let credits = document.querySelectorAll(".class-credits");
  let selects = document.querySelectorAll("select");
  let sum = 0; 
  let creditSum = 0; 

  for (let i = 0; i < credits.length; i++) {
      console.log(credits[i]);
  }
}

麻煩請各位大大幫我解惑，謝謝！