Из каких элементов состоит вкладка sources браузера google chrome
Мы продолжаем цикл статей об инструментах разработчика — Chrome DevTools. В первых двух частях мы уже познакомились с вкладками Elements, Console, Sources и Network и разобрались с их основными функциями.
Возможности Chrome DevTools огромны. С их помощью можно изменять анимацию, проверять доступность, отлавливать ошибки, следить за производительностью сайта и выполнять многие другие задачи. Но на начальных этапах обучения веб-разработке не обязательно разбираться со всеми функциями. Достаточно знать набор базовых инструментов, который понадобится для решения повседневных задач.
Давайте разберёмся, какие задачи можно решить с помощью Chrome DevTools
Посмотреть, как выглядит страница с телефона и планшета
При создании адаптивных сайтов или веб-приложений полезно знать, как выглядит страница на планшете и мобильных устройствах. С помощью инструментов разработчика вы можете сделать это за несколько секунд. Для этого откройте Chrome Devtools, а затем кликните на иконку Toggle device toolbar в левом углу или нажмите комбинацию Ctrl+Shift+M:
Над страницей появится панель с режимами эмуляции из мобильных устройств и планшетов. По умолчанию панель инструментов открывается в режиме адаптивного окна просмотра. Чтобы изменить область до нужных размеров, задайте ширину или потяните за границы рабочей области. А если хотите увидеть, как страница отображается на конкретных устройствах, например, на iPhone 5, кликните на Responsive и выберите подходящий девайс.
Так выглядит страница в мобильной версии
На этой же панели есть еще одна полезная кнопка — DPR (Device Pixel Ratio). С её помощью проверяют, как выглядят изображения на ретина-дисплеях — экранах с повышенной плотностью. Чтобы посмотреть, как выглядит графика на разных устройствах, измените значение DPR и обновите страницу.
Быстро изменить стили прямо на странице
В процессе разработки бывает удобно менять стили прямо в браузере. Например, чтобы проверить, как выглядит элемент с новыми CSS-правилами, или выровнять его при вёрстке под PixelPerfect.
Менять стили в Chrome DevTools можно во вкладке Elements. Сначала выберите элемент, который хотите изменить. Для этого кликните по нему в дереве DOM или активируйте иконку выбора, а затем прямо на странице нажмите на этот элемент.
Меняем элемент прямо на странице
После этого в разделе Styles добавьте, удалите или поменяйте стилевые правила.
В разделе Styles также можно проверять, задавать и исправлять стилевые правила для :hover , :active , :focus и других псевдоклассов. Чтобы это сделать, выберите элемент, которому задано интерактивное состояние. Затем в разделе Styles нажмите на кнопку : hov, выберите подходящий псевдокласс и управляйте его стилями.
Изменяем стилевые правила для псевдоэлементов
Протестировать блоки на переполнение
Во вкладке Elements можно редактировать не только стили, но и DOM-дерево: добавлять и удалять элементы или блоки, менять текст, управлять атрибутами и классами. Это очень удобно, особенно если нужно протестировать какую-то гипотезу или проверить ошибки в вёрстке.
Одна из задач, выполняемых разработчикам с помощью Chrome DevTools — тестирование вёрстки на переполнение. То есть проверка, как ведут себя блоки и элементы при добавлении контента или изменении размеров страницы. Например, вы можете проверить, не выходит ли текст за рамки блока или не выпадают ли элементы из общего потока.
Популярный среди разработчиков мем и заодно пример того, как не нужно делать: вёрстка не должна ломаться при добавлении новых элементов, увеличении текста или изменении размеров страницы.
Как проверить элемент на переполнение текстом
Во вкладке Elements найдите в DOM-дереве элемент, кликните по нему два раза и добавьте текст:
Добавлять текст можно и на самой странице. Для этого откройте соседнюю вкладку Console, введите команду document.body.contentEditable = true и нажмите Enter. После запуска команды вы сможете нажать на элемент и отредактировать его.
Переполнение родительских блоков
Чтобы проверить, не выпадают ли блоки из потока и сохраняется ли сетка, найдите родителя и ему добавьте несколько дополнительных дочерних элементов. Для этого кликните на одном из таких элементов правой кнопкой мыши и нажмите на Duplicate Element.
Пример переполнения: элементы выпадают из родительского блока.
Узнать, какие файлы подключены, и посмотреть их расположение
Порой разработчикам нужно проверить подключенные к проекту файлы и посмотреть их содержимое. В таких случаях на помощь приходит вкладка Sources:
Слева на панели находятся все загруженные ресурсы. Справа — редактор, в котором можно просмотреть любой из загруженных файлов, в том числе изображения. Здесь же можно редактировать CSS и JavaScript. При этом если вы редактируете скрипты, обязательно сохраняйте изменения с помощью команд Command + S для Mac или Control + S для Windows и Linux. Сохранять правки CSS не нужно, они сразу вступают в силу. Конечно, после перезагрузки страницы всё откатится до начального состояния.
Меняем цвет фона во вкладке Sources
Понять, почему не работают скрипты
Здесь разработчик добавил лишнюю кавычку. Ошибка на первой строке в документе diseasmap.js
Иногда бывает сложно разобраться, с чем связана ошибка и как её решить — особенно если вы только начали учиться разработке. В таких случаях приходится искать ответ в интернете: на форумах и профессиональных чатах.
Еще один способ найти и отладить ошибку — воспроизвести её. Используйте для этого точки останова, которые приостанавливают код в момент его выполнения.
Как использовать точки останова
Для начала откройте вкладку Sources и выберите файл со скриптом. Затем кликните по номеру строки, на которой вы хотите приостановить выполнение кода. Выбранные точки сразу появятся на панели справа в разделе Breakpoints.
Также можно пойти другим путём: кликните на Event Listener Breakpoints и выберите события, на которых нужно приостановить выполнение кода.
JavaScript выполняется последовательно. Когда Chrome дойдет до точек останова, он остановит выполнение скрипта, и вы сможете отследить, что происходит с кодом. Например, посмотреть значения переменных или разобраться с логикой функций. С этого момента только вы управляете кодом. Можете перейти к следующей точке, шагнуть внутрь функции или отключить точки останова. В этом вам помогут кнопки на панели справа.
Для чего они нужны, пойдем по порядку:
Resume Script Execution — продолжает выполнение скрипта до следующей точки останова. Горячая клавиша F8.
Step over next function call — выполняет строку кода и переходит к следующей функции. Горячая клавиша F10.
Step into next call function call — выполняет строку кода и затем ныряет внутрь функции — на первую строку. Горячая клавиша F11.
Step out of current function — выполняет до конца текущую функцию и останавливается на её последней строке. Горячая клавиша Shift + F11.
Step — по принципу действия похожа на Step into of current function. Но если Step into нужен для того, чтобы попасть внутрь функции, то Step просто выполнит её и покажет результат. Горячая клавиша F9.
Deactivate breakpoints — отключает точки останова. Горячая клавиша Ctrl + F8.
Pause on exceptions — выполнение JavaScript приостанавливается, когда появляется какое-то исключение.
Проверить качество сайта
При разработке сайта важно позаботиться о том, чтобы он быстро загружался и был доступен для пользователей и поисковых систем. С помощью инструмента Lighthouse вы можете протестировать свой сайт на скорость, семантику, доступность, разметку и другие характеристики.
Lighthouse оценивает классические сайты по четырём критериям: производительность, лучшие практики, SEO и доступность. Для сайтов, выполненных по технологии PWA (прогрессивные веб-приложения), добавляется пятый критерий — progressive web app.
Как использовать Lighthouse
Чтобы запустить проверку, перейдите во вкладку Lighthouse и нажмите на кнопку Generate report. Во время тестирования инструмент будет менять размеры браузера, имитировать отключение и подключение интернета и выполнять другие операции.
В конце вы получите оценки качества сайта по 100-балльной шкале: чем выше оценка, тем лучше. При этом на чистоту проверки могут влиять разные факторы, в том числе интернет-соединение и расширения Chrome. Поэтому лучше запускать тест в режиме инкогнито, закрыв остальные вкладки.
Результаты проверки.
Ниже находятся показатели, которые повлияли на оценку, скриншоты поэтапной отрисовки страницы и предложения — что можно улучшить. Например, Lighthouse может предложить оптимизировать картинки и шрифты, включить отложенную загрузку графики, уменьшить неиспользуемый CSS и JavaScript или внести другие изменения. Каждое предложение подробно описано, можно даже перейти на отдельную страницу и прочитать о нём подробнее.
Lighthouse не единственный инструмент для оценки качества сайта. Есть и другие сервисы, например, PageSpeed Insights. Но он хорошо справляется со своей задачей, и его можно можно использовать при работе с сайтами на локальном сервере.
При оптимизации сайта в Chrome DevTools вы также можете использовать вкладку Network. Она поможет проанализировать загрузку страницы, посмотреть приоритет и вес загружаемых ресурсов, а также увидеть другую полезную информацию. Более подробно о ней мы рассказали в статье «Введение в Chrome DevTools. Console, Sources, Network».
Chrome DevTools облегчает процесс разработки. И хотя начинающим разработчикам бывает непросто сразу разобраться во всех инструментах — это и не нужно. Сначала осваивайте базу и читайте документацию. А чтобы научиться применять Chrome DevTools на практике, попробуйте наши интенсивы «HTML и CSS. Адаптивная вёрстка и автоматизация» и «JavaScript. Профессиональная разработка веб-интерфейсов». Создайте свой проект под руководством наставника, оптимизируйте его производительность и научитесь отладке кода с помощью инструментов разработчика.
Читайте о встроенном в Chrome Диспетчере задач. Как его открыть, посмотреть запущенные в браузере процессы, или завершить нежелательные . Как узнать какие процессы используют ресурс браузера, замедляют его работу и не являются ли они вредоносными.
Введение
Аналогично большинству операционных систем, обладающих встроенными приложениями «Диспетчер задач» или «Монитор ресурсов» , которые позволяют отслеживать все активные процессы и программы, запущенные на пользовательском компьютере, в веб-браузере «Google Chrome» также присутствует одноименная функция, ответственная за избавление от проблемных вкладок и расширений. И далее мы подробнее на ней остановимся.
Откройте «Диспетчер задач Google Chrome»
Доступ к искомой функции обозревателя «Google Chrome» , как и ко всем остальным настройкам браузера, возможен из панели управления. И чтобы осуществить переход к требуемой службе необходимо выполнить ряд последовательных действий.
Шаг 1. Откройте на компьютерном устройстве веб-браузер «Google Chrome» .
Шаг 2. В правом верхнем углу окна обозревателя, после адресной строки и кнопок управления установленными приложениями, нажмите на кнопку «Настройка и управления Google Chrome» , представленную в виде трех последовательно расположенных точек, образующих вертикальную линию, и откройте главное меню веб-браузера.
Шаг 3. Во всплывающей панели меню отыщите, в представленном перечне доступных системных действий, и выберите раздел «Дополнительные инструменты» , для отображения вложенного скрытого меню, в котором, из вариантов предложенных функций, выберите раздел «Диспетчер задач» .
Примечание. Для продвинутых пользователей обозреватель «Google Chrome» предоставляет возможность напрямую открыть окно «Диспетчер задач» без перехода в меню управления обозревателя. В качестве альтернативы, используйте комбинацию совместно нажатых клавиш «Shift + Esc» в программной платформе управления компьютерным устройством «Windows» , или клавиш «Search + Esc» в операционной системе «Chrome» .
Теперь, когда открыто окно «Диспетчер задач» веб-браузера «Google Chrome» , пользователи могут ознакомиться со списком всех сетевых вкладок, расширений и процессов, запущенных в данный момент в обозревателе и представленных в простой стандартной табличной форме.
Окончание любых хлопотных процессов
Ознакомившись с перечнем, представленных в окне «Диспетчер задач» , запущенных процессов, пользователи могут быстро завершить любой из них, непосредственно воспользовавшись возможностями данной службы. Такая операция может быть особенно полезна в случае, когда отдельная вкладка или исполняемая служба перестает реагировать на действия пользователей, замирает или не отвечает на соответствующее обращение браузера.
Чтобы принудительно прекратить исполнение проблемного процесса, необходимо отыскать его в окне «Диспетчер задач» веб-браузера «Google Chrome» , выделить, щелкнув левой кнопкой мыши, а затем нажать на кнопку «Завершить процесс» , ответственную за непосредственное исполнение команды.
При необходимости выбрать сразу несколько процессов, дальнейшее функционирование которых более не требуется, или активные задачи функционируют с ошибками, содержат отдельные неполадки, блокирующие исполнение установленных команд, имеют подтвержденный отказ работоспособности, то пользователи могут завершить исполнение всех процессов одновременно, отметив каждый необходимый элемент из списка, удерживая нажатой клавишу «Shift» или «Ctrl» (клавишу «Command» на устройствах «Mac» ), тем самым расширяя список выделения, а затем нажав на кнопку «Завершить процесс» для исполнения.
Ознакомьтесь с данными об используемых, запущенными задачами, ресурсах
Стандартная форма отображения функции «Диспетчер задач» содержит предустановленный, заданный по умолчанию, набор ресурсов, с которым пользователи могут ознакомиться сразу после запуска службы, и включает несколько важных источников данных. Однако представленным списком ресурсов возможности веб-браузера «Google Chrome» не ограничиваются. И пользователи могут ознакомиться со всеми ресурсами, используемыми каждой из активных задач. В обозревателе «Google Chrome» , на выбор пользователям, доступно более двадцати категорий статистических данных, которые могут быть мгновенно добавлены в основной список отображения функции «Диспетчер задач» в качестве новых дополнительных столбцов.
Для изменения количества отображаемых сведений пользователям необходимо щелкнуть правой кнопкой мыши по задаче, с дополнительными данными которой необходимо ознакомиться, и открыть всплывающее контекстное меню с полным списком доступных параметров статистики.
В представленном списке нажмите левой кнопкой мыши на любые дополнительные категории, чтобы добавить их в стандартное окно отображения сведений функции «Диспетчер задач» . Категории, отмеченные «галочкой» рядом с названиями, уже отображаются по умолчанию. Если необходимо убрать конкретный раздел статистических данных для уменьшения загруженности окна функции вариантами разнообразных сведений, то в контекстном меню нажмите на лишнюю категорию и убедитесь, что флажок рядом с ее именем был снят. И в главном окне функции столбец будет исключен из общей таблицы информационных данных, отображаемых в окне «Диспетчер задач» .
Полный список возможных категорий статистических сведений, доступных для отображения, представлен следующими разделами:
- «Задача»
- «Профиль»
- «Объем потребляемой памяти»
- «ЦПУ»
- «Процессорное время»
- «Время начала»
- «Сеть»
- «Идентификатор процесса»
- «GDI-дескрипторы»
- «USER-дескрипторы»
- «Кеш изображений»
- «Кеш скрипта»
- «Кеш CSS»
- «Память GPU»
- «Память SQLite»
- «Порт отладки NaCl»
- «Память JavaScript»
- «Переходы в активный режим»
- «Ошибки отсутствия страницы в памяти»
- «Приоритет процессов»
- «Количество соединений keepalive» .
Пользователи могут отсортировать данные в определенных столбцах, щелкнув левой кнопкой мыши по его заголовку. Например, если нажать на название столбца «Объем потребляемой памяти» , то процесс, использующий большую часть памяти, будет отображен первым, в отсортированном по убыванию результатов, списке.
Повторное нажатие на заголовок столбца «Объем потребляемой памяти» изменит способ представления статистических данных, и расположит готовые сведения в порядке возрастания, поместив в начало списка наименьший результат.
Совет для профессионалов: если дважды щелкнуть левой кнопкой мыши строку запущенной вкладки в окне функции «Диспетчер задач» , то веб-браузер «Google Chrome» мгновенно выполнит переход на выбранную вкладку. Если пользователи выбрали определенное расширение, обозреватель отобразит в новой вкладке соответствующую страницу настроек указанного расширения, предоставив доступ к связанным параметрам.
Заключение
Международная компьютерная сеть «Интернет» представляет собой самый обширный источник получения разнообразной информации, а также выступает главным связующим элементом для удаленной передачи данных и безопасного способа их хранения на сторонних закрытых серверах. И благодаря использованию специальных приложений, взаимодействие пользователей с сетью «Интернет» значительно упрощается.
Сетевые обозреватели позволяют обрабатывать поступающие данные и отображают информацию в доступном виде, а также облегчают их обработку, защиту, хранение, возможные варианты обмена и перемещения посредством внедрения разнообразных функциональных расширений и предустановленных служб.
В веб-браузере «Google Chrome» , одном из наиболее востребованном обозревателе среди пользователей в мире, доступна возможность дополнительной установки различных расширений множества разработчиков. За отслеживание информации и получение статистических данных о деятельности запущенных вкладок, расширений и исполняемых процессов, в «Google Chrome» отвечает функция «Диспетчер задач» , функционирующая по аналогии с одноименными службами операционных систем.
И пользователи, в случае возникновения непредвиденных ситуаций, связанных с отказом работоспособности отдельных вкладок, приложений или процессов, а также для ознакомления с нагрузкой и задействованием ресурсов обозревателя «Google Chrome» , могут воспользоваться статистическими результатами, отображаемыми в окне функции «Диспетчер задач» . Простой способ запуска функции позволит пользователям проанализировать состояние запущенных процессов обозревателя и в случае обнаружения неполадок мгновенно устранить проблему, принудительно завершив любой из процессов.
Как известно, веб-разработка делится на 2 части: frontend (фронтенд) и backend (бэкенд).
Вольно выражаясь, фронтенд это то, что работает в браузере, т.е. верстка (html + css) и браузерные скрипты (javascript).
Бэкенд — это скрипты, работающие на сервере.
В этой статье разберем инструменты разработчика (DevTools), которые встроены во все современные браузеры. Эти инструменты — незаменимая вещь для фронтенд-разработчика.
Разбирать будем на примере инструментов разработчики, которые встроены в браузер Google Chrome.
Открыть инструменты разработчика можно 3-мя способами:
- Нажать клавишу F12
- Нажать сочетание клавиш ctrl+shift+i
Через меню браузера: в правом верхнем углу три точки -> Дополнительные инструменты -> Инструменты разработчика См. картинку:
Через меню браузера: в правом верхнем углу три точки -> Дополнительные инструменты -> Инструменты разработчика См. картинку:
Внимание: Инструменты разработчика предоставляют огромное множество возможностей, и в этой статье мы разберем лишь некоторые из них.
Сначала про расположение: открыв блок инструментов в правом верхнем углу мы снова видим три точки, нажав на них можно расположить инструменты разработчика справа, слева, внизу и в отдельном окне. См. скриншот:
Сначала про расположение: открыв блок инструментов в правом верхнем углу мы снова видим три точки, нажав на них можно расположить инструменты разработчика справа, слева, внизу и в отдельном окне. См. скриншот:
Инструменты разработчика для верстальщика
Инструменты распределены по панелям. Их достаточно много, но как часто бывают, чаще используют лишь некоторые из них.
Панель «Elements»
Эта панель отображает элементы и их свойства, и мы можем редактировать эти элементы и свойства прямо тут же в браузере.
Панель «Elements» разделена на две области: дерево элементов страницы и свойства выбранного элемента.
Панель «Elements» разделена на две области: дерево элементов страницы и свойства выбранного элемента.
Выбрать элемент, для просмотра его свойств, можно разными способами:
При помощи визуального поиска: щелкаем мышью по стрелочке, которая находится в левом верхнем углу блока инструментов разработчика и мышью выбираем нужный элемент:
При помощи визуального поиска: щелкаем мышью по стрелочке, которая находится в левом верхнем углу блока инструментов разработчика и мышью выбираем нужный элемент:
При активных инструментах разработчика нажать ctrl+f и в появившейся строке поиска ввести: тег, класс, атрибут, текст элемента…
При активных инструментах разработчика нажать ctrl+f и в появившейся строке поиска ввести: тег, класс, атрибут, текст элемента…
На панели «Elements» можно увидеть все css-правила, применяемые к элементу.
В реальной разработке к одному элементу может применяться множество правил, находящихся в разных местах css-файла, и, даже в разных css-файлах.
И в этом случае вкладка «Elements» просто незаменима. На скриншоте ниже показан элемент, на который действует множество правил, находящихся в разных местах и разных файлах, сразу видно, в каком файле и на какой строке находится то или иное правило:
Это очень удобно при изучении чужого кода.
Например, мы изучаем популярнейший css-фреймворк bootstrap. Среди его классов, относящихся к сетке (т.е. к позиционированию элементов) имеется класс .row. Любой, кто верстает с использованием этого фреймворка использует этот класс, практически, на каждой странице. Для чего же он нужен?
Открывает инструменты разработчика, находим элемент с этим классом, выделяем его и смотрим:
Глядя на эти правила, мы понимаем, что:
- Этот класс является flex-контейнером для вложенных элементов display: flex;
- Элементы, находящиеся внутри этого контейнера, будут выстраиваться в несколько строк flex-wrap: wrap;
- Ну и видим, справа и слева минусовые отступы.
Но и это далеко не всё. Мы можем просмотреть правила, которые применяются при срабатывании псевдоклассов. Таких как :hover, :active и т.д. См. скриншот:
Но и это далеко не всё. Мы можем просмотреть правила, которые применяются при срабатывании псевдоклассов. Таких как :hover, :active и т.д. См. скриншот:
Можно увидеть, как будет выглядеть элемент, если к нему применить какой-то из существующих классов или отключить уже примененный класс:
Переключившись на вкладку «computed» можно посмотреть окончательную версию всех стилей, примененных к элементу:
Проверка разметки на адаптивность
Поскольку современная верстка адаптивна, т.е. делается под множество устройств с различными размерами экрана, перед разработчиком встает задача, проверить, как будет выглядеть его верстка при различной ширине экрана.
Для этого мы можем использовать «Переключение в режим устройства» (Toggle device mode). Повторное нажатие на эту иконку, вернет обычный режим:
И после этого, можно выбирать какое-то устройство из списка или выбрать произвольную ширину:
Вы можете выбрать устройство и повернуть его:
В режиме устройства, можно перезагрузить страницу с эмуляцией медленного интернета, вы увидите, насколько долго грузится ваша страница, быть может стоит оптимизировать изображения? См. скриншот ниже:
Инструменты разработчика для javascript-программиста
Программирование состоит не только из написания кода. Редко случается, что мало-мальски сложный код начинает сразу работать так, как было задумано. В большинстве случаев “что-то идет не так”. Чтобы заставить программу (скрипт) выполняться так, как задумал разработчик, ее «отлаживают».
Отладка — этап разработки, на котором обнаруживают и устраняют ошибки. Часто она занимает больше времени, чем собственно написание кода.
Для фронтенд javascript-программиста средой выполнения скриптов, которые он пишет, является браузер. Дальше посмотрим какие возможности для отладки предоставляют нам «инструменты разработчика» в Google Chrome.
Панель «Console»
В принципе, при написании js-скриптов консоль, обычно, открыта всегда, поскольку любые необработанные ошибки, сразу видны. Видны файл и строка, где произошла ошибка:
В первой части цикла про инструменты разработчика мы разобрались со вкладкой Elements, а теперь продолжаем знакомить с другими важными частями DevTools — вкладками Console, Sources и Network.
Бонус — расскажем, как сделать скриншот всей страницы в Chrome без плагинов.
Вкладка Console
Вкладка Sources
Теперь заглянем во вкладку Sources. Она показывает все подключенные к странице ресурсы. Чаще всего эта вкладка используется при отладке кода.
Например, так выглядит минифицированный CSS-файл на вкладке Sources.
Чтобы посмотреть файл в более привычном виде, нажмите на иконку с фигурными скобками внизу окна:
Вкладка Network
С её помощью можно выяснить, сколько времени заняла загрузка страницы, какие ресурсы подключились или не подключились к странице, и многое другое. При первом открытии вкладка может оказаться пустой — тогда просто перезагрузите страницу.
После перезагрузки внизу появится таблица всех ресурсов, подключенных к странице, и данные о них. Здесь можно узнать тип запроса, который был отправлен для получения ресурса, статус ответа, размер ресурса и многое другое.
Обычно вкладку Network используют, чтобы узнать состояние ресурса, который не отображается на странице, но был к ней подключен. Смотрим в таблицу — если есть какая-то ошибка, ресурс будет гореть красным. Если ошибок нет, то статус каждого запроса — 200. Это значит, что всё хорошо.
Если нажать кнопку фильтра, появится возможность посмотреть, как загружаются определенные ресурсы — например, картинки или шрифты.
В левом нижнем углу — информация о количестве запросов, трафике и времени загрузки. Ещё мы можем выбрать скорость соединения и проверить, как сайт работает на мобильном где-нибудь за городом.
Проверка вёрстки на мобильных
Легко проверить, как выглядит вёрстка на мобильных. Заходим в режим эмуляции и всё — можем поменять ширину экрана, выбрать конкретный девайс (например, айфон), просмотреть все media-выражения, примененные к странице, или выбрать плотность пикселей, чтобы проверить ретиновую графику.
Это незаменимый инструмент в работе над адаптивной вёрсткой.
Скриншоты страниц
Другая возможность — скриншоты страницы. Заходим в режим эмуляции и в выпадающем меню выбираем «сделать скриншот» — изображение сразу сохраняется на компьютер.
Также есть возможность сделать скриншот всей страницы целиком — для этого выберите пункт Capture full size screenshot.
На этом всё — в следующих выпусках расскажем, как пользуются DevTools настоящие профессионалы.
DevTools — инструмент разработчика
Но сила не в инструментах, а в голове. Познакомьтесь с вёрсткой бесплатно прямо сейчас.
В этом цикле статей мы разберём базовые возможности Chrome DevTools, но их будет вполне достаточно для начала обучения.
Как открыть инструменты разработчика
Настройки DevTools
Тема интерфейса
Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.
Горячие клавиши
В настройках есть список горячих клавиш — советуем с ними ознакомиться, знание этих комбинаций очень ускорит работу.
Расположение панелей
В правом верхнем углу находится кнопка, которая отвечает за расположение панелей. DevTools может находиться снизу, слева, справа, а ещё мы можем открепить отладчик и работать с ним в отдельном окне.
Вкладка Elements
С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.
Как получить информацию об элементе
Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.
Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.
Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.
Введём, например, класс header , и увидим все подходящие элементы:
Визуальный поиск. При открытом отладчике открываем режим визуального поиска, находим нужный элемент и кликаем по нему.
Как внести изменения в элемент на странице
Если вы хотите отредактировать атрибут, класс или текст элемента, сделайте двойной щелчок в нужной точке и вносите изменения.
Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.
Как изменить разметку страницы
Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.
Проверка вёрстки на переполнение
Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.
Проверка на переполнение текстом. Есть два способа:
- Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
- Открываем вкладку Console, вставляем команду document.body.contentEditable = true , нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.
На что обращать внимание? При добавлении текста элементы должны растягиваться по вертикали, текст не должен вылезать за поля элемента, выпадать или обрезаться.
Переполнение потоковыми блоками. Находим родителя, в котором лежат нужные элементы и редактируем разметку, добавляем несколько блоков, применяем изменения и смотрим результат.
Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.
Просмотр и тестовое редактирование стилей
Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.
На скриншоте выше — стили браузера, применяемые к элементу. Они могут отличаться в зависимости от выбранного браузера. А здесь находятся унаследованные стили.
Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.
Меняем стили прямо в браузере
Любое правило можно отредактировать, а размеры элементов менять прямо в блоке с метрикой. Например, переопределим значение размера шрифта, и результат сразу появится на экране.
Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.
А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style .
Слева у всех элементов есть чекбокс для включения и выключения стилей.
Данные о цвете
У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.
Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.
Гвозди можно заколачивать и микроскопом, но лучше не надо
Сила — в знании, какие инструменты когда применять. Знания — на интерактивных курсах и интенсивах.
Читайте также: