Здесь напишу про полезные инструменты для вебмастеров, которые есть практически во всех десктопных браузерах - Developer Tools (веб-инспектор).
Эти инструменты можно использовать как помощник в верстке сайтов, отслеживать ошибки на сайте, проверять скорость работы и оптимизацию. Отдельно для desktop и мобильного вида (версии).
Для доступа к панели инструментов необходимо:
Для Chrome, в меню: Посмотреть -> Разработчикам -> Инструменты разработчика.
Для Safari. Для начала необходимо включить меню "Разработка" в настройках браузера (Настройки -> Дополнения -> Показывать меню "Разработка" в строке меню).
Далее в меню: Разработка -> Показать веб-инспектор
Opera. В меню: Разработчик -> Инструменты разработчика
Не буду дальше список продолжать, думаю понятно. Еще один вариант, более удобный - сделать клик ПКМ в любом месте на странице и в контекстном меню выбрать "Просмотреть код", или "Проверить объект". При этом сразу попадаем на нужный элемент в коде (далее в качестве примера Developer Tools в Chrome).
Попадаем вот в такую панель:
Здесь сразу видим код и рядом CSS стили, для выделенного элемента. Это вкладка "Элементы", вверху также есть другие вкладки, они могут отличаться для разных браузеров.
В левой части - разметка, в правой - css стили (отображаются стили для текущего выделенного эдемента). И код и CSS можно редактировать. Для редактирования кода необходимо нажать ПКМ на нужный тэг и в открывшемся меню выбрать "редактировать как HTML".
В правой части - CSS, здесь можно редактировать существующие стили и добавлять новые.
Панель инструментов можно расположить внизу экрана, слева, спрва, или в отдельном окне:
Здесь же, в правом углу показаны ошибки и предупреждения, а так же настройки, где можно настроить вид панели, а еще среди опций есть одна, на мой взгляд самая интересная здесь - "Отключить кеш". При выборе, с открытой панелью не будет использоваться кеш браузера, что очень удобно при частом изменении .css и .js файлов.
В левом верхнем углу есть переключение на мобильный вид и включение режима выделения:
Если включить "Выбрать элемент на странице", то при наведении на элементы на странице они будут подсвечиваться, а при нажатии будет выделен соответствующая часть кода.
Что касается мобильного вида, то сайт откроется как бы с мобильного устройства, в масштабируемом окне и можно будет настроить его под разные разрешения экрана.
Далее кратко пройду по основным вкладкам (вкладки могут меняться в разных версиях одного и того же браузера).
Консоль. Здесь показаны ошибки в скриптах, отсутствующие файлы (или битые пути к файлам), сюда же будет вывод результата console.log() JavaScript.
Источники. Все ресурсы (сайты), файлы, которые взаимодействуют с посетителями сайта.
Сеть. Проверка времени загрузки различных скриптов, файлов, время ответа.
Производительность. Время загрузки (отрисовки) сайта, по этапам.
Lighthouse - анализ производительности. Аналог google page speed.
Ниже видео, старое, возможно позже заменю.
