Как сделать консоль javascript
Использование консоли разработчика JavaScript
Современные браузеры предоставляют встроенные инструменты разработки для JavaScript и других технологий. Среди этих инструментов можно найти консоль, которая похожа на интерфейс оболочки, а также инструменты для проверки DOM, отладки и анализа сетевой активности.
Консоль можно использовать для регистрации информации как части процесса разработки JavaScript. Также консоль позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в контексте страницы. По сути, консоль предоставляет возможность писать код JavaScript и при необходимости управлять им.
Данное руководство научит работать с консолью JavaScript в браузере и ознакомит с другими встроенными инструментами разработки, которые могут вам пригодиться.
Работа с консолью JavaScript в браузере
Большинство современных веб-браузеров, поддерживающих HTML и XHTML, по умолчанию предоставляют доступ к консоли разработчика, где вы можете работать с JavaScript в интерфейсе, подобном оболочке терминала. В этом разделе вы узнаете, как получить доступ к консоли в Firefox и Chrome.
Браузер Firefox
Чтобы открыть Web Console в браузере FireFox, откройте меню ☰ в верхнем правом углу.
Нажмите кнопку Developer. Она откроет меню Web Developer, где вы сможете выбрать Web Console.
Консоль откроется в нижней части окна браузера.
Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+K в Linux и Windows или Command+Option+K в macOS.
Браузер Chrome
Чтобы найти JavaScript Console в браузере Chrome, откройте меню в правом верхнем углу окна (кнопку с тремя точками по вертикали). Выберите More Tools → Developer Tools.
На экране появится панель. Выберите Console в верхнем меню, чтобы получить доступ к консоли JavaScript Console.
Вы также можете войти в веб-консоль с помощью сочетания клавиш Ctrl+Shift+J в Linux и Windows или Command+Option+J в macOS.
Работа с консолью JavaScript
В консоль можно вводить код JavaScript.
Для примера попробуйте написать простое предупреждение, которое будет выводить строку Hello, World!:
Нажмите Enter. В браузере появится всплывающее окно:
Обратите внимание: консоль также распечатает результат вычисления выражения, которое будет читаться как undefined.
Консоль может также логировать данные JavaScript с помощью console.log.
Чтобы отобразить строку «Hello, World!» в консоли, введите:
console.log(«Hello, World!»);
Hello, World!
Также консоль может обрабатывать математические вычисления:
Попробуйте ввести более сложный пример:
console.log(34348.2342343403285953845 * 4310.23409128534);
148048930.17230788
Также консоль может работать с несколькими строками и переменными:
let d = new Date();
console.log(«Today’s date is » + d);
Today’s date is Mon Jul 03 2017 16:06:51 GMT+0300
Если вам нужно изменить команду, которую вы ранее вводили в консоль, нажмите клавишу со стрелочкой вверх ↑ на клавиатуре. Это позволит вам отредактировать команду и запустить ее снова.
Окружение JavaScript Console подобно оболочке терминала, что позволяет протестировать код в режиме реального времени.
Работа с HTML-файлами
В консоли можно работать в контексте HTML-файла или страницы с динамической визуализацией. Это дает возможность поэкспериментировать с кодом JavaScript в контексте HTML, CSS и JavaScript.
Имейте в виду: как только вы перезагрузите страницу, измененную в консоли, она вернется к прежнему состоянию, поэтому обязательно сохраняйте все изменения, которые нужно оставить.
Использование JavaScript-консоли в браузерах
Команда console.log() и имена переменных
Простейший вариант использования console.log() заключается, например, в выводе некоей строки или объекта. Например, выведем в консоль строку:
Теперь представим себе, что в консоль нужно вывести несколько объектов. Например — таких:
Взглянем на то, что выводится в консоль.
В консоли нет имён переменных
Команда console.table()
Команда console.table() в действии
Команда console.group()
Эту команду можно использовать в том случае, если нужно сгруппировать некие связанные данные и создать структуры из вложенных групп, которые повышают удобство работы с такими данными.
Кроме того, этот подход можно использовать в тех случаях, когда в некоей функции выполняется несколько команд вывода чего-либо в консоль, и нужно, чтобы можно было бы чётко, с одного взгляда, отделить результаты выполнения таких команд от других.
Предположим, мы выводим в консоль сведения о неких пользователях:
Вот как выглядят результаты работы этого кода.
Группировка результатов работы команд вывода данных в консоль
Команды console.warn() и console.error()
Предупреждения и ошибки
Стилизация данных, выводимых в консоль
Команда console.trace()
Команда console.time()
Одна из важных задач, встающая перед фронтенд-разработчиком, заключается в том, чтобы обеспечить высокую скорость работы кода. Команда console.time() позволяет замерять время выполнения операций и выводить то, что удалось выяснить, в консоль. Например, исследуем с помощью этой команды пару циклов:
Взглянем на то, что попало в консоль после выполнения этого кода.
Результаты использования console.time()
Итоги
В этом материале мы рассмотрели некоторые полезные мелочи, касающиеся вывода данных в консоли браузеров. Если раньше вы об этих возможностях не знали — надеемся, теперь у вас появились новые полезные JavaScript-инструменты.
Уважаемые читатели! Если вы занимаетесь разработкой больших JavaScript-проектов — просим вас рассказать о том, какими средствами вы решаете в них проблемы логирования.
Как использовать консоль JavaScript: выходя за пределы console.log()
Дата публикации: 2019-05-13
От автора: один из самых простых способов отладки чего-либо в JavaScript — это регистрировать вещи с помощью console.log. Но есть много других методов, предоставляемых консолью JavaScript, которые могут помочь вам в отладке.
Самым простым вариантом использования является регистрация строки или группы объектов JavaScript. Довольно просто:
Теперь представьте себе сценарий, когда у вас есть куча объектов, которые вам нужно зарегистрировать в консоли.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Самый интуитивно понятный способ записать это — просто console.log(variable) один за другим. Проблема становится более очевидной, когда мы видим, как это отображается в консоли.
Имена переменных не видны
Как видите, имена переменных не видны. Это очень раздражает, когда у вас их много, и вам нужно развернуть маленькую стрелку слева, чтобы увидеть, каково имя переменной. Введите вычисляемые имена свойств. Это позволяет объединить все переменные в один console.log(< foo, bar >);, и результат будет легко доступен. Это также уменьшает количество строк console.log в коде.
console.table()
Мы можем пойти еще дальше, собрав все это в таблицу, чтобы сделать более удобочитаемым. Всякий раз, когда у вас есть объекты с общими свойствами или массив объектов, используйте console.table(). Здесь мы можем использовать console.table(< foo, bar>) и результат будет:
console.table в действии
console.group()
Это может использоваться, когда вы хотите сгруппировать или вложить связанные данные вместе, чтобы иметь возможность легко читать логи.
Это также может быть использовано, когда у вас есть несколько операторов логов внутри функции, и вы хотите иметь возможность четко видеть область действия, соответствующую каждому оператору. Например, если вы регистрируете данные пользователя:
Консоль разработчика
Код уязвим для ошибок. И вы, скорее всего, будете делать ошибки в коде… Впрочем, давайте будем откровенны: вы точно будете совершать ошибки в коде. В конце концов, вы человек, а не робот.
Но по умолчанию в браузере ошибки не видны. То есть, если что-то пойдёт не так, мы не увидим, что именно сломалось, и не сможем это починить.
Для решения задач такого рода в браузер встроены так называемые «Инструменты разработки» (Developer tools или сокращённо — devtools).
Chrome и Firefox снискали любовь подавляющего большинства программистов во многом благодаря своим отменным инструментам разработчика. Остальные браузеры, хотя и оснащены подобными инструментами, но все же зачастую находятся в роли догоняющих и по качеству, и по количеству свойств и особенностей. В общем, почти у всех программистов есть свой «любимый» браузер. Другие используются только для отлова и исправления специфичных «браузерозависимых» ошибок.
Для начала знакомства с этими мощными инструментами давайте выясним, как их открывать, смотреть ошибки и запускать команды JavaScript.
Google Chrome
В её JavaScript-коде закралась ошибка. Она не видна обычному посетителю, поэтому давайте найдём её при помощи инструментов разработки.
По умолчанию в инструментах разработчика откроется вкладка Console (консоль).
Она выглядит приблизительно следующим образом:
Точный внешний вид инструментов разработки зависит от используемой версии Chrome. Время от времени некоторые детали изменяются, но в целом внешний вид остаётся примерно похожим на предыдущие версии.
Обычно при нажатии Enter введённая строка кода сразу выполняется.
Теперь мы явно видим ошибки, для начала этого вполне достаточно. Мы ещё вернёмся к инструментам разработчика позже и более подробно рассмотрим отладку кода в главе Отладка в браузере Chrome.
Firefox, Edge и другие
Их внешний вид и принципы работы мало чем отличаются. Разобравшись с инструментами в одном браузере, вы без труда сможете работать с ними и в другом.
Safari
Safari (браузер для Mac, не поддерживается в системах Windows/Linux) всё же имеет небольшое отличие. Для начала работы нам нужно включить «Меню разработки» («Developer menu»).
Откройте Настройки (Preferences) и перейдите к панели «Продвинутые» (Advanced). В самом низу вы найдёте чекбокс:
Итого
Теперь наше окружение полностью настроено. В следующем разделе мы перейдём непосредственно к JavaScript.
Гайд для начинающих: как написать JavaScript
Современный интернет немыслим без скриптов. Учимся писать на JavaScript.
Если бы для интернета писали Библию, она начиналась бы так:
Сначала была почта. И увидели инженеры, что это хорошо. И создали они WWW с гиперссылками. И увидели инженеры, что это тоже хорошо. И создали они тогда язык JavaScript для оживления страничек.
Примерно так происходило в реальности. JavaScript придумали, чтобы «оживить» HTML. Скрипты JavaScript пишутся непосредственно в текст HTML или хранятся в отдельных файлах, как и стили CSS. Они выполняются сразу после загрузки страницы в браузер.
Даже сам язык в первое время назывался LiveScript. Потом его переименовали в JavaScript, потому что планировали как-то увязать с языком общего назначения Java. Но сейчас у них нет практически ничего общего, а JavaScript — совершенно независимый язык программирования со своей четкой спецификацией ECMAScript.
Формально JavaScript является торговой маркой Oracle, а этот язык — «расширение» ECMAScript, наряду с JScript от Microsoft и ActionScript, но это скорее заморочки владельцев торговых марок. Главное, что свободный ECMAScript никому не принадлежит.
Со временем сфера влияния JavaScript значительно расширилась. Его начали использовать не только для скриптов на странице HTML, но и для серьезных больших веб-приложений и целых программ, которые работают в браузере. Есть инструменты, чтобы специальным образом «упаковать» эти программы и выполнять их отдельно от браузера. Это компиляторы и интерпретаторы, которые более подробно рассматриваются на обучающих курсах «Java-разработчик» и «Веб-разработчик».
Приложения JavaScript выполняются в любой среде, где есть соответствующий интерпретатор.
Нас пока интересуют только браузеры и HTML-странички.
Как сделать JavaScript? Написать элементарный скрипт не сложнее, чем простую HTML-страничку, ведь скрипты JavaScript пишутся обычным текстом, то есть их можно создавать буквально в том же «Блокноте», сохраняя потом в отдельных файлах или вставляя в тело HTML-документа. Самые простые вещи на JavaScript делаются действительно просто.
Как написать JavaScript
Для примера сделаем простой скрипт для выполнения сервером сценариев Windows. Этот скрипт можно написать прямо в «Блокноте» и выполнить без браузера.
WScript. echo (» Привет, Skillbox!«)
Пишем этот текст в «Блокноте», затем сохраняем файл под именем skillbox.js и запускаем в «Проводнике» Windows.
alert()
Метод alert() отображает окошко с кнопкой «OK». В окне выводится сообщение, которое указано в скобках. Например, «Привет, Skillbox!». То есть в данном случае браузер делает ровно то же самое, что перед этим делал сервер сценариев Windows.
Эти примеры тоже можно писать в «Блокноте», только сохранять в файлах с расширением HTML. Например, skillbox.htm.
В качестве аргумента alert() можно указать не только конкретный текст, но и результат каких-либо вычислений или обработки других данных. Например, alert(x), где x вычисляется отдельно.
confirm()
Метод confirm() выводит такое же окно с сообщением, но уже с двумя кнопками — «ОК» и «Отмена». В зависимости от того, какую кнопку щелкнет пользователь, метод возвращает либо значение true, либо false. Сервер получает это возвращаемое значение от пользователя и выполняет какое-то действие, в зависимости от ответа.
Синтаксис такой же, только здесь логически предполагается выбор, так что пользователю задают вопрос.
prompt()
Метод prompt() выводит диалоговое окно с сообщением и текстовым полем, куда пользователь вводит данные. Здесь тоже предусмотрены две кнопки «ОК» и «Отмена». По нажатию первой кнопки метод возвращает на сервер введенный текст, а по нажатию второй кнопки возвращает логическое значение false.
Синтаксис здесь такой:
prompt ( сообщение, значение_поля_ввода_данных)
Значение поля ввода необязательно. Туда можно вписать текст, который изначально введен в поле для удобства пользователя.
Возможности современного JavaScript выходят далеко за рамки примитивного ввода-вывода данных через формы. Эти методы мы привели только в качестве самых простых примеров. Кроме этого, JavaScript позволяет реагировать на действия пользователя. Например, на движения мышкой или нажатие определенных клавиш. JavaScript часто используется для обеспечения асинхронной работы ( Технология AJAX), когда информация на странице обновляется без ее перезагрузки. В этом режиме данные отправляются на сервер и загружаются оттуда в интерактивном режиме. Кроме того, JavaScript способен манипулировать с HTML-элементами на странице (создавать и прятать теги и т.д.) и делать многое другое.
Полезные инструменты
Консоль разработчика
Во всех популярных браузерах есть специальная консоль разработчика. Она показывает код скриптов на странице, а также выводит другую полезную информацию. В Chrome, Firefox и IE консоль разработчика открывается по нажатию горячей клавиши F12, в Safari — Ctrl+Shift+I или Ctrl+Alt+C. На скриншоте скрипты отображаются справа вверху, вместе с другими элементами веб-страницы.
Редакторы кода
В дальнейшем для удобного программирования понадобится установить редактор кода или IDE (Integrated Development Environment), интегрированную среду разработки. IDE — это редактор с расширенной функциональностью, который интегрирован с другими полезными инструментами, поддерживает подключение дополнительных модулей и так далее.
Для начала можно рекомендовать один из легких редакторов:
В будущем есть смысл присмотреться к IDE:
Заключение
Инструкторы на курсе «JavaScript с нуля» посоветуют лучшие инструменты и помогут разобраться с любыми вопросами. Это практический 4-месячный курс для тех, кто хочет научиться основам языка сценариев с индивидуальным наставником, разработать фронтенд для интерактивного веб-проекта и положить кейс к себе в портфолио.
Курс идеально подойдет дизайнерам-разработчикам и начинающим программистам, кто уже знаком и умеет разрабатывать страницу на HTML и CSS, но не намерен останавливаться в изучении программирования. Преподаватели практически «на пальцах» объяснят базовые основы синтаксиса JavaScript, научат создавать визуальные интерактивные элементы и помогут разработать первый веб-проект на JavaScript.