Моніторимо активацію подій через інспектор. Chrome Web Inspector — event listener breakpoints

Фотографи доволі специфічний тип клієнтів — вони готові нашпигувати головну сторінку десятком-другим зображень ширших за 6000 пікселів і переповнюватись праведними наріканнями в бік продуктивності рендерингу.

В більшості випадків проблема вирішується зменшенням до адекватного розміру та кількості фото. Проте іноді доводиться шукати функцію та правити її.

Якщо ви плануєте потратити на роботу не більше години, в нагоді стане event listener breakpoints — інструмент консолі розробника. З її допомогою легко моніториться яка подія запущена в даний момент.

Відкриваємо інспектор — ресурси. В правій колонці знаходимо нашу вкладку. Я тестую “рвану” анімацію при прокрутці, отже я виставляю галочки навпроти прокрутки миші.

Натискаю F8, прокручую колесико, щоб активувати вибрану мною дію і вуаля — у вкладці отримую документ та місце розташування фінкції, яку зараз розбиратиму.

Даний інструмент допоможе заощадити кілька горняток кави при відладці фронтенду і віднайти потрібну дію за кілька хвилин — хоча, замовникам я завше розповідаю, що для цього потрібно перебирати увесь код.

Смачного.

Залишити відповідь