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

Обновлено: 21.11.2024

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

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

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

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

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

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

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

В этой статье будут показаны два простых метода проверки веб-элементов в браузере Firefox.

Примечание. Отдельные тестировщики, желающие проверить элементы в определенных версиях Firefox, используют второй метод.

Проверка элементов в Firefox

Перечисленные ниже действия применимы только к браузеру Firefox. Действия по проверке веб-элементов могут отличаться в других браузерах.

Способ 1. Проверка элемента с помощью инструментов разработчика Firefox

Ниже перечислены шаги для проверки элементов в браузере Firefox:

Запустите Firefox и перейдите на нужную веб-страницу, которую нужно проверить. (Давайте рассмотрим домашнюю страницу Google в этом случае)
В правом верхнем углу нажмите на три горизонтальные линии (открыть меню).
В раскрывающемся меню выберите Веб-разработчик -> Инспектор.
Сочетания клавиш для проверки элемента в Firefox следующие:
пользователи macOS могут использовать сочетание клавиш – command + option + C, а пользователи Windows могут использовать Control + Shift + C

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

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

Теперь давайте перейдем ко второму методу проверки веб-элементов в нужных версиях Firefox.

Метод 2: использование BrowserStack Live для тестирования определенных версий Firefox

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

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

Лучшей альтернативой является использование BrowserStack — облачной платформы тестирования, которая позволяет разработчикам и тестировщикам тестировать и отлаживать веб-сайты в различных операционных системах и браузерах.

Облако реальных устройств включает более 2000 реальных устройств и браузеров (несколько версий каждого) для всестороннего удаленного тестирования.

Можно протестировать популярные браузеры, такие как Chrome, Firefox, Safari (последние и устаревшие версии), а также устройства таких производителей, как Samsung, Apple, OnePlus и т. д.

Полный список см. здесь.

Чтобы проверить веб-элемент в определенной версии Firefox, выполните следующие действия:

Браузер Firefox хорошо зарекомендовал себя с 2002 года и имеет значительную узнаваемость. Излишне говорить, что веб-разработчики и тестировщики, скорее всего, будут проверять или диагностировать свои веб-сайты, чтобы оптимизировать их работу в Firefox.

Следовательно, разработчикам или тестировщикам необходимо понимать шаги, необходимые для проверки элементов в Firefox. Методы, продемонстрированные выше, помогут людям легко проверять веб-элементы в нужных версиях Firefox. Более того, второй метод будет полезен QA для проведения комплексного тестирования Firefox.

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

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

В этой статье показано, как получить доступ к Inspect Element в Google Chrome. Вы узнаете о его различных применениях, в том числе о том, как изменить или скрыть элемент страницы и проверить классы CSS.

Знакомство с панелью Elements в Chrome

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

Существует несколько способов открыть Инструменты разработчика в Google Chrome. Первый способ — через Меню. Нажмите на три вертикальные точки в правом верхнем углу браузера. Затем наведите курсор на «Дополнительные инструменты» и нажмите «Инструменты разработчика».

Чтобы легко проверить элемент в Chrome, щелкните элемент страницы правой кнопкой мыши и выберите «Проверить» или используйте сочетание клавиш Ctrl+Shift+C для Windows и Command+Shift+C для Mac. Откроются инструменты разработчика. Затем используйте Ctrl+F или Command+F для поиска чего-либо в исходном коде страницы.

Панель инструментов разработчика состоит из трех основных частей:

Панель «Элементы/DOM» — содержит дерево объектной модели документа (DOM) страницы и предоставляет вам полный доступ к исходному коду HTML. Обычно он находится в верхней части инструментов разработчика.
Панель CSS – позволяет изменять правила стиля веб-страницы путем изменения, добавления или удаления свойств CSS. Эта панель находится в средней части, прямо под стилями.
Консоль: показывает, что нового в инструментах разработчика. Он также используется для запуска JavaScript. Он отображается в нижней части инструментов разработчика.

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

Что можно делать с помощью инструментов разработчика Chrome?

Функция Inspect Element предлагает веб-разработчикам множество преимуществ. Вот что можно делать с панелями Elements и CSS:

Редактирование CSS в реальном времени – позволяет вам видеть изменения в режиме реального времени, когда вы вносите изменения на панели CSS.
Тестирование макета – позволяет протестировать различные макеты веб-сайта, прежде чем вносить постоянные изменения в код.
Диагностика отладки: помогает проверить, содержит ли ваш сайт неработающий код.
Временное редактирование — позволяет настраивать элементы веб-страницы для просмотра в браузере.

Зачем вам нужно проверять веб-элементы?

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

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

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

Как получить доступ к инструменту проверки элементов в Chrome?

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

На нашей странице поддержки можно найти руководства по проверке элементов в других браузерах, таких как Mozilla Firefox, Opera и Internet Explorer.

Вот как использовать Inspect Element в Google Chrome:

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

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

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

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

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

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

Профессиональный совет

Чтобы проверить определенный элемент, щелкните его правой кнопкой мыши и выберите параметр "Проверить". Окно веб-инспектора откроется и автоматически выделит исходный код выбранного элемента.

Изменить элемент

Чтобы изменить элемент страницы, необходимо изменить исходный код CSS или HTML страницы. Таким образом, вы можете редактировать текст страницы и его элементы стиля, такие как толщина, размер и цвет шрифта.

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

Окно редактора расширится, и вы сможете изменить текст. Отмените выбор элемента, чтобы просмотреть изменения.

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

Изменение стиля элементов аналогично, но вам нужно будет использовать панель CSS.

Используйте инструмент "Проверка", чтобы выделить элемент. Затем щелкните свойство element.style в верхней части панели CSS и добавьте нужные объявления стиля в фигурные скобки.

В следующем примере мы добавили цвет фона к текстовому блоку:

Если вы хотите добавить еще одно объявление стиля, снова выберите свойство element.style. Веб-инспектор добавит вам еще одну пустую строку для заполнения.

Здесь мы добавили второе свойство, отображающее текст курсивом:

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

Чтобы использовать другие типы форматирования, ознакомьтесь со значениями и свойствами CSS.

Скрыть или удалить элемент

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

Для этого сначала откройте Инструменты разработчика и щелкните элемент, который хотите скрыть, с помощью инструмента проверки. Затем щелкните правой кнопкой мыши код, выделенный в дереве DOM, и выберите «Скрыть элемент».

На панели CSS появится новое свойство видимости. Снимите флажок, чтобы отменить изменение.

Если вместо этого вы хотите удалить элемент HTML, щелкните правой кнопкой мыши выделенный код и выберите Удалить элемент. Обновление страницы восстановит удаленный код.

Профессиональный совет

Все изменения, сделанные с помощью инструмента «Проверить элемент», можно отменить, нажав Ctrl+Z в Windows и Linux или Command+Z в macOS.

Проверка классов CSS

Проверка элементов веб-страницы также является отличным способом проверки кода элементов сайта, которые вам нравятся. Вы можете скопировать код для оформления элементов сайта с помощью классов CSS.

Для этого откройте инструменты разработчика и активируйте инструмент проверки. Затем наведите курсор на интересующий вас элемент. Его основная информация, такая как цвет, шрифт и поля, появится в поле, а его исходный код будет выделен на панели DOM.

Вы можете найти определенный стиль CSS, нажав Ctrl+Shift+F в Windows и Linux или Command+Option+F в macOS.

В нижней части панели появится окно поиска. Введите запрос, и инспектор предоставит результаты.

Заключение

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

Давайте рассмотрим шаги по использованию инструмента Inspect Element в Chrome:

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

Мы надеемся, что эта статья помогла вам узнать, как использовать функцию Chrome Inspect Element и некоторые ее приложения. Если у вас есть какие-либо вопросы или замечания, сообщите нам об этом в разделе комментариев ниже.

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

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

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

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

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

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

Использование Inspect Element в Google Chrome

Откройте веб-сайт, который вы хотите проверить.

Использование Inspect Element в Microsoft Edge

Откройте веб-сайт.

Любой из этих трех методов даст одинаковый результат.

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

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

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

Использование элемента проверки (зависит от ОС)

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

Как использовать Inspect Element на Chromebook

Браузер по умолчанию на Chromebook — Google, поэтому следуйте инструкциям браузера Chrome, чтобы получить доступ к Inspect Element. Вот небольшой курс повышения квалификации для вас:

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

Как использовать Inspect Element на устройстве Android

Запуск Inspect Element на устройстве Android немного отличается. Узнайте, как получить доступ к панели «Проверить элемент» на Android:

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

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

Таким же образом это работает и для устройств iPhone. Вам просто нужно выбрать нужный в раскрывающемся меню.

Как использовать Inspect Element в Windows

Инструмент Inspect Element не обязательно зависит от ОС, но зависит от браузера. Это означает, что инструменты разработчика — это функция используемого вами браузера, а не обязательно Windows. Однако вы можете перейти на панель «Проверить элемент» независимо от того, какой браузер вы предпочитаете.

Если вы используете ОС Windows, скорее всего, вы также будете использовать браузер Microsoft Edge. Узнайте, как получить доступ к Inspect Element в MS Edge:

Откройте веб-сайт, который вы хотите проверить.

Вы также можете использовать функциональную клавишу F12 для более быстрого доступа к Inspect Element. Кроме того, можно щелкнуть правой кнопкой мыши веб-страницу и выбрать пункт «Проверить».

Как использовать Inspect Element на Mac

Если вы используете Mac, скорее всего, вы предпочитаете Safari. Открытие Inspect Elements в Safari немного отличается от открытия в Chrome и Firefox. Но это так же просто с помощью следующих шагов:

Выполнение этих шагов активирует функцию проверки элемента в вашем браузере. Если вы сначала не включите Inspect Element, вы не увидите этот параметр при открытии веб-сайта.

После завершения этого шага просто щелкните правой кнопкой мыши любую открытую веб-страницу и выберите "Проверить". Вы также можете использовать команду быстрых клавиш: CMD + Option + I (проверить).

Как использовать Inspect Element на iPhone

Вы хотите использовать функцию проверки элементов, чтобы увидеть, как мобильная версия веб-страницы выглядит на iPhone? Вы можете сделать это и многое другое, выполнив всего несколько простых шагов. Но перед просмотром элемента вам нужно включить Web Inspector для вашего устройства iOS:

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

После включения мобильного устройства iOS и Mac вы увидите меню «Разработка» на верхней панели вашего Mac. Нажмите на нее, чтобы увидеть подключенный iPhone и веб-страницу, активную на устройстве. Выбор веб-страницы также открывает окно Web Inspector для той же страницы на экране Mac.

Имейте в виду, что эти указания работают только для Safari на Mac, а не для Safari на Windows.

Как использовать проверку элемента, когда он заблокирован

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

Способ 1 – отключить Javascript

Способ 2 – долгий доступ к инструментам разработчика

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

Способ 3 — Использование функциональной клавиши

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

Возможно, вам придется попробовать все эти методы, прежде чем вы найдете тот, который вам подходит. В крайнем случае, вы также можете попробовать просмотреть исходный код, введя view-source: [введите полный URL-адрес].

Как использовать Inspect Element на школьном Chromebook

Если ваш Chromebook был выпущен учебным заведением, для использования функции Inspect Element нужно выполнить несколько простых шагов:

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

Как использовать Inspect Element для поиска ответов

Вы можете использовать Inspect Element, чтобы найти ответы на множество вопросов, таких как:

Предварительный просмотр дизайна сайта на мобильных устройствах.
Узнайте, какие ключевые слова используют конкуренты.
Тесты скорости.
Изменение текста на веб-странице.
Найдите краткие примеры, чтобы показать разработчикам, что вам нужно.

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

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

Дополнительные часто задаваемые вопросы

Если вы не являетесь экспертом в Inspect Element после прочтения выше, здесь есть дополнительные ответы.

Как мне использовать команду "Проверить элемент" для поиска ответов?

Единственный способ найти ответы с помощью функции "Проверить элемент" — это мгновенное обнаружение веб-сайтом после отправки. В этом случае ответы присутствуют в кодировке.

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

Является ли Inspect Element незаконным?

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

Можно ли отключить проверку элемента в браузере?

Короткий ответ — нет.

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

Познакомьтесь с внутренним содержанием веб-страницы

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

Для чего вы используете Inspect Element? Расскажите нам об этом в разделе комментариев ниже.

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

Яблочное сафари

Прежде чем вы сможете получить доступ к консоли разработчика в Safari, сначала необходимо включить меню разработчика. Для этого перейдите в настройки Safari («Меню Safari» > «Настройки») и выберите вкладку «Дополнительно».

После включения этого меню вы найдете консоль разработчика, нажав «Разработка» > «Показать консоль Javascript».

Вы также можете использовать сочетание клавиш Option + ⌘ + C .

Консоль откроется либо в существующем окне Safari, либо в новом окне. Он автоматически выберет вкладку Консоль.

Google Chrome

Чтобы открыть консоль разработчика в Google Chrome, откройте меню Chrome в правом верхнем углу окна браузера и выберите Дополнительные инструменты > Инструменты разработчика.

Вы также можете использовать Option + ⌘ + J (в macOS) или Shift + CTRL + J (в Windows/Linux).

Консоль откроется либо в существующем окне Chrome, либо в новом окне. Возможно, вам придется выбрать вкладку Консоль.

Мозилла Фаерфокс

Чтобы открыть консоль разработчика в Firefox, нажмите на меню Firefox в правом верхнем углу браузера и выберите Дополнительные инструменты > Консоль браузера.

Вы также можете использовать сочетание клавиш Shift + ⌘ + J (в macOS) или Shift + CTRL + J (в Windows/Linux).

Консоль браузера откроется в новом окне.

Майкрософт Эдж

Чтобы открыть консоль разработчика в Microsoft Edge, откройте меню Edge в правом верхнем углу окна браузера и выберите Дополнительные инструменты > Инструменты разработчика.

Вы также можете нажать CTRL + Shift + i, чтобы открыть его.

Консоль откроется либо в существующем окне Edge, либо в новом окне. Возможно, вам придется выбрать вкладку Консоль.

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