Как открыть консоль в microsoft edge
Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде… Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.
Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.
Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).
Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но всё же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.
Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.
Google Chrome
В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.
Нажмите F12 или, если вы используете Mac, Cmd + Opt + J .
По умолчанию в инструментах разработчика откроется вкладка Console (консоль).
Она выглядит приблизительно следующим образом:
Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.
Обычно при нажатии Enter введённая строка кода сразу выполняется.
Чтобы перенести строку, нажмите Shift + Enter . Так можно вводить более длинный JS-код.
Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере.
Firefox, Edge и другие
Инструменты разработчика в большинстве браузеров открываются при нажатии на F12 .
Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.
Safari
Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).
Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:
Теперь консоль можно активировать нажатием клавиш Cmd + Opt + C . Также обратите внимание на новый элемент меню «Разработка» («Develop»). В нем содержится большое количество команд и настроек.
Итого
- Инструменты разработчика позволяют нам смотреть ошибки, выполнять команды, проверять значение переменных и ещё много всего полезного.
- В большинстве браузеров, работающих под Windows, инструменты разработчика можно открыть, нажав F12 . В Chrome для Mac используйте комбинацию Cmd + Opt + J , Safari: Cmd + Opt + C (необходимо предварительное включение «Меню разработчика»).
Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.
Вы можете ввести любое выражение JavaScript, заявление или фрагмент кода в консоли, и он запускается сразу и интерактивно по мере ввода. Это возможно, так как консольный инструмент в DevTools — это среда REPL . REPL обозначает чтение, оценку, печать и цикл.
Консоль:
- Читает JavaScript, который в него введите.
- Оценивает код.
- Распечатка результатов выражения.
- Циклы вернуться к первому шагу.
Для интерактивного ввода заявлений и выражений JavaScript в консоли:
Щелкните правой кнопкой мыши на веб-странице и выберите инспектировать. Откроется DevTools. Или нажмите Ctrl ++ Shift``J (Windows, Linux) J Command + Option +или (macOS), чтобы непосредственно открыть консоль DevTools.
При необходимости щелкните в DevTools, чтобы уделять ему внимание, а затем нажмите Esc кнопку открыть консоль.
Щелкните консоль , а затем введите 2+2 , не нажимая Enter .
Консоль немедленно отображает результат на 4 следующей строке при введите. Эта Eager evaluation функция поможет вам написать допустимый JavaScript. Консоль отображает результат при введите, независимо от того, является ли javaScript правильным, и независимо от того, существует ли допустимый результат.
При нажатии Enter консоли выполняется команда JavaScript (выражение или заявление), отображается результат, а затем перемещается курсор вниз, чтобы разрешить вам ввести следующую команду JavaScript.****
Автозаполнение для записи сложных выражений
Консоль помогает вам писать сложный JavaScript с помощью автозаполнения. Эта функция — отличный способ узнать о методах JavaScript, о которые вы раньше не знали.
Чтобы попробовать автозаполнение при написании многокомпонентных выражений:
Нажмите клавиши стрелки, чтобы выделить document в меню отсев.
Введите другой . , чтобы получить большой список возможных свойств и методов, доступных на теле текущей веб-страницы.
История консоли
Как и во многих других средах командной строки, для повторного использования доступна история вступимых команд. Нажмите Up Arrow кнопку, чтобы отобразить команды, которые были введены ранее.
Кроме того, автозаполнение сохраняет историю команд, которые вы ранее впечатлили. Вы можете ввести первые несколько букв предыдущих команд, а предыдущие варианты отображаются в текстовом окне.
Кроме того, консоль также предлагает довольно много полезных методов , которые упрощают вашу жизнь. Например, всегда $_ содержит результат последнего выражения, которое вы запустили в консоли.
Многолинейные изменения
По умолчанию консоль предоставляет только одну строку для записи выражения JavaScript. Код выполняется при нажатии . Enter Ограничение одной строки может вас расстроить. Чтобы обойти ограничение в 1 строке, нажмите Shift + Enter вместо . Enter В следующем примере отображаемая величина является результатом работы всех строк (заявлений) в порядке:
При запуске многостройного заявления в консоли **** блок кода автоматически распознается и отступ. Например, если вы запустите заявление о блокировке, введите фигурную скобку, следующая строка автоматически отступит:
Сетевые запросы с помощью верхнего уровня await()
Кроме собственных скриптов консоль поддерживает верхний уровень, чтобы запустить произвольный асинхронный JavaScript в нем. Например, используйте fetch API без обертывания await заявления функцией async.
Чтобы получить последние 50 проблем, которые были поданы в Microsoft Edge средства разработчика для Visual Studio Code GitHub репо:
В DevTools откройте консоль.
Скопируйте и вклеите следующий фрагмент кода, чтобы получить объект, содержащий 10 записей:
10 записей трудно распознать, так как отображается много информации.
Необязательно используйте метод журнала console.table() , чтобы получать только интересуемую информацию:
Чтобы повторно использовать данные, возвращаемые из выражения, используйте метод copy() утилиты консоли.
Вклеить следующий код. Он отправляет запрос и копирует данные из ответа на буфер обмена данными:
Консоль — это отличный способ практиковать JavaScript и делать быстрые вычисления. Реальная мощность — это то, что у вас есть доступ к объекту окна . См . взаимодействие с DOM с помощью консоли.
Консоль можно открыть как средство в верхней области или как средство в ящике.
Откройте средство Консоли
Нажмите Ctrl ++ Shift``J (Windows, Linux) или J Command + Option +(macOS).
Чтобы открыть средство консоли из командного меню, введите и запустите команду "Показать консоль", Console рядом с ней имеется значок Панель.
Откройте средство Консоли в ящике
Ящик всплывет в нижней части окна DevTools с открытым средством консоли .
Чтобы открыть консольный инструмент из командного меню, введите консоль и запустите команду **** Показать консоль, рядом с ней имеется значок ящика.
Open Console Параметры
Откройте боковую панель консоли
Чтобы отобразить боковую панель, нажмите кнопку Показать боковую панель консоли ( . Боковая панель помогает фильтровать.
Запросы на журнал XHR и fetch
Выберите почтовый ящик рядом с Сетью скрыть.
Фильтр по уровню журнала
DevTools назначает каждому методу console.* один из четырех уровней серьезности:
Чтобы фильтровать уровень журнала, откройте боковую панель консоли и выберите ошибки**, предупреждения**, сведения или вербозию.
Запуск JavaScript
В этом разделе содержатся функции, связанные с запуском JavaScript в консоли. Практические погонки см. в этой ленте Run JavaScript.
Повторное повторяемие выражений из истории
Просмотр значения выражения в режиме реального времени с помощью Live Expressions
Если вы не раз введете одно и то же выражение **** JavaScript в консоли, вам может быть проще создать live Expression. С помощью Live Expressions вы введите выражение один раз, а затем прикрепите его к верхней части консоли. Значение обновлений выражения почти в режиме реального времени. См . в этой ссылке watch JavaScript Expression Values In Real-Time с живыми выражениями.
Отключение оценки с желанием
При введите выражения JavaScript в консоли отображается предварительный просмотр возвращаемого значения. Чтобы отключить просмотры возвращаемой стоимости:
Отключение автокомплекта из истории
Когда вы введите выражение, окно всплывающее окно автокомплета консоли отображает выражения, которые вы запустили ранее.**** Выражения предварительно заготавлили с помощью символа > . Чтобы остановить отображение выражений из своей истории , нажмите кнопку Консоль Параметры ( ) и затем очистите контрольный ящик рядом с автоматическим автоматом из почтового ящика "История".
На следующем рисунке и document.querySelector('a') находятся document.querySelector('img') выражения, которые были оценены ранее.
Выбор контекста JavaScript
По умолчанию выпадение контекста JavaScript устанавливается на вершину , которая представляет контекст просмотра главной веб-страницы.
Предположим, что на вашей веб-странице встроена ваша веб-страница, и вы хотите запустить JavaScript, чтобы настроить DOM этого приложения. Щелкните выпадающий список Контекст JavaScript , а затем выберите контекст просмотра рекламы:
Очистка консоли
Чтобы очистить консоль, используйте любой из следующих подходов:
Введите clear() консоль и нажмите кнопку Enter .
Вызов console.clear() с JavaScript веб-страницы.
Нажмите Ctrl + L , пока консоль находится в фокусе.
См. также
Некоторые части этой страницы представляют собой измененные материалы, созданные и предоставленные корпорацией Google. Их использование регулируется условиями, описанными в лицензии Creative Commons Attribution 4.0 International License. Оригинальная страница находится здесь и автором является Kayce Basques (технический писатель, Chrome DevTools & Маяк).
Эта работа предоставляется в рамках международной лицензии Creative Commons Attribution 4.0 International License.
Консоль является интеллектуальной, богатой командной строкой в DevTools и является отличным средством-компаньоном для использования с другими средствами. Консоль предоставляет мощный способ создания скриптов, проверки текущей веб-страницы и управления текущей веб-страницей с помощью JavaScript.
Средство Консоли помогает выполнять несколько задач, которые подробно освещаются в следующих статьях:
Вы можете открыть консольный инструмент в верхней или нижней части DevTools; это показано здесь, в верхней части, на главной панели инструментов:
Консоль показана в нижней части DevTools ( ящик), над ней открывается средство Elements :
**** Самый быстрый способ непосредственного открытия Ctrl``J``Shift ++консоли — нажать кнопку (Windows, Linux) J Command + Option +или (macOS).
Отчеты об ошибках и консоль
Консоль — это место по умолчанию, где сообщаются об ошибках JavaScript и подключения. Если возникают какие-либо ошибки, счетчик проблем отображается рядом с значком Параметры в DevTools, который предоставляет количество ошибок и предупреждений.**** Щелкните счетчик Проблем, чтобы открыть средство Issues и отобразить проблему. Дополнительные сведения см. в ссылке Исправление ошибок JavaScript, которые сообщаются в консоли.
DevTools предоставляет подробные сведения об ошибке в консоли:
Новая вкладка, открываемая из функции ошибки приставки поиска :
Эта функция была представлена в Microsoft Edge версии 94.
Проверка и фильтрация сведений на текущей веб-странице
Когда вы открываете DevTools на веб-странице, в консоли может быть огромное количество информации. При необходимости определения важных сведений возникает проблема с объемом информации. Чтобы просмотреть важную информацию, которая требует действий, используйте средство Issues в DevTools.
Сведения журнала, отображаемые в консоли
Наиболее популярным случаем использования консоли является **** ведение журнала сведений из сценариев с помощью console.log() метода или других аналогичных методов.
Пример кода
Чтобы войти в систему данных, отображаемой в консоли:
Чтобы открыть консоль, Ctrl ++ Shift``J нажмите кнопку (Windows, Linux) или J Command + Option +(macOS).
Вставки выше код в консоль, а затем нажмите Enter .
Откройте новую вкладку или окно.
Чтобы открыть консоль, Ctrl ++ Shift``J нажмите кнопку (Windows, Linux) или J Command + Option +(macOS).
Вставки выше код в консоль, а затем нажмите Enter .
Попробуйте javaScript жить в консоли
Консоль — это не только место для входа данных. Консоль — это среда REPL . При записи javaScript в консоли код запускается немедленно. Возможно, вам будет полезно протестировать некоторые новые функции JavaScript или сделать некоторые быстрые вычисления. Кроме того, вы получаете все функции, которые ожидаются в современной среде редактирования, такие как автозаполнение, синтаксисная подсветка и история.
Чтобы попробовать запускать JavaScript в консоли:
Откройте консоль.
Консоль отображает результат live при 2+2 введите его, отображая результат на 4 следующей строке:
Эта функция оценки Eager полезна для отламывки и проверки того, что вы не ошибались в коде.
Чтобы запустить выражение JavaScript в консоли и дополнительно отобразить результат, нажмите кнопку Enter . Затем можно написать следующий код JavaScript для запуска в консоли.
Последовательное запуск нескольких строк кода JavaScript:
По умолчанию вы запустите код JavaScript в одной строке. Чтобы запустить строку, введите JavaScript и нажмите кнопку Enter . Чтобы обойти ограничение одной строки, нажмите Shift + Enter вместо . Enter
Как и другие опытом командной строки, чтобы получить доступ к предыдущим командам JavaScript, нажмите кнопку Arrow-Up . Функция автозаполнения консоли — это **** отличный способ узнать о незнакомых методах.
Чтобы попробовать автозаполнение:
Дополнительные сведения обо всех способах работы с консолью см. в этой ссылке в консоли в качестве среды JavaScript.
Автокомплектация выражений JavaScript в консоли:
Взаимодействие с текущей веб-страницей в браузере
Консоль имеет доступ к объекту Window браузера. Вы можете написать сценарии, взаимодействующие с текущей веб-страницей, считыв данные из DOM и назначив данные элементам DOM.
Чтение из дерева DOM в консоли
Чтобы использовать выражение JavaScript для чтения с текущей страницы, прочитав выбранный элемент из дерева DOM:
Откройте консоль.
Вставки следующего кода в консоль, а затем нажмите Enter :
Это выражение выбирает первый уровень заголовка 1 из DOM, а затем выбирает содержимое HTML , которое содержится между тегами старта и конца. Консоль отображает выход выражения, которое является текстом заголовка:
Вы прочитали из представления DOM веб-страницы, введите выражение JavaScript в консоли и отобразив **** выход в консоли.
Запись на дерево DOM и веб-страницу консоли
Вы также можете изменить отрисовку веб-страницы, изменив DOM (или запись __ на DOM) из консоли.
Изменение отрисовки веб-страницы:
Откройте консоль.
Вставки следующего кода в консоль, а затем нажмите Enter :
Вышеуказанное выражение JavaScript использует знак = , чтобы назначить значение выбранному элементу DOM. В этом примере оцениваемая величина выражения — строка для заголовка. Значение выражения (строка заголовка) отображается как на консоли, так и **** на отрисовке веб-страницы:
Вы изменили основной заголовок веб-страницы на Rocking the Console.
Использование метода консоли $$ для
С помощью методов консоли можно легко получить доступ к текущей веб-странице и управлять ею.
Например, чтобы добавить зеленую границу вокруг всех ссылок на текущей веб-странице:
Откройте консоль.
Вставки следующего кода в консоль, а затем нажмите Enter :
Функция $$(selector) утилиты консоли — "Селектор запроса все". Эта функция селектора запросов DOM возвращает массив всех элементов, которые соответствуют указанному селектору CSS, например функции JavaScript document.querySelectorAll() . В этом примере мы выбираем все элементы гиперссылки , а затем применяем зеленое поле вокруг них:
Дополнительные сведения см. в полезных функциях и селекторах средств консоли.
Чтобы службе поддержки было легче понять, в чем именно заключается проблема, пришлите скриншот с техническими данными работы браузера. Эту информацию можно просмотреть в консоли браузера.
Internet Explorer
Mozilla Firefox
- Откройте нужную страницу в браузере Mozilla Firefox.
- Нажмите Ctrl+Shift+K или перейдите → «Разработка» → «Веб-консоль».
- Убедитесь, что у вас выделены светло-голубым все параметры, о которых отображаются ошибки.
Opera
- Откройте нужную страницу в браузере Opera.
- Нажмите Ctrl+Shift+J. Красным отмечены ошибки.
Google Chrome
- Откройте нужную страницу в браузере Google Chrome.
- Нажмите → «Дополнительные инструменты» → «Инструменты разработчика».
- Перейдите во вкладку «Console».
Microsoft Edge
- Откройте нужную страницу в браузере Microsoft Edge.
- Справа сверху нажмите и перейдите в «Режим разработчика». Либо нажмите F12.
- Перейдите во вкладку «Консоль».
Safari
- Откройте нужную страницу в браузере Safari.
- В строке меню нажмите «Safari».
- Перейдите «Настройки» → «Дополнения».
- Внизу окна установите галочку «Показывать меню „Разработка“ в строке меню».
- В строке меню нажмите «Разработка» и выберите «Показать веб-инспектор».
Яндекс.Браузер
- Откройте нужную страницу в Яндекс.Браузере.
- Нажмите в правом верхнем углу.
- Перейдите «Дополнительно» → «Дополнительные инструменты» → «Инструменты разработчика».
- Перейдите во вкладку «Console».
Читайте также: