возможно заказать разработку или сопровождение, услуги вашего сайта/блога


обновлено: 2024-02-13 в теме: Браузеры -обозреватели
Запросто с WordPress создание и продвижение сайтов ATs media

Тестирование сайта web-инструментами Яндекс.Браузера

Однажды неожиданно для себя рассмотрел браузер Яндекса поближе, а именно его инструментарий для web-разработчика.

Всё время считал его простеньким дополнением к сёрфингу) И скажу честно – удивился, когда обнаружил полезные примочки для рихтовки сайтов.

 

Я, как и многие, крепко привык к старинке: “родному” бардачку Firefox с расширением Firebug и т.п. и ничего не хотел видеть кроме. Однако!.. …тем, которые обеспокоены адаптивной доводкой своего блога, будет полезно ознакомиться возможностями Я.Браузера:


 

консоль отладчика Яндекс Браузера

 

 

Откройте браузер или скрин и посмотрите на полезные дополнения:

 

Ф .2

 

 

консоль отладчика Яндекс браузера

 

 

 

Отличительной особенностью для новичка (и не только) будет наглядная приборная панель! Кстати сказать – тестерами вроде этого и этого я пользуюсь крайне редко, ибо нахожу ощутимые расхождения с реальными девайсами… а в инструментарии браузера-яшки максимально, на мой взгляд, приближено к реалиям; к тому же, коли иметь в виду реальную погрешность, к примеру, настоящего телефона, то всё вообще замечательно – возможна точнейшая доводка геометрики сайта вплоть до 1px и 02% путём стягивания внутреннего консольного окна.

 

Предположим: тестируем примерное отображение сайта на различных планшетах или телефонах…

 

Всё как обычно: открываем браузер – первая клава мыши, выбираем “посмотреть код”, выбираем “мобильник” (кнопочка в панели слева) и…

 

 

 

Web-инструменты Яндекс браузера

 

…стягиваем окно тестера… (не браузера)

 

Фото 2 подчёркнуто зелёным: активная шкала в px или (подчерк красным) можно выбрать стандартные расширения виртуальных окон девайсов.

 

А нам остаётся наблюдать, если случится, переломные моменты сайта и экспериментально поправлять тут же в панели ниже – окошко правее (не забывайте сохранять наработки, чтобы перенести в действительный файл стилей – тестер браузера только тестер – поправки не сохраняет).

 

Кроме того…

Чтобы взглянуть на файлы стилей своего сайта, достаточно кликнуть “Sources” (чуть вправо, на фотке выше) и пройти “по папочкам” до нужного файла… Это иногда полезно для того, чтобы тут же отследить какие величины в селекторах CSS конфликтуют.

 

Небольшой прейскурант горячих клавкиных комбинаций…

 

Ctrl+F – искать на странице.

Ctrl+U – исходный код страницы.

Ctrl+Shift+I – открыть код.

 

 

Думаю, пошагово описывать прелести струмента-браузера не имеет смысла: сами разберётесь… Всё в общем-то понятно…

 

Но о факте того, что Яша Browser имеет неплохие инструменты в помощь адаптивной вёрстке, хотелось доложить.

И, конечно же, не стоит отдавать каким-то браузерам файрфоксам окончательные приоритеты, это – неправильно. Но – следует помнить, что они прекрасно друг дружку дополняют!

И пусть коллеги простят мою некомпетентность, коли я разглядел лихость Я.Б поздновато)

 

вероятно, имеет смысл подписаться (впереди более подробный разбор бардачка интернетинга, в котором великое множество непостигнутого)):

 

 


подписка feedburner Online консультация по настройкам и созданию сайтов на WordPress

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©