Отладка кейса: кнопка не работает

Есть большое SPA приложение, написанное на ванильном javascript. Весь код написан в одном единственном .js файле на сотни строк кода. Вам передали проект на поддержку и вы единственный член команды. Вдруг к вам прибегает менеджер и говори, что на главной странице сайта кнопка, которая должная быть красного цвета, меняет своей цвет на зеленый раз в какое-то время. Найдите проблему и устраните.

🎯 Зачем спрашивают

Задача интервьюера понять, владеете ли вы инструментами разработки и отладки.

📝 Ответ

Коротко: Поставим DOM breakpoint → attribute modification на кнопке и прыгнем в участок JS, который меняет кнопку.

Подробнее:

Следует определить место, где находится код кнопки. Есть два пути. Первый путь: попытаться найти кнопку в проекте по ее контенту/подписи. Чаще всего это сработает, но не в этом случае, так как есть подвох.

Подвох


<html>
    <head>
        <style>
            .button1 {background-color: green;}
        </style>
    </head>
    <body>
        <div id="container"></div>
        <script>
            // Представим, что это внешний файл
            // тут МНОГА кода
            const hostEl = document.body.children[0];
            const bc = 'but';
            const bc2 = bc[2] + 'on';
            const r = 'Ra' + bc2[2] + 'd' + bc2[1] + 'm';
            const o = 'o';
            let bcnt = 1;

            hostEl['inner'+'HTML'] += `<${bc}ton cl${'ass'}="${bc + bc2 + (bcnt++)}">${r}</>`;

            const doEvil = function() {
                window[`setTime${o}ut`](() => {
                    hostEl.children[0][`st${'y'}le`][`${bc[0]}ackgr${o}und-c${o}lor`] = `${r[0]}ed ${'!'}imp${o}rtant`;

                    doEvil();
                }, window['Mat' + 'h']['ran'+'dom']() * 10000);
            }

            doEvil();
            // тут тоже МНОГА кода
        </script>
    </body>
</html>

Второй путь (самый надежный) — поставить DOM breakpoint, чтобы отловить момент смены цвета и прыгнуть в конкретную строку кода во всем проекте. Классическая точка остановы нам не подойдет, потому что она ставится в конкретный участок кода. А мы его как раз и ищем. Поэтому мы можем поставить точку остановы на конкретный html-элемент. Элемент модифицируется → в девтулзах мы прыгаем в код, производящий эти изменения.

⚖️ Компромиссы

✅ Плюсы: быстрый способ локализовать проблему в legacy.

❌ Минусы: если цвет меняется через CSS-анимацию или внешние стили, breakpoint не сработает. Придётся копать стили.

🔎 Встречные вопросы

Как отследить, если цвет меняется через CSS-анимацию?

Чем отличается модификация через inline-style и через класс?

🚩 Красные флаги

Буду читать код сверху вниз

Попробую console.log по всему проекту

Не знаю, что такое DOM breakpoints

🛠 Практика

Задание 1

Задача поставить DOM breakpoint в DevTools и найти код, который меняет цвет


<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Button Color Toggle</title>
</head>
<body>
  <button id="btn">Click me</button>

  <script>
    setInterval(() => {
      document.getElementById("btn").style.backgroundColor =
        Math.random() > 0.5 ? "red" : "green";
    }, 1000);
  </script>
</body>
</html>

📚 Источники / ссылки

Chrome DevTools. DOM Breakpoints