Инструменты разработчика Google Chrome для не разработчиков

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

Но это не только пользовательская сторона. Он также очень хорош для разработчиков. Firefox - еще один отличный браузер, который обеспечивает превосходный опыт разработки, хотя его база пользователей относительно небольшая. По этой причине мы фокусируемся на Chrome и его DevTools, но, к счастью, пользовательский интерфейс большинства браузеров остается очень похожим, поэтому приведенные здесь советы будут хорошо переведены на Firefox, Safari, Edge и другие браузеры.

Что такое Chrome DevTools?

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

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

Инструменты разработчика - это то, что вы видите на скриншоте выше, с кодом слева и различными свойствами справа. Это представление по умолчанию, которое вы увидите, если нажмете Command + Option + C (Mac) или Control + Shift + C (Windows, Linux, Chrome OS).

DevTools предлагает множество возможностей, но наиболее заметными из них будут:

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

Это очень короткий список, но он охватывает некоторые из наиболее примечательных функций, в основном то, что мы рассмотрим.

Связанный : Как создать свое первое расширение Chrome

Зачем вам нужны DevTools, каковы варианты использования?

Для разработчиков это очевидно, а что насчет не разработчиков? Что ж, есть несколько изящных уловок и советов, которые приблизят вас к статусу опытного пользователя. Часто владельцы сайтов выявляют проблемы на сайте, задают пару вопросов и иногда получают фрагмент кода, который нужно «вставить», чтобы исправить проблему. Один из способов тестирования таких сниппетов разработчиками - их непосредственное применение к инструментам разработки. Это также способ предоставить вашим разработчикам хороший предварительный обзор того, как вы хотите, чтобы все выглядело.

Применить код CSS

Первое и наиболее частое использование DevTools - это изменение и применение CSS. CSS - это то, что определяет внешний вид страницы, это эстетика. Для этого вам просто нужно указать на элемент, который вы хотите стилизовать, щелкнуть правой кнопкой мыши и выбрать «проверить».

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

Может быть немного сложно разобраться в части HTML, но не волнуйтесь, DevTools будет выделять элементы, когда вы наводите их на левую панель. Как только вы найдете то, что вам нужно, справа вы можете писать стили. Уже добавлено несколько. Итак, давайте изменим фон на чтение и посмотрим, как он выглядит:

Сразу по мере ввода стили на странице обновятся. Вы можете написать здесь любой CSS, и он будет применяться так же, как стили, уже присутствующие на странице. Если вы нажмете ближе к концу правил (под «шириной»), начнется добавление новых стилей. Или вы можете написать их вверху, где написано «element.style». Затем, если вы хотите поделиться этим со своими разработчиками, вы можете просто выбрать код и скопировать и вставить его. Совет от профессионалов, также возьмите «селектор» стилей. Это «.RNNXgb» на скриншоте выше. Это скажет разработчикам, для какого элемента вы добавляете стили.

Связанный : WordPress CSS: базовое руководство для начинающих

Выбери цвет

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

Найдите, какой шрифт используется

Разработчики CSS также определяют используемые шрифты, размер шрифта, высоту строки, цвет, толщину шрифта и другие свойства, связанные с типографикой. Все они будут показаны справа. Пока он не пересечен, применяется стиль, который вы видите. Давайте узнаем, какой шрифт используется для поиска в форме Google. Щелкните правой кнопкой мыши, проверьте и прокрутите вниз, пока не увидите шрифт, или просто выполните поиск в поле «Фильтр» вверху в правом разделе:

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

Вот как будет выглядеть домашняя страница Google с шрифтом «Джорджия». Для этого нам пришлось обновить более одного свойства, но благодаря хорошей архитектуре CSS от разработчиков Google это оказалось довольно просто. В большинстве случаев плохо написанный сайт требует, чтобы вы обновили тонну свойств, чтобы увидеть обновление всего сайта.

Связанный : Как выбрать лучшие шрифты для вашего сайта

Кэш, дроссель и скорость

Что такое кеш? Проще говоря, ресурс, который сохраняется на вашем компьютере для использования в будущем. Ресурс может быть JS, файлом CSS или изображением. Если он не меняется каждый раз, когда вы открываете страницу, нет необходимости загружать его каждый раз, верно? Таким образом, браузер какое-то время просто оставит его на вашем компьютере.

Но что произойдет, если на сервере произошли изменения, а при установке не используются передовые методы обновления ресурсов? Короче говоря, даже если разработчики изменили кодовую базу, вы все равно увидите старые стили. Что ж, тогда вы можете просто остановить кеш и выполнить «жесткое обновление».

Откройте инструменты разработчика и перейдите на вкладку «Сеть». Затем нажмите «отключить кеш» и выполните «жесткое обновление»:

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

На той же вкладке после обновления вы также увидите измерения скорости и веса страницы. Как долго до срабатывания «Load» (событие, когда другие скрипты присоединяются для выполнения дополнительной работы), сколько файлов запрошено (31 запрос выше, довольно хорошее количество), сколько было загружено и так далее. Все просто, чем ниже, тем лучше для каждого значения. Что-нибудь выше 100-150 запросов, и вы начнете видеть большие проблемы со скоростью.

DevTools также позволяет моделировать медленное соединение. Очень полезная функция, позволяющая увидеть, как ваш сайт будет работать в более медленной сети, такой как 3G. Чтобы включить его, просто измените значение рядом с «Отключить кеш» и нажмите «Обновить». Когда вы обновитесь, вы увидите каждый шаг загрузки сайта. С отключенным кешем это будет первое посещение для обычного использования.

Обратите внимание на разницу в скорости при выборе «Медленный 3G» и обновлении по сравнению с первым примером, в котором используется реальная скорость соединения. Здесь вы также можете протестировать «Offline» - как бы сайт работал без подключения к Интернету. Если это звучит странно, это не так, прогрессивные веб-приложения уже позволяют сайтам функционировать даже без подключения к Интернету, если посетители заходили к ним хотя бы один раз.

Аудит - еще одна замечательная функция, которая обеспечивает удобный для пользователя анализ скорости страницы. Вы можете просто запустить его, перейдя на вкладку «Аудиты» и нажав «Создать отчет»:

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

Отличный результат! 94 очень хорош и демонстрирует большую работу, проделанную на этой странице. Помните, что на первый взгляд это может показаться очень простым, но существует множество скриптов, работающих в фоновом режиме, которые остаются скрытыми и замедляют работу сайтов. Есть много других протестированных показателей, и вы можете сделать это на любом сайте, чтобы узнать, какие проблемы у него есть и что можно улучшить.

По теме : что на самом деле означает «ускорение вашего сайта» и как этого добиться?

Консоль DevTools

Последний вид, который мы рассмотрим, - это консоль. Легко получить доступ, просто нажав клавишу ESC или перейдя на вкладку «Консоль». Как и ожидалось, ошибок нет, только несколько предупреждений, которые не должны вызывать слишком много проблем:

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

Вот пример того, как будет выглядеть такая ошибка:

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

Связанный : Путь к тому, чтобы стать хорошим веб-дизайнером

Уведомление о безопасности : не рекомендуется копировать и вставлять код в консоль, не понимая, что он делает. Особенно, если он из ненадежного источника и используется во внутренних приложениях / веб-сайтах вашей компании. Facebook опубликовал предупреждение из-за этого на своей консоли:

Резюме

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

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

Есть масса других функций, ожидающих использования, не бойтесь исследовать!