Каждый раз при разработке с Reference-ом мы пытаемся мысленно разбить веб-сайт на слои, но что, если эта утилита всегда была под рукой?
Лет 6 назад в DevTools можно было увидеть интересную утилиту - Layers (Слои)
- Открываем DevTools в Chrome, и включаем классический хоткей Ctrl + Shift + P или Command + Shift + P
- Далее мы видим что-то вроде dmenu/rofi/spotlight и так далее
- В ней нам интересно вбить “Слои” или “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
