Как открыть инструменты разработчика Chrome
Обновлено: 21.11.2024
В сегодняшней статье мы кратко расскажем вам, как открыть Инструменты разработчика в разных браузерах, как понять, где найти и как исправить наиболее распространенные ошибки, с которыми вы можете столкнуться при работе с виджетами Elfsight.
Содержание
Что такое консоль разработчика?
Консоль разработчика — это встроенная среда разработки с набором инструментов, которые можно использовать для создания, отладки и тестирования приложений прямо в браузере. Он записывает (или регистрирует) информацию, связанную с веб-страницей, такую как сетевые запросы, HTML, CSS, JavaScript, предупреждения и ошибки. Скриншоты с предупреждениями в консоли разработчика могут быть чрезвычайно полезны для службы поддержки Elfsight, если они решают вашу проблему с нашими виджетами.
Как открыть консоль в разных браузерах
Чтобы открыть консоль в любом используемом браузере, достаточно нескольких щелчков мышью. Вы также можете запустить ее с помощью ярлыков или горячих клавиш. В руководстве ниже вы найдете краткие инструкции, как открыть консоль во всех самых популярных браузерах и скриншоты процесса.
Как открыть консоль разработчика в Chrome
Чтобы открыть панель разработчика в Google Chrome, нажмите на значок с тремя точками в правом верхнем углу окна браузера, выберите Дополнительные инструменты, где вы найдете Инструменты разработчика в раскрывающемся списке. список.
Еще один вариант — использовать горячую клавишу инструментов разработчика Chrome: F12 (в Windows/Linux) и Option + ⌘ + J (в macOS).
Вы увидите консоль внизу или справа на странице Chrome. Выберите вариант «Консоль» и начните проверять производительность вашего кода.
Далее, узнав, как открыть консоль разработчика в Chrome, вы познакомитесь с процессом открытия инструментов разработчика в разных браузерах.
Вы можете использовать консоль Opera для проверки, редактирования и отладки HTML, CSS и JavaScript. Для работы с ним вам потребуется использовать следующее сочетание клавиш: Ctrl+Shift+C, чтобы открыть Консоль инструментов разработчика, или Ctrl+Shift+I, чтобы сначала открыть инструменты разработчика, а затем выбрать Консоль.
Консоль Mozilla можно активировать, нажав Веб-разработчик в правом верхнем меню, а затем выбрав Консоль браузера. Кроме того, вы можете использовать сочетание клавиш инструментов разработчика Firefox, то есть Ctrl+Shift+J.
Чтобы открыть консоль в Safari, необходимо включить меню разработчика. Для этого перейдите в настройки Safari («Меню Safari» > «Настройки») и выберите вкладку «Дополнительно».
Далее вы откроете консоль разработчика в Safari, нажав «Разработка» > «Показать консоль Javascript». Вы также можете воспользоваться сочетанием клавиш Option + ⌘ + C. Вкладка консоли откроется автоматически, вам не нужно будет ее выбирать.
Вы можете открыть консоль браузера Edge, щелкнув Инструменты разработчика F12 в раскрывающемся меню или нажав F12. Вы также можете щелкнуть правой кнопкой мыши любой элемент веб-страницы и выбрать "Проверить элемент".
Консоль разработки IE можно открыть так же, как и консоль Edge. Нажмите «Инструменты разработчика F12» в раскрывающемся меню или просто нажмите клавишу F12. Сделав это, вы успешно получите доступ к консоли Internet Explorer и сможете приступить к ее изучению.
Основные вкладки в инструментах разработчика
Ниже приведен краткий обзор основных вкладок консоли, расположенных в инструментах разработчика. Мы рассмотрели их все на примере веб-браузера Google Chrome.
Вкладка "Элементы"
Панель "Элементы" — отличный инструмент для тех, кто хочет проверить производительность CSS и HTML своей веб-страницы. Вы можете щелкнуть правой кнопкой мыши любой элемент страницы, выбрать «Проверить элемент» и просмотреть атрибуты элемента, выделенные в коде.
Консоль
Вкладка «Консоль» в инструментах разработчика Chrome служит для отображения работы скриптов на веб-странице. Это интерпретатор командных строк, который вы можете использовать для запуска механизма сценариев и ввода команд для выполнения сценариев. Если наша служба поддержки попросит вас сделать снимок экрана консоли, им понадобится изображение, сделанное на вкладке консоли.
Панель "Источники"
Вы можете использовать вкладку "Источники" в Chrome DevTools для редактирования JavaScript и CSS, просмотра файлов, создания фрагментов JavaScript и их дальнейшего использования. Кроме того, эта вкладка может помочь в отладке кода JavaScript.
Вкладка "Сеть"
Панель «Сеть» можно использовать в качестве инструмента тестирования, который проверяет производительность веб-страницы и выявляет проблемы, замедляющие работу веб-сайта. Вкладка «Сеть» в Chrome начинает записывать все сетевые запросы, как только вы открываете DevTools. Вы можете отсортировать их по различным свойствам.
Вкладка "Эффективность"
Панель "Производительность" позволяет записывать время выполнения и загружать производительность с течением времени. Эта панель показывает, насколько хорошо работает веб-сайт, когда он полностью загружен и используется посетителями. Вы можете записать выступление или сделать серию скриншотов процесса.
Вкладка "Память"
Вкладку "Память" Chrome можно использовать для диагностики и устранения проблем с памятью, таких как раздувание, сборка мусора, утечки. Все эти проблемы влияют на производительность страницы. Если эти проблемы не будут решены, ваш веб-сайт станет медленным и непривлекательным для посетителей.
Панель приложений
С помощью вкладки "Приложение" вы можете отлаживать прогрессивные веб-приложения; проверять и управлять хранилищем, базами данных и кэшем; проверять и удалять файлы cookie; и проверьте Ресурсы.
Безопасность
Вкладка "Маяк"
Lighthouse – это автоматизированный инструмент для улучшения качества веб-приложений. Он напрямую интегрирован в Chrome DevTools. Он предлагает аудиты производительности, специальные возможности, прогрессивные веб-приложения, SEO и многое другое.
Типичные консольные предупреждения и ошибки в работе виджетов Elfsight
Иногда в работе виджетов Elsfight что-то идет не так. Не пугайтесь, если увидите в консоли какие-либо предупреждения или ошибки красного цвета. Если вы знаете причину, по которой они произошли, вы, вероятно, сможете все исправить самостоятельно. Ниже вы найдете список распространенных сбоев, которые вы можете увидеть в консоли.
Это две ошибки, касающиеся всех наших виджетов:
ВИДЖЕТ НЕ НАЙДЕН — возможно, вы случайно удалили виджет в аккаунте. Проверьте это.
Понимаете, в этом нет ничего страшного. Теперь обсудим некоторые ошибки в работе отдельных виджетов и интеграций.
Что касается Карт Google, ошибки обычно возникают, если что-то не так с ключом API.
ExpiredKeyMapError: срок действия ключа API истек или он не распознан. В большинстве случаев вы должны создать новый. Если вы получаете эту ошибку сразу после создания нового ключа API, вам нужно либо подождать от 1 до 8 минут, либо отдельно включить Places API.
RefererNotAllowedMapError: URL-адрес Elfsight, загружающий Maps JavaScript API, не может быть реферером. Вам следует проверить настройки реферера вашего ключа API в консоли Google Cloud Platform. При использовании нашего виджета вам необходимо добавить нас в качестве реферера. Вот статья, как это сделать правильно.
ClientBillingNotEnabledMapError: для использования виджета Google Maps вам потребуется платежный аккаунт. Этот сбой произошел из-за того, что вы не активировали биллинг в своем проекте. Решение состоит в том, чтобы включить выставление счетов в Google Cloud Project, связанном с этим идентификатором клиента. Вы можете сделать это здесь.
BillingNotEnabledMapError: при использовании Карт Google вам необходимо включить выставление счетов.
Если вы используете Elfsight YouTube Video Gallery, вам не придется беспокоиться о большинстве проблем, перечисленных ниже. Однако есть две общие проблемы, которые могут возникнуть и в нашем виджете.
quotaExceeded — YouTube использует квоты для людей, чтобы получить доступ к своему контенту и загрузить его на веб-сайты или в приложения.После превышения квоты YouTube вы заметите, что ваша Галерея YouTube случайно перестает работать или работает медленно на веб-сайте. Решение может быть следующим:
- Получите новый ключ API, если вы сами загружаете контент YouTube;
- Свяжитесь с нашей службой поддержки по адресу [email protected], если вы используете Elfsight YouTube Gallery, что намного проще.
videoNotFound — это предупреждение может появиться, если URL-адрес, который вы вставили для ссылки на видео YouTube, неверен. Иногда пользователи вставляют ссылку на страницу с видео, но это не фактическое местоположение видео, что приводит к ошибке. Проверьте все и вставьте ссылку на исходное видео.
Если Facebook Feed или Instagram перестали работать, вы можете проверить, что происходит, в консоли разработчика. Поскольку оба этих популярных приложения работают на основе Facebook API, следующие объяснения ошибок могут работать одинаково для каждого из двух.
err_ssl_protocol_error при использовании виджета Facebook или Instagram Feed на вашем веб-сайте может быть вызван различными причинами. Чтобы решить эту проблему, вы можете попробовать установить правильную дату и время, очистить данные браузера Chrome или очистить состояние SSL. Кроме того, если Facebook Graph API выдает ошибки, вы можете использовать fbtrace_id, чтобы узнать больше о них. Однако, если ничего из вышеперечисленного не помогло, вы всегда можете обратиться в нашу службу поддержки.
rest_cannot_access — обычно означает, что сторонний виджет, такой как подключаемый модуль защиты паролем, препятствует правильной работе нашего виджета. Отключение такой службы поможет вам.
Запрашиваемая вами страница не может быть отображена прямо сейчас. Это может означать, что ваше приложение Facebook находится в режиме разработки. Вы не получите это сообщение об ошибке, если являетесь пользователем Elfsight Facebook Feed, однако, если вы видите это сообщение, обратитесь в нашу службу поддержки.
Исключение OAuthException в Instagram, в частности, означает, что статус входа или токен доступа были отозваны, просрочены или недействительны по какой-либо причине. В этом случае обратитесь в нашу службу поддержки, разработчики Elfsight получат новый токен доступа или просмотрят субкод, если он есть.
Наиболее распространенные ошибки консоли
Как опытный веб-разработчик, вы, вероятно, видели эти ошибки чаще, чем хотели бы. Их можно увидеть в Chrome, когда вы читаете свойство или вызываете метод неопределенного объекта. Вы можете протестировать и отловить эти конкретные ошибки в консоли разработчика Chrome и Safari.
Если вы не профессиональный программист, вы можете пропустить это правило.
Это может произойти по многим причинам, но наиболее распространенной является неправильная инициализация состояния при отрисовке компонентов пользовательского интерфейса. Это легко исправить. Самый простой способ: инициализировать состояние с разумными значениями по умолчанию в конструкторе.
Эта ошибка возникает в Safari, когда вы читаете свойство или вызываете метод для неопределенного объекта. Вы можете проверить это в консоли разработчика Safari. Это практически то же самое, что и описанная выше ошибка для Chrome, но Safari использует другое сообщение об ошибке.
Вот как вы должны устранять наиболее распространенные ошибки консоли JavaScript. Мы будем выполнять этот список по мере того, как мы и наши клиенты сталкиваемся с любыми другими проблемами.
Заключение
Консоль разработчика — отличный инструмент, который позволяет каждому программисту получить доступ к огромному количеству данных о своем веб-сайте. Его не очень сложно открыть и начать использовать этот инструмент, однако это займет некоторое время и усилия, просто наберитесь терпения.
С какими ошибками вы сталкивались? Поделитесь своим опытом в комментариях ниже, мы будем рады обсудить это с вами!
Несколько лет назад я редко попадал в инструменты разработчика из-за того, что случайно нажимал что-то на клавиатуре. Я лихорадочно искал значок «X», думая, что это только вопрос времени, когда я что-нибудь сломаю на своем компьютере. Затем я вздохнул с облегчением, как только нашел "X", как будто шел секретный обратный отсчет.
Для контекста: я много лет играл в театре, поэтому всегда склоняюсь к драматическому искусству.
Оказывается, инструменты разработки не так страшны, как кажутся. Хотя они предназначены для разработчиков, маркетологи, дизайнеры и другие лица, не являющиеся разработчиками, также могут использовать их для аудита и тестирования изменений веб-сайта.
Давайте рассмотрим различные способы использования Chrome DevTools и рассмотрим некоторые шаги по оптимизации вашего веб-сайта.
Что такое инструменты разработчика?
Инструменты разработчика, часто называемые devtools, позволяют проверять, тестировать и отлаживать код в браузере, который влияет на пользовательский интерфейс.Маркетологи, специалисты по поисковой оптимизации и дизайнеры также могут использовать инструменты разработки для тестирования изменений и оптимизации своих веб-страниц.
Прежде чем мы перейдем к использованию Chrome DevTools, давайте рассмотрим несколько вещей, которые вам следует знать:
- HTML, CCS и JavaScript работают в браузерах, поэтому это три языка, с которыми вы будете работать в инструментах разработчика Chrome.
- Любой может использовать инструменты разработки браузера и манипулировать кодом. Однако изменения появятся только в вашем браузере и исчезнут после обновления страницы. Инструменты разработки браузера помогают определить, какие изменения необходимо внести. Чтобы сделать эти изменения постоянными, вам нужно получить доступ к коду на серверной части.
Как открыть инструменты разработчика Chrome
- Нажмите правой кнопкой мыши, чтобы просмотреть страницу.
- Откроется окно Chrome DevTools.
- Нажимайте на каждую вкладку, чтобы получить доступ к инструментам.
1. Щелкните правой кнопкой мыши, чтобы просмотреть страницу.
Щелкните правой кнопкой мыши веб-страницу, которую хотите проверить. В качестве ярлыка вы также можете нажать «Command + Option + C» на Mac или «Control + Shift + C» на Windows, Linux и Chrome OS. Затем нажмите "Проверить".
2. Откроется окно Chrome DevTools.
Перемещайтесь по каждой панели, нажимая на вкладку, расположенную в верхней части экрана. Перейдите в этот раздел, чтобы просмотреть обзор лучших инструментов разработки.
3. Нажмите на каждую вкладку, чтобы получить доступ к инструментам.
После завершения работы с Chrome DevTools вы можете закрыть его, щелкнув значок "X" в правом верхнем углу окна.
Как использовать инструменты разработчика Chrome без опыта программирования
Большинство веб-браузеров имеют собственный набор инструментов разработчика, и их функции во многом совпадают. Основные функции Chrome DevTools:
- Предварительный просмотр на устройстве для проверки адаптивного дизайна веб-страницы.
- Отладчик JavaScript для выявления и исправления ошибок.
- Сетевая панель для отслеживания и анализа запросов страниц.
- Инструмент инспектора для изменения стилей, таких как шрифт, интервалы, цвета, поля.
- Консоль для определения ошибок и предупреждений страницы
- Панель производительности для проверки производительности вашего веб-сайта, например скорости страницы.
Вот несколько способов использования Chrome Developer Tools.
Протестируйте адаптивный дизайн с помощью инструментов разработчика Mobile Chrome
.Панель инструментов переключения устройств в Chrome DevTools позволяет вам увидеть, как ваша веб-страница выглядит на различных устройствах, включая модели iPhone, iPad и ноутбуки. Вы даже можете добавить специальные параметры, если определенное устройство отсутствует в списке.
На начальном этапе веб-разработки или редизайна эта панель инструментов может помочь вашей команде визуализировать, как ваша страница отображается в разных окнах просмотра.
Особенно полезно оценить взаимодействие пользователей с вашей страницей.
Например, ваши данные говорят о том, что на мобильных устройствах пользователи тратят вдвое меньше времени на записи в вашем блоге, чем на настольных компьютерах. При сравнении одной публикации на мобильном устройстве и на компьютере вы можете обнаружить, что абзацы слишком длинные и громоздкие, что создает негативное впечатление от чтения.
Простым решением здесь будет написание более коротких абзацев и добавление большего количества визуальных элементов, чтобы разбить текст.
С помощью этой же панели инструментов вы также можете проверить, как пользователи с более медленным подключением воспринимают загрузку вашей страницы.
"Без регулирования" означает, что соединение не прерывается. Мобильному устройству среднего и низкого уровня потребуется больше времени, чтобы отобразить все элементы на странице. Если вы полностью не подключены к Интернету, вы увидите код ошибки "Нет Интернета".
Почему это полезно? Вы хотите, чтобы у ваших пользователей был положительный опыт на вашем сайте, независимо от их соединения. Наблюдая за тем, как загружается ваша страница, вы можете определить области, требующие улучшения.
Измеряйте и оптимизируйте скорость вашего сайта.
На этом этапе мы будем использовать Lighthouse, продукт Google с открытым исходным кодом, который оценивает производительность веб-страницы и предоставляет возможности для улучшения. Вы можете запустить его в Chrome DevTools, чтобы проверить все, от скорости сайта и SEO до доступности на мобильных и настольных устройствах.
Скорость страницы играет большую роль в вашем рейтинге и должна быть главным приоритетом при проведении SEO-аудита.
Чтобы проверить скорость страницы с помощью Lighthouse, см. рисунок выше. Выберите «Производительность» и любое устройство, на котором вы хотите протестировать. Затем нажмите «Создать отчет». После отображения результатов сосредоточьтесь на «Индексе скорости».
Хороший или быстрый индекс скорости находится в диапазоне от 0 до 4,3 секунд. Умеренный упадет между 4,4 и 5,8 секундами. Если ваш индекс превышает 5,8 секунды, ваша страница работает медленно и потребуются некоторые исправления для повышения скорости страницы.
Еще один раздел, на который следует обратить внимание при прокрутке вниз, — "Возможность", в нем перечислены способы снижения скорости загрузки страницы.
Помимо влияния на SEO, скорость страницы также может привести к высокому показателю отказов. Если вы хотите сократить время загрузки страницы, лучше всего начать с инструмента Lighthouse.
Предварительный просмотр изменений дизайна.
Если ваша команда хочет визуализировать, как определенные эстетические изменения будут выглядеть на вашем веб-сайте, быстрый и простой способ — использовать инструмент инспектора для управления кодом.
Чтобы начать, нажмите на инструмент "Проверить".
Затем наведите указатель мыши на любой элемент на странице, чтобы получить подробную информацию о стиле страницы.
Чтобы внести изменения в стиль, выберите элемент, который хотите изменить. Панель «Элементы» перейдет к коду HTML и CSS этого элемента. Вкладка «Стили» — это то, на чем вы хотите сосредоточиться.
Вот пример того, как изменить цвет текста.
Проведите SEO-аудит.
Каждый бренд хочет занимать высокие позиции в поисковых системах, потому что это означает охват большего количества людей и увеличение трафика на ваш сайт.
Чтобы убедиться, что ваш веб-сайт занимает высокие позиции, регулярно проводите проверки, чтобы выявить все, что может привести к снижению рейтинга вашей страницы. С помощью Chrome DevTools вы можете провести аудит Lighthouse, чтобы проверить, что может повлиять на ваш рейтинг.
Чтобы начать, нажмите на вкладку Маяк. Выберите «SEO» в разделе «Категории» и выберите устройство, на котором вы хотите сосредоточиться. Затем нажмите "Создать отчет".
Отчет покажет вам ваши успешные аудиты и возможности для улучшения.
Несмотря на то, что этот SEO-аудит не является исчерпывающим, с его помощью можно получить краткий обзор эффективности SEO вашего сайта.
Отслеживайте запросы Google Analytics.
Если вы отслеживаете свой веб-сайт и маркетинговые кампании в Google Analytics, последнее, что вам нужно, это грязные данные.
С помощью Chrome DevTools вы можете отслеживать запросы из Google Analytics и проверять, правильно ли они отображаются на панели управления Analytics. Это обеспечит сбор точных данных и поможет выявить ошибки.
Вот шаги:
- Перейдите на вкладку "Сеть".
- Загрузите свою веб-страницу.
- Найдите запросы Google Analytics, они всегда будут начинаться с "__utm.jpg"
- Нажмите на запрос, чтобы увидеть, какая информация включена в запрос.
Когда вы знаете, где искать, пользоваться инструментами разработчика Chrome становится довольно просто. Хотя некоторые знания в области кодирования полезны, успех с этим инструментом не обязателен.
В настоящее время Google Chrome является одним из самых популярных веб-браузеров, используемых сегодня разработчиками. По данным StatCounter, по состоянию на сентябрь 2019 года доля Google Chrome на мировом рынке браузеров составляет 63,72%. Chrome DevTools может значительно улучшить ваш рабочий процесс, помогая разрабатывать, тестировать и отлаживать веб-сайты прямо в браузере. Многие из вас, вероятно, регулярно используют Chrome DevTools, но ознакомьтесь с этими дополнительными советами и рекомендациями, чтобы повысить свою продуктивность.
Что такое Google Chrome DevTools?
Инструменты разработчика Google Chrome, также известные как Chrome DevTools, представляют собой инструменты веб-разработки и отладки, встроенные прямо в браузер. Они предоставляют разработчикам более глубокий доступ к своим веб-приложениям и браузеру. Вы можете делать все, от тестирования области просмотра на мобильном устройстве до редактирования веб-сайта на лету и даже измерения производительности всего веб-сайта или отдельных ресурсов.
Чтобы использовать последнюю версию инструментов разработчика, вы можете использовать Chrome Canary, экспериментальную версию Chrome, которая обновляется каждую ночь. Chrome Canary можно запускать параллельно с Chrome, чтобы вы могли проверять любые проблемы, которые могут возникнуть.
Вы можете улучшить свою разработку, перейдя на chrome://flags и включив функцию экспериментов в Инструментах разработчика. Затем вы можете использовать панель настроек в инструментах разработчика для переключения отдельных экспериментов.
Мы упомянем некоторые сочетания клавиш Chrome DevTools ниже, но вы можете увидеть их полный список на веб-сайте Google Developer.
Открытие Chrome DevTools
Существует несколько способов открыть Chrome DevTools, а это значит, что вы можете использовать наиболее удобный для вас способ.
Открыть из меню браузера
Вы можете открыть Chrome DevTools из меню Chrome. Перейдите в раздел «Дополнительные инструменты» и нажмите «Инструменты разработчика» .
Открыть правой кнопкой мыши
Вы также можете открыть Chrome DevTools из контекстного меню. Щелкните правой кнопкой мыши любой элемент страницы и выберите "Проверить" (или "Проверить элемент" ).
Открывать с помощью сочетаний клавиш
Вы также можете использовать следующие сочетания клавиш:
Советы и рекомендации
Ниже перечислены лишь некоторые из сотен функций, которые можно выполнять с помощью Chrome DevTools. Кроме того, это хороший ускоренный курс по инструментам, если вы еще не пользовались ими.
Быстрое переключение файлов
Вы можете легко получить доступ к любому файлу в текущем проекте или веб-странице, нажав Cmd + P ( Ctrl + P ), когда Chrome DevTools открыт и выполняет поиск имени.
Красивый принт
Знаете ли вы, что в Chrome DevTools встроена функция красивой печати? Вы можете легко изменить форматирование свернутого кода, нажав <> .
Редактировать элемент HTML
Вы можете редактировать HTML на лету и просматривать изменения, выбрав любой элемент, выбрав элемент DOM на панели и дважды щелкнув открывающий тег, чтобы отредактировать его. Закрывающие теги автоматически обновляются для вас. Любые изменения будут отображаться в вашем браузере, как если бы они действительно были внесены в исходный код.
Изменить свойство CSS
Как и при редактировании HTML, вы также можете изменить CSS в Chrome DevTools и просмотреть, как будет выглядеть результат. Это, пожалуй, одно из самых распространенных применений этого инструмента. Просто выберите элемент, который вы хотите изменить, и на панели стилей вы можете добавить/изменить любое свойство CSS, которое хотите.
Искать исходный код
Вы можете быстро найти весь исходный код, нажав Cmd + Opt + F ( Ctrl + Shift + F ).
Точки останова JavaScript
При отладке JavaScript иногда бывает полезно установить точки останова. Вы можете установить точки останова в Chrome DevTools, щелкнув номер строки, на которой вы хотите сделать перерыв, а затем нажмите Cmd + R ( Ctrl + R ), чтобы обновить страницу. Затем страница будет запущена прямо до этой точки останова.
Перейти к номеру строки
Вы можете автоматически перейти к строке кода, нажав Cmd + O ( Ctrl + O ) и используя синтаксис строки. В приведенном ниже примере мы ввели :375:18, чтобы перейти к строке 375, столбцу 18.
Несколько курсоров
Вам приходилось что-то добавлять к нескольким строкам?Вы можете легко добавить несколько курсоров, нажав Cmd + Click ( Ctrl + Click ) и введя информацию в несколько строк одновременно.
Положение стыковки
Вы также можете изменить положение док-станции Chrome DevTools. Вы можете отстыковать его в отдельном окне или закрепить в левой, нижней или правой части браузера. Положение док-станции можно изменить, нажав Cmd + Shift + D ( Ctrl + Shift + D ) или через меню.
Режим устройства
Вы можете протестировать свой веб-сайт и медиа-запросы, чтобы убедиться, что ваш адаптивный дизайн где-либо ломается, перейдя в режим устройства. Или, возможно, вам нужно посмотреть, при каком разрешении страница прерывается, чтобы знать, где применить медиа-запрос.
Чтобы войти в режим устройства, нажмите на маленький значок телефона и планшета в Chrome DevTools или нажмите Cmd + Shift + M ( Ctrl + Shift + M ). Затем вы можете выбрать, какое устройство и разрешение эмулировать, добавить сетевой дроссель и даже определить ориентацию устройства.
Цветовая палитра и средство выбора
Пользовательская цветовая палитра будет взята из таблицы стилей веб-сайта. Вы можете получить к ним доступ, просто щелкнув цветовой блок на панели стилей. Существует также палитра цветов, которую можно использовать для выбора цветов непосредственно на веб-странице.
Изменить цветовой формат
Вы можете переключаться между RGBA, HSL и шестнадцатеричным форматированием, нажимая Shift + клик по цветовому блоку.
Переключить состояние элемента
Вы когда-нибудь пытались выяснить, откуда берется скрытый стиль, скажем, селектор :hover? В инструментах разработчика Firefox вы можете увидеть это при выборе элемента, но не в Chrome DevTools. Однако есть кое-что получше, которое называется Toggle Element State. Это позволяет принудительно задать состояние элемента, например :hover , чтобы затем использовать панель стилей для просмотра свойств.
Скопировать изображение как URI данных (в кодировке base64)
Вы можете сохранить любое изображение с веб-страницы как URI данных или, скорее, в кодировке base64. Нет необходимости использовать бесплатный онлайн-конвертер, так как он уже встроен в Chrome DevTools. На панели «Сеть» щелкните изображение, а затем щелкните его правой кнопкой мыши, чтобы выбрать параметр «Копировать изображение как URI данных».
Вы получите изображение в следующем формате:
Сетевая диафильм
Функция сетевой киноленты позволяет вам видеть, как ваша страница отображается от начала до конца, делая снимки экрана в процессе загрузки. Это может быть отличным способом увидеть, как ваш шрифт отображается, и если вы имеете дело с такими проблемами, как FOIT или FOUT.
На панели «Сеть» щелкните значок настроек, установите флажок «Создавать снимки экрана», а затем нажмите Cmd + R ( Ctrl + R ), чтобы обновить страницу. После обновления страницы вы увидите, как ваша страница отображается от начала до конца.
Отслеживание эффективности
Функция производительности позволяет легко увидеть, что отнимает у вас больше всего времени и ресурсов. Сведения об эффективности можно разбить по разным признакам, например по времени, действиям и источнику.
На панели «Производительность» нажмите Cmd + E ( Ctrl + E ), а затем Ctrl + R ( Cmd + R ), чтобы обновить страницу. Запишите количество времени, которое вы хотите контролировать. Затем вы можете нажать «Стоп» и оценить результаты.
DOMContentLoaded
У нас есть отличная статья о том, как заблокировать DOM и как это исправить. Эта функция позволяет вам видеть точное время DOMContentLoaded и общее время загрузки. Проверка этих значений может быть полезна для повышения общей производительности вашего веб-сайта или приложения.
На панели «Сеть» щелкните значок настроек, установите флажок «Показать обзор», а затем нажмите Cmd + R ( Ctrl + R ), чтобы обновить страницу. Синяя линия будет отображаться для DOMContentLoaded, а красная — для общего времени загрузки. Обычно все, что осталось от синей линии или касается ее, является ресурсами, которые блокируют DOM, или также называются ресурсами, блокирующими отрисовку.
Профили регулирования сети
Теперь вы также можете добавлять собственные профили регулирования сети. Это может быть полезно, если вы хотите провести более точное тестирование на определенной скорости.
На панели «Сеть» щелкните раскрывающийся список «Дроссель», а затем «Добавить». . В «Профилях регулирования сети» нажмите «Добавить пользовательский профиль». и добавьте профиль с вашими характеристиками.
Проверка безопасности
На панели «Безопасность» нажмите Cmd + R ( Ctrl + R ), чтобы обновить страницу. Затем он отобразит соответствующую информацию о безопасности.
Проверка HTML-кода Google AMP
Google AMP — это инициатива с открытым исходным кодом, призванная ускорить работу в Интернете с помощью облегченных HTML-страниц. Чтобы Google проиндексировал AMP-версию вашей страницы, вы должны убедиться, что она проверена.
Обзор
Как видите, в Chrome DevTools есть множество функций, которые помогут вам лучше разрабатывать, быстрее отлаживать и более эффективно измерять производительность вашего веб-сайта или приложения. Советы, упомянутые выше, являются лишь некоторыми из многих доступных функций. У вас есть любимая функция DevTools, которую мы пропустили? Если это так, дайте нам знать в комментариях ниже.
Каждый современный веб-браузер включает мощный набор инструментов разработчика. Эти инструменты выполняют ряд функций: от проверки загруженных в данный момент HTML, CSS и JavaScript до отображения того, какие ресурсы запрашивала страница и сколько времени потребовалось для их загрузки. В этой статье объясняется, как использовать основные функции инструментов разработки вашего браузера.
Примечание. Прежде чем приступить к рассмотрению приведенных ниже примеров, откройте пример сайта для начинающих, который мы создали во время серии статей "Начало работы в Интернете". Вы должны открыть его, следуя инструкциям ниже.
Как открыть инструменты разработки в браузере
Инструменты разработки находятся внутри вашего браузера в подокне, которое выглядит примерно так, в зависимости от того, какой браузер вы используете:
Как его поднять? Три способа:
Инспектор: обозреватель DOM и редактор CSS
Инструменты разработчика обычно по умолчанию открываются в инспекторе, который выглядит примерно так, как показано на следующем снимке экрана. Этот инструмент показывает, как выглядит HTML на вашей странице во время выполнения, а также какой CSS применяется к каждому элементу на странице. Это также позволяет вам мгновенно изменять HTML и CSS и видеть результаты ваших изменений в реальном времени в окне просмотра браузера.
Если вы не видите инспектора,
- Нажмите/щелкните вкладку Инспектор.
- В Internet Explorer коснитесь и щелкните DOM Explorer или нажмите Ctrl + 1 .
- В Microsoft Edge или Opera коснитесь/щелкните Элементы.
- В Safari элементы управления представлены не так четко, но вы должны увидеть HTML-код, если вы не выбрали что-то еще для отображения в окне. Нажмите кнопку Стиль, чтобы просмотреть CSS.
Изучение инспектора DOM
Для начала щелкните правой кнопкой мыши (удерживая нажатой клавишу Ctrl) элемент HTML в инспекторе DOM и просмотрите контекстное меню. Доступные пункты меню различаются в зависимости от браузера, но наиболее важные из них в основном одинаковы:
- Удалить узел (иногда Удалить элемент). Удаляет текущий элемент.
- Редактировать как HTML (иногда Добавить атрибут/Редактировать текст). Позволяет изменять HTML и видеть результаты на лету. Очень полезно для отладки и тестирования.
- :hover/:active/:focus. Принудительно включает состояния элементов, чтобы вы могли видеть, как будет выглядеть их стиль.
- Копировать/копировать как HTML. Скопируйте текущий выбранный HTML-код.
- В некоторых браузерах также доступны функции Копировать путь CSS и Копировать путь XPath, позволяющие копировать селектор CSS или выражение XPath, которые будут выбирать текущий элемент HTML.
Попробуйте отредактировать часть вашего DOM прямо сейчас. Дважды щелкните элемент или щелкните его правой кнопкой мыши и выберите Редактировать как HTML в контекстном меню. Вы можете вносить любые изменения, которые хотите, но не можете их сохранить.
Изучение редактора CSS
По умолчанию редактор CSS отображает правила CSS, примененные к выбранному в данный момент элементу:
Эти функции особенно удобны:
- Правила, примененные к текущему элементу, отображаются в порядке убывания специфичности.
- Установите флажки рядом с каждым объявлением, чтобы узнать, что произойдет, если вы удалите объявление.
- Нажмите на маленькую стрелку рядом с каждым сокращенным свойством, чтобы отобразить сокращенные эквиваленты свойства.
- Нажмите на имя или значение свойства, чтобы открыть текстовое поле, где вы можете ввести новое значение, чтобы получить предварительный просмотр изменения стиля в реальном времени.
- Рядом с каждым правилом указано имя файла и номер строки, в которой определено правило. Щелчок по этому правилу приводит к тому, что инструменты разработчика переходят к его отображению в собственном представлении, где его обычно можно отредактировать и сохранить.
- Вы также можете щелкнуть закрывающую фигурную скобку любого правила, чтобы открыть текстовое поле на новой строке, где вы можете написать совершенно новое объявление для своей страницы.
В верхней части средства просмотра CSS вы увидите ряд интерактивных вкладок:
- Вычислено. Здесь показаны вычисленные стили для текущего выбранного элемента (окончательные нормализованные значения, применяемые браузером).
- Макет. В Firefox эта область включает два раздела:
- Блочная модель: визуально представляет блочную модель текущего элемента, поэтому вы можете сразу увидеть, какие отступы, границы и поля применены к нему, а также насколько велик его контент.
- Сетка. Если просматриваемая вами страница использует CSS Grid, в этом разделе можно просмотреть сведения о сетке.
Подробнее
Подробнее об Инспекторе в разных браузерах:
Отладчик JavaScript
Отладчик JavaScript позволяет вам отслеживать значения переменных и устанавливать точки останова, размещать в вашем коде места, выполнение которых вы хотите приостановить, и выявлять проблемы, которые мешают вашему коду выполняться должным образом.
Чтобы перейти к отладчику:
Chrome: откройте инструменты разработчика и выберите вкладку "Источники". (Опера работает так же.)
Edge и Internet Explorer 11: нажмите F12, а затем Ctrl + 3 или, если инструменты уже отображаются, щелкните вкладку "Отладчик".
Safari: откройте инструменты разработчика и выберите вкладку "Отладчик".
Изучение отладчика
В Firefox Debugger есть три панели.
Список файлов
Первая панель слева содержит список файлов, связанных со страницей, которую вы отлаживаете. Выберите файл, с которым вы хотите работать, из этого списка. Щелкните файл, чтобы выбрать его и просмотреть его содержимое в центральной панели отладчика.
Исходный код
Установите точки останова, в которых вы хотите приостановить выполнение. На следующем изображении выделенная цифра 18 показывает, что в строке установлена точка останова.
Просмотр выражений и точек останова
На правой панели отображается список добавленных вами контрольных выражений и установленных вами точек останова.
На изображении в первом разделе "Выражения отслеживания" показано, что была добавлена переменная listItems. Вы можете развернуть список, чтобы просмотреть значения в массиве.
В следующем разделе "Точки останова" перечислены точки останова, установленные на странице. В example.js точка останова была установлена на операторе listItems.push(inputNewItem.value);
Последние два раздела отображаются только во время выполнения кода.
В разделе "Стек вызовов" показано, какой код был выполнен для перехода к текущей строке. Вы можете видеть, что код находится в функции, которая обрабатывает щелчок мыши, и что код в настоящее время приостановлен в точке останова.
Последний раздел, Области действия, показывает, какие значения видны из разных точек вашего кода. Например, на изображении ниже вы можете увидеть объекты, доступные коду в функции addItemClick.
Подробнее
Подробнее об отладчике JavaScript в разных браузерах:
Консоль JavaScript
Консоль JavaScript — невероятно полезный инструмент для отладки JavaScript, который работает не так, как ожидалось. Он позволяет запускать строки JavaScript для страницы, загруженной в данный момент в браузере, и сообщает об ошибках, возникающих при попытке браузера выполнить ваш код. Чтобы получить доступ к консоли в любом браузере:
Если инструменты разработчика уже открыты, нажмите или нажмите вкладку Консоль.
Появится окно, подобное следующему:
Чтобы увидеть, что произойдет, попробуйте ввести в консоль следующие фрагменты кода один за другим (и затем нажать Enter):
Теперь попробуйте ввести следующие неверные версии кода и посмотрите, что получится.
Вы начнете замечать ошибки, которые возвращает браузер. Часто эти ошибки довольно загадочны, но разобраться в этих проблемах должно быть довольно просто!
Читайте также: