Как использовать инструменты разработки браузера

Обновлено: 08.07.2024

Узнайте, как использовать встроенные инструменты разработки браузера Chrome для улучшения своих веб-сайтов.

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

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

Как работают инструменты разработчика Chrome

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

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

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

Как получить доступ к Chrome DevTools

Вы можете получить доступ к Chrome DevTools несколькими способами. Чтобы открыть инструменты разработчика с помощью ярлыка в Mac OS, нажмите Cmd + Opt + I. Если вы используете ОС Windows, нажмите клавиши Ctrl + Shift + I на клавиатуре.

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

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

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

Посмотрите, как ваш сайт выглядит на смартфоне

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

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

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

Доступ к исходным файлам веб-страницы

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

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

Однако, если вы не можете найти параметр "Поиск", лучше использовать сочетания клавиш. В Mac OS нажмите клавиши Cmd + Opt + F, чтобы найти исходный файл. Если вы используете ОС Windows, нажмите клавиши Ctrl + Shift + F, чтобы открыть панель поиска исходного файла.

Выполнение оперативного редактирования веб-страницы

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

Чтобы изменить свойства CSS, которые не являются встроенными, выберите "Источники". Затем выберите файл CSS, который вы хотите отредактировать. Поместите курсор на выбранную строку в консоли кода, чтобы выполнить живое редактирование. Это позволяет мгновенно получать обратную связь о любых изменениях стиля, примененных к веб-странице.

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

Отладка кода JavaScript с помощью консоли DevTools

Один из лучших способов отладки JavaScript — использование инструментов разработчика Chrome. Это дает вам прямой отчет о недопустимых сценариях, а также точное местонахождение ошибки.

Рекомендуется всегда держать DevTools открытым при разработке веб-сайта с помощью JavaScript. Например, выполнение команды console.log() JavaScript для набора инструкций отображает результат этого журнала в консоли DevTools, если программа выполняется успешно.

По умолчанию консоль сообщает о любых проблемах с JavaScript на вашем веб-сайте. Вы можете найти консоль в нижней части DevTools или получить к ней доступ, щелкнув параметр «Консоль» в верхней части окна Chrome DevTools.

Отслеживание загрузки ресурсов из базы данных

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

Хотя это не всегда лучший способ отладки серверных проблем, он все же сообщает вам, какие ресурсы возвращают ошибку 404 после выполнения запроса к базе данных этих элементов.

Изменить ориентацию инструментов разработчика Chrome

Чтобы изменить расположение инструментов разработчика Chrome, нажмите на три точки меню в DevTools (не на главную в браузере). Затем выберите предпочитаемое положение на стороне док-станции.

Установите расширения Chrome DevTools

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

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

Проверить наличие проблем с безопасностью на веб-сайте

Инструменты разработчика Chrome позволяют оценить безопасность вашего веб-сайта на основе таких параметров, как наличие сертификатов веб-безопасности и степень безопасности подключения, среди прочих. Чтобы проверить, защищен ли ваш веб-сайт, выберите параметр «Безопасность» в верхней части DevTools.

Вкладка "Безопасность" предоставляет обзор сведений о безопасности вашего веб-сайта и сообщает о любых потенциальных угрозах.

Аудит вашего веб-сайта

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

Чтобы получить доступ к этой функции, выберите параметр Lighthouse в верхней части окна DevTools. Затем выберите параметры, которые вы хотите проверить, затем отметьте параметры «Мобильный» или «Настольный компьютер», чтобы увидеть, как ваша веб-страница работает на разных платформах.

Далее нажмите «Создать отчет», чтобы запустить анализ вашей веб-страницы на основе выбранных ранее параметров.

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

Воспользуйтесь преимуществами Chrome DevTools

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

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

Инструменты разработчика для браузеров, доступные в основных веб-браузерах (например, в Chrome, Safari и Firefox), позволяют веб-разработчикам быстро собирать важную информацию о большинстве веб-приложений, в том числе о тех, которые вы создаете сами. Поскольку это выбор большинства профессиональных разработчиков, в этой статье основное внимание будет уделено тому, как использовать DevTools в Google Chrome.

Сначала мы узнаем, как получить доступ к DevTools, а затем посмотрим, как их использовать для:

Отладка CSS и HTML для устранения проблем с макетом

Отладка JavaScript с помощью консольного инструмента

Просмотр важных метаданных о вашем веб-приложении

Доступ к окну DevTools:

На компьютерах Mac самый простой способ получить доступ к DevTools — перейти на веб-страницу в окне Chrome, нажать Ctrl + щелчок (или щелкнуть правой кнопкой мыши, если у вас старомодная двухкнопочная мышь) в любом месте документа. Рядом с местом, где вы щелкнули, появится меню. Выберите «Проверить элемент». Это запустит окно DevTools в нижней трети экрана. Это должно выглядеть примерно так:

Вы увидите восемь вкладок: Элементы, Сеть, Источники, Временная шкала, Профили, Ресурсы, Аудиты и Консоль. В этой статье мы сосредоточимся только на вкладках "Элементы", "Консоль" и "Сеть", но мы рекомендуем изучить и поэкспериментировать со всеми ними.

Отладка CSS и HTML для решения проблем с макетом:

Закладывая основу для собственного веб-приложения, обычно тестируют код, открывая HTML-файл в браузере и проверяя его самостоятельно. Для этого не обязательно размещать ваш HTML на сервере! Вы можете просто открыть новую вкладку в Chrome и нажать Cmd + o (Ctrl + o в Windows) или «Файл» > «Открыть», чтобы найти на компьютере свой HTML-файл.Как только ваш файл будет готов, посмотрите, делает ли он то, что вы ожидали. Если что-то не так, откройте DevTools, следуя приведенным выше инструкциям, и начните расследование.

Вкладка «Элементы» содержит интерактивную модель DOM в реальном времени (сокращение от объектной модели документа). DOM — это структура данных, в которой хранится весь ваш HTML. Поиграйте с этим! Вы можете изменить что угодно в DOM и сразу увидеть результаты. Единственная загвоздка в том, что как только вы перезагрузите страницу, ваши изменения исчезнут, поэтому не обновляйте страницу, не скопировав какие-либо изменения, которые вы хотите сохранить.

Написанный вами CSS будет доступен на вкладке «Элементы» в виде отдельного прокручиваемого раздела. Вы можете найти это в правой части окна DevTools в разделе «Стили»:

Как и в случае с HTML-элементами в модели DOM, здесь можно изменить любое свойство или значение и просмотреть результаты в режиме реального времени. Возможно, правило, которое вы написали для тегов изображений, не позиционирует их так, как вы ожидали, или вы хотите изменить цвет фона или размер шрифта. Экспериментируйте сколько хотите, пока вам не понравится то, что вы видите. Но помните, что вы должны изменить исходный код — файлы HTML и CSS, которые вы загрузили в браузер со своего компьютера, — иначе изменения, внесенные вами в DevTools, исчезнут, как только вы перезагрузите страницу.

Отладка JavaScript с помощью инструмента консоли:

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

Чтобы начать использовать консоль, перейдите на крайнюю правую вкладку под названием "Консоль". Проверьте, загружен ли ваш JavaScript, начав вводить имя одной из ваших функций. Если вы видите всплывающее окно со списком функций, включающим имя вашей функции, вы знаете, что DevTools читает ваш файл JavaScript. В приведенном ниже примере DevTools нашел мою пользовательскую функцию sayHello().

Помните, что консоль DevTools — это полноценный интерпретатор JavaScript. Он может запускать любое допустимое выражение JavaScript, которое вы вводите в него. Если вы связаны с библиотекой, такой как jQuery, она также имеет доступ ко всем функциям jQuery.

Советы по работе с консолью

При написании JavaScript в консоли вы можете заметить, что экран довольно быстро заполняется кодом и сообщениями об ошибках. На Mac Ctrl + K (Ctrl + L в Windows) очищает консоль, чтобы вы могли начать с нового экрана. Ваши предыдущие строки кода не теряются. Используйте клавишу со стрелкой , чтобы восстановить очищенные строки.
В консоли клавиша «Ввод» (также известная как «Ввод») немедленно запускает ваш код. Итак, если вы хотите написать многострочные функции, подобные приведенной ниже, используйте Ctrl + return (Shift + Enter в Windows) в конце строки, чтобы перейти к новой.< /li>

Консоль DevTools отлично подходит для того, чтобы помочь вам понять, что может и чего не может делать JavaScript, а также предоставить вам мгновенную обратную связь в виде сообщений об ошибках и изменений на вашей странице в режиме реального времени. DevTools также имеет более продвинутый инструмент отладки V8 на вкладке «Источники», который выходит за рамки этой статьи. Если это вас заинтересует, вы можете узнать больше об этом здесь.

Просмотр метаданных о вашем веб-приложении с помощью NetworkTab:

Вкладка «Сеть» — вторая вкладка слева, рядом с «Элементами» — содержит ценные данные о сетевых операциях, то есть обмене данными между вашим веб-браузером и сервером, предоставляющим вам страница в Интернете. Если при открытии вкладка пуста, возможно, вам придется нажать обновить, чтобы заполнить сетевые данные.

На первый взгляд вкладка "Сеть" кажется сложной, но с ней стоит ознакомиться.

Много, правда? Не перегружайтесь. Просто сосредоточьтесь на таблице в нижней половине вкладки. В частности, мы просто рассмотрим несколько таких заголовков:

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

Метод: этот столбец может не отображаться по умолчанию. Если вы его не видите, наведите указатель мыши на любой заголовок и нажмите Ctrl + щелчок или щелкните правой кнопкой мыши, чтобы увидеть полный список заголовков. (Обратите внимание: это работает только для компьютеров Mac).

Статус. Коды состояния — это отчеты, которые сервер передает клиенту (в данном случае веб-браузеру) о запрошенном ресурсе. Вы должны увидеть много кодов из 200, что означает, что ресурсы для запрошенной вами веб-страницы поступили с сервера «в порядке». 404 ошибки также особенно важны. Они будут выделены красным цветом. Подробнее об ошибках 404 и их значении можно прочитать здесь.

Тип: Здесь вы можете увидеть, к какому типу файла относится ресурс. Просмотрите список на наличие .css, .html, .js или расширений файлов для мультимедийных файлов.

Размер. В этом столбце показан размер файла ресурса в байтах. В каком файле вы ожидаете больше байтов: в таблице стилей CSS или в видео?

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

Примечание. Эта статья о Chrome DevTools предназначена для общего ознакомления. С помощью этих инструментов можно многое узнать и сделать гораздо больше. Google Chrome DevTools, чтобы узнать больше.

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

Мы только что опубликовали ускоренный курс, который научит вас, как использовать Chrome DevTools для повышения вашей продуктивности как веб-разработчика. Вы узнаете, как выполнять такие действия, как устранение неполадок и оперативное редактирование веб-страниц.

Этот курс создал Набхит Мадан. Он очень опытный разработчик и прекрасно учит, как интегрировать Chome DevTools в рабочий процесс разработки.

Вот разделы, изучаемые в этом курсе:

Ознакомление с инструментом
Элементы
Источник
Консоль
Сеть
Производительность
Приложение
Безопасность
Память
Маяк

После получения общего обзора инструментов разработчика вы узнаете о вкладке "Элементы". На этой вкладке вы можете взаимодействовать с веб-страницами, изменяя стили и HTML.

Далее вы научитесь устранять неполадки Javascript с помощью вкладки "Источники". Вы изучите различные типы точек останова, параметры модификации исходного кода, переопределения и многое другое. После этого вы узнаете о консоли. Консоль похожа на REPL в вашем браузере, где вы можете опробовать код.

Вы научитесь устранять неполадки в запросах на стороне сервера и в локальном хранилище с помощью вкладок "Сеть" и "Приложение". Наконец, вы узнаете, как повысить производительность и безопасность с помощью вкладок Lighthouse, Производительность, Память и Безопасность.

Если вы дочитали до этого места, отправьте твит автору, чтобы показать, что вам не все равно. Твитнуть спасибо

Научитесь программировать бесплатно. Учебная программа freeCodeCamp с открытым исходным кодом помогла более чем 40 000 человек получить работу в качестве разработчиков. Начать

freeCodeCamp – это поддерживаемая донорами некоммерческая организация, освобожденная от налогов в соответствии со статьей 501(c)(3) (идентификационный номер федерального налогоплательщика США: 82-0779546)

Наша миссия: помочь людям научиться программировать бесплатно. Мы достигаем этого, создавая тысячи видеороликов, статей и интерактивных уроков по кодированию — все они находятся в свободном доступе. У нас также есть тысячи учебных групп freeCodeCamp по всему миру.

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

Иногда вам может понадобиться отредактировать свой веб-сайт и сразу увидеть результат изменений. Компания Google разработала инструмент, который автоматически встраивается в браузер Google Chrome. Инструменты разработчика Chrome, или сокращенно Chrome DevTools, позволяют пользователям устранять проблемы в своем коде, не выходя из активной вкладки.

Инструменты разработчика Chrome предназначены для облегчения разработки внешнего интерфейса. По сути, вы можете поиграть, исправить проблемы со стилем на своем веб-сайте и мгновенно просмотреть изменения. Чтобы использовать этот инструмент как площадку для экспериментов с кодом и стилями, вам нужно научиться пользоваться инструментами разработчика Chrome.

Поскольку инструменты Chrome интегрированы в ваш браузер, вам не нужно выполнять дополнительную настройку. Эти инструменты настоятельно рекомендуются веб-разработчикам, поскольку они помогают выполнять действия, связанные с DOM, редактировать стиль веб-сайта, отлаживать JavaScript и повышать скорость веб-сайта.

Чтобы проверить элемент на ходу, щелкните правой кнопкой мыши в любом месте веб-сайта (или выберите конкретный элемент) и выберите "Проверить" в контекстном меню или воспользуйтесь ярлыком "Проверить элемент". Нажмите CTRL+SHIFT+C (для Windows) и CMD+SHIFT+C (для iOS) на клавиатуре. Вы откроете DevTools на панели Elements. Затем наведите указатель мыши на элемент, чтобы выделить его.

Панель "Элементы" состоит из трех частей:

Он содержит HTML-код веб-сайта.
Он представляет стили CSS, применяемые к веб-сайту.
В части CSS вы также можете найти блочную модель CSS, помогающую быстро редактировать отступы, содержимое и области полей.

Содержание

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

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

Читайте также: