Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

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

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

3 <ol><li><strong>Просмотр ошибок</strong>. Например, позволяет увидеть, что какие-то ресурсы (CSS, изображения и так далее) на странице не загрузились.</li>

4 <li><strong>Обращение к HTML-элементам</strong>. Так можно сразу проверить правильность написания пути до элемента в JavaScript.</li>

5 <li><strong>Отладка кода на JavaScript</strong>. Речь идет о тестировании и устранении ошибок непосредственно в браузере. Для этого вкладка дает множество инструментов.</li>

6 </ol><p>Сначала разберемся, как открыть консоль в разных браузерах.</p>

7 <h2>Содержание</h2>

8 <ul><li><a>Google Chrome</a></li>

9 <li><a>Microsoft Edge</a></li>

10 <li><a>Mozilla</a></li>

11 <li><a>Opera</a></li>

12 <li><a>Safari</a></li>

13 <li><a>Яндекс.Браузер</a></li>

14 <li><a>Как использовать консоль</a></li>

15 </ul><h2>Google Chrome</h2>

16 <ol><li>Нажмите значок с тремя точками в правом верхнем углу окна браузера.</li>

17 <li>В появившемся меню наведите курсор мыши на "Дополнительные инструменты" и выберите "Инструменты разработчика" в расширенном меню.</li>

18 <li>После этого в правой части экрана откроется раздел с DevTools.</li>

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

20 <h2>Microsoft Edge</h2>

21 <ol><li><p>Нажмите на значок "Настройки и другое" в правом верхнем углу экрана.</p>

22 </li>

23 <li><p>Затем кликните на "Дополнительные инструменты" в<a>раскрывающемся меню</a>и выберите "Инструменты разработчика".</p>

24 </li>

25 <li><p>После этого в правой части экрана откроется раздел с DevTools.</p>

26 </li>

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

28 <h2>Mozilla</h2>

29 <ol><li>Выберите меню-гамбургер в верхнем углу экрана.</li>

30 <li>Затем нажмите на "Дополнительные инструменты" в<a>раскрывающемся меню</a>и выберите "Инструменты веб-разработчика".</li>

31 <li>После этого в нижней части экрана откроется раздел с DevTools.</li>

32 </ol><p>Горячие клавиши в Mozilla - Ctrl+Shift+I (или Command+option+I на Mac).</p>

33 <h2>Opera</h2>

34 <ol><li>Щелкните на значок Opera в верхнем левом углу окна браузера.</li>

35 <li>Наведите курсор мыши на "Разработчик" в меню и выберите "Инструменты разработчика".</li>

36 <li>После этого в правой части экрана откроется раздел с DevTools.</li>

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

38 <h2>Safari</h2>

39 <ol><li>Выберите меню Safari в верхнем левом углу экрана.</li>

40 <li>Затем нажмите "Настройки" и перейдите в меню "Разработка" в верхней части экрана.</li>

41 <li>Выберите "Показать веб-инспектор" в раскрывающемся меню .</li>

42 <li>После этого откроется новое окно с инструментами разработчика.</li>

43 </ol><p>Горячие клавиши для Safari - Command + option+ I.</p>

44 <h2>Яндекс.Браузер</h2>

45 <ol><li>Нажмите на меню-гамбургер в верхнем правом углу окна браузера.</li>

46 <li>Затем кликните по пункту "Дополнительно" и выберите меню "Дополнительные инструменты".</li>

47 <li>После этого переходим к пункту "Инструменты разработчика" в следующем меню.</li>

48 </ol><p>Для запуска консоли также можно нажать Ctrl + Shift + I.</p>

49 <h2>Как использовать консоль</h2>

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

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

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

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

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

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

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