Огляд консолі

Консоль схожа на інтелектуальний, багатофункціональний командний рядок у DevTools і є чудовим засобом-компаньйоном для використання з іншими інструментами. Консоль надає потужний спосіб створення скриптів, перевірки поточної веб-сторінки та керування поточною веб-сторінкою за допомогою JavaScript.

Засіб Console допомагає виконати кілька завдань, які докладніше розглядаються у наступних статтях:

• Слідкуйте за проблемами , щоб з'ясувати, чому щось не працює у поточному проекті. Див. розділ Виправлення помилок JavaScript, про які повідомляється в консолі.
• Отримання інформації про веб-проект у браузері у вигляді повідомлень журналу. Див. розділ Фільтрування повідомлень консолі.
• Відомості про журнал у скриптах для налагодження. Див. статтю Журнал повідомлень у засобі консолі.
• Спробуйте використати вирази JavaScript у середовищі REPL. Див. статтю Запуск JavaScript у консолі.
• Взаємодія з веб-проектом у браузері за допомогою JavaScript. Див. розділ Взаємодія з DOM за допомогою консолі.

Ви можете відкрити консоль у верхній або нижній частині devTools. Він показаний у верхній частині на панелі дій:

Консоль відображається тут у нижній частині DevTools (панель швидкого перегляду), а над нею відкриється інструмент Елементи:

Найшвидший спосіб відкрити консоль безпосередньо - натиснути клавіші CTRL+SHIFT+J (Windows, Linux) або COMMAND+OPTION+J (MacOS).

Звіти про помилки та консоль

Консоль — це місце за умовчанням, де повідомляється про помилки JavaScript та підключення. Для отримання додаткових відомостей див. у статті Виправлення помилок JavaScript, про які повідомляється в консолі.

DevTools надає докладні відомості про помилку в консолі:

Пошук в Інтернеті рядки повідомлення про помилку консолі

Знайдіть в Інтернеті повідомлення про помилки консолі прямо з devTools. У консолі багато повідомлень про помилки мають кнопку Пошук цього повідомлення на веб-кнопці , що відображається у вигляді лупи:

При натисканні кнопки Пошук цього повідомлення на веб-сайті у браузері відкриється нова вкладка з результатами пошуку для повідомлення про помилку:

Перевірка та фільтрація відомостей на поточній веб-сторінці

При відкритті засобів розробки на веб-сторінці консолі може бути великий обсяг інформації. Обсяг інформації стає проблемою, коли потрібно визначити важливу інформацію. Щоб переглянути важливу інформацію, яка потребує дій, використовуйте засіб "Проблеми" у засобах розробки.

Проблеми поступово переміщаються з консолі у засіб "Проблеми ". Однак у консолі як і багато інформації, тому рекомендується знати про автоматичні параметри журналів і фільтрів в консолі. Для отримання додаткових відомостей див. у розділі Фільтрування повідомлень консолі.

Засоби розробки з консоллю , повної повідомлень:

Відомості журналу для відображення консолі

Найбільш популярним варіантом використання консолі є ведення журналу відомостей зі скриптів за допомогою console.log() методу чи інших аналогічних методів.

Приклад коду

// Prints the text to the console as log message console.log('This is a log message'); // Prints the text to the console as an informational message console.info('This is some information'); // Prints the text to the console as an error message console.error('This is an error'); // Prints the text to the console as a warning console.warn('This is a warning'); // Prints geometry of document body is object console.log(document.body.getBoundingClientRect()); // Prints geometry document document as table console.table(document.body.getBoundingClientRect()); // shows a list of techologies as collapsed group let technologies = ["HTML", "CSS", "SVG", "ECMAScript"]; console.groupCollapsed('Technolgies'); technologies.forEach(tech => ) console.groupEnd('Technolgies');

Щоб записати інформацію для відображення в консолі, виконайте такі дії:

1. Відкрийте демонстраційну веб-сторінку Приклади повідомлень консолі: журнал, інформація, помилка та попередження у новому вікні або вкладці.
2. Щоб відкрити консоль, натисніть клавіші CTRL+SHIFT+J (Windows, Linux) або COMMAND+OPTION+J (MacOS). Консоль відображає результуючі повідомлення, викликані демонстраційною версією коду:
3. Вставте наведений вище код у консоль та натисніть клавішу ВВЕДЕННЯ. Якщо ви отримуєте повідомлення: Uncaught SyntaxError: Identifier 'technologies' has already been declared :
4. Відкрийте нову вкладку чи вікно.
5. Щоб відкрити консоль, натисніть клавіші CTRL+SHIFT+J (Windows, Linux) або COMMAND+OPTION+J (MacOS).
6. Вставте наведений вище код у консоль та натисніть клавішу ВВЕДЕННЯ.

При роботі з консоллю є безліч корисних методів. Для отримання додаткових відомостей див. у розділі Журнал повідомлень у засобі консолі.

Пробне використання JavaScript в режимі реального часу в консолі

Консоль — це не лише місце реєстрації інформації. Консоль - Це середовище REPL. При написанні javaScript в консолі код виконується негайно. Може виявитися корисним протестувати деякі нові функції JavaScript або виконати швидкі обчислення. Крім того, ви отримаєте всі функції, очікувані від сучасного середовища редагування, такі як автозавершення, виділення синтаксису та журнал.

Щоб спробувати запустити JavaScript у консолі, виконайте такі дії:

У консолі відображається результат динамічної трансляції 2+2 у міру його введення. Результат 4 відображається у наступному рядку:

Ця функція оцінки з бажанням корисна для налагодження та перевірки того, що ви не робите помилок у коді.

Щоб запустити вираз JavaScript в консолі та за потреби відобразити результат, натисніть клавішу ВВЕДЕННЯ. Потім можна написати наступний код JavaScript для запуску консолі.

Послідовне виконання кількох рядків коду JavaScript:

За замовчуванням код JavaScript виконується в одному рядку. Щоб запустити рядок, введіть JavaScript та натисніть клавішу ВВЕДЕННЯ. Щоб обійти однострокове обмеження, натисніть клавіші SHIFT+ВВЕДЕННЯ , а не ВВЕДЕННЯ.

Як і в інших інтерфейсах командного рядка, для доступу до попередніх команд JavaScript натисніть клавішу СТРІЛКА ВВЕРХ. Функція автозаповнення консолі — це чудовий спосіб дізнатися про незнайомі методи.

Щоб спробувати автозавершення, виконайте наведені нижче дії.

1. Відкрийте консоль.
2. Введіть doc.
3. Виберіть document у розкривному меню.
4. Натисніть клавішу TAB , щоб вибрати документ.
5. Введіть .bo.
6. Натисніть клавішу TAB , щоб вибрати document.body.
7. Введіть інший. , щоб відобразити повний список властивостей та методів, доступних у тексті поточної веб-сторінки.

Додаткові відомості про всі способи роботи з консоллю див. у розділі Консоль як середовище JavaScript.

Автозавершення виразів JavaScript в консолі:

Взаємодія з поточною веб-сторінкою у браузері

Консоль має доступ до об'єкта Windows браузера. Ви можете створювати скрипти, які взаємодіють із поточною веб-сторінкою, зчитуючи дані з DOM та присвоюючи дані елементам DOM.

Читання з дерева DOM у консолі

Щоб використовувати вираз JavaScript для читання з поточної сторінки, зчитуючи вибраний елемент із дерева DOM:

1. Відкрийте консоль.
2. Вставте наступний код у консоль та натисніть клавішу ВВЕДЕННЯ:

document.querySelector('h1').innerHTML

Ви зчитуєте дані з подання веб-сторінки DOM, ввівши вираз JavaScript в консолі і відображаючи вихідні дані в консолі.

Запис у дерево DOM та веб-сторінку з консолі

Ви також можете змінити відмальовану веб-сторінку, змінивши DOM (або написавши в DOM) з консолі.

Щоб змінити відображену веб-сторінку, виконайте такі дії:

1. Відкрийте консоль.
2. Вставте наступний код у консоль та натисніть клавішу ВВЕДЕННЯ:

document.querySelector('h1').innerHTML = 'Rocking the Console';

Використання службового методу $$ Console для

Методи службової програми консолі спрощують доступ до поточної веб-сторінки та керування нею.

Наприклад, щоб додати зелений кордон навколо всіх посилань на поточній веб-сторінці:

1. Відкрийте консоль.
2. Вставте наступний код у консоль та натисніть клавішу ВВЕДЕННЯ:

$$('a').forEach(a => a.style.border='1px solid lime');

Щоб отримати додаткові відомості, див. Опції та селектори засобів консолі.

також

Запуск JavaScript у консолі

Ви можете ввести будь-який вираз JavaScript, інструкцію або фрагмент коду в консолі, і він запускається одразу і в інтерактивному режимі в міру введення. Це можливо, оскільки засіб Консолі у Засобах розробки є середовищем REPL. REPL - Читання, оцінка, друк і цикл.

Консоль:

1. Зчитує JavaScript, що вводиться.
2. Оцінює код.
3. Виводить результат висловлювання.
4. Цикл повертається на перший крок.

Щоб ввести оператори та вирази JavaScript в інтерактивному режимі консолі, виконайте такі дії:

1. Клацніть правою кнопкою миші веб-сторінку та виберіть Пункт Перевірити. Відкриється devTools. Або натисніть клавіші CTRL+SHIFT+J (Windows, Linux) або COMMAND+OPTION+J (macOS), щоб відкрити консоль DevTools безпосередньо.
2. Якщо потрібно, клацніть у засобах розробки, щоб зосередитися на ньому, а потім натисніть клавішу ESC , щоб відкрити консоль.
3. Клацніть консоль та введіть 2+2 , не натискаючи клавішу ВВЕДЕННЯ. Консоль відразу ж відображає результат 4 у наступному рядку під час введення. Ця Eager evaluation функція допомагає створювати допустимі коди JavaScript. Консоль відображає результат під час введення, незалежно від того, чи правильно ваш Код JavaScript, і незалежно від того, чи існує допустимий результат.
4. При натисканні клавіші ВВЕДЕННЯконсоль запускає JavaScript (вираз або інструкцію), відображає результат, а потім переміщає курсор вниз, щоб ви могли ввести наступну JavaScript.

Автозаповнення для запису складних виразів

Консоль допомагає створювати складні коди JavaScript за допомогою автозаповнення. Ця функція — чудовий спосіб дізнатися про методи JavaScript, які ви не знали раніше.

Щоб спробувати автозавершення під час написання багатокомпонентних виразів, виконайте такі дії:

1. Тип doc.
2. Натисніть клавіші зі стрілками, щоб виділити document їх у розкривному меню.
3. Натисніть клавішу TAB , щоб вибрати документ.
4. Тип .bo.
5. Натисніть клавішу TAB , щоб вибрати document.body.
6. Введіть інший. , щоб отримати список можливих властивостей і методів, доступних у тексті поточної веб-сторінки.

Журнал консолі

Як і в інших середовищах командного рядка, журнал введених команд доступний для повторного використання. Натисніть клавішу СТРІЛКА ВВЕРХ для відображення команд, введених раніше.

Аналогічно автозавершення зберігає журнал команд, введених раніше. Ви можете ввести перші кілька літер попередніх команд, а попередні варіанти відображаються у текстовому полі.

Крім того, консоль також пропонує досить багато службових методів, які роблять ваше життя простішим. Наприклад, завжди містить результат останнього виразу, $_ запущеного в консолі.

Багатострокові зміни

За замовчуванням консоль надає лише один рядок для запису виразу JavaScript. Код виконується при натисканні клавіші ВВЕДЕННЯ. Обмеження на один рядок може зірвати вас. Щоб обійти обмеження на 1 рядок, натисніть клавіші SHIFT+ВВЕДЕННЯ , а не ВВЕДЕННЯ. У наступному прикладі відображуване значення є результатом виконання всіх рядків (інструкцій) по порядку:

Якщо запустити багаторядковий оператор в консолі, блок коду буде автоматично розпізнаний та відступ. Наприклад, якщо запустити оператор block, ввівши фігурну дужку, наступний рядок автоматично відступить:

Мережеві запити за допомогою await() верхнього рівня

За винятком власних скриптів, консоль підтримує очікування верхнього рівня виконання довільного асинхронного JavaScript. Наприклад, використовуйте fetch API без пакування інструкції await з асинхронною функцією.

Щоб отримати останні 50 проблем, які були зареєстровані у засобах розробника Microsoft Edge для Visual Studio Code репозиторію GitHub:

1. У засобах розробки відкрийте консоль.
2. Скопіюйте та вставте наступний фрагмент коду, щоб отримати об'єкт, що містить 10 записів:

await ( await fetch( 'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1' )).json();

copy(await (await fetch( 'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1' )).json())

Консоль — це чудовий спосіб попрактикуватися в JavaScript та виконати деякі швидкі обчислення. Реальна сила полягає в тому, що у вас є доступ до об'єкта . Див. розділ Взаємодія з DOM за допомогою консолі.

Як запустити JS-код

JavaScript – популярна мова програмування з широким спектром застосування. Раніше його використовували переважно для інтерактивності веб-сторінок: наприклад, для анімації або валідації форм. Зараз JS використовується ще й у багатьох інших областях: розробка серверних, мобільних додатків і так далі.

Через широкий спектр застосування JavaScript можна запустити кількома способами:

• через вкладку "Консоль" у веб-браузері;
• за допомогою Node.js
• за допомогою веб-сторінки.

Через вкладку «Консоль» у браузері

У більшості сучасних браузерів вже є вбудовані механізми JavaScript, тому запустити код на JS можна у браузері. Ось, як це зробити:

Крок 1. Відкрийте будь-який браузер (ми будемо використовувати Google Chrome).

Крок 2. Відкрийте інструменти розробника.Для цього клацніть правою кнопкою миші на порожній області та виберіть пункт «Переглянути код» (Inspect). Гаряча клавіша: F12.

Крок 3. У інструментах розробника перейдіть на вкладку Консоль (Console). Тут можна писати код на JavaScript. Спробуйте ввести console.log("Hello, world!") та натисніть Enter, щоб запустити код.

За допомогою Node.js

Node — середовище виконання коду JavaScript поза браузером. Ось як запустити JS за допомогою Node.js:

Крок 1. Встановіть останню версію Node.js.

Крок 2. Встановіть IDE або текстовий редактор. Ми будемо використовувати Visual Studio Code.

Крок 3. У VS Code перейдіть до Файл > Новий файл та напишіть код на JS. Збережіть файл із розширенням .js. Ми написали програму, яка виводить на екран рядок "Hello, world!"тому файл буде називатися helloworld.js.

Крок 4. Відкрийте термінал/командний рядок, перейдіть до розташування файлу (використовуйте cd). Введіть node helloworld.js та натисніть Enter. Висновок з'явиться у терміналі.

Примітка. JavaScript-код можна написати та запустити безпосередньо у терміналі. Для цього просто введіть node та натисніть Enter.

За допомогою веб-сторінки

JavaScript спочатку створювали для того, щоб зробити веб-сторінки інтерактивними, тому JavaScript і HTML йдуть пліч-о-пліч. Ось, як запустити код на JS за допомогою веб-сторінки:

Крок 1 Відкрийте VS Code. Перейдіть до Файл > Новий файл. Збережіть файл із розширенням .html. У нас це буде main.html.

Крок 2. Скопіюйте doctype, що знаходиться нижче. Це потрібний для запуску HTML-сторінки код. Збережіть скопійований текст у файлі.

Крок 3 Аналогічно створіть файл із розширенням .js. Напишіть у файлі наступний JS-код та збережіть його. У нас це буде helloworld.js.

console.log("Hello, world!");

Крок 4. Поверніться до файлу main.html та на 11 рядку впишіть назву JS-файлу.У нашому випадку це виглядатиме так:

Крок 5. Відкрийте main.html за допомогою браузера.

Крок 6 Щоб перевірити, чи запустився ваш JS-код, клацніть правою кнопкою миші у вільній області, натисніть «Переглянути код» і перейдіть на вкладку «Консоль».

Тепер, коли ви знаєте, як запустити JavaScript, приступимо до вивчення основ JS.