Сохраняются ли в файл изменения внесенные через chrome devtools
Обновлено: 06.07.2024
В этом руководстве содержится практический опыт настройки и использования рабочей области. После добавления файлов в рабочее пространство изменения, внесенные в исходный код в DevTools, сохраняются на локальном компьютере и сохраняются после обновления веб-страницы.
Необходимые условия. Перед началом этого руководства необходимо знать, как выполнять следующие действия.
Обзор
Рабочее пространство позволяет сохранить изменение, которое вы делаете в Devtools, на локализованную копию того же файла на компьютере. В этом руководстве на компьютере должны быть следующие параметры.
- У вас есть исходный код для сайта на рабочем столе.
- Вы работаете на локальном веб-сервере из каталога исходных кодов, чтобы сайт был доступен по localhost:8080 .
- Вы открылись в Microsoft Edge, и вы используете DevTools для изменения localhost:8080 CSS сайта.
С включенной рабочей областью изменения CSS, внесенные в DevTools, сохраняются в исходный код на рабочем столе.
Ограничения
Если вы используете современную структуру, она, вероятно, преобразует исходный код из формата, который легко поддерживать, в формат, оптимизированный для максимально быстрого запуска.
Workspaces обычно может с помощью исходных карт составить оптимизированный код обратно в исходный код. Но между фреймворками существует множество различий в том, как каждая структура использует исходные карты. Devtools не поддерживает все варианты.
Известно, что рабочей области не работают со следующими рамками.
Создание React App
Связанная функция: локальные переопределения
Локальные переопределения — это еще одна функция DevTools, аналогичная рабочей области. Используйте локальные переопределения, когда вы хотите экспериментировать с изменениями на веб-странице, и вам необходимо отображать изменения на веб-странице нагрузки, но вам не важно сопоставление изменений в исходный код веб-страницы.
Шаг 1. Настройка
Выполните следующие действия, чтобы получить практический опыт работы с workspaces.
Настройка демонстрации
Создание app каталога на рабочем столе. Сохранение копий файлов из workspaces-demo каталога в app каталог. В остальной части учебника каталог называется
Запустите локальный веб-сервер
Настройка DevTools
Выберите Control + Shift + J (Windows, Linux) или (macOS), чтобы открыть консольную панель Command + Option + J DevTools. ****
Панель Консоли
Перейдите к средству Sources.
В области Навигатор (слева) выберите вкладку Filesystem.
Вкладка Filesystem
Выберите добавить папку в рабочее пространство.
Выберите Разрешить предоставить DevTools разрешение на чтение и записи в каталог. На вкладке Filesystem зеленая точка теперь отображается рядом index.html с и script.js styles.css . Зеленая точка указывает, что DevTools установил сопоставление между сетевым ресурсом страницы и файлом
Вкладка Filesystem теперь указывает сопоставление между локальными и сетевыми файлами
Шаг 2. Сохранение изменения CSS на диск
Свойство color h1 элементов установлено fuchsia для .
Просмотр styles.css в текстовом редакторе
Выберите средство Elements.
Измените значение color свойства элемента на <h1> ваш любимый цвет. Помните, что для отображения правил CSS, примененных к ней в области Стилей, необходимо выбрать <h1> элемент dom Tree. **** Зеленая точка рядом с означает, что любое изменение, которое вы styles.css:1 делаете, соо-
Зеленый индикатор, связанный с файлом
Откройте styles.css в текстовом редакторе снова. Свойство color теперь настроено на ваш любимый цвет.
Обновите страницу. Цвет элемента <h1> по-прежнему за набором вашего любимого цвета. Изменение остается через обновление, так как при внося изменения DevTools сохранил изменение на диск. Затем при обновлении страницы локальный сервер обслуживал измененную копию файла с диска.
Шаг 3. Сохранение HTML-изменения на диске
Изменение HTML-кодов из панели Elements
Вы можете внести изменения в html из панели элементов, но изменения дерева DOM не сохраняются на диске и влияют только на текущую сессию браузера.
Дерево DOM не html.
[!WARNING] > The workflow that you are about to try does not work. You are trying it now so that you do not waste time later trying to figure out why it is not working. 1. Choose the **Elements** tool. 1. Choose and edit the text content of the `h1` element, which says `Workspaces Demo`, and replace it with `I ❤️ Cake`. . image type="complex" source="../media/workspaces-workspaces-demo-change-h1.msft.jpg" alt-text="Attempt to change html from the DOM Tree of the Elements panel" lightbox="../media/workspaces-workspaces-demo-change-h1.msft.jpg". Attempt to change html from the DOM Tree of the **Elements** tool . image-end. 1. Open `
Изменение HTML-кодов из средства Sources
Если вы хотите сохранить изменение HTML веб-страницы, используйте средство Sources.
Перейдите к средству Sources.
В области Навигатор (слева) выберите вкладку Page.
Выберите (индекс). Открывается HTML-код страницы.
Замените <h1>Workspaces Demo</h1> <h1>I ❤️ Cake</h1> . Просмотрите следующую цифру.
Выберите Control + S (Windows, Linux) Command + S или (macOS), чтобы сохранить изменение.
Обновите страницу. Элемент <h1> продолжает отображать новый текст после обновления страницы.
Изменение HTML-кодов из средства Sources
/Desktop/app/index.html . Элемент <h1> содержит новый текст.
Шаг 4. Сохранение изменения JavaScript на диск
Основным местом для использования редактора кода DevTools является средство Sources. Но иногда при редактировании файлов требуется доступ к **** другим средствам, таким как средство Elements или панель консоли. Средство Быстрого источника предоставляет только редактор из средства Sources, в то время как любое средство открыто.
Чтобы открыть редактор кода DevTools наряду с другими средствами, сделайте следующее:
Перейдите к инструменту Elements.
Выберите Control + Shift + P (Windows, Linux) или Command + Shift + P (macOS). Откроется командное меню.
Quick Source Введите, а затем выберите показать быстрый источник. В нижней части окна DevTools отображается средство Быстрого источника, отображающий содержимое последнего файла, отредактируемого в средстве index.html Sources.
Откройте средство быстрого источника с помощью командного меню
Выберите Control + P (Windows, Linux) Command + P или (macOS), чтобы открыть диалоговое окно Open File. Просмотрите следующую цифру.
script Введите, а затем выберите app/script.js.
Откройте script.js диалоговое окно Open File
Ссылка Save Changes To Disk With Workspaces в демо регулярно стилизуется.
Добавьте следующий код в нижнюю часть script.js с помощью средства Быстрого источника.
Выберите Control + S (Windows, Linux) Command + S или (macOS), чтобы сохранить изменение.
Ссылка на странице теперь является italicized.
Ссылка на странице теперь является итальяно-
Дальнейшие действия
Используйте то, что вы узнали в этом руководстве, чтобы настроить workspaces в собственном проекте.
Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь и является автором Kayce Basques (технический писатель, Chrome DevTools & Маяк).
Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.
Мы продолжаем цикл статей об инструментах разработчика — 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 DevTools. Рассказываем, что это такое и как с этим работать.
Вкратце о DevTools
Далеко не все разработчики (даже опытные) достаточно хорошо осознают, что один из лучших инструментов для тестирования, рефакторинга и оптимизации кода всегда был у них под рукой. Речь идет о браузере.
Некоторые вовсе не в курсе, что в браузерах есть инструменты для разработчиков. А те, кто в курсе, зачастую используют их для проверки одного-двух элементов на чужих ресурсах, не углубляясь в возможности DevTools. В то же время это грандиозный набор инструментов, который многим может заменить полноценную среду разработки.
Здесь есть редактор кода, дебаггер, наглядная визуальная система управления стилями, функция автоматической проверки сайтов на качество (производительность, SEO, адаптация под людей с ограниченными возможностями и т.п.). Также сам браузер поможет адаптировать сайты под мобильные устройства и экраны разных гаджетов.
Давайте обо всем поговорим подробнее и выясним, чем же так хорош Chrome DevTools.
Как открыть Chrome DevTools
Начнем с главного – откроем инструменты для разработчика. Это можно сделать тремя способами:
через контекстное меню,
через настройки браузера,
с помощью сочетания клавиш.
В первом случае нужно кликнуть по любой части страницы, а затем выбрать пункт «Посмотреть код» (не путайте с «Просмотром кода страницы», эта опция показывает исходный код в отдельной вкладке, не запуская DevTools).
Чтобы открыть DevTools через настройки, нужно кликнуть по иконке в виде трех точек в правом верхнем углу. В появившемся списке найти пункт «Дополнительные настройки» и навести на него курсор. А затем выбрать пункт «Инструменты разработчика».
Ну и основной способ, которым вы будете пользоваться чаще всего, когда запомните – горячие клавиши. Вызвать DevTools можно одновременным нажатием клавиш Ctrl + Alt + I в Windows и Cmd + Alt + I в macOS.
Основные возможности Chrome DevTools
Разберем базовые функции инструментов разработчика в Google Chrome. Посмотрим, что можно делать с веб-страницей, и поймем, почему некоторые разработчики используют DevTools чуть ли не чаще, чем какую-нибудь IDE или текcтовый редактор.
Поиск DOM-элементов
Первое, что вы увидите, когда откроются инструменты разработчика – редактор HTML-кода. Это полноценное DOM-дерево, которое можно просмотреть от и до. И не только посмотреть, но и изменить. Для начала посмотрим, как легко можно найти любой элемент страницы в коде, используя DevTools.
Во-первых, при вызове инструментария можно кликнуть правой кнопкой мыши не по пустому пространству, а по конкретной кнопке или картинке. Тогда при нажатии на «Просмотреть код» в DOM-дереве подсветится выбранный элемент.
Во-вторых, можно воспользоваться отдельной функцией поиска HTML-компонентов. Для этого нужно кликнуть по иконке в виде стрелки в левом верхнем углу окна DevTools, а затем навести курсор на интересующую кнопку/ссылку/картинку и т.п.
Также элементы подсвечиваются при наведении на них мыши в редакторе.
Редактирование HTML
Весь текст на сайте можно редактировать прямо в браузере. Менять любые параметры DOM.
В DevTools отображаются все вложенные элементы сайта (все div, section, footer, p и прочие). Чтобы отредактировать текст в блоке, нужно кликнуть по нему два раза. Текст выделится, и в нем появится курсор.
То же можно проделать с классами и типами данных. Кликнув по имени класса (или самому слову class), вы получите доступ к редактору именно этой части кода. Это удобно, когда нужно скорректировать небольшую часть кода.
Можно заменить сразу большой участок текста или поменять наименования атрибутов. Для этого кликаем правой кнопкой мыши по элементу или его части, а затем выбираем одну из опций. Например, Edit as HTML.
Работа с CSS
Ниже редактора HTML располагается окно для работы со стилями. В нем есть все необходимое для настройки визуальной составляющей сайта, а также несколько удобств, отличающих DevTools от большинства подобных инструментов.
К примеру, каждое свойство можно отключить, кликнув по чекбоксу слева от него. С добавлением новых свойств та же ситуация. Они тут отображаются как отдельные единицы интерфейса, а не как часть текстового поля.
Также в инструментах разработчика Google Chrome много графических элементов управления. Есть визуальная настройка угла наклона градиентов и удобная палитра для выбора цвета.
Сделаем и то, и другое на примере страницы выше. Поменяем через Chrome DevTools цвет кнопки.
Что получится при смене дизайна клавиш и подсветки ссылок:
Также в Chrome DevTools есть графическая презентация отступов объекта. С помощью нее можно легко настроить положение элемента относительно других, связанных с ним компонентов страницы.
А еще это удобный способ понять, как работают свойства margin и padding.
Также с помощью инструментов разработчика можно вынудить элементы вести себя определенным образом. К примеру, принудительно активировать псевдокласс :hover, чтобы настроить внешний вид кнопки при наведении на нее курсора.
Внесенные изменения можно отследить в графе Changes (в нижнем блоке DevTools, справа от Console). Они оформлены в стиле GitHub. То есть видно и замененный элемент, и его обновленный вариант.
Разработка адаптивного дизайна
Инструменты Chrome DevTools идеально подходят для тестирования сайта на разных экранах. Браузер умеет эмулировать любое устройство и любое разрешение экрана. Так что вы можете, не покидая браузера, взглянуть, как будет выглядеть ваше детище на планшетах, смартфонах и ПК-мониторах любого размера и с любыми органами управления.
Чтобы перейти в режим адаптивной верстки, надо кликнуть по кнопке Toggle device toolbar или нажать Cmd + Shift + M.
Над сайтом слева появится новая панель управления с кнопкой Responsive. Кликнув на нее, вы увидите список доступных устройств. Выбирайте то, которое хотите эмулировать, и разметка сайта адаптируется под его разрешение.
Для упрощения процесса верстки под конкретное разрешение, нужно кликнуть по иконке в виде трех точек слева от кнопки запуска режима адаптивной верстки и нажать на строку Show rulers. Появится пиксельная линейка для «подгонки» сайта.
А еще тут можно делать скриншоты сайта в заданном размере. Там же, где находится линейка, есть кнопка Capture screenshot.
Пример внесения изменений в HTML и CSS через Chrome DevTools
Разберем еще раз описанные выше возможности на конкретном примере. У меня есть страница, на которой некорректно отображается одна из кнопок. Она наползает на другие элементы приложения. Исправим это через DevTools.
Сначала ищем кривую кнопку в коде, активировав функцию поиска элемента.
Видим, что в коде для кнопки нет медиазапроса. То есть окно не адаптировано под конкретный размер дисплея. Добавляем необходимый код в css-файл и смотрим, что вышло. Кнопка уползла на нужно место.
Остается скопировать этот код непосредственно в приложение/сайт или сохранить обновленный CSS-файл в папку проекта. Для этого нужно открыть вкладку Sources, выбрать отредактированный файл (он будет помечен звездочкой), затем кликнуть по нему правой кнопкой мыши и выбрать опцию Save as…
Запуск и дебаггинг JavaScript-кода
Инструменты Chrome DevTools позволяют работать не только с CSS и HTML, но и с JavaScript-кодом. Можно запускать произвольные команды через встроенную консоль или подключая дополнительные JS-файлы.
Чтобы открыть JS-файл, нужно перейти во вкладку Sources справа от Elements.
Через консоль также можно отслеживать работу сайта, наблюдая за появляющимися ошибками и особенностями поведения сайта, в частности с помощью функции console.log( ).
А вот пример запуска произвольного кода внутри консоли браузера.
Также Chrome DevTools отлично подходят для поиска и исправления ошибок в коде. В нем для этого есть целый список брейкпоинтов, то есть точек, на которых останавливается исполнение кода с целью проанализировать его.
Например, можно настроить остановку кода по каждому действию, включая клик по кнопке или нажатие на клавишу. Чтобы создать брейкпоинты на эти действия:
- Открываем JavaScript-файл во вкладке Sources.
- Затем переходим в дебаггер. По умолчанию он привязан к нижней границе окна DevTools.
- Выбираем раздел Event Listener Breakpoints.
- В нем ставим галочку напротив действий, которые хотим отслеживать (при их выполнении исполнение кода будет останавливаться).
Другие возможности DevTools
Далее кратко разберем еще несколько важных вкладок в интерфейсе Chrome DevTools. Это те элементы, на которые стоит обратить внимание в первую очередь. Они отличают инструменты разработчика в браузере Google от аналогичных в других браузерах.
Оптимизация производительности сайта
В разделе Performance можно оценить скорость работы ресурса. Посмотреть, через какой период времени приходит ответ от сервера, за какой период времени отрисовывается интерфейс, в какой момент становится доступен хотя бы один из элементов сайта и так далее.
Браузер в автоматическом режиме создает профайл выбранной страницы и делит процесс загрузки на этапы посекундно, отображая информацию, необходимую для рейтинга Web Vitals. Это новый алгоритм оценки сайтов от Google.
Анализ подключения
В разделе Network можно посмотреть, как проходит подключение к источникам данных и загрузка отдельных элементов страницы. Здесь можно взглянуть на проблемные файлы, которые не загружаются вовсе или загружаются слишком долго.
Уровень безопасности сайта
Chrome DevTools умеет в автоматическом режиме анализировать страницу, проверять сертификаты и степень защищенности соединения. Сюда же попадает проверка всех подключаемых ресурсов.
Обязательно отслеживайте эту страницу, если рассчитываете на высокие позиции в поисковой выдаче Google.
Lighthouse
Пожалуй, самый удобный инструмент для первичной аналитики ресурса и выявления в нем недостатков. Одной кнопкой можно создать профиль сайта и получить все необходимые сведения о нем. Lighthouse покажет все слабые и сильные места ресурса.
Скорость загрузки и работы, адаптированность под людей с ограниченными возможностями, корректность верстки, адаптация под поисковые машины (SEO), поддержка Progressive Web App и т.п.
Инструменты разработчиков в Safari и в Mozilla Firefox
Естественно, Chrome – не единственный браузер, оснащенный HTML-редактором и дебаггером. Аналогичная функциональность есть в Safari и Firefox. У них зачастую даже интерфейсы схожие. Примерно такие же инструменты для визуального редактирования CSS и т.п.
Важное отличие инструментария в Chrome – наличие аналитических систем в духе Lighthouse. Они позволяют напрямую взаимодействовать с Google. Так проще исправлять ошибки в коде и адаптировать ресурс под требования поисковых машин.
Также инструменты в Safari и Firefox отличаются во всевозможных мелочах. Разные горячие клавиши, разное поведение при выделении и редактировании текста, разные ошибки в консоли по умолчанию и т.п. Но принцип остается один. Возможно, более детальные отличия изучим в следующих материалах.
Вместо заключения
На этом закончим обзорную статью про Chrome DevTools. При глубоком изучении инструмента выяснится, что в нем есть еще много полезных функций и скрытых настроек. Правда, охватить их в одном материале не получится. Но и описанных возможностей должно хватить, чтобы у тех, кто раньше недооценивал Chrome, появился повод передумать и взглянуть на DevTools по-новому.
Однако основным недостатком является то, что обычно эти изменения не сохраняются – если вы переходите на другую страницу или обновляете ту же страницу, все изменения теряются. Но теперь, с выпуском Chrome 65, все изменилось.
Постоянные локальные переопределения
Начиная с Chrome 65, DevTools теперь включает функцию «Local Overrides», которая позволяет вносить изменения, сделанные локально. Теперь вы можете не терять все свои изменения, когда вы обновите или покинете страницу.
Итак, как использовать эту функцию? Вот основные шаги, чтобы начать.
Включить локальные переопределения
- В DevTools откройте панель « Источники» .
- В разделе « Источники» откройте вкладку « Переопределения
Нажмите «Выбрать папку для переопределений». Затем выберите папку на локальном компьютере, где должны храниться локальные переопределения (вы можете создать новую папку специально для этой цели).
Теперь вы увидите, что установлен флажок «Включить локальные переопределения». Вы также заметили, что на панели « Сеть» имеется предупреждающий знак, указывающий, что некоторые сетевые запросы могут быть перезаписаны с локальным переопределением.
Внесите свои изменения
- Теперь вы можете вносить изменения в файлы. Если вы находитесь на панели « Элементы» , обратите внимание, что рядом с именем файла стоит маленький кружок, обозначающий, что он был отредактирован и теперь является локальным переопределением.
Примечание. Если вы обновляете разметку, используйте для этого панель « Источники» (а не панель « Элементы» ).
- Обновите страницу или перейдите на другую страницу сайта. Chrome продолжит использовать внесенные вами изменения.
Отслеживайте свои изменения
- На вкладке « Переопределения» (в разделе « Источники» ) отобразится список всех файлов, которые вы используете для локальных переопределений. Они будут организованы по доменам. Отсюда вы можете выбрать файлы для редактирования или вообще удалить локальные переопределения.
- Chrome также предлагает новую функцию под названием « Изменения» , которая предоставит вам обзор всех внесенных вами изменений. Это находится рядом с вкладкой Консоль DevTools.
Эта функция позволяет вам вернуться к внесенным вами изменениям и точно увидеть, чем они отличаются от исходных файлов.
Инструмент производительности
Функция переопределения не только позволяет экспериментировать с изменениями дизайна на нелокальном сайте, но также имеет значение для разработки, связанной с производительностью.
Благодаря настройке локальных переопределений у вас теперь есть возможность вносить изменения в код на нелокальном сайте, а затем посмотреть, какое влияние на эти изменения окажут на производительность. (И Гарри Робертс, и Умар Ганза выпустили недавние скринкасты, показывающие некоторые примеры этого.)
Например, вы можете перемещаться по местам размещения определенных сценариев на странице или добавлять некоторые стили, влияющие на отображение шрифтов, и быстро видеть влияние, которое они могут оказать. Вы можете обновить некоторые шаблоны JavaScript или обработчики событий и посмотреть, насколько значительными будут изменения.
Если вы работаете на сайте локально, эти новые функции могут иметь ограниченную ценность. Но в тех случаях, когда вы хотите экспериментировать на сайте, который не является локальным, и делать это быстро, эти новые функции открывают много возможностей.
Читайте также: