Оценок: 1
Полезные возможности браузеров

Полезные возможности браузеров

Здесь напишу про полезные инструменты для вебмастеров, которые есть практически во всех десктопных браузерах - Developer Tools (веб-инспектор).

Эти инструменты можно использовать как помощник в верстке сайтов, отслеживать ошибки на сайте, проверять скорость работы и оптимизацию. Отдельно для desktop и мобильного вида (версии).

Для доступа к панели инструментов необходимо:

Для Chrome, в меню: Посмотреть -> Разработчикам -> Инструменты разработчика.

Для Safari. Для начала необходимо включить меню "Разработка" в настройках браузера (Настройки -> Дополнения -> Показывать меню "Разработка" в строке меню). 

Далее в меню: Разработка -> Показать веб-инспектор

Opera. В меню: Разработчик -> Инструменты разработчика

Не буду дальше список продолжать, думаю понятно. Еще один вариант, более удобный - сделать клик ПКМ в любом месте на странице и в контекстном меню выбрать "Просмотреть код", или "Проверить объект". При этом сразу попадаем на нужный элемент в коде (далее в качестве примера Developer Tools в Chrome).

Попадаем вот в такую панель:

Инструменты вебмастера, пример

Здесь сразу видим код и рядом CSS стили, для выделенного элемента. Это вкладка "Элементы", вверху также есть другие вкладки, они могут отличаться для разных браузеров.

В левой части - разметка, в правой - css стили (отображаются стили для текущего выделенного эдемента). И код и CSS можно редактировать. Для редактирования кода необходимо нажать ПКМ на нужный тэг и в открывшемся меню выбрать "редактировать как HTML".

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

Панель инструментов можно расположить внизу экрана, слева, спрва, или в отдельном окне:

Здесь же, в правом углу показаны ошибки и предупреждения, а так же настройки, где можно настроить вид панели, а еще среди опций есть одна, на мой взгляд самая интересная здесь - "Отключить кеш". При выборе, с открытой панелью не будет использоваться кеш браузера, что очень удобно при частом изменении .css и .js файлов.

В левом верхнем углу есть переключение на мобильный вид и включение режима выделения:

Выделение и переключение на мобильный вид

Если включить "Выбрать элемент на странице", то при наведении на элементы на странице они будут подсвечиваться, а при нажатии будет выделен соответствующая часть кода.

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

Редактирование в мобильном виде

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

Консоль. Здесь показаны ошибки в скриптах, отсутствующие файлы (или битые пути к файлам), сюда же будет вывод результата console.log() JavaScript.

Источники. Все ресурсы (сайты), файлы, которые взаимодействуют с посетителями сайта.

Сеть. Проверка времени загрузки различных скриптов, файлов, время ответа.

Производительность. Время загрузки (отрисовки) сайта, по этапам.

Lighthouse - анализ производительности. Аналог google page speed.

Ниже видео, старое, возможно позже заменю.

Оценок: 1

Комментарии (0)