Андрей Смирнов
Время чтения: ~6 мин.
Просмотров: 3

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

kak-v-brauzere-otkryt-konsol-razrabotchika.png

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

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

Подробнее: Как открыть консоль в Яндекс.Браузере

Способ 1: Горячие клавиши

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

  • Google Chrome / Opera:

Ctrl + Shift + JMozilla Firefox: Ctrl + Shift + K</ul>

Есть и универсальная горячая клавиша — F12. Она запускает консоль во всех веб-обозревателях.

Способ 2: Контекстное меню

Через контекстное меню также можно вызвать консоль разработчика. Сами действия абсолютно одинаковы.

Google Chrome

  1. Нажмите правой кнопкой мыши по пустому месту на любой странице и выберите «Просмотреть код».

vyzov-konsoli-razrabotchika-cherez-kontekstnoe-menyu-google-chrome.png

Переключитесь на вкладку «Console».</li>pereklyuchenie-na-vkladku-s-konsolyu-v-instrumentah-razrabotchika-google-chrome.png</ol>

Opera

  1. Кликните ПКМ по пустому месту и выберите «Просмотреть код элемента».

zapusk-instrumentov-razrabotchika-dlya-pereklyucheniya-na-konsol-cherez-kontekstnoe-menyu-opera.png

Там переключитесь на «Console».</li>pereklyuchenie-na-vkladku-konsol-v-instrumentah-razrabotchika-opera.png</ol>

Mozilla Firefox

  1. Правым кликом мыши вызовите контекстное меню и нажмите на «Исследовать элемент».

vyzov-instrumentov-razrabotchika-dlya-otkrytiya-konsoli-cherez-kontekstnoe-menyu-mozilla-firefox.png

Переключитесь на «Консоль».</li>vkladka-konsol-v-instrumentah-razrabotchika-mozilla-firefox.png</ol>

Способ 3: Меню браузера

Через меню также не составит труда попасть в искомый раздел.

Google Chrome

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

vyzov-instrumentov-razrabotchika-dlya-perehoda-v-konsol-cherez-menyu-brauzera-google-chrome.png

Opera

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

perehod-v-instrumenty-razrabotchika-dlya-otkrytiya-konsoli-cherez-menyu-brauzera-opera.png

Mozilla Firefox

  1. Вызовите меню и щелкните по «Веб-разработка».

perehod-v-razdel-veb-razrabotka-cherez-menyu-brauzera-mozilla-firefox.png

В списке инструментов выберите «Веб-консоль».</li>

vyzov-konsoli-cherez-razdel-menyu-veb-razrabotka-brauzera-mozilla-firefox.png

Переключитесь на вкладку «Консоль».</li>pereklyuchenie-na-vkladku-konsol-v-instrumentah-razrabotchika-mozilla-firefox.png</ol>

Способ 4: Запуск при старте браузера

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

Google Chrome / Opera

  1. Кликните по ярлыку программы правой кнопкой мыши и перейдите в «Свойства». Если ярлыка нет, щелкните по самому EXE-файлу ПКМ и выберите пункт «Создать ярлык».

perehod-v-svojstva-brauzera-cherez-kontekstnoe-menyu.png

На вкладке «Ярлык» в поле «Объект» поместите текстовый указатель в конец строки и вставьте команду --auto-open-devtools-for-tabs. Щелкните «ОК».</li></ol>vvod-parametra-zapuska-brauzera-dlya-avtomaticheskogo-otkrytiya-instrumentov-razrabotchika.png

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

Mozilla Firefox

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

parametr-zapuska-brauzera-dlya-avtomaticheskogo-otkrytiya-konsoli-mozilla-firefox.png

Она откроется отдельно вместе с Файрфокс.

Теперь вы знаете все актуальные способы запуска консоли в нужный момент или автоматически.

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

Помогла ли вам эта статья?

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

Консоль очень сильном помогает устранять неполадки в работе скриптов на странице и может сэкономить вам кучу времени.

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

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

Это комбинация клавиш:

Ctrl + Shift + I

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

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

 +  + I

Посмотрите, как это выглядит в Chrome и  Яндекс.Браузере:

Также это работает в Opera

И в Firefox

Единственное исключение из этого правила Internet Explorer, здесь консоль вызывается клавишей F12.

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

Курс «Консоль браузера. Эффективная работа.»

Курс находится здесь

Видеокурс записан на основе работы с консолью в браузере Chrome. Аналогичная консоль используется в Яндекс Браузере.

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

Чему можно научиться из курса?

  • Как удобно расположить консоль в любом месте экрана.
  • Основные принципы работы с консолью, как это вообще работает.
  • Как легко находить, изменять, добавлять или удалять новые HTML-элементы и CSS-стили на веб-странице.

Это позволит вам «примерять» и предварительно посмотреть как будет выглядеть веб-страница с теми или иными изменениями НЕ внося изменения в исходный код веб-страницы.

  • Как быстро перемещаться между элементами в «дереве» документа и быстро находить нужные элементы.
  • Вы научитесь скачивать к себе на компьютер какие-то картинки, части кода, стили оформления CSS и любые другие элементы с любого сайта в Интернет. Далее это уже можно применять на своих сайтах как готовые наработки. Это может сэкономить кучу времени.
  • Как находить конкретное место в коде CSS или Javascript файлов, которое отвечает за вывод какого-то эффекта на сайте.

Какой конкретно файл за это отвечает?

Где он находится на сервере?

Какая строка кода за это отвечает?

  • Ловим стили оформления для элемента, которые у него появляются при наведении курсора мыши на него (эффект hover).
  • Как посмотреть как будет выглядеть веб-страница на мобильных устройствах (телефоне и планшете) с помощью консоли браузера?

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

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

Какие именно файлы или скрипты грузятся дольше всего.

Как будет вести себя сайт при медленном интернет соединении.

Курс находится здесь

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

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

Браузеры

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

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

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

2018-05-07_12-32-16.png

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

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

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

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

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

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

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

  • выберите меню Разработка > Показать веб-инспектор;
  • используйте сочетание клавиш Cmd+Opt+C (для Mac).

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

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

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

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

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

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

Подписаться

Была ли эта статья полезной?

Еще есть вопросы? Отправить запрос

Рейтинг автора
5
Подборку подготовил
Илья Коновалов
Программист и опытный пользователь интернета
Написано статей
179
Ссылка на основную публикацию
Похожие публикации