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

В этом руководстве вы узнаете, как открыть вкладку «Консоль» или панель инструментов веб-разработки для просмотра сообщений.

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

Современные веб-браузеры, такие как Google Chrome, Firefox, Edge, Safari и Opera, предоставляют средства разработки в качестве встроенных функций.

Как правило, инструменты разработки позволяют работать с различными веб-технологиями, такими как HTML, CSS, DOM и JavaScript.

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

Google Chrome

Сначала откройте файл devtools.html.

Файл devtools.html содержит следующий код JavaScript:

 console.log('Hello, devtools!'); // the following code causes an error let greeting = msg;

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

Инструменты разработчика по умолчанию откроют вкладку «Консоль». Это будет выглядеть так:

инструмент веб-разработки — вкладка консоли

Первое сообщение: 'Hello, DevTools!'  является результатом следующей команды:

console.log('Hello, DevTools!');

Чтобы вывести значение переменной,  используйте следующий метод console.log().

let message = 'Good Morning!'; console.log(message);

Второе сообщение, которое появляется на вкладке «Консоль», — это ошибка.

Uncaught ReferenceError: msg is not defined

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

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

Firefox и Edge

Как правило, вы открываете вкладку «Консоль» инструментов разработчика в Firefox и Edge, используя F12. У них похожие пользовательские интерфейсы.

Safari

Если вы используете браузер Safari на Mac, вам необходимо сначала включить меню разработчика:

Браузер SafariМеню Safari

Затем нажмите Cmd+Opt+C, чтобы переключить окно консоли:

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

Рейтинг
( Пока оценок нет )
Александр Русаков / автор статьи
Программист, разработчик, 12 лет опыта работы в крупных компаниях. Быстро освоил typescript, делюсь своими знаниями на страницах этого сайта.
Загрузка ...
JavaScript и TypeScript