Как открыть средства разработчика в edge

Обновлено: 07.07.2024

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

Знание того, какие инструменты использовать, поможет вам обеспечить, чтобы front-end работал оптимально. В этой статье мы рассмотрим браузерные инструменты для разработчиков Chrome, Safari, Firefox и Microsoft Edge.

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

Большинство настольных браузеров включают функцию инспекции элементов, которую вы можете использовать для отладки CSS. Активировать эту опцию вы можете, кликнув правой кнопкой мыши и выбрав пункт «Просмотреть элемент». Пользователи Mac также могут инспектировать элемент, кликнув на нем, удерживая клавишу Ctrl. На приведенном ниже рисунке показано, что вы можете видеть в Firefox Developer Edition.

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

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

В Firefox, Chrome и Safari вы также можете нажать Ctrl + Shift + I (Windows / Linux) или Cmd + Option + I (macOS), чтобы открыть панель инструментов разработчика. На приведенном ниже рисунке представлены инструменты для разработчиков Chrome.

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

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

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

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

Microsoft Edge: Инструменты > Инструменты для разработчиков

Firefox: Инструменты > Веб-разработчик

Chrome: Вид > Разработчикам

Safari: Разработка > Показать веб-инспектор

В Safari вам может потребоваться сначала включить меню «Разработка», перейдя Safari > Настройки > Дополнительно и установив флажок «Показать меню» в строке меню. Ниже приведено представление для инструментов разработчика Safari.

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

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

Microsoft Edge: Проводник DOM

Использование панели стилей

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

Панель «Стили» организована в различных браузерах вполне согласовано. В первую очередь перечисляются стандартные стили, если они есть. Это стили, заданные с помощью атрибута style HTML, будь то автором CSS или программно с помощью скриптов.

За списком правил стилей, применяемых автором CSS следуют встроенные стили. Стили в этом списке сгруппированы по медиа-запросу и / или имени файла.

Авторские правила стилей предшествуют стилям агента пользователя. Стилями агента пользователя являются стили браузера по умолчанию. Они также оказывают влияние на внешний вид вашего сайта. (В Firefox вам может потребоваться выбрать параметр «Показать параметры браузера», чтобы просмотреть стили агента пользователя. Этот параметр можно найти в панели «Параметры панели инструментов».)

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

Определение проблем каскада и наследования

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

Определение пар свойств и значений, которые были заменены другим объявлением

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

На изображении выше цвет фона, границы и размер шрифта блока [type = button] отображаются перечеркнутыми. Эти объявления были переопределены теми, что находятся в блоке .close, который является приритетным для [type = button] в нашем CSS.

Определение недействительных свойств и значений

Вы также можете использовать инспектор элементов для обнаружения недействительных или неподдерживаемых свойств и значений свойств. В Chromium-браузерах неверные правила CSS отображаются перечеркнутыми, а рядом выводится иконка предупреждения:

Определение недопустимого значения свойства CSS с помощью Chrome

Firefox также вычеркивает недействительные или неподдерживаемые свойства и значения. Firefox Developer Edition также использует иконку предупреждения, как показано ниже. Стандартный Firefox отображает ошибки аналогично, но не включает значок предупреждения.

Как Firefox Developer Edition отображает недопустимые свойства и значения

На скриншоте ниже в Safari перечеркнуты красной линией и выделены желтым фоном и иконкой предупреждения неподдерживаемые правила.

Недопустимое значение свойства CSS в Safari

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

Неподтвержденное значение свойства CSS в Microsoft Edge

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

Отладка адаптивных макетов

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

Chrome

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

Иконка режима адаптивного дизайна Chrome

Режим устройства позволяет имитировать несколько видов устройств Android и iOS, включая более старые устройства, такие как iPhone 5 и Galaxy S5. Режим устройства также включает функцию дросселирования сети для приближения к разным скоростям соединения и возможность имитировать оффлайн режим.

Firefox

В Firefox аналогичный режим называется Режимом адаптивного дизайна. Его иконка напоминает ранние iPod. Вы найдете ее в правой части экрана в панели инструментов для разработчиков, как показано ниже.

Иконка режима адаптивного дизайна Firefox

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

Microsoft Edge

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

Safari

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

Чтобы войти в режим адаптивного дизайна Safari, выберите Разработка > Войти в режим адаптивного дизайна или Cmd + Ctrl + R.

Автор: Tiffany Brown

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

При установке Microsoft Edge вы получаете не только браузер, но и средства разработчика, которые предоставляют мощный способ проверки, отламывки и даже создания веб-проектов. Средства разработчика, поставляются с Microsoft Edge, частично основаны на средствах в проекте Chromium с открытым исходным кодом, поэтому вы, возможно, уже знакомы с некоторыми из этих средств. Средства Microsoft Edge разработчика также _называются Microsoft Edge DevTools_или просто DevTools.

С помощью DevTools можно сделать следующее:

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

Открытие DevTools

Чтобы открыть DevTools, щелкните правой кнопкой мыши любой элемент на веб-странице и нажмите кнопку Проверить.

Или нажмите F12 или нажмите Ctrl + Shift + I (Windows/Linux) или Command + Option + I (на macOS).

Откроется DevTools с выбранным средством Elements.

Существует два основных способа взаимодействия с DevTools.

Используйте мышь.
Ярлыки клавиатуры. Они обеспечивают быстрый доступ к функциональным возможностям и необходимы для доступности. Команда, отвечающая за средства разработчика Microsoft Edge, упорно работает над тем, чтобы сделать все средства доступными с помощью клавиатуры и специальных возможностей, таких как средства чтения с экрана. См. ярлыки клавиатуры.

См. также Microsoft Edge DevTools — как открыть различные функции в DevTools.

Изменение места стыковки DevTools в браузере

Изменение места, в котором размещены DevTools в окне браузера:

Выберите кнопку Настройка и управление DevTools . () .
Справа от размещения DevTools по отношению к странице (док-сторона), выберите вариант макета.

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

Стыковка справа — это размещение DevTools по умолчанию:

Стыковка налево — это еще один односторонний вариант:

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

Разгон в отдельное окно помогает работать с несколькими мониторами или при необходимости работать с полноэкранным приложением:

Основные средства на панели инструментов

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

Основные средства (вкладки) на панели инструментов

Есть две панели инструментов: основная панель инструментов в верхней части **** DevTools и ящик в нижней части, если вы выберите Esc . Основная панель инструментов обычно имеет следующие вкладки (инструменты или панели):

Далее на панели инструментов всегда присутствуют следующие средства, которые нельзя закрыть:

Наконец, эти более специализированные средства (вкладки) по умолчанию находятся на панели инструментов:

Средство, вкладка или панель

Часто слова "инструмент", "вкладка" или "панель" можно использовать взаимозаменяемо. В командном меню инструменты называются панелями; например, инструмент Elements называется панелью Elements. Чтобы перейти на средство Elements, выберите вкладку Elements. На панели инструментов есть кнопка More Tools и список, а на панели инструментов есть кнопка More tabs, которая используется для выбора инструментов, которые также называются панелями.

Разделы панели инструментов

Основная панель инструментов в DevTools имеет следующие разделы:

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

Средство Эмуляция устройства отображает текущий веб-продукт в режиме эмулированного устройства. Средство Эмуляция устройства позволяет запускать и тестировать реакцию продукта при изменении размера браузера. Оно также предоставляет вам оценку макета и поведения на мобильном устройстве.

Основная панель инструментов содержит вкладки для инструментов, используемых в различных сценариях. Вы можете настроить каждый из инструментов, а содержимое средства может изменяться в зависимости от контекста. Чтобы показать средство, которое находится на скрытой вкладке, выберите кнопку More tabs >> () . Чтобы добавить средство в основную панель инструментов или панель инструментов ящика, выберите кнопку More tools + () . Каждый инструмент представлен ниже.

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

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

Подсказка. Используйте меню команд

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

В командном меню инструменты называются "панели"; например, инструмент Elements называется панелью Elements. Чтобы перейти на средство Elements, выберите вкладку Elements.

Чтобы открыть командное меню, сделайте следующее:

Меню команд позволяет ввести команды для отображения, сокрытия или запуска функций в DevTools. Открыв меню команд, введите слово изменения, а затем выберите Ящик: Показать изменения. Откроется средство Изменения, которое полезно при редактировании CSS. В этом случае меню команд предоставляет быструю альтернативу выбору дополнительных средств (. ) и затем выбору Изменений илиредактированию файла в средстве Sources, а затем правой кнопкой мыши и выбору локальных .js **** изменений. ****

Меню команд отображает параметры после changes введите:

DevTools с открытым средством Изменения:

Настройка DevTools

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

Выберите Параметры (значок шестерни справа).
Нажмите F1 или ? .

В разделе Предпочтения можно изменить несколько частей DevTools. Например, вы можете использовать параметр Match на языке браузера, чтобы использовать тот же язык в DevTools, который используется в браузере. В другом примере используйте параметр Theme для изменения цветовой темы DevTools.

Вы также можете изменить параметры расширенных функций, таких как:

Фильтрация кода библиотеки с помощью возможности Пропустить список.

Определение устройств, которые необходимо включить в режим симуляции и тестирования устройства. Дополнительные сведения см. в приложении Emulate mobile devices in Microsoft Edge DevTools.

Выберите профиль регулирования сети.

Определение смоделированных расположений.

Настройка ярлыков клавиатуры. Например, чтобы использовать те же ярлыки в DevTools, что и в Visual Studio Code, выберите ярлыки Matchиз > заранее Visual Studio Code.

Попытка экспериментальных функций

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

Чтобы просмотреть последние функции, приходя в DevTools,скачайте Microsoft Edge Canary,который строится ночью.

JavaScript – это язык программирования, придающий страницам в сети интерактивность. Например, в социальных сетях он позволяет ставить лайки, оставлять комментарии, подписываться на каналы и так далее. Если его отключить, некоторые сайты будут работать некорректно или даже не станут загружаться. Поговорим о том, как можно включить JavaScript в браузере Microsoft Edge

Как включить JavaScript в браузере Microsoft Edge

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

Для начала нужно было вызвать окно «Выполнить» нажатием на комбинацию клавиш Win + R. Далее следовало ввести запрос gpedit.msc и активировать его нажатием на клавишу Enter или кнопку ОК.

Ввожу запрос в окне «Выполнить» и запускаю процесс нажатием на кнопку ОК Ввожу запрос в окне «Выполнить» и запускаю процесс нажатием на кнопку ОК

Должно открыться окно «Редактор локальной групповой политики». Необходимо было перейти по следующему пути: Конфигурация компьютера, Административные шаблоны, Компоненты Windows, Microsoft Edge. В правой части отображается список элементов, среди которых следовало найти «Позволяет запускать сценарии JavaScript» и открыть его двойным кликом кнопкой мыши по нему. Как видно на скришноте, сейчас этого пункта просто нет.

Если же этот пункт отобразился, то после нажатия по нему открылось бы следующее окно. В нем необходимо было переключить значение параметра на «Включено», применить параметр и кликнуть по кнопке ОК для выхода.

Возможно, этот параметр действовал только в первой версии браузера Microsoft Edge Возможно, этот параметр действовал только в первой версии браузера Microsoft Edge

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

Заключение

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

Microsoft Edge по умолчанию позволяет пользователям применять средства разработчика F12 и открывать страницу about:flags.Microsoft Edge, by default, allows users to use the F12 developer tools as well as access the about:flags page. Вы можете запретить пользователям применять средства разработчика F12 или открывать страницу about:flags.You can prevent users from using the F12 developer tools or from accessing the about:flags page.

Параметры групповой политики Microsoft Edge находятся в следующем расположении редактора групповой политики, если в политике не указано иное:You can find the Microsoft Edge Group Policy settings in the following location of the Group Policy Editor unless otherwise noted in the policy:

Конфигурация компьютера\Административные шаблоны\Компоненты Windows\Microsoft Edge Computer Configuration\Administrative Templates\Windows Components\Microsoft Edge\

Поддерживаемые версии: Microsoft Edge в Windows 10 версии 1511 или более поздней версииSupported versions: Microsoft Edge on Windows 10, version 1511 or later
Настройка по умолчанию: включено (разрешено)Default setting: Enabled (Allowed)

Microsoft EDGE позволяет пользователям использовать инструменты разработчика F12 для сборки и отладки веб-страниц по умолчанию.Microsoft Edge allows users to use the F12 developer tools to build and debug web pages by default. С помощью этой политики можно настроить Microsoft Edge таким образом, чтобы пользователи не могли использовать инструменты разработчика F12.With this policy, you can configure Microsoft Edge to prevent users from using the F12 developer tools.

Поддерживаемые значенияSupported values

Имя групповой политики на русском: Разрешить средства разработчикаGP English name: Allow Developer Tools
Имя групповой политики: AllowDeveloperToolsGP name: AllowDeveloperTools
Путь групповой политики: Компоненты Windows/Microsoft EdgeGP path: Windows Components/Microsoft Edge
Имя ADMX-файла групповой политики: MicrosoftEdge.admxGP ADMX file name: MicrosoftEdge.admx

Параметры MDMMDM settings

Имя MDM: Browser/AllowDeveloperToolsMDM name: Browser/AllowDeveloperTools
Поддерживаемые устройства: компьютерSupported devices: Desktop
Полный путь к URI: ./Vendor/MSFT/Policy/Config/Browser/AllowDeveloperToolsURI full Path: ./Vendor/MSFT/Policy/Config/Browser/AllowDeveloperTools
Тип данных: целое числоData type: Integer

Параметры реестраRegistry settings

Путь: HKLM\Software\Policies\Microsoft\MicrosoftEdge\F12Path: HKLM\Software\Policies\Microsoft\MicrosoftEdge\F12
Значение: AllowDeveloperToolsValue name: AllowDeveloperTools
Тип значения: REG_DWORDValue type: REG_DWORD

Запретить доступ к странице about:flagsPrevent access to the about:flags page

Поддерживаемые версии: Microsoft Edge в Windows 10 версии 1607 или более поздней версииSupported versions: Microsoft Edge on Windows 10, version 1607 or later
Настройка по умолчанию: отключено или не настроено (разрешено)Default setting: Disabled or not configured (Allowed)

По умолчанию пользователи могут получить доступ к странице About: flags в Microsoft EDGE, которая используется для изменения параметров разработчика и включения экспериментальных функций.By default, users can access the about:flags page in Microsoft Edge, which is used to change developer settings and enable experimental features. Если эта политика включена, пользователи не смогут получить доступ к странице About: flags.Enabling this policy prevents users from accessing the about:flags page.

Обзор инструментов разработки в браузерах

Панель разработчика находится в нижней части Вашего браузера :

Как её отобразить? Есть три варианта:

Inspector: DOM обозреватель и CSS редактор

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

Если Вы не видите Inspector,

Нажмите на вкладку Inspector .
В Internet Explorer, нажмите на DOM Обозреватель, или нажмите Ctrl + 1.
В Safari, элементы управления представлены не так чётко, но Вы должны увидеть HTML код, если Вы не выбрали что-то другое в окне разработки. Нажмите на кнопку Стиль, чтобы увидеть CSS.

Обзор DOM inspector

Для начала, попробуйте нажать правой кнопкой мыши (Ctrl+клик) по элементу HTML в DOM inspector и посмотрите на контекстное меню. Пункты меню могут различаться в разных браузерах, но важными из них являются одни и те же:

Обзор CSS редактора

По-умолчанию, CSS редактор отображает CSS свойства применённые к текущему выбранному элементу:

Эти функции особенно удобны:

Свойства, применённые к текущему элементу, отображаются в порядке убывания приоритета.
Можно убирать галочки напротив свойств для того чтобы видеть, что получится, если их удалить.
Нажмите на маленькую стрелочку рядом со свойством, чтобы увидеть все его эквиваленты.
Нажмите на имя свойства или его значение, чтобы открыть текстовое окошко, в котором Вы можете задать новые значения и увидеть, как изменится Ваш элемент с новыми значениями.
Рядом с каждым свойством указаны имя файла и номер строки. где располагается это свойство. Щелчок по этому пути перенесёт Вас в окно, где можно редактировать этот CSS и сохранить.
Вы можете также нажать на закрывающуюся фигурную скобку любого свойства, чтобы вывести текстовое поле на новую строку, где Вы сможете написать совершенно новую декларацию для Вашей страницы.

Вы должно быть уже заметили другие вкладки в CSS редакторе:

Вычислено: Здесь указаны все вычисления свойств выделенного элемента (окончательные, нормализованные значения применённые браузером).
Блоковая модель: Отображает блочную модель выделенного элемента, здесь Вы можете увидеть внешние и внутренние отступы, а также границы применённые к элементу, здесь также указан их размер.
Анимации: В Firefox, на вкладке Анимации Вы можете увидеть анимации применённые к выделенному элементу.

Узнать больше

Узнать больше об Inspector в различных браузерах:

Консоль JavaScript

Консоль JavaScript невероятно полезный инструмент для отладки JavaScript, если он не работает, как ожидалось. Она позволяет Вам загружать JavaScript вопреки порядку загрузки скрипта в браузере, и докладывает об ошибках как только браузер пытается выполнить Ваш код. Для доступа к консоли из любого браузера просто нажмите на кнопку Console. (В Internet Explorer, нажмите Ctrl + 2.) Откроется окно, как показано ниже:

Чтобы понять, что происходит, попробуйте ввести фрагменты кода в консоль один за другим (и затем нажмите Enter):

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

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

Консоль разработчика

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

Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.

Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).

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

Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.

Google Chrome

Откройте страницу bug.html.

В её JavaScript-код закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.

Нажмите F12 или, если вы используете Mac, Cmd+Opt+J.

По умолчанию в инструментах разработчика откроется вкладка Console (консоль).

Она выглядит приблизительно следующим образом:

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

Обычно при нажатии Enter введённая строка кода сразу выполняется.

Чтобы перенести строку, нажмите Shift+Enter. Так можно вводить более длинный JS-код.

Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере Chrome.

Firefox, Edge и другие

Инструменты разработчика в большинстве браузеров открываются при нажатии на F12.

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

Safari

Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).

Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:

Теперь консоль можно активировать нажатием клавиш Cmd+Opt+C. Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.

Итого

Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12. В Chrome для Mac используйте комбинацию Cmd+Opt+J, Safari: Cmd+Opt+C (необходимо предварительное включение «Меню разработчика»).

Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.

Как открыть консоль Javascript

Если на сайте не работает какой-нибудь партнерский инструмент Travelpayouts, вам может потребоваться сделать скриншот консоли Javascript. Эта консоль встроена в большинство веб-браузеров и регистрирует ошибки и предупреждения, возникающие при загрузке веб-страницы.

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

Как открыть консоль в Chrome

В Chrome консоль Javascript является частью DevTools, встроенного набора инструментов, которые используются как вспомогательный инструмент веб-разработчиков. Консоль открывается как новое окно браузера.

Чтобы открыть консоль Javascript:

используйте сочетание клавиш Ctrl+Shift+J (для Windows / Linux) или Cmd+Opt+J (для Mac).
если DevTools уже открыт, выберите вкладку Консоль.

Следующий шаг: Как сделать скриншот

Как открыть консоль в Firefox

В Firefox консоль называется веб-консолью и является частью инструментов разработчика.

Чтобы открыть веб-консоль:

используйте сочетание клавиш Ctrl+Shift+K (для Windows / Linux) или Cmd+Opt+K (для Mac)
или выберите пункт Веб-рабработка -> Веб-консоль меню браузера.

Следующий шаг: Как сделать скриншот

Как открыть консоль в Safari

В Safari консоль называется веб-инспектором.

Чтобы открыть веб-инспектор после его включения:

Если у вас нет этого пункта меню или веб-инспектор не запускается, зайдите в настройки браузера, выберите панель Дополнения и поставьте галочку в пункте «Показать меню Разработка в строке меню».

Следующий шаг: Как сделать скриншот

Как открыть консоль в Internet Explorer/Edge

В браузерах Internet Explorer и Edge консоль Javascript является частью инструментов разработчика.

В зависимости от вашего компьютера инструменты разработчика можно открыть нажатием клавиши F12. Чтобы открыть инструменты разработчика через меню:

Откройте меню (иконка из трех точек);
Выберите пункт Средства разработчика.

Следующий шаг: Как сделать скриншот

Введение в Chrome DevTools. Панель Elements

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

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

Тема интерфейса

Можно настроить инструменты разработчика и изменить их внешний вид — например, выбрать тёмное оформление интерфейса.

Горячие клавиши

В настройках есть список горячих клавиш — советуем с ними ознакомиться, знание этих комбинаций очень ускорит работу.

Расположение панелей

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

Вкладка Elements

С её помощью можно отслеживать элементы и их свойства на странице, можно редактировать стили и проверять вёрстку на переполнение. Как это делать? Давайте разбираться.

Как получить информацию об элементе

Есть три способа получить информацию о любом элементе на странице — выбирайте самый удобный для себя.

Через инспектор. Способ удобен, если вы точно видите элемент и можете кликнуть по нему правой кнопкой мыши. Выберите Inspect или «Посмотреть код». Заодно сразу откроется панель разработчика.

Поиск по элементам. При показанном отладчике нажимаем Ctrl+F, и внизу появится окно поиска по тегу, атрибуту, классу или текстовому содержимому элемента.

Введём, например, класс header, и увидим все подходящие элементы:

Визуальный поиск. При открытом отладчике открываем режим визуального поиска, находим нужный элемент и кликаем по нему.

Как внести изменения в элемент на странице

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

Чтобы переместиться вперёд, нажмите Tab, назад — Shift+Tab, а чтобы скрыть элемент, нажмите H.

Как изменить разметку страницы

Любители мыши кликают правой кнопкой на элемент и выбирают Edit as HTML, а фанаты клавиатуры нажимают F2. Результат сразу отображается на экране.

Проверка вёрстки на переполнение

Мы верстали, редактировали, а как проверить, что вёрстка не развалится, если количество элементов изменится? Сделаем тесты на переполнение.

Проверка на переполнение текстом. Есть два способа:

Находим элемент, делаем двойной клик и добавляем текст. Проще всего скопировать содержимое и вставить его несколько раз.
Открываем вкладку Console, вставляем команду document.body.contentEditable = true, нажимаем Enter. Теперь можно редактировать любой текстовый элемент на странице напрямую. Естественно, исправленный текст останется до перезагрузки страницы и никак не повлияет на сайт.

На что обращать внимание? При добавлении текста элементы должны растягиваться по вертикали, текст не должен вылезать за поля элемента, выпадать или обрезаться.

Переполнение потоковыми блоками. Находим родителя, в котором лежат нужные элементы и редактируем разметку, добавляем несколько блоков, применяем изменения и смотрим результат.

Сетка при переполнении не должна ломаться, а логика потока должна сохраняться.

Просмотр и тестовое редактирование стилей

Информация о стилях находится на вкладке Styles. Справа выводятся стили, указанные разработчиком, а справа от каждого стиля — файл и строка, где они прописаны.

На скриншоте выше — стили браузера, применяемые к элементу. Они могут отличаться в зависимости от выбранного браузера. А здесь находятся унаследованные стили.

Блок с метриками (на скриншоте) на самом деле находится в самом низу — нужно проскроллить список до конца.

Меняем стили прямо в браузере

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

Напишем правило с ошибкой. Правило не применится, потому что его не существует. Оно зачёркнуто, а слева появляется иконка с предупреждением.

А ещё мы можем разворачивать сокращённое правило, кликнув на стрелку. Например, так можно развернуть правило для border-style.

Слева у всех элементов есть чекбокс для включения и выключения стилей.

Данные о цвете

У элементов со свойством color легко меняется цвет — для этого нужно воспользоваться пипеткой. Можно выбрать любой цвет из интерфейса или указать цвет в RGBA или HSL.

Это далеко не все возможности Chrome DevTools, но рассказ обо всём сразу займёт не один час. Подпишитесь на рассылку, чтобы не пропустить следующие выпуски.

Гвозди можно заколачивать и микроскопом, но лучше не надо

Сила — в знании, какие инструменты когда применять. Знания — на интерактивных курсах и интенсивах.

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