#medium #development #web #css #javascript #devtools #chromium #browsers

Каждый раз при разработке с Reference-ом мы пытаемся мысленно разбить веб-сайт на слои, но что, если эта утилита всегда была под рукой?



Лет 6 назад в DevTools можно было увидеть интересную утилиту - Layers (Слои)

1. Открываем DevTools в Chrome, и включаем классический хоткей Ctrl + Shift + P или Command + Shift + P
2. Далее мы видим что-то вроде dmenu/rofi/spotlight и так далее
3. В ней нам интересно вбить "Слои" или "Layers"

На скриншоте пример - слои YouTube

Как это может быть полезно?

Вы понимаете лучше практики по организации масштабов, позиционирования, а также верного направления Ваших компонентов

К примеру в случае с Wikipedia - слой там один, ну еще кнопка находится одна на верхнем слое, в других случаях Вы можете наблюдать отступы и правила, которыми оно задано

Также Google хочет убрать эту feature в deprecated, поэтому вовремя извлеките её например здесь (https://stackoverflow.com/questions/47558844/is-it-possible-to-see-layers-in-firefox), где чел написал кусок кода для отображения страницы сллоями в Webkit (в комментариях будет код, вставьте в консоль любой вкладки и вертите страницу как хотите)

Подробный гайд по Chrome Layers ещё можно найти тут (на англ.) https://youtu.be/6je49J67TQk

Более подробная статья по коду из комментария тут (на англ.) - https://blog.scottlogic.com/2012/03/09/explodz-a-webkit-dom-visualizer.html

Ставьте Ваши реакции и задавайте вопросы в комментариях, они помогают стать нам лучше! 🙂