Тестирование верстки с помощью Devtools

Рет қаралды 5,096

Күн бұрын

Пікірлер: 13

@Cher_Ivan 11 ай бұрын

Спасибо ведущей, хороший материал. От себя немного добавлю: 1. При переключении адаптива с веб на мобилку и обратно лучше дополнительно обновлять страницу. Сильно удивитесь тому, как верстка изменится после рефреша (если говорить о выборе конкретного устройства) 2. Разные цвета в браузерах: был опыт, когда цвета элементов в Firefox и Chrome отличались. Про Internet Explorer и говорить не стоит - там вообще верстка расплывалась (благо, последние годы его исключили на тех проектах, где работал) 3. При тестировании верстки надо понимать разницу между отступами padding/margin. Тогда сразу станет понятно «где и почему» нужно использовать конкретный вид. В макетах этого нет будет, а вот в верстке может сыграть злую шутку: достаточно изменить ширину браузера, перетягивая влево-вправо границу девтулза. Если отступы подобраны правильно, то резких перекосов в верстке не будет. Если вместо padding-right разработчик прикрутил margin-right (к примеру), то элементы могут начать сваливаться ниже 4. На одном из проектов было пожелание «избавиться от излишней вложенности» элементов DOM. Напр: div1 с отступом1, в него вложен div2 с отступом2, в него вложен div3 с цветом и тп. Это все можно было вкрутить в один div вместо 3 5. Когда создается верстка, лучше сразу договориться о добавлении нормальных id элементов. Очень поможет при дальнейшей автоматизации: гораздо удобнее создавать локаторы по «человекочитаемым» id, чем потом городить xpath с множеством contains(@class,’’). Зачастую эти id вообще не добавляются на старте проекта, а переделывать потом готовые страницы - долго и дорого

@code_sisters 9 ай бұрын

спасибо за развернутое дополнение!

@annavend3464 3 ай бұрын

отличный коммент!

@aliakseibabitski7316 10 ай бұрын

Спасибо, реально полезный для джунов видос. Продолжайте, хорошая подача материала😊

@Diotima1 Жыл бұрын

Отличное видео, пусть оно будет первым в цикле обучающих видео этой авторки.

@code_sisters Жыл бұрын

спасибо, передадим! думаю ей будет очень приятно.

@user-bl8on1vq4o 7 ай бұрын

Спасибо, очень полезно!

@user-zt7px5lx6g 3 ай бұрын

Спасибо большое

@pavelm.2449 7 ай бұрын

Добрый день! подскажите пожалуйста название инструмента о котором в конце говорили, для определения ширины и т.п. спасибо

@code_sisters 6 ай бұрын

Здравствуйте! Ссылка на инструмент в описании под видео

@user-wl5mz3eq8u 5 ай бұрын

Много ли у вас на работе проверки вёрстки?

@wotskv 3 ай бұрын

Супер хреновый микрофон. К основной теме для проверки верстки есть инструмент перфект-пиксель. Просто накладываешь макет на страницу и видишь все несовпадения, можно менять зум, прозрачность, использовать альфа-канал. Инструмент не всесилен, но позволяет без особого напряжения проверить всю страницу целиком в статике.