From daa1a2aff136fa9da1fcc97d7da97a2036fabc77 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:51:47 +0100 Subject: unslug uk: move --- files/uk/tools/index.html | 309 +++++++++++++++++ files/uk/tools/network_monitor/index.html | 53 +++ .../performance_analysis/index.html | 36 ++ .../uk/tools/network_monitor/recording/index.html | 32 ++ .../network_monitor/request_details/index.html | 188 ++++++++++ .../tools/network_monitor/request_list/index.html | 345 ++++++++++++++++++ .../uk/tools/network_monitor/throttling/index.html | 97 ++++++ files/uk/tools/network_monitor/toolbar/index.html | 53 +++ .../tools/web_console/console_messages/index.html | 385 +++++++++++++++++++++ files/uk/tools/web_console/index.html | 37 ++ .../uk/tools/web_console/split_console/index.html | 22 ++ files/uk/tools/web_console/ui_tour/index.html | 25 ++ 12 files changed, 1582 insertions(+) create mode 100644 files/uk/tools/index.html create mode 100644 files/uk/tools/network_monitor/index.html create mode 100644 files/uk/tools/network_monitor/performance_analysis/index.html create mode 100644 files/uk/tools/network_monitor/recording/index.html create mode 100644 files/uk/tools/network_monitor/request_details/index.html create mode 100644 files/uk/tools/network_monitor/request_list/index.html create mode 100644 files/uk/tools/network_monitor/throttling/index.html create mode 100644 files/uk/tools/network_monitor/toolbar/index.html create mode 100644 files/uk/tools/web_console/console_messages/index.html create mode 100644 files/uk/tools/web_console/index.html create mode 100644 files/uk/tools/web_console/split_console/index.html create mode 100644 files/uk/tools/web_console/ui_tour/index.html (limited to 'files/uk/tools') diff --git a/files/uk/tools/index.html b/files/uk/tools/index.html new file mode 100644 index 0000000000..71cbf1cf97 --- /dev/null +++ b/files/uk/tools/index.html @@ -0,0 +1,309 @@ +--- +title: Firefox інструменти для розробників +slug: Інструменти +translation_of: Tools +--- +

{{ToolsSidebar}}

+ +

Переглядайте, редагуйте та налагоджуйте HTML, CSS, JavaScript на десктопах та на мобільних пристроях. Щоб отримати останні оновлення інструментів розробника, завантажте Firefox Developer Edition.

+ +

Якщо ви шукаєте інформацію про використання інструментів веб-розробників, доступних у Firefox, ви підійшли до потрібного місця - на цій сторінці ви знайдете посилання на детальну інформацію про всі основні інструменти та додаткові інструменти та додаткову інформацію, як, наприклад, підключити та налаштувати Firefox для Android, як розширити devtools та як налагодити браузер у цілому.

+ +

Будь ласка, ознайомтеся з посиланнями, що знаходяться на бічній панелі, та далі вниз на сторінці. Якщо у вас є відгуки або запитання до розробників, надсилайте нам повідомлення в нашому списку розсилки або на каналі IRC (дивіться посилання на спільноту внизу сторінки) Якщо у вас є будь-які відгуки або запитання конкретно щодо документації, MDN discourse - це гарне місце для публікації.

+ +

Примітка: Якщо ви тільки починаєте розробку веб-сторінок та використовуєте інструменти для розробників, то наші документи з вивчення веб-розробки допоможуть вам — дивіться Початок роботи з Інтернетом та Що таке інструменти для розробників в браузері? для гарного старту.

+ +

Основні інструменти

+ +

Ви можете відкрити Firefox Developer Tools (Інструменти для розробників) із меню, обравши Tools > Web Developer > Toggle Tools або використовуючи комбінацію клавіш  Ctrl + Shift + I або F12 на Windows та Linux, або Cmd + Opt + I на macOS.

+ +

Меню еліпсиса в правій частині Developer Tools, містить кілька команд, які дозволяють виконувати дії або змінювати налаштування інструменту.

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
Ця кнопка з’являється лише тоді, коли на сторінці є кілька фреймів. Клікніть її, щоб відобразити список фреймів на поточній сторінці та виберіть той, з яким потрібно працювати.
Натисніть цю кнопку, щоб зробити знімок екрана поточної сторінки. (Примітка. Ця функція не вмикається за замовчуванням і повинна бути включена в налаштуваннях, перш ніж з'явиться значок.)
Вмикає режим адаптивного дизайну.
Відкриває меню, що включає параметри стикування, можливість показу або приховування розділеної консолі та налаштування Інструментів для розробників. Меню також містить посилання на документацію для веб-інструментів Firefox та спільноти Mozilla.
Закриває Інструменти для розробників
+ +
+
+

Інспектор сторінки

+ +

The all-new Inspector panel in Firefox 57.

+ +

Перегляд та редагування вмісту та макета сторінки. Візуалізуйте багато аспектів сторінки, включаючи блочну модель, анімацію та макети сітки.

+
+ +
+

Веб-консоль

+ +

The all-new Console in Firefox 57.

+ +

Переглядайте повідомлення, зареєстровані веб-сторінкою, та взаємодійте зі сторінкою за допомогою JavaScript.

+
+
+ +
+
+

JavaScript Налагоджувач

+ +

The all-new Firefox 57 Debugger.html

+ +

Зупиніть, перегляньте, вивчіть та змініть JavaScript, який працює на сторінці.

+
+ +
+

Мережевий монітор

+ +

The Network panel in Firefox 57 DevTools.

+ +

Дивіться мережеві запити, зроблені під час завантаження сторінки.

+
+
+ +
+
+

Інструменти продуктивності

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Проаналізуйте загальну чуйність, ефективність роботи JavaScript та компонування вашого сайту.

+
+ +
+

Режим адаптивного дизайну

+ +

Responsive Design mode in Firefox 57.

+ +

Подивіться, як буде виглядати ваш веб-сайт або додаток на різних пристроях та типах мережі.

+
+
+ +
+
+

Інспектор доступності

+ +

Performance Tools in Firefox 57 Developer Tools

+ +

Забезпечує засіб доступу до дерева доступності сторінки, що дозволяє перевірити, чого немає або потребує іншої уваги.

+
+
+ +
+

Примітка: Колективний термін для інтерфейсу, всередині якого живе DevTools, - це Панель інструментів.

+
+ +

+ +
+
+

Створення

+ +

Інструменти для створення веб-сайтів і веб-додатків.

+ +
+
Scratchpad
+
Текстовий редактор, вбудований у Firefox, який дозволяє писати та виконувати JavaScript.
+
Style Editor
+
Переглядайте та редагуйте стилі CSS для поточної сторінки.
+
Shader EditorMobile
+
Перегляд і редагування вершинних і фрагментних шейдерів, які використовуються WebGL.
+
Web Audio Editor
+
Вивчіть графік звукових вузлів у звуковому контексті та змініть їх параметри.
+
+
+ +
+

Вивчення та налагодження

+ +

Examine, explore, and debug websites and web apps.

+ +
+
Панель інструментів (Toolbox)
+
The Toolbox provides a single home for most of the developer tools that are built into Firefox.
+
Консоль (Console)
+
Переглядайте повідомлення, зареєстровані веб-сторінкою, і взаємодійте зі сторінкою за допомогою JavaScript.
+
Інспектор сторінки (Page Inspector)
+
Переглядайте та змінюйте сторінку в HTML і CSS.
+
Зневаджувач JavaScript (Debugger)
+
Зупиніть, пройдіть, вивчіть і змініть JavaScript, запущений на сторінці.
+
Монітор мережі (Network Monitor)
+
Переглядайте мережеві запити, зроблені під час завантаження сторінки.
+
Інспектор сховища (Storage Inspector)
+
Перевірте файли cookie, локальне сховище, індексованеБД і сховище сеансу, присутнє на сторінці.
+
Інспектор DOM і стилю (DOM Inspector)
+
Inspect the page's DOM properties, functions, etc.
+
Developer Toolbar
+
Інтерфейс командного рядка для інструментів розробника.
+
Remote Debugging
+
Підключіть інструменти розробника до Firefox з віддаленого комп'ютера.
+
Eyedropper
+
Виберіть колір на сторінці.
+
about:debugging
+
Інформаційна панель для налагодження додаткових компонентів і робочих
+
Working with iframes
+
Як націлити певний фрейм.
+
+
+
+ +
+
+
+

Мобільний

+ +

Інструменти для мобільного розвитку.

+ +
+
Responsive Design Mode
+
Перегляньте, як ваш веб-сайт або програма виглядатимуть на різних розмірах екрана, не змінюючи розмірів вікна веб-переглядача.
+
App Manager
+
Менеджер програм замінено на WebIDE.
+
WebIDE
+
Створювати, редагувати, запускати та налагоджувати веб-програми за допомогою Firefox OS Simulator або реальний пристрій Firefox OS. WebIDE є заміною для Менеджера програм, доступного від Firefox 33 і далі.
+
Firefox OS Simulator
+
Запускайте та налагоджуйте додаток Firefox OS на робочому столі, не потребуючи реального пристрою Firefox OS.
+
Debugging on Firefox for Android
+
Підключіть інструменти розробника до Firefox для Android.
+
Debugging Firefox for Android with WebIDE
+
Для робочого столу Firefox 36+ / Android Firefox 35+ існує більш простий процес.
+
Valence
+
Підключіть інструменти розробника до Chrome на Android і Safari на iOS
+
+
+ +
+

Продуктивність

+ +

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

+ +
+
Performance Tool
+
Проаналізуйте загальну чутливість вашого сайту, JavaScript і продуктивність макета.
+
Memory
+
Визначте, які об'єкти зберігають пам'ять.
+
Frame rate graph
+
Перегляньте частоту кадрів для вашого сайту.
+
Waterfall
+
Визначте, що робить браузер, коли він запускає ваш сайт.
+
Call Tree
+
З'ясуйте, де ваш код JavaScript витрачає свій час.
+
Flame Chart
+
Подивіться, які функції знаходяться в стеку протягом процесу виконання.
+
Paint Flashing Tool
+
Виділяє частини сторінки, які перефарбовані у відповідь на події.
+
Reflow Event Logging
+
Див. Події перекомпонування в веб-консолі.
+
Network Performance
+
Подивіться, як довго завантажуються частини вашого сайту.
+
+
+
+ +
+
+
+

Debugging the browser

+ +

За замовчуванням інструменти розробника додаються до веб-сторінки або веб-програми. Але ви також можете підключити їх до браузера в цілому. Це корисно для розробки браузера та додаткових компонентів.

+ +
+
Browser Console
+
Переглядайте повідомлення, зареєстровані самим браузером та додатками, а також запустіть JavaScript-код у сфері браузера.
+
Browser Toolbox
+
Приєднайте Інструменти розробника до самого веб-переглядача.
+
+
+ +
+

Розширення devtools

+ +

Інструменти розробника розроблені для розширення. Додатки Firefox можуть отримати доступ до інструментів розробників і компонентів, які вони використовують для розширення існуючих інструментів і додавання нових інструментів. За допомогою віддаленого протоколу налагодження ви можете реалізовувати власні клієнти та сервери відлагодження, дозволяючи налагоджувати веб-сайти, використовуючи власні інструменти або налагоджувати різні цілі за допомогою інструментів Firefox.

+ +
+
Add a new panel to the devtools
+
Напишіть додатковий компонент, який додасть нову панель до панелі інструментів.
+
Remote Debugging Protocol
+
Протокол, який використовується для підключення інструментів для розробників Firefox до цільової налагодження, наприклад екземпляра Firefox або пристрою Firefox OS.
+
Source Editor
+
Редактор коду, вбудований у Firefox, який може бути вбудований у ваш додаток.
+
The Debugger Interface
+
API, який дозволяє коду JavaScript спостерігати за виконанням іншого коду JavaScript. Інструменти розробників Firefox використовують цей API для реалізації відладчика JavaScript.
+
Web Console custom output
+
Як розширити і налаштувати висновок Web Console та Browser Console.
+
Example devtools add-ons
+
Використовуйте ці приклади, щоб зрозуміти, як реалізувати надбудову devtools.
+
+
+
+ +
+

Внесок

+ +

Якщо ви хочете допомогти поліпшити інструменти розробника, є кілька ресурсів, щоб почати.

+ +
+
+
+
Get Involved
+
Вікі-сторінку Mozilla, що пояснює, як взяти участь.
+
+
+ +
+
+
firefox-dev.tools
+
Інструмент, який допомагає знайти помилки для роботи.
+
+
+
+ +
+

Більше ресурсів

+ +

У цьому розділі перелічено ресурси, які наразі не підтримуються командою розробників інструментів розробників Mozilla, але які широко використовуються веб-розробниками. Ми включили декілька додатків Firefox у цей список, але для повного списку див “Web Development” category on addons.mozilla.org.

+ +
+
+
+
Firebug
+
Дуже популярний і потужний інструмент веб-розробки, включаючи відладчик JavaScript, переглядач і редактор HTML і CSS, а також мережний монітор.
+
DOM Inspector
+
Перевірте, перегляньте та відредагуйте DOM веб-сторінок або вікон XUL.
+
Web Developer
+
Додає до браузера меню та панель інструментів з різними інструментами веб-розробника.
+
+
+ +
+
+
Webmaker Tools
+
Набір інструментів, розроблених Mozilla, спрямований на людей, які починають роботу з веб-розробкою.
+
W3C Validators
+
Веб-сайт W3C містить ряд інструментів для перевірки правильності вашого веб-сайту, включаючи його HTML та CSS.
+
ESLint
+
JavaScript linting and code analysis tool.
+
+
+
diff --git a/files/uk/tools/network_monitor/index.html b/files/uk/tools/network_monitor/index.html new file mode 100644 index 0000000000..7f3fb7d1f7 --- /dev/null +++ b/files/uk/tools/network_monitor/index.html @@ -0,0 +1,53 @@ +--- +title: Монітор мережі +slug: Інструменти/Network_Monitor +translation_of: Tools/Network_Monitor +--- +
{{ToolsSidebar}}
+ +
Монітор мережі показує всі мережні запити Firefox (наприклад, коли він завантажує сторінку або виконується XMLHttpRequests), тривалість і деталі кожного запиту.
+ +

Відкривання Монітору мережі

+ +

Є декілька способів відкрити Монітор мережі:

+ + + +

У нижній частині вікна браузера з'явиться Монітор мережі. Щоб побачити запити, перезавантажте сторінку:

+ +

+ +

Поки панель інструментів відкрита, Монітор мережі записує мережні запити, навіть якщо він сам не вибраний. Це значить, що Ви можете почати налагодження сторінки, наприклад, у Веб-консолі, а потім перейти до Монітора мережі, щоб побачити мережну активність без перезавантаження сторінки.

+ +

Огляд користувацького інтерфейсу (UI)

+ +

Користувацький інтерфейс складається з чотирьох основних частин :

+ + + +

+ + + +

Performance analysis view

+ +

Робота з Монітором мережі

+ +

Наступні статті охоплюють різні аспекти використання Монітора мережі:

+ + diff --git a/files/uk/tools/network_monitor/performance_analysis/index.html b/files/uk/tools/network_monitor/performance_analysis/index.html new file mode 100644 index 0000000000..0ead428209 --- /dev/null +++ b/files/uk/tools/network_monitor/performance_analysis/index.html @@ -0,0 +1,36 @@ +--- +title: Аналіз швидкодії +slug: Інструменти/Network_Monitor/Performance_Analysis +translation_of: Tools/Network_Monitor/Performance_Analysis +--- +

{{ToolsSidebar}}

+ +

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

+ +

Використання інструменту Аналізу швидкодії

+ +

Для запуску інструменту Аналізу швидкодії, натисніть значок секундоміра на панелі інструментів.

+ +

(Крім того, якщо Ви тільки що відкрили Монітор мережі, і він ще не заповнений списком запитів, у головному вікні з'явиться значок секундоміра.)

+ +

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

+ +

+ +

Результати для кожного виконання підсумовуються в таблиці та круговій діаграмі. Таблиці групують ресурси за типом і показують загальний розмір кожного ресурсу і загальний час, необхідний для їх завантаження. Супровідна до таблиць кругова діаграма показує відносний розмір кожного типу ресурсу.

+ +

Щоб повернутися до списку мережних запитів Монітору мережі натисніть кнопку "Назад", що знаходиться ліворуч.

+ +

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

+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі :

+ + diff --git a/files/uk/tools/network_monitor/recording/index.html b/files/uk/tools/network_monitor/recording/index.html new file mode 100644 index 0000000000..223fa5291b --- /dev/null +++ b/files/uk/tools/network_monitor/recording/index.html @@ -0,0 +1,32 @@ +--- +title: Записування мережного трафіку +slug: Інструменти/Network_Monitor/recording +translation_of: Tools/Network_Monitor/recording +--- +

{{ToolsSidebar}}

+ +

Можна призупинити та відновити моніторинг мережного трафіку за допомогою кнопки паузи.

+ +

Призупинення та продожвення запису журналу мережі

+ +

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

+ +

Цю кнопку можна знайти в лівій частині головної панелі інструментів Монітору мережі. Вона виглядає як типова кнопка паузи — .

+ +

Ви можете побачити її тут у контексті:

+ +

+ +

Натиснувши цю кнопку, вона змінюється на піктограму відтворення. Продовжити запис мережного трафіку можна шляхом повторного її натискання.

+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі:

+ + diff --git a/files/uk/tools/network_monitor/request_details/index.html b/files/uk/tools/network_monitor/request_details/index.html new file mode 100644 index 0000000000..61e496cc72 --- /dev/null +++ b/files/uk/tools/network_monitor/request_details/index.html @@ -0,0 +1,188 @@ +--- +title: Подробиці мережних запитів +slug: Інструменти/Network_Monitor/request_details +translation_of: Tools/Network_Monitor/request_details +--- +

{{ToolsSidebar}}

+ +

Панель подробиць мережних запитів викликається при виборі (натисканні) мережного запиту у списку. Ця панель надає більш детальну інформацію про запит.

+ +

Подробиці мережних запитів

+ +

Натискання на рядку відображає нову панель у правій частині Монітора мережі, яка надає більш детальну інформацію про запит.

+ +

+ +

Вкладки у верхній частині цієї області дозволяють переключатися між наступними сторінками:

+ + + +

Натискання крайньої правої піктограми на панелі інструментів  ховає панель подробиць.

+ +

Заголовки (Headers)

+ +

На цій вкладці наведено основну інформацію про запит:

+ +

+ +

Ця інформація містить:

+ + + +

Ви можете відфільтрувати відображені заголовки:

+ +

+ +

Поруч із кожним заголовком у рядку коду статусу з'явиться піктограма знаку питання - це посилання на додаткову інформацію про цей код статусу в документації MDN заголовків HTTP.

+ +

Куки (Cookies)

+ +

На цій вкладці наведено повну інформацію про всі файли cookie, надіслані разом із запитом або відповіддю:

+ +

+ +

Як і у заголовках, тут можна відфільтрувати список файлів куків, що потрібно показати. Відображається повний список атрибутів кука (див. Наведений нижче знімок екрана з прикладів cookie Response з додатковими атрибутами).

+ +

cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite

+ +

Атрибут samesite доступний починаючи з Firefox 62 ({{bug("1452715")}}).

+ +

Параметри (Params)

+ +

На цій вкладці відображаються параметри GET і дані POST запиту:

+ +

+ +

Відповідь (Response)

+ +

Повний зміст відповіді. Якщо відповідь - HTML, JS або CSS, вона буде показана як текст:

+ +

+ +

Якщо відповідь у форматі JSON, вона буде відображатися як об'єкт:

+ +

+ +

Якщо відповідь - це зображення, на вкладці відображається попередній перегляд:

+ +

+ +

Кеш (Cache)

+ +

Якщо відповідь буде кешованою (тобто 304), на вкладці Кеш буде показано відомості про цей кешований ресурс.

+ +

+ +

Ці деталі містять:

+ + + +

HTML перегляд (preview)

+ +

Якщо відповідь є HTML, на вкладці "Відповідь" ("Response"), вище "Корисного навантаження на відповідь" (response payload), з'являється попередній візуальний перегляд HTML.

+ +

+ +

Розклад (Timings)

+ +

Вкладка «Розклад» (Timings) розбиває мережний запит на наступний набір етапів, означених у специфікації Архіву HTTP :

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
НазваОпис
Заблоковано (Blocked) +

Час, проведений в черзі в очікуванні мережного підключення.

+ +

Браузер накладає обмеження на кількість одночасних з'єднань, які можуть бути зроблені до одного серверу. Типово, у Firefox це значення рівне 6, але його можна змінити за допомогою налаштувань  network.http.max-persistent-connections-per-server . Якщо використовуються всі підключення, браузер не може завантажувати більше ресурсів, доки з'єднання не буде вивільнено.

+
Розв'язання DNS (DNS resolution)Час, що потребувався для розв'язання імені хоста.
З'єднання (Connecting)Час, що потребувався для створення з'єднання TCP.
Надсилання (Sending)Час, що потребувався для передачі HTTP-запиту на сервер.
Очікування (Waiting)Очікування відповіді від сервера.
Одержання (Receiving)Час, що потребувався для читання всієї відповіді від сервера (або кешу).
+ +

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

+ +

+ +

Безпека (Security)

+ +

Якщо сайт обслуговується через HTTPS, Ви отримуєте додаткову вкладку під назвою "Безпека" ("Security"). Вона містить відомості про захищене з'єднання, що використовується, включно з назвою протоколу, набору шифрів і деталями сертифікату:

+ +

+ +

На вкладці "Безпека" відображається попередження про слабкі місця безпеки. Наразі він попереджає про два слабкі місця:

+ +
    +
  1. Використання SSLv3 замість TLS
    2. +
  2. Використання шифру RC4
    3. +
+ +

+ +

Трасування стека (Stack trace)

+ +

На цій вкладці відображається трасування стеків для відповідей, які мають стекові сліди.

+ +

+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі:

+ + diff --git a/files/uk/tools/network_monitor/request_list/index.html b/files/uk/tools/network_monitor/request_list/index.html new file mode 100644 index 0000000000..5225de12df --- /dev/null +++ b/files/uk/tools/network_monitor/request_list/index.html @@ -0,0 +1,345 @@ +--- +title: Список мережних запитів +slug: Інструменти/Network_Monitor/request_list +translation_of: Tools/Network_Monitor/request_list +--- +

{{ToolsSidebar}}

+ +

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

+ +

Список мережних запитів

+ +

Типово, Монітор мережі показує список всіх мережних запитів, зроблених під час завантаження сторінки. Кожен запит відображається у своєму рядку:

+ +

Типово, кожного разу, як Ви переходите до нової сторінки або перезавантажуєте поточну сторінку, мережний монітор очищається. Ви можете змінити цю поведінку, встановивши прапорець "Постійне журналювання" ("Enable persistent logs") в Налаштуваннях.

+ +

Стовпці для мережних запитів

+ +

Ви можете показувати/приховувати потрібні стовпці шляхом їх вибору в контекстному меню (викликається правою кнопкою миші над заголовком) . Пункт контекстного меню "Скинути стовпці" ("Reset Columns") призначений для скидання переліку стовпців в початкову конфігурацію. Нижче наведено перелік усіх доступних стовпців:

+ + + +

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

+ +

Ескізи зображень

+ +

Якщо запит стосується зображення, наведення на назву файлу показує в підказці попередній перегляд зображення :

+ +

+ +

Піктограми безпеки

+ +

У стовпці "Домен" Монітору мережі відображаються піктограми:

+ +

+ +

Це надає додаткову інформацію про стан безпеки запиту: 

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ПіктограмаЗначення
HTTPS
Слабкий HTTPS (наприклад, було використано слабке шифрування)
Помилковий HTTPS (наприклад, сертифікат є недійсним)
HTTP
Localhost
Вказує на те, що URL належить до відомого трекера, тому буде заблокований, якщо ввімкнено блокування вмісту.
+ +

Для слабких і помилкових запитів HTTPS більш детальну інформацію про проблему можна побачити у  вкладці "Безпека".

+ +

Стовпець "Причина"

+ +

У стовпці "Причина" вказано причину запиту. Зазвичай це значення досить очевидне, і воно корелюється зі стовпцем "Тип". Найпоширенішими значеннями є:

+ + + +

Шкала часу (Timeline)

+ +

У списку запитів також відображається шкала часу для різних частин кожного запиту.

+ +

+ +

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

+ +

Починаючи з Firefox 45, шкала часу також містить дві вертикальні лінії:

+ + + +

Фільтрація запитів

+ +

Можна фільтрувати запити за типом вмісту, за типом запитів XMLHttpRequests або WebSocket, за URL, або за властивостями запиту. 

+ +

Фільтрація за типом вмісту

+ +

Щоб відфільтрувати за типом вмісту, використовуйте відповідні кнопки з панелі інструментів.

+ +

Фільтрація XHR

+ +

Для відображення виключно запитів {{Glossary("XHR (XMLHttpRequest)", "XHR")}}, використовується кнопка "XHR" з панелі інструментів.

+ +

Фільтрація WebSockets

+ +

Для відображення виключно з'єднань WebSocket, використовується кнопка "WS" з панелі інструментів.

+ +

Крім того, може бути корисним додатковий компонент WebSocket Sniffer. 

+ +

Фільтрація за URL

+ +

Для фільтрації за URL, використовуйте пошукове поле з панелі інструментів.  Клацніть в межах пошукового поля, або натисніть Ctrl + F (або Cmd + F в Mac),  почніть введення. Список мережних запитів буде відфільтровано для включення лише тих запитів, які містять рядок фільтра в полях "Домен" або "Файл". 

+ +

Починаючи з Firefox 45, можна фільтрувати запити, що не містять означені рядки фільтрів, заповнивши запит оператором "-". Наприклад, запит "-google.com" покаже всі запити, що не містять "google.com" у своїй URL-адресі. 

+ +

Фільтрація за властивістю

+ +

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

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Ключове словоЗначенняПриклад
status-codeПоказує ресурси з вказаним кодом статусу HTTP. status-code:304
methodПоказує ресурси з вказаним методом запиту HTTP.method:post
domainПоказує ресурси, що надходять з вказаного домену.domain:mozilla.org
remote-ipПоказує ресурси, що надходять з сервера зі вказаним IP.remote-ip:63.245.215.53
+ remote-ip:[2400:cb00:2048:1::6810:2802]
causeПоказує ресурси, що відповідають вказаному типу причини. Типи можна знайти в описі стовпця "Причина" cause:js
+ cause:stylesheet
+ cause:img
transferredПоказує ресурси, що мають вказаний, або з близьким до вказаного розмір переданих даних. Як суфікс для кілобайт використовується літера k , мегабайт - m. Наприклад значення 1k еквівалентно 1024.transferred:1k
sizeПоказує ресурси, що мають вказаний розмір (після розпакування) або розмір, близький до вказаного. Як суфікс для кілобайт використовується літера k , мегабайт - m. Наприклад значення 1k еквівалентно 1024.size:2m
larger-than +

Показує ресурси, які перевищують вказаний розмір у байтах. Як суфікс для кілобайт використовується літера k , мегабайт - m. Наприклад значення 1k еквівалентно 1024.

+ 		larger-than:2000
+ -larger-than:4k
mime-typeПоказує ресурси, які відповідають вказаному типу MIME.mime-type:text/html
+ mime-type:image/png
+ mime-type:application/javascript
isis:cached і is:from-cache показує лише ресурси, що надходять з кешу.
+ is:running показує лише ресурси, які зараз передаються.		is:cached
+ -is:running
schemeПоказує ресурси, передані за вказаною схемою.scheme:http
has-response-headerПоказує ресурси, які містять вказаний заголовок відповіді HTTP.has-response-header:cache-control
+ has-response-header:X-Firefox-Spdy
set-cookie-domainПоказує ресурси, які мають заголовок Set-Cookie з атрибутом Domain, що відповідає вказаному значенню.set-cookie-domain:.mozilla.org
set-cookie-nameПоказує ресурси, які мають заголовок Set-Cookie з ім'ям, що відповідає вказаному значенню.set-cookie-name:_ga
set-cookie-valueПоказує ресурси, які мають заголовок Set-Cookie зі значенням, що відповідає вказаному.set-cookie-value:true
regexpПоказує ресурси, що мають URL, що відповідає вказаному {{Glossary("regular expression")}}.regexp:\d{5}
+ regexp:mdn|mozilla
+ +

Контекстне меню

+ +

Контекстне меню рядка містить наступні пункти:

+ + + +

Редагувати і надіслати заново (Edit and Resend)

+ +

Відкриває редактор, що дозволяє редагувати метод, URL-адресу, параметри та заголовки для запиту та повторно його надіслати. 

+ +

Відкрити в новій вкладці (Open in New Tab)

+ +

Відправляє запит у новій вкладці - дуже корисно для налагодження асинхронних запитів.

+ +

Копіювати як cURL (Copy as cURL)

+ +

Вибір цього пункту меню приводить до копіювання мережного запиту в буфер обміну як команди cURL, після чого можна виконати його з командного рядка. Команда може містити такі параметри:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METHOD]Якщо не використовується метод GET та POST
--dataДля параметрів запиту, закодованих URL-адресами
--data-binaryДля багатокомпонентних параметрів запиту
--http/VERSIONЯкщо HTTP не є версією 1.1
-IЯкщо використовується метод HEAD
-H +

По одному для кожного заголовка запиту.

+ +

Починаючи з Firefox 34, якщо вказаний заголовок "Accept-Encoding", команда cURL буде містити  --compressed замість -H "Accept-Encoding: gzip, deflate". Це значить, що відповідь буде автоматично розпаковуватися.

+
+ +

Копіювати/зберегти все як HAR (Copy/Save All As HAR)

+ +

Ці пункти створюють HTTP Archive (HAR) для всіх запитів списку. Формат HAR дозволяє експортувати детальну інформацію про мережні запити. "Копіювати все як HAR" ("Copy All As HAR") копіює дані в буфер обміну. "Зберегти все як HAR"("Save All As HAR") відкриває діалогове вікно, за допомогою якого можна зберегти архів на диск.

+ +

У новому випадаючому меню "HAR" також містяться команди "Копіювати все як HAR" та "Зберегти все як HAR", а також пункт "Імпортувати ...".

+ +

+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі :

+ + diff --git a/files/uk/tools/network_monitor/throttling/index.html b/files/uk/tools/network_monitor/throttling/index.html new file mode 100644 index 0000000000..6c1136ce82 --- /dev/null +++ b/files/uk/tools/network_monitor/throttling/index.html @@ -0,0 +1,97 @@ +--- +title: Обмеження швидкості передачі +slug: Інструменти/Network_Monitor/Throttling +translation_of: Tools/Network_Monitor/Throttling +--- +

{{ToolsSidebar}}

+ +

Монітор мережі дозволяє обмежити швидкість мережі, щоб емулювати різні швидкості з'єднання. Це зроблено з метою приблизної оцінки того, як Ваша програма буде поводитися з різними типами підключень.

+ +

Обмеження швидкості передачі (Throttling)

+ +

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

+ +

+ +

Емульовані характеристики:

+ + + +

У таблиці нижче перераховані значення, пов'язані з кожним типом мережі. Однак, слід відмітити, що не варто покладатися на цю функцію для точних вимірювань продуктивності; вона призначена для приблизного уявлення про роботу користувача в різних умовах.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ВибірШвидкість завантаженняШвидксть вивантаженняМінімальна затримка (ms)
GPRS50 KB/s20 KB/s500
Regular 2G250 KB/s50 KB/s300
Good 2G450 KB/s150 KB/s150
Regular 3G750 KB/s250 KB/s100
Good 3G1.5 MB/s750 KB/s40
Regular 4G/LTE4 MB/s3 MB/s20
DSL2 MB/s1 MB/s5
Wi-Fi30 MB/s15 MB/s2
+ +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі :

+ + diff --git a/files/uk/tools/network_monitor/toolbar/index.html b/files/uk/tools/network_monitor/toolbar/index.html new file mode 100644 index 0000000000..17d1e32a47 --- /dev/null +++ b/files/uk/tools/network_monitor/toolbar/index.html @@ -0,0 +1,53 @@ +--- +title: Панель інструментів Монітору мережі +slug: Інструменти/Network_Monitor/toolbar +translation_of: Tools/Network_Monitor/toolbar +--- +

{{ToolsSidebar}}

+ +

Монітор мережі надає дві області панелей інструментів: одну над основним розділом, а іншу під ним.

+ +

Панель інструментів

+ +

Панель інструментів знаходиться у верхній частині головного вікна Монітора мережі.

+ +

+ +

На ній знаходяться:

+ + + +

+ +

Друга область панелі інструментів, що знаходиться нижче Монітора мережі, містить:

+ + + +

Можливості Монітору мережі

+ +

У наступних статтях розглядаються різні аспекти використання Монітору мережі:

+ + diff --git a/files/uk/tools/web_console/console_messages/index.html b/files/uk/tools/web_console/console_messages/index.html new file mode 100644 index 0000000000..8ec5ba7826 --- /dev/null +++ b/files/uk/tools/web_console/console_messages/index.html @@ -0,0 +1,385 @@ +--- +title: Повідомлення консолі +slug: Інструменти/Web_Console/Console_messages +translation_of: Tools/Web_Console/Console_messages +--- +
{{ToolsSidebar}}
+ +

Більшіу частину Веб-консолі займає область відображення повідомлень:

+ +

+ +

Кожне повідомлення відображається окремим рядком:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TimeЧас, коли повідомлення було записане. Це поле за замовченням не відображається: Ви можете керувати опцією "Увімкнути відбитки часу" використовуючи налаштування панелі інструментів.
Category +

Категорія: показує на те, що це за повідомлення:

+ +
    +
  • Чорний: Мережний запит
    • +
  • Синій: попередження/помилка/повідомлення CSS
    • +
  • Помаранчевий: попередження/помилка JavaScript
    • +
  • Червоний: попередження/помилка безпеки
    • +
  • Зелений: повідомлення журналу серверу
    • +
  • Світло-сірий : повідомлення API Консолі
    • +
  • Темно-сірий: вхід/вихід інтерактивного інтерпретатору командного рядку
    • +
+
TypeДля всіх повідомлень, за винятком мережних запитів і інтерактивних входів/виходів, піктограма вказує на тип повідомлення: помилка (X), попередження (!) або інфомаційне повідомлення (i).
MessageТекст повідомлення.
Number of occurrencesЯкщо рядок, який генерує попередження або помилку, виконується більше одного разу, то він реєструється тільки один раз. Цей лічильник показує, скільки разів генерується дане повідомлення.
Filename and line number +

Для повідомлень JavaScript, CSS і API консолі повідомлення можна простежити до рядку коду, що повязаний з ним. Консоль надає посилання на ім'я файлу та номер рядку, що генерує повідомлення.

+ +

Починаючи з Firefox 36, це поле також показує номер стовпчика.

+
+ +

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

+ +

Категорії повідомлень

+ +

Мережні

+ +
+

Network log messages are not shown by default. Use the filtering feature to show them.

+
+ +

Network requests are logged with a line that looks like this:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
TimeThe time the message was recorded.
CategoryIndicates that the message is an HTTP request.
Method +

The specific HTTP request method.

+ +

If the request was made as an XMLHttpRequest, there's an additional note indicating this:

+ +

+
URIThe target URI.
SummaryThe HTTP version, status code, and time taken to complete.
+ +

Viewing network request details

+ +

If you click on the message, you'll be redirected to the Network panel where the request is selected and more request and response details are shown within the side panel at the right side. In versions prior to Firefox 43 this information was shown in a separate popup.

+ +

Starting in Firefox 48, you can access much of this detail inline, without leaving the Web Console. Network request entries get a disclosure arrow next to them. Click this to see:

+ + + +

{{EmbedYouTube("cFlcWzJ9j4I")}}

+ +

JS

+ +

JavaScript messages look like this:

+ +

+ + + +
New in Firefox 49
+ +

JavaScript errors contain a "Learn more" link that takes you to the JavaScript error reference containing additional advice for fixing issues:

+ +

{{EmbedYouTube("OabJc2QR6o0")}}

+ +

Source maps

+ +
New in Firefox 55
+ +

From Firefox 55, the Web Console understands source maps. This means that if your JavaScript sources are compressed, you can supply a source map for them. Then any messages or errors your source generates will show up in the Web Console with a link back to the original source, not the compressed version.

+ +

CSS

+ +
+

Note: CSS warnings and reflow messages are not shown by default, for performance reasons (see {{bug(1452143)}}). Use the filtering feature to show them.

+
+ +

CSS messages look like this:

+ +

+ +

Reflow events

+ +

The Web Console also logs reflow events under the CSS category. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the DOM in JavaScript.

+ +

Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from JavaScript, which code triggered them.

+ +

Reflow events are logged as "Reflow" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the toolbar and selecting "Reflows".

+ +

Each message is labeled "reflow" and shows the time taken to execute the reflow:

+ +

If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:

+ +

Click the link to open the file in the Debugger.

+ +

Synchronous and asynchronous reflows

+ +

If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.

+ +

However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls window.getComputedStyle(thing).height:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.

+ +

Безпеки

+ +

Security warnings and errors look like this:

+ +

The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.

+ +

The complete list of security messages is as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocked loading mixed active contentThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See Mixed Content for more details.
Blocked loading mixed display contentThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See Mixed Content for more details.
Loading mixed (insecure) active content on a secure pageThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See Mixed Content for more details.
Loading mixed (insecure) display content on a secure pageThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See Mixed Content for more details.
This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.See Content Security Policy for more details.
The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.Pages containing login forms must be served over HTTPS, not HTTP.
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header.See HTTP Strict Transport Security for more details.
+

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

+ 		+

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

+ +

SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the Weak Signature Algorithm article for more details.

+ +

Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.

+
+ +

Bug 863874 is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.

+ +

Інформаційні

+ +
+

Messages logged from Shared Workers, Service Workers, add-ons, and Chrome Workers are not shown by default. Use the filtering feature to show them.

+
+ +

The Logging category includes messages logged using the Console API.
+

+ +

The Web console supports the following Console API messages:

+ + + +

The console prints a stack trace for all error messages, like this:

+ +
function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();
+ +

+ +

Серверні

+ +
+

Server-side log messages was introduced in Firefox 43, but removed in Firefox 56. You can install the Chrome Logger extension to (re)-enable the feature.

+
+ +

With the Chrome Logger extension, Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.

+ +

It uses the Chrome Logger protocol. Briefly, the way it works is:

+ + + +

To find a suitable library for your server code, see the Chrome Logger documentation.

+ +

Входи/виходи командного рядку

+ +

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

+ +

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

+ +

Filtering and searching

+ +

Filtering by category

+ +

You can use the toolbar along the top to constrain the results displayed.

+ +

To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:

+ + + +

Filtering by text

+ +

To see only messages that contain a specific string, type in the text box labeled "Filter output".

+ +

Clearing the log

+ +

Finally, you can use this toolbar to clear the log. Before Firefox 48, this is a button labeled "Clear" on the right of the toolbar. From Firefox 48 it's a trashcan icon on the left.

diff --git a/files/uk/tools/web_console/index.html b/files/uk/tools/web_console/index.html new file mode 100644 index 0000000000..4af03a5978 --- /dev/null +++ b/files/uk/tools/web_console/index.html @@ -0,0 +1,37 @@ +--- +title: Веб-консоль - Web Console +slug: Інструменти/Web_Console +translation_of: Tools/Web_Console +--- +

Веб-консоль:

+ +
    +
  1. Реєструє інформацію, пов'язану з веб-сторінкою: мережні запити, JavaScript, CSS, помилки та попередження безпеки, а також повідомлення про помилки, попередження та інформаційні повідомлення, явно ввімкнені за допомогою коду JavaScript, запущеного в контексті сторінки
    2. +
  2. Дозволяє взаємодіяти з веб-сторінкою, виконуючи вирази JavaScript у контексті сторінки
    3. +
+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +
+
+
+
Відкриття Веб-консолі
+
Як запустити Веб-консоль.
+
Інтерпретатор командного рядку
+
Як взаємодіяти з документом, використовуючи Консоль.
+
Розділенння консолі
+
Використання Консолі разом з іншими інструментами.
+
+
+ +
+
+
Повідомлення консолі
+
Докладна інформація про реєетрацію повідомлень Консолі.
+
Збагачення виведення
+
Переглядайте та взаємодійте з об'єктами, що реєструються Консоллю.
+
Комбінації клавіш
+
Посилання на довідку.
+
+
+
diff --git a/files/uk/tools/web_console/split_console/index.html b/files/uk/tools/web_console/split_console/index.html new file mode 100644 index 0000000000..35f6ed06ab --- /dev/null +++ b/files/uk/tools/web_console/split_console/index.html @@ -0,0 +1,22 @@ +--- +title: Розділення консолі +slug: Інструменти/Web_Console/Split_console +translation_of: Tools/Web_Console/Split_console +--- +
{{ToolsSidebar}}
+ +
Консоль можна використовувати поряд з іншими інструментами. Поки ви перебуваєте в іншому інструменті на панелі інструментів, просто натисніть клавішу Esc або виберіть команду "Показати розділену консоль" в меню панелі інструментів. Панель інструментів тепер з'явиться розділеною частиною, на ній буде розміщено оригінальний інструмент і веб-консоль.
+ +

+

Ви можете закрити розділення консолі повторним натисканням Esc, або вибравши команду меню "Сховати розділення консолі".

+

+ +

+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

В якості скорочення назви елемента, вибраного в інспекторі, як завжди використовується $0:

+ +

Якщо Ви використовуєте розділену консоль з відладчиком, область видимості консолі - це поточний кадр стека. Отже, якщо Ви потрапили до точки переривання у функції, область видимості буде визначатися цією функцією. Ви отримаєте автозаповнення для об'єктів, означених у функції, і можете легко змінювати їх на льоту:

+ +

diff --git a/files/uk/tools/web_console/ui_tour/index.html b/files/uk/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..dc99cde6fc --- /dev/null +++ b/files/uk/tools/web_console/ui_tour/index.html @@ -0,0 +1,25 @@ +--- +title: Відкриття Веб-консолі +slug: Інструменти/Web_Console/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +
{{ToolsSidebar}}
+ +

Для відкриття Веб-консолі:

+ + + +

В нижній частині вікна веб-переглядача з'явиться Панель інструментів з активованою веб-консоллю (на панелі інструментів DevTools вона просто називається "консоль"):

+ +

+ +

Інтерфейс Веб-консолі розділяється на три горизонтальні секції:

+ + -- cgit v1.2.3-54-g00ecf