Розробник налагоджує елементи DOM на вашій сторінці з одним рядком коду

Скільки разів ви боролися знайти одну конкретну проблему зіпсувати ваш CSS-макет? Від відсутності закриваючих тегів до неправильно вкладених братів і сестер, питання CSS - це десяток. І з цей відладчик розташування CSS, процес просто набагато простіше.

Цей рядок коду буде проходять по DOM і окреслити кожен елемент з іншим кольором. Таким чином ви можете краще візуалізувати як працює ваш CSS (або не працює) і швидко виявити проблемні зони.

GitHub дозволяє розробникам зберегти маленькі біти коду називається Gists. Всі вони з відкритим вихідним кодом і вільні збережіть для власного використання. Ось чому цей налагоджувач CSS настільки корисний. Він поєднує в собі Сучасна доблесть Chrome DevTools з простота браузерних букмарклетів.

Щоб скористатися цим кодом, потрібно спочатку скопіюйте будь-яку версію, яку вам найбільше подобається зі сторінки "Gist". Тоді ти вставте цей код у вікно Терміналу та запустити його. Ви повинні закінчити такий результат:

Тепер можна збережіть цей код як букмарклет на панелі інструментів веб-переглядача. Але якщо ви є користувачем Chrome, ви можете збережіть цей код JS як фрагмент коду що набагато легше керувати.

Цей фрагмент коду може бути нагадували знову і знову натисканням кнопки. Ти можеш аналізувати кожну сторінку, повний цих барвистих контурів CSS, для елементів DOM батьків і дітей.

Однак ви не повинні відчувати обмеження лише для Chrome. Цей фрагмент працює для всіх основних браузерів, включаючи Firefox, Safari, Opera та Internet Explorer.

І для всіх, хто цікавиться, як це працює, ви можете перевірити анотована версія з коментарями для кожного рядка коду.

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