24 июля, 2017 12:27 пп
15 692 views
| Комментариев нет
Java
Современные браузеры предоставляют встроенные инструменты разработки для 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!:
alert("Hello, World!");
Нажмите Enter. В браузере появится всплывающее окно:
Hello, World!
Обратите внимание: консоль также распечатает результат вычисления выражения, которое будет читаться как undefined.
Консоль может также логировать данные JavaScript с помощью console.log.
Чтобы отобразить строку «Hello, World!» в консоли, введите:
console.log("Hello, World!");
Hello, World!
Также консоль может обрабатывать математические вычисления:
console.log(2 + 6);
8
Попробуйте ввести более сложный пример:
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.
Имейте в виду: как только вы перезагрузите страницу, измененную в консоли, она вернется к прежнему состоянию, поэтому обязательно сохраняйте все изменения, которые нужно оставить.
Создайте простой HTML-файл index.html.
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Today's Date</title>
</head>
<body>
</body>
</html>
Сохраните файл и откройте его в браузере. На экране появится страница с заголовком Today’s Date.
Теперь откройте консоль и используйте JavaScript, чтобы изменить страницу. Вставьте в HTML заголовок.
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
В консоли появится:
Today's date is Mon Jul 03 2017 16:15:55 GMT+0300
Страница будет выглядеть так:
Today's date is Mon Jul 03 2017 16:15:55 GMT+0300
Затем можно изменить стиль страницы, например, цвет фона:
document.body.style.backgroundColor = "pink";
"pink"
Также можно изменить цвет текста на странице:
document.body.style.color = "white";
"white"
Создайте новый элемент с помощью тега <p>:
let p = document.createElement("P");
Затем можно создать текст и добавить его в абзац:
let t = document.createTextNode("Paragraph text.");
Добавьте текст в переменную р:
p.appendChild(t);
Затем вставьте переменную р в элемент <p>.
document.body.appendChild(p);
Теперь страница выглядит так:
Today's date is Mon Jul 03 2017 16:26:58 GMT+0300
Paragraph text.
Консоль позволяет поэкспериментировать с отображением и внешним видом HTML-страниц. Однако при этом важно помнить, что сам документ HTML не меняется при работе с ним в консоли. Как только вы перезагрузите страницу, она примет свой прежний вид.
Работа с другими инструментами разработки
В данном разделе вы ознакомитесь с другими встроенными инструментами разработки, которые можно использовать в браузерах.
Инструмент DOM (Document Object Model)
Во время загрузки любой страницы браузер создает объектную модель документа, или DOM страницы.
DOM – это дерево объектов, которое отображает иерархию HTML-элементов страницы. Дерево DOM можно просмотреть в панели Inspector в Firefox и в панели Elements в Chrome.
Эти инструменты позволяют проверять и редактировать элементы DOM, а также искать объекты HTML, связанные с конкретной страницей. DOM может показать, имеет ли фрагмент текста или изображение атрибут ID, и может определить значение этого атрибута.
Кроме того, в боковой панели или под панелью DOM можно найти стили CSS, которые используются в документе HTML или таблице стилей.
Чтобы отредактировать DOM в реальном времени, дважды кликните по выбранному элементу. Для примера можете попробовать превратить тег <h1> в <h2>.
Опять же, после обновления страница примет прежний вид.
Вкладка Network
Вкладка Network позволяет мониторить и записывать сетевые запросы. В этой вкладке показаны сетевые запросы браузера, в том числе запросы для загрузки страницы, время обслуживания запросов и сведения о каждом из них. Эти данные можно использовать для оптимизации производительности загрузки страницы и отладки запросов.
Использовать вкладку Network можно вместе с консолью JavaScript. Например, вы можете начать отладку страницы с помощью консоли, а затем открыть вкладку Network и просмотреть сетевую активность, не перезагружая страницу.
Дополнительные рекомендации по работе с сетевыми данными вы найдете в мануалах браузеров:
- Firefox Network Monitor.
- Chrome DevTools.
Отзывчивый дизайн
Сайты с отзывчивым дизайном быстро адаптируют свой вид и функции на различных устройствах: мобильных телефонах, планшетах, настольных компьютерах и ноутбуках. Размер экрана, плотность пикселей и ответ на прикосновения – факторы, которые следует учитывать при разработке адаптивных сайтов. Также принципы отзывчивого дизайна важно учитывать для того, чтобы веб-сайт был доступным и производительным вне зависимости от устройства, на котором его открывают.
Современные браузеры (в том числе Firefox и Chrome) предоставляют модели соблюдения принципов отзывчивого дизайна при разработке сайтов и приложений. Эти модели эмулируют поведение того или иного устройства, что позволяет протестировать и проанализировать все функции сайта.
Больше об этом можно узнать в руководствах браузеров:
- Responsive Design Mode в Firefox
- Device Mode в Chrome
Заключение
В этом руководстве представлен краткий обзор работы с консолью JavaScript в современных веб-браузерах. Также здесь можно найти информацию о других полезных инструментах разработки.
Читайте также:
- Типы данных в JavaScript
- Основы jquery
- Добавление кода JavaScript в HTML
Tags: Javascript
В процессе программирования на JavaScript появляется необходимость выводить значения переменных. К примеру, это можно делать функцией alert( ). Но если использовать её несколько раз, тогда придётся закрывать всплывающее окно, чтобы увидеть следующее. Это неудобно, поэтому на помощь приходит консоль, встроенная в браузер.
Как открыть JavaScript консоль в браузере?
Если вы пользуетесь одним из популярных браузеров (Chrome, FireFox, Safari, Opera), то в них уже встроена консоль JavaScript, в которую можно выводить отладочную информацию во время разработки. Для этого откройте страницу сайта, на которой находится JS код для тотладки, и кликните на клавишу F12 на клавиатуре. Откроется панель разработчика.
В большинстве браузеров средства разработки называются более-менее одинаково и имеют очень схожий функционал. Далее в статье будет рассматриваться браузер FireFox.
Теперь необходимо переключить вкладку вверху открывшегося окна на «Консоль». Кликните на эту вкладку с помощью курсора мыши:
Разберёмся с иконоками и опциями, которые есть в этой закладке:
- Иконка корзины — очищает лог (лог — это список событий, строчки текстовых записи)
- Непрерывные логи — если поставить эту галочку, то при перезагрузки страницы лог не будет очищаться автоматически.
- «Ошибки», «Предупреждения», «Лог» … — эти закладки отключают вывод сообщений. К примеру, кликните по пункту «Ошибки» и снимите выделение, тогда в консоль не будут записываться предупреждение об ошибках.
Как вывести переменную JavaScript в консоль?
Попробуем написать на странице JavaScript код и перезагрузить её, чтобы он выполнился. В коде используем функцию console.log( ), которая выводит значение содержимого в скобках. То есть если поставить в скобки переменную, то в консоли будет показано её значение:
var a = {'Мышь': 'Большая', 'Кот': 'Маленький', 'Сыр': 100};
console.log(a);Заглянем в консоль и увидим значение объекта:
Чтобы увидеть подробную информацию, кликните на иконку стрелочки слева на интересующей строчке:
Таким способом можно выводить не только массивы и объекты, но и простые переменные. К сожалению, если выводить сразу несколько значений, то не будет понятно что к чему относится. Продемонстрируем это:
var a = 'Мышь';
var b = 'Сыр';
var c = 100;
console.log(a);
console.log(b);
console.log(c);Результат выполнения этого кода будет таким:
Такой вывод не слишком информативен. К счастью, внутри скобок функции console.log( ) можно использовать объединение строк. Поэтому предлагаем записать дополнительную отладочную информацию в выводимые строки:
var a = 'Мышь';
var b = 'Сыр';
var c = 100;
console.log('Значение переменной "a" = ' + a);
console.log('Значение переменной "b" = ' + b);
console.log('Значение переменной "c" = ' + c);Теперь вывод в консоль будет более информативным. И можно использовать функцию console.log( ) десятки раз, не боясь запутаться в значениях, которые попадают в консоль:
Рекомендуем ознакомиться со статьёй «Операции со строками в JavaScript», если возникли вопросы к объединению строк.
К сожалению, это можно делать только с простыми переменными (строки/числа) и массивами (в том числе многомерными), но с объектами так сделать не получится, потому что будет выведено «[object Object]» вместо значения:
Была ли эта статья полезна?
Есть вопрос?
Закажите недорогой хостинг
Заказать
всего от 290 руб
This JavaScript tutorial explains how to open the web browser console log.
Description
The Console is one of the many Developer Tools available in web browsers. You can use the Console to debug or troubleshoot your JavaScript code. The location where you can find the Console will differ from browser to browser. In this tutorial, we will show you where and how to find the Console in the Google Chrome browser.
Steps to Open the Console Log in Google Chrome
Let’s take a look at how to open the console log for the Chrome browser.
-
With the Chrome browser open, right-click anywhere in the browser window and select Inspect from the pop-up menu.
-
By default, the Inspect will open the «Elements» tab in the Developer Tools. Click on the «Console» tab which is to the right of «Elements».
-
Now you can see the Console and any output that has been written to the Console log.
As you can see, we have written the output from the JavaScript slice() method four times to the console log, which output the values ‘Tech’, ‘On’, ‘The’, and ‘Net’.
Shortcut Keys for Developer Tools in Google Chrome
There are also several shortcut keys that you can use to open the Chrome Developer Tools. Here are some of the shortcuts that you can use, depending on your version of Chrome:
Windows and Linux:
| Ctrl + Shift + I | Opens the Developer Tools |
| Ctrl + Shift + J | Opens the Developer Tools with the Console tab selected |
| Ctrl + Shift + C | Toggles to Inspect Element mode |
Mac:
| ⌥ + ⌘ + I | Opens the Developer Tools |
| ⌥ + ⌘ + J | Opens the Developer Tools with the Console tab selected |
| ⌥ + ⌘ + C | Toggles the Inspect Element mode |
Chrome
Opening the “Console” panel of Chrome’s DevTools:
-
Windows and Linux: Ctrl + Shift + J
-
Mac OS: Cmd + Opt + J
Note: In addition to the “Console” panel, there also exists a smaller slide-up console which can be toggled via Esc while any of the other panels is active.
Full documentation
Firefox
Opening the “Console” panel in Firefox’s Developer Tools:
-
Windows: Ctrl + Shift + K
-
Mac OS: Cmd + Opt + K
Note: In addition to the “Console” panel, there also exists a smaller slide-up console which can be toggled via Esc while any of the other panels is active.
Full documentation
Internet Explorer
Opening the “Console” panel in Internet Explorer’s F12 Developer Tools:
- F12, then click on the “Console” tab
Note: In addition to the “Console” panel, there also exists a smaller slide-up console which can be toggled via Ctrl + ` while any of the other panels is active.
Full documentation
Safari
Note: In order to view the console in Safari, you have to enable the “Show Develop menu in menu bar” setting in the “Advanced” pane of Safari’s preferences (screenshot).
Opening the “Console” panel in Safari’s Web Inspector:
- Cmd + Opt + C
Note: In addition to the “Console” panel, there also exists a smaller slide-up console which can be toggled via Esc while any of the other panels is active.
Full documentation
Opera
- Windows and Linux: Ctrl + Shift + I
- Mac : ⌘+⌥+I
Full documentation