Chrome Devtools наконец -то представил хорошего гибкого отладчика. В Chrome 87 они пришли с Отладчик сетки А теперь в версии 90, мы можем использовать отладчик Cool Flex.
Посмотрим, что этот удивительный инструмент может сделать для нас.
Chrome Dev Tools CSS Flex Debugging
Во -первых, нам нужно открыть инструменты Chrome Dev.
Mac CMD + Сдвиг + C или Windows: Ctrl + Сдвиг + C Анкет
Теперь мы можем использовать Элементы Инспектор, где мы можем увидеть все элементы там, вы увидите [Flex] заблокировать элементы сетки ; Это была существующая особенность.
Как вы можете видеть в приведенном выше GIF, щелкнув по изгибному элементу, который теперь имеет небольшой значок рядом с ним, дает нам гибкое меню.
Нажатие на эти параметры быстро добавят соответствующие стили в наш элемент. Любые существующие стили будут предварительно проверены.
На этом этапе у нас есть возможность изменить следующие свойства:
- гибкое направление
- flex-wrap
- выравнивание
- оправдать контент
- Выравнивающие элементы
Я должен сказать, что я очень радует этой функции, это быстрый визуальный способ проверить, что происходит с нашими гибкими элементами.
Мы также получили возможность проверить определенные наложения Flexbox через вкладку макета.
Это поставит срок на определенные изгибы, поэтому мы можем быстро увидеть, что происходит по сравнению с другими.
И на экране вы увидите каждый элемент в определенной цветной сетке.
Спасибо за чтение, и давайте подключимся!
Спасибо за чтение моего блога. Не стесняйтесь подписаться на мою рассылку электронной почты и подключиться на Facebook или Твиттер
Оригинал: «https://dev.to/dailydevtips1/chrome-devtools-flex-debugger-2lg9»