Breakpoint wewnątrz debuggera powoduje błąd "Kurza twarz!" w przeglądarce

Question

Witam,

po wrzuceniu takiego skryptu:

let allButtons = document.getElementsByTagName('button');

let colorArray = [];

for (let i = 0; i<allButtons.length; i++){
    colorArray.push(allButtons[i].classList[1]);
    }

let colorDatabase = {
    red: 'btn-danger',
    green: 'btn-success',
    blue: 'btn-primary',
    yellow: 'btn-warning',
};

function buttonColorChange(option){
    
    let choosedColor = option.value;

    if (choosedColor==='reset')
        resetColors(allButtons, colorArray);

    else if (choosedColor==='random')
        pickRandomColor(allButtons, colorDatabase);

    else changeParticularColor(allButtons, choosedColor, colorDatabase);
}

function changeParticularColor(collection, color, newBase){
    for (let i=0; i<collection.length; i++){
        console.log(collection[i].classList[1]);
        collection[i].classList.remove(collection[i].classList[1]);
        collection[i].classList.add(newBase[color]);
    }
}

function resetColors(collection, newBase){
    for (let i=0; i<collection.length; i++){
        console.log(collection[i].classList[1]);
        collection[i].classList.remove(collection[i].classList[1]);
        collection[i].classList.add(newBase[i]);
    }
}

function pickRandomColor(collection, colorBase){
    let randomColorArray = ['red', 'green', 'blue', 'yellow'];
    for (let i=0; i<collection.length; i++){
        console.log(collection[i].classList[1]);
        collection[i].classList.remove(collection[i].classList[1]);
        collection[i].classList.add(colorBase[randomColorArray[Math.floor(Math.random()*4)]]);
    }
}

po ustawieniu w obszarze tego kodu breakpointu wewnątrz przeglądarkowego debuggera i odświeżeniu okna, przeglądarka Chrome wyrzuca błąd "Kurza twarz!" pomimo bezproblemowego wykonania całego skryptu.

W powyższym kodzie znajdują się następujące metody do uchwytu document.getElementsByTagName('button'):

• classList,
• classList.add(),
• classList.remove().

Czy ktoś spotkał się z podobnym problemem? I czy w ogóle jest to coś, czym należy się przejmować?

Pozdrawiam.

Comments

Pokaż jeszcze kod HTML.

Żeby zdiagnozować problem możesz uruchomić Chrome z flagą --enable-logging --v=1

https://support.google.com/chrome/a/answer/6271282?hl=en

---

Problem zlokalizowany, dla potomnych: reinstalacja przeglądarki pomaga, najprawdopodobniej problem nie leży wewnątrz kodu, a w bugu wewnątrz kodu Chrome'a.

---

Moze miałeś jakies jakies rozszerzenie ktore ktore modyfikowało Ci klasy CSS skoro reinstal pomógł  do klas odwołujesz się  troche w niebezpieczny sposób zakładając ze pod indeksem 1 zawsze jest klasa.

---

Klasy w tym projekcie są deklarowane z użyciem bootstrapowych szablonów do przycisków, więc przykładowy atrybut klasy przycisku w kodzie HTML ma np. wartość "btn btn-primary". Pierwszą klasą zawsze jest "btn", a drugą określenie rodzaju buttona, więc zawsze w przypadku usunięcia klasy o indeksie clasList[1] usuwamy tę określającą rodzaj, a dzięki temu, że metoda classList.add() działa jak push() w tablicach, zawsze usuwamy klasę o indeksie 1 i dodajemy klasę, która otrzymuje indeks 1. Więc zawsze coś tam jest.