Почему вам следует начать использовать инструменты разработчика Chrome прямо сейчас

Разработчикам очень важно иметь хороший набор удобных инструментов для тестирования вашего веб-сайта. Где их лучше всего хранить? Конечно же, в вашем браузере! Популярный веб-браузер Google, Chrome, имеет встроенные инструменты разработчика. Это набор инструментов, предназначенных для веб-разработки и отладки. Инструменты разработчика Chrome (известные как DevTools) предоставляют разработчикам доступ к внутренней работе веб-браузера и веб-приложений.

Используя Chrome DevTools, вы можете узнать используемые стили, размер изображений, используемые скрипты и т. Д. Вы можете отлаживать и знать, какие ошибки существуют на странице. Вы даже можете включать или выключать стили или полностью изменять их, чтобы увидеть, какое влияние они оказывают на ваш сайт.

Это в вашем браузере

Сами инструменты достать легко. Вот три способа их открыть:

1. В браузере Chrome выберите меню Chrome (три горизонтальные полосы в правом верхнем углу), выберите «Дополнительные инструменты», а затем выберите «Инструменты разработчика».
2. Щелкните правой кнопкой мыши элемент на любой странице и выберите «Проверить элемент».
3. На клавиатуре Windows выберите ctrl + shift + i. На Mac выберите cmnd + opt + i.

Любой из них откроет окно DevTools в нижней части браузера.

Основное окно

Инструменты появятся внизу экрана. Вы увидите главное окно с меню вверху и элементами в качестве представления по умолчанию и дополнительное окно с меню и стилями в качестве выбора по умолчанию.

Инструменты сгруппированы по задачам. Есть 8 групп, которые включают элементы, сеть, источники, временную шкалу, профили, ресурсы, аудит и консоль.

Элементы

Здесь вы можете увидеть HTML-структуру вашей страницы. Внизу есть переключатель для HTML и Body. Вы можете навести указатель мыши на любой из элементов, чтобы просмотреть подробную информацию о каждом из них.

Вы можете щелкать стрелки, чтобы открывать и закрывать содержимое основных элементов, чтобы их было легче читать. Таким образом, вы можете закрыть тело и просто прочитать заголовок, выбрать элемент в заголовке для просмотра и т. Д. Это отличный инструмент для просмотра HTML-кода вашего веб-сайта.

Сеть

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

Например, если вы видите много ошибок 404, вы можете присмотреться, чтобы узнать, в чем заключаются проблемы. Возможно, вы опустили страницу, которая по-прежнему привлекает много трафика, или, может быть, кто-то неправильно набрал ссылку.

Источники

Это показывает скрипты и фрагменты, которые будут загружаться, и откуда они берутся.

Лента новостей

Это показывает время загрузки каждого ресурса. Вы можете увидеть, что занимает больше всего времени, что помогает сократить загрузку страницы.

Профили

Это показывает использование памяти каждым элементом. Это отлично подходит для демонстрации того, какой код необходимо оптимизировать.

Ресурсы

Здесь вы можете проверить загруженные ресурсы. Вы можете посмотреть файлы cookie, кеш приложений, базы данных HTML5 и т. Д.

Аудит

Это позволяет вам анализировать страницу. Вы можете выполнять аудит после загрузки или во время загрузки.

Текущее состояние аудита

Сначала я выбрал выполнение аудита текущего состояния. Это запускает аудит, поскольку сайт в настоящее время находится, уже загруженный в мой браузер.

Он дает мне список пунктов, раскрашивает их в соответствии с их важностью и показывает количество проблем. Я могу увидеть более подробную информацию, нажав на них.

Я расширил несколько из них, чтобы увидеть подробную информацию о каждом. Он дает мне информацию об использовании сети и производительности веб-страниц. Он дает мне советы о том, как исправить проблемы, и расставляет их для меня по приоритетам.

Перезагрузка страницы и аудит при загрузке

Я вернулся и выбрал аудит при загрузке. Результаты аналогичны, но, как и ожидалось, при загрузке страницы возникает больше проблем, чем после загрузки страницы.

Между ними я получаю информацию о JavaScript, кешировании браузера, прокси-кешировании, размере файлов cookie, обслуживании контента из домена без файлов cookie, размерах изображений, порядке и стилях скриптов, размещении CSS в заголовке документа, удалении неиспользуемых цепочек CSS и использовании обычного CSS. имена свойств. Конечно, результаты будут отличаться в зависимости от сайта.

Информация не такая подробная, как PageSpeed ​​Insights, но ее достаточно для начала, и мне нравится удобство ее встроенности в инструмент, который я в любом случае использую. Я рекомендую запускать его каждый раз, когда вы вносите изменения в свой сайт. Его слишком легко использовать, чтобы не использовать.

Консоль

Это консоль JavaScript, где вы можете тестировать страницы и приложения. Вы можете отлаживать свои сценарии и получать советы о том, какие изменения нужно внести. Консоль позволяет вам вводить команды, чтобы вы могли взаимодействовать со своей веб-страницей. Он будет регистрировать диагностическую информацию, чтобы помочь вам в отладке. Вы можете использовать его на главном экране или в ящике (окно под главным экраном).

Вы можете использовать консоль или API командной строки. Вы можете писать в Консоль, форматировать свои элементы и стили вывода, измерять время выполнения или загрузки, просматривать и отмечать временную шкалу, подсчитывать операторы, устанавливать точки останова, оценивать выражения, отслеживать события, сообщения стека, просматривать ошибки и предупреждения и многое другое. более.

Это мощный инструмент, но его можно очень много использовать. К счастью, есть хороший справочный материал с примерами его использования.

Отладка

Выбор ctrl + p в Windows или cmd + p на Mac откроет экран отладки, где вы можете выбрать сценарии для отладки. Этот инструмент дает вам функции отладки, которые вы ожидаете увидеть в любой среде программирования: пауза, продолжение, переход, переход, точки останова, форматированный код и т. Д.

Подробные файлы справки предоставлены для пошаговых инструкций по использованию режима отладки.

Окно стилей CSS

Поле справа содержит всю информацию CSS. Когда вы выбираете элемент, в окне «Стили» справа отображается информация о стилях для этого элемента. Этот раздел интересный. Существует пять групп инструментов: стили, вычисляемые, прослушиватели событий, точки останова DOM и свойства.

Стили

Вы можете выбрать стили и вручную изменить их в этом окне. Например, вы можете выбрать размер и цвет шрифта.

Выберите размер шрифта и введите свой размер. Когда вы это сделаете, размер выбранного вами шрифта изменится на экране.

При выборе цвета шрифта откроется палитра цветов. Выберите нужный цвет и нажмите Enter. Вы увидите, что выбранный вами шрифт изменится на новый цвет. Это отличный способ опробовать новые стили, размеры и цвета шрифтов.

Если вы нажмете на site.CSS справа, вы откроете большее окно с подробной информацией. Здесь вы можете ввести название шрифта, который хотите использовать, указать цвет, указать размер и т. Д.

Вычислено

Это показывает размер блока в пикселях. У него есть отступы, граница и поля.

Режим устройства

Слева между лупой и меню «Элементы» есть небольшая кнопка, которая выглядит как мобильное устройство. Угадай, что? Это мобильное устройство. Это режим эмуляции устройства. Это отличный способ увидеть, насколько быстро реагирует ваш сайт.

Устройство

Что еще круче, чем просто быть мобильным устройством, так это то, что вы можете выбрать, какое это мобильное устройство, а затем вы можете видеть веб-сайт, как если бы вы просматривали его на этом устройстве. Вот это здорово!

Я выбрал Amazon Kindle Fire HDX 7 ”, и экран имитировал это устройство, чтобы я мог видеть, как сайт будет выглядеть на его экране и как будут работать сенсорные кнопки.

Вы можете изменить ориентацию экрана, нажав кнопку «Поменять местами».

Это отличный способ увидеть, как ваш сайт WordPress выглядит на маленьком экране мобильного устройства. Я выбрал iPhone 6, и размер экрана изменился в соответствии с новым размером и разрешением экрана. Есть много устройств для просмотра. Вы также можете увидеть нестандартный размер, перетащив стороны, чтобы увеличить или уменьшить размер.

Сеть

Также есть возможность выбрать тип сети, через которую вы получаете доступ к сайту. Это позволяет вам видеть производительность вашего веб-сайта с помощью различных типов и скоростей подключения. Вы можете протестировать несколько скоростей от 50 Кбит / с GPRS до 30 Мбит / с WiFi, а также несколько скоростей подключения 2G, 3G и 4G. Это отличный способ проверить скорость вашего веб-сайта в различных сетях и понять, что следует улучшить.

Медиа-запросы

В левом верхнем углу есть небольшая кнопка, похожая на ступеньки. Он открывает другой раздел экрана над окном веб-сайта, который показывает разную ширину в пикселях. При нажатии на них экран мобильного телефона приобретает этот размер. Они показывают вам:

• Запросы с таргетингом на максимальную ширину
• Ширина в диапазоне
• Запросы с таргетингом на минимальную ширину

Это поможет вам настроить стили и мультимедийный контент для получения полностью адаптивного дизайна.

Чертежник

Под главным экраном есть еще один раздел инструментов, который называется ящиком. Это добавляет:

Консоль - это та же консоль, что и в главном окне. Поместив его сюда, вы можете использовать его вместе с любыми инструментами в главном окне.

Поиск - позволяет искать источники.

Эмуляция - вы можете выбрать Устройство (здесь вы можете выбрать модель, разрешение, сеть и т. Д.), Медиа, Сеть (пропускная способность и пользовательский агент) и Датчики (сенсорный экран, акселерометры и т. Д.).

Рендеринг - отображение прямоугольников рисования, границ составных слоев, счетчика кадров в секунду, непрерывной перерисовки страницы и потенциальных узких мест при прокрутке.

Настройки и многое другое

Строка меню справа сообщит вам количество ошибок и предупреждений на вашем сайте, позволит вам скрыть ящик внизу, позволит вам настроить параметры и прикрепить инструмент к главному окну (создавая разделенный экран между ваш сайт и DevTools).

Существует огромное количество настроек, которые вы можете настроить, чтобы вы могли модифицировать инструменты для работы так, как вам нужно.

Chrome Canary

Если вы действительно хотите быть в курсе последних достижений Google Chrome DevTools, попробуйте Chrome Canary. Его значок желтый. Возьми? Нужна накидка. Это последняя и лучшая разработка Google. Он предназначен для разработчиков и имеет последнюю версию DevTools. Он еще недостаточно стабилен для общего использования, поэтому, вероятно, сломает вашу систему.

Если вы склонны наносить серьезный ущерб своей среде, когда ваша система ломается, посмотрите на значок Chrome Canary на изображении выше и не мигайте в течение пяти секунд.

Теперь можно переходить к концу. Вы не запомните эту часть.

Заключение

Инструменты разработчика Google Chrome - отличный инструмент для устранения неполадок, повышения производительности сети, просмотра вашего сайта на экранах разных размеров и разрешений и получения информации о том, где ваш сайт нуждается в улучшении. Функций много, и вы можете добавить еще больше с помощью расширений. Сами по себе эти инструменты являются отличной причиной для установки Google Chrome, даже если это не ваш основной браузер. Время, потраченное на изучение функций, окупится, и ваш сайт и посетители будут вам благодарны за это.

Твоя очередь! Вы используете Инструменты разработчика Chrome? Я упустил вашу любимую функцию? Есть что добавить? Хотелось бы услышать об этом в комментариях ниже!

Миниатюра статьи Anikei / shutterstock.com