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

DevTools: как открыть инструменты разработчика в браузере и почему они делают работу эффективнее

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

Вкладка Console в DevTools позволяет работать с JavaScript при просмотре любой страницы. Это может быть удобно в разных ситуациях:

1. Просмотр ошибок. Например, позволяет увидеть, что какие-то ресурсы (CSS, изображения и так далее) на странице не загрузились.
2. Обращение к HTML-элементам. Так можно сразу проверить правильность написания пути до элемента в JavaScript.
3. Отладка кода на JavaScript. Речь идет о тестировании и устранении ошибок непосредственно в браузере. Для этого вкладка дает множество инструментов.

Сначала разберемся, как открыть консоль в разных браузерах.

Профессия «Инженер по тестированию»

• Смените профессию за 4 месяца — короткий путь в IT
• Познакомьтесь с этапами разработки и жизненным циклом ПО
• Узнайте всё о техниках тест-дизайна
• Разберитесь с системами управления тестированием и системами баг-трекинга
• Научитесь работать с API и базами данных

Google Chrome

1. Нажмите значок с тремя точками в правом верхнем углу окна браузера.
2. В появившемся меню наведите курсор мыши на «Дополнительные инструменты» и выберите «Инструменты разработчика» в расширенном меню.
3. После этого в правой части экрана откроется раздел с DevTools.

Еще один способ — использовать горячие клавиши. В Chrome это Ctrl+Shift+I (или Command+option+I на Mac).

Microsoft Edge

1. Нажмите на значок «Настройки и другое» в правом верхнем углу экрана.
2. Затем кликните на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты разработчика».
3. После этого в правой части экрана откроется раздел с DevTools.

Как и в Chrome, открыть DevTools в Edge можно горячими клавишами Ctrl+Shift+ I (или Command+option+I на Mac).

Mozilla

1. Выберите меню-гамбургер в верхнем углу экрана.
2. Затем нажмите на «Дополнительные инструменты» в раскрывающемся меню и выберите «Инструменты веб-разработчика».
3. После этого в нижней части экрана откроется раздел с DevTools.

Горячие клавиши в Mozilla — Ctrl+Shift+I (или Command+option+I на Mac).

Opera

1. Щелкните на значок Opera в верхнем левом углу окна браузера.
2. Наведите курсор мыши на «Разработчик» в меню и выберите «Инструменты разработчика».
3. После этого в правой части экрана откроется раздел с DevTools.

В Opera DevTools можно открыть комбинацией клавиш Ctrl+Shift+I(или Command +option+I на Mac).

Safari

1. Выберите меню Safari в верхнем левом углу экрана.
2. Затем нажмите «Настройки» и перейдите в меню «Разработка» в верхней части экрана.
3. Выберите «Показать веб-инспектор» в раскрывающемся меню .
4. После этого откроется новое окно с инструментами разработчика.

Горячие клавиши для Safari — Command + option+ I.

Яндекс.Браузер

1. Нажмите на меню-гамбургер в верхнем правом углу окна браузера.
2. Затем кликните по пункту «Дополнительно» и выберите меню «Дополнительные инструменты».
3. После этого переходим к пункту «Инструменты разработчика» в следующем меню.

Для запуска консоли также можно нажать Ctrl + Shift + I.

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

Обычно для быстрого выполнения кода и оценки результата его работы используются сторонние сайты. Другой вариант — NodeJS, которая дает доступ к REPL (Read Eval Print Loop) — интерактивному интерпретатору кода. Вкладка Console, по сути, выполняет те же функции и обладает множеством других возможностей.

Рассмотрим, как работает консоль, на примере Chrome DevTools. В ней можно проверять как простые инструкции вида 2 + 2 , так и большие функции.

Откроем Chrome DevTools, перейдем во вкладку Console, и вставим выражение 2 + 2 DevTools сразу выдаст ответ 4 . Таким образом можно не только складывать числа, а использовать любые методы из стандартной библиотеки JavaScript, например:

'hexlet'.toUpperCase() // => HEXLET [1, 2, 3, 4].map((number) => number ** 2) // => [1, 4, 9, 16] 

Помимо простых выражений, которые никак не связаны с сайтом, можно использовать и DOM API для доступа к элементам страницы. Код, указанный ниже, посчитает и вернет количество ссылок на главной странице ru.hexlet.io. Вы также можете самостоятельно перейти на любую страницу и «посчитать» количество ссылок или любых других элементов на ней:

document.querySelectorAll('a').length // => 73 

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

const linksCount = document.querySelectorAll('a').length // => undefined 2 + 2 // => 4 linksCount // => 73 linksCount * 2 // => 146 

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

const getElementCount = (tag) =>  const elementCount = document.querySelectorAll(tag).length; return `Найдено $elementCount> элементов $tag>` > getElementCount('div') // => 'Найдено 105 элементов div' 

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

Профессия «Инженер по тестированию»

• Смените профессию за 4 месяца — короткий путь в IT
• Познакомьтесь с этапами разработки и жизненным циклом ПО
• Узнайте всё о техниках тест-дизайна
• Разберитесь с системами управления тестированием и системами баг-трекинга
• Научитесь работать с API и базами данных

Что такое консоль разработчика в браузере: как открыть и пользоваться

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

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

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

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

Вот так она выглядит в открытом виде:

Слева располагается сам сайт, а справа инструменты и код страницы.

Создание сайтов

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

Чем полезна консоль разработчика

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

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

Читайте также:
Подробное руководство по текстовой SEO-оптимизации сайта

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

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

• Вебмастераиверстальщики. Здесь все просто — смотрят как выглядит сайт.
• Контекстологи. В некоторых случаях необходимо заранее проверить как ресурс выглядит на разных экранах, к примеру, чтобы не возникло проблем при рекламе на мобильную аудиторию.
• Маркетологи. Здесь может быть сразу несколько вариантов использования. Во-первых, можно проверять работоспособность сайта на разных устройствах. Во-вторых, DevTools дает возможность быстро посмотреть, как визуальные изменения отразятся на ресурсе. В-третьих, технический аудит сайта.
• SEO-специалисты. Проверка ресурса на соответствие требованиям поисковых систем.

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

Читайте также:
Разработка стратегии SEO продвижения сайта в поисковых системах

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

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

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

Chrome

В Chrome нужно нажать правую кнопку мышки. Дальше в контекстном меню находим строку «Просмотреть код» и нажимаем на нее:

Выглядит консоль так, как на скриншоте ниже. Расположены инструменты на мониторе справа.

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

Mozilla

В браузере Mozilla инструменты открываются аналогично. Только в этом случае нужно кликать на строку «Исследовать».

Здесь есть небольшое отличие в интерфейсе консоли. Она располагается внизу экрана.

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

Технический аудит сайта

• Наличие дублей страниц, безопасность, корректность всех технических параметров: переадресаций, robots.txt, sitemap.xml скорость загрузки и др.
• Техническая оптимизация — один из основных этапов в продвижении.

Edge

Если вы пользуетесь веб-обозревателем от Microsoft, запустить консоль также можно через контекстное меню, вызываемое правой кнопкой мышки. Только здесь нужно выбирать строку «Проверить».

По умолчанию DevTools располагается на правой стороне экрана также как и в Chrome.

Яндекс Браузер

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

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

Читайте также:
Что такое Frontend и Backend разработка: в чем их отличия

Описание элементов консоли

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

Elements

Основной раздел, открывающийся по умолчанию. Здесь есть вся информация о HTML-коде страницы. Можно посмотреть вложенность элементов, причем для каждого тэга можно посмотреть CSS-стили. В зависимости от способа подключения стилей их можно увидеть прямо в HTML-коде или отдельном окне консоли. Также можно посмотреть JS-код, если он встроен в HTML-страницу.

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

Console

Дает возможность посмотреть работу ресурса в реальном времени и оценить следующие процессы:

• Посмотреть, какие ошибки есть на сайте. Это может быть неправильный HTML-код, ошибки в CSS-стилях или JS-скриптах.
• Посмотреть выполняемый JS-код. Для этого применяется метод console.log.
• Проверка команд. Вы можете вводить свои команды и смотреть реакцию на них модулей.
• Фильтры. Вы можете выбрать, какая информация будет выводиться на вкладке.

На скриншоте показана вкладка console с ошибкой.

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

Читайте также:
Верстальщик сайтов: кто это, что должен знать и уметь, сколько зарабатывает

Sources

Показывает иерархию сайта. Состоит из трех частей: иерархический навигатор по файлам, исходный код, окно для отладки.

Здесь можно увидеть не только взаимосвязи между отдельными элементами сайта, но и сторонние элементы, подключаемые по API или с помощью JavaScript.

Network

Тут можно посмотреть запись сетевого журнала. Указывается время загрузки, скорость обработки запросов и время посещения страниц.

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

Performance

Дает возможность посмотреть скорость срабатывания скриптов. Визуально показаны как быстро загружаются элементы веб-сайта, зависящие от JS-скриптов.

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

Продвижение сайтов

• Любой формат сотрудничества: позиции, лиды, трафик.
• Подбираем запросы, которые приводят реальных покупателей!

Memory

Здесь можно увидеть, как элементы сайта нагружают оперативную память компьютера. В первую очередь, речь идет о том, как нагружает память выполнение JS-скриптов.

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

Application

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

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

Security

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

• TLS-соединение. Есть ли соединение по современным протоколам безопасности.
• Тип сертификата. Также можно увидеть данные о его проверке.
• Наличие конфиденциальности. Показывается насколько защищены ресурсы, использующие данные о пользователе.

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

Lighthouse

Панель показывающая данные аудита загруженной страницы. Здесь можно увидеть рекомендации по оптимизации интернет-ресурса. Перед этим запускаем проверку кнопкой «Analyze page load».

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

Читайте также:
Что такое маркетинговый аудит и как его провести

Как пользоваться основными элементами

Теперь посмотрим, как на практике можно пользоваться консолью разработчика. Допустим, у нас есть сайт и мы хотим посмотреть, как будет выглядеть надпись на кнопке другого цвета. Открываем DevTools и наводим курсор мыши на интересующий нас элемент страницы (1). В вкладке Elements подсвечивается участок кода, отвечающий за его вывод (2). Смотрим, какие стили отвечают за цвет текста на кнопке. Находим в стилях соответствующий стиль (3).

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

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

Теперь нам нужно переключить показ сайта с десктопа на мобильную версию. Для этого слева находим иконку изображающую компьютер и смартфон — она выделена на скриншоте. Нажимаем на эту иконку.

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

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

Читайте также:
Разработчик мобильных приложений: кто это и чем занимается, сколько зарабатывает и как им стать

Отладка ошибок с помощью консоли разработчика

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

Допустим, у нас на сайте изменился размер шрифта в шапке сайта. Открываем консоль и находим соответствующие стили. Там, где есть ошибка, строка с ней будет помечена желтым или красным треугольником с восклицательным знаком. У нас так помечено свойство font-size. Также вы видите, что значение этого свойства зачеркнуто — это значит, что здесь есть ошибка. В нашем случае — ошибка в записи. Исправляем прямо в DevTools и проверяем, помогло это или нет.

Другой вариант — поиск ошибок среди подключаемых элементов на сайте. Для этого открываем вкладку console и проверяем, что там находится. В случае с проверяемым сайтом в основном проблемы с неправильно подключенными скриптами от «ВКонтакте». Остается найти их и правильно настроить.

Еще можно посмотреть общий аудит сайта. Для этого переходим на вкладку Lighthouse и жмем на кнопку «Analyze page load». Перед этим можно убрать или добавить галочки в чекбоксах напротив соответствующих пунктов проверки. В принципе можете оставлять все по умолчанию, на скорость анализа это не влияет.

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

Перечисленное — далеко не все случаи использования консоли разработчика. Но это наиболее востребованные вкладки в процессе работы.

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

Казалось бы, DevTools — инструмент для вебмастеров и разработчиков. Но на практике маркетологи также могут его использовать:

• Проверка счетчиков. Иногда требуется посмотреть есть ли счетчик «Яндекс.Метрики» на конкретной странице. Удобнее всего сделать это через консоль.
• После подключения SSL-сертификата сайт все равно помечается небезопасным. Скорее всего, какие-то элементы ресурса не используют при загрузке сертификат. Найти их также можно через DevTools — обычно они высвечиваются в качестве ошибки.
• Проверка визуала на сайте. Иногда нужно поменять один или два элемента на ресурсе. Причем желательно, предварительно посмотреть, как они будут выглядеть.
• Сайт из-за высокого числа отказов стал терять позиции. В этом случае, вероятнее всего, проблема с медленной загрузкой. DevTools позволяет не только посмотреть скорость загрузки, но и понять, какие части кода требуют автоматизации.

Коротко о главном

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

Присоединяйтесь к нашему Telegram-каналу!

• Теперь Вы можете читать последние новости из мира интернет-маркетинга в мессенджере Telegram на своём мобильном телефоне.
• Для этого вам необходимо подписаться на наш канал.

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

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

Как открыть

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

1. Запустите веб-обозреватель Yandex.
2. Вызовите меню быстрого доступа. Для этого необходимо кликнуть по кнопке с изображением горизонтальных полосок, которая располагается в верхней части окна, левее значков «Свернуть» и «Закрыть».
3. Наведите курсор на самый последний пункт открывшегося в браузере ниспадающего меню, который называется «Advanced» («Расширенные»).
4. В новом развернувшемся списке дополнительных функций необходимо отыскать опцию, которая называется «More tools» («Другие инструменты»).
5. Здесь пользователи могут выбрать один из трех инструментов для разработки: «Показать код странички» («View page code»), «Developer tools» («Инструментарий разработчика») и «ЯваСкрипт консоль» («JavaScript console»).

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

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

• Для просмотра кода страницы необходимо одновременно зажать клавиши «Control» + «U» (Буква «Г» в русской раскладке клавиатуры).
• Если вы хотите вызвать инструментарий «Developer tools» — воспользуйтесь комбинацией клавиш «Shift» + «Control» + «I» (буква «Ш» при русском языке ввода).
• Чтобы открыть консоль и посмотреть логи ошибок выполнения скриптов, написанных на языке Java Script, необходимо одновременно зажать сочетание клавиш «Control» + «Shift» + «J» (Буква «О» для русской раскладки).

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

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

Консоль JavaScript

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

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

Очень часто сотрудники техподдержки могут попросить вас выслать скриншот логов, отображаемых в консоли, чтобы они смогли разобраться в проблеме. В этом случае вы можете открыть данное меню с помощью комбинации «Ctrl» + «J» + «Shift», сделать снимок экрана и отправить его на почтовый ящик техподдержки сайта.

Просмотр кода страницы

Данный инструмент может пригодиться людям, которые хотят изучить язык HTML для гипертекстовой разметки. Вы можете перейти на любую страницу, найти там определенный элемент, который вы бы хотели научиться создавать собственными силами и нажать «Ctrl» + «U», чтобы открыть новую вкладку, содержащую в себе HTML-код.

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

Инструментарий разработчика

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

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

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

Консоль разработчика в браузере — подробный гид по использованию для маркетолога

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

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

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

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

Запуск инструментов разработчика в разных браузерах практически идентичен. Их можно открыть с помощью клавиши F12, комбинации кнопок на клавиатуре или функции просмотра кода в самом браузере. Алгоритм запуска с помощью клавиатуры может отличаться в зависимости от вашего устройства. Например, на некоторых ПК кнопка F12 переводит устройство в режим полета, — чтобы открыть консоль разработчика, необходимо зажимать дополнительные клавиши.

Google Chrome

• Нажмите на клавиатуре F12 (или Fn + F12) или комбинацию Ctrl + Shift + I.
• Кликните в любом месте страницы правой кнопкой и активируйте опцию «Просмотр кода страницы».
• Откройте настройки браузера — кликните на иконку с тремя вертикальными точками в правом верхнем углу страницы. Наведите курсор на «Дополнительные инструменты» — «Инструменты разработчика» и активируйте функцию.

Яндекс

Варианты запуска консоли в Яндекс Браузере:

• С помощью комбинации Ctrl + Shift + I.
• Через меню в правой части окна вверху. Путь: «Дополнительно» — «Дополнительные инструменты» — «Инструменты разработчика».

Safari

Это браузер для iOS. Способы открытия DevTools:

• Комбинация клавиш Command + Option + I.
• Меню настроек в верхнем левом углу окна. Необходимо последовательно активировать опции «Настройки» — «Разработка» — «Показать веб-инспектор».

Маркетинг