diff options
Diffstat (limited to 'files/uk/tools')
| -rw-r--r-- | files/uk/tools/index.html | 309 | ||||
| -rw-r--r-- | files/uk/tools/network_monitor/index.html | 53 | ||||
| -rw-r--r-- | files/uk/tools/network_monitor/performance_analysis/index.html | 36 | ||||
| -rw-r--r-- | files/uk/tools/network_monitor/recording/index.html | 32 | ||||
| -rw-r--r-- | files/uk/tools/network_monitor/request_details/index.html | 188 | ||||
| -rw-r--r-- | files/uk/tools/network_monitor/request_list/index.html | 345 | ||||
| -rw-r--r-- | files/uk/tools/network_monitor/throttling/index.html | 97 | ||||
| -rw-r--r-- | files/uk/tools/network_monitor/toolbar/index.html | 53 | ||||
| -rw-r--r-- | files/uk/tools/web_console/console_messages/index.html | 385 | ||||
| -rw-r--r-- | files/uk/tools/web_console/index.html | 37 | ||||
| -rw-r--r-- | files/uk/tools/web_console/split_console/index.html | 22 | ||||
| -rw-r--r-- | files/uk/tools/web_console/ui_tour/index.html | 25 |
12 files changed, 1582 insertions, 0 deletions
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 +--- +<p>{{ToolsSidebar}}</p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте, редагуйте та налагоджуйте HTML, CSS, JavaScript на десктопах та на мобільних пристроях.</span> <span title="">Щоб отримати останні оновлення інструментів розробника, завантажте </span></span><strong><a href="https://www.mozilla.org/uk/firefox/developer/">Firefox Developer Edition</a>.</strong></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви шукаєте інформацію про використання інструментів веб-розробників, доступних у Firefox, ви підійшли до потрібного місця - на цій сторінці ви знайдете посилання на детальну інформацію про всі основні інструменти та додаткові інструменти та додаткову інформацію, як, наприклад, підключити</span> <span title="">та налаштувати Firefox для Android, як розширити devtools та як налагодити браузер у цілому.</span></span></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Будь ласка, ознайомтеся з посиланнями, що знаходяться на бічній панелі, та далі вниз на сторінці.</span> <span title="">Якщо у вас є відгуки або запитання до розробників, надсилайте нам повідомлення в нашому списку розсилки або на каналі IRC </span></span> (дивіться <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools#Join_the_Developer_tools_community">посилання на спільноту внизу сторінки</a>) <span class="tlid-translation translation" lang="uk"> <span title="">Якщо у вас є будь-які відгуки або запитання конкретно щодо документації, </span></span> <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a> <span class="tlid-translation translation" lang="uk"><span title=""> - це гарне місце для публікації.</span></span></p> + +<p><strong>Примітка</strong>: <span class="tlid-translation translation" lang="uk"><span title="">Якщо ви тільки починаєте розробку веб-сторінок та використовуєте інструменти для розробників, то</span></span> наші документи з <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn">вивчення веб-розробки</a> допоможуть вам — дивіться <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Початок роботи з Інтернетом</a> та <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">Що таке інструменти для розробників в браузері?</a> для гарного старту.</p> + +<h2 id="Основні_інструменти"><span class="tlid-translation translation" lang="uk"><span title="">Основні інструменти</span></span></h2> + +<p>Ви можете відкрити Firefox Developer Tools (Інструменти для розробників) із меню, обравши <em>Tools</em> > <em>Web Developer</em> > <em>Toggle Tools</em> або використовуючи комбінацію клавіш <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> або <kbd>F12</kbd> на Windows та Linux, або <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> на macOS.</p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Меню еліпсиса в правій частині</span></span> Developer Tools, <span class="tlid-translation translation" lang="uk"><span title="">містить кілька команд, які дозволяють виконувати дії або змінювати налаштування інструменту.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; height: 290px; margin: 0 auto; width: 225px;"></p> + +<table class="standard-table" style="height: 178px; width: 840px;"> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16092/iframe_button.png" style="height: 69px; width: 69px;"></td> + <td><span class="tlid-translation translation" lang="uk"><span title="">Ця кнопка з’являється лише тоді, коли на сторінці є кілька фреймів.</span> <span title="">Клікніть її, щоб відобразити список фреймів на поточній сторінці та виберіть той, з яким потрібно працювати.</span></span></td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="height: 69px; width: 69px;"></td> + <td><span class="tlid-translation translation" lang="uk"><span title="">Натисніть цю кнопку, щоб зробити знімок екрана поточної сторінки.</span> <span title="">(Примітка. Ця функція не вмикається за замовчуванням і повинна бути включена в налаштуваннях, перш ніж з'явиться значок.)</span></span></td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="height: 69px; width: 69px;"></td> + <td><span class="tlid-translation translation" lang="uk"><span title="">Вмикає режим адаптивного дизайну.</span></span></td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="height: 69px; width: 69px;"></td> + <td><span class="tlid-translation translation" lang="uk"><span title="">Відкриває меню, що включає параметри стикування, можливість показу або приховування розділеної консолі та налаштування Інструментів для розробників.</span> <span title="">Меню також містить посилання на документацію для веб-інструментів Firefox та спільноти Mozilla.</span></span></td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="height: 69px; width: 69px;"></td> + <td><span class="tlid-translation translation" lang="uk"><span title="">Закриває Інструменти для розробників</span></span></td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Інспектор_сторінки"><span class="tlid-translation translation" lang="uk"><span title="">Інспектор сторінки</span></span></h3> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Page_Inspector"><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/16371/landingPage_PageInspector.png" style="border: 1px solid black; display: block; height: 171px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Перегляд та редагування вмісту та макета сторінки.</span> <span title="">Візуалізуйте багато аспектів сторінки, включаючи блочну модель, анімацію та макети сітки.</span></span></p> +</div> + +<div class="column-half"> +<h3 id="Веб-консоль"><span class="tlid-translation translation" lang="uk"><span title="">Веб-консоль</span></span></h3> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Web_Console"><img alt="The all-new Console in Firefox 57." src="https://mdn.mozillademos.org/files/16368/landingPage_Console.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте повідомлення, зареєстровані веб-сторінкою, та взаємодійте зі сторінкою за допомогою JavaScript.</span></span></p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="JavaScript_Налагоджувач">JavaScript <span class="tlid-translation translation" lang="uk"><span title="">Налагоджувач</span></span></h3> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Debugger"><img alt="The all-new Firefox 57 Debugger.html" src="https://mdn.mozillademos.org/files/16369/landingPage_Debugger.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Зупиніть, перегляньте, вивчіть та змініть JavaScript, який працює на сторінці.</span></span></p> +</div> + +<div class="column-half"> +<h3 id="Мережевий_монітор"><span class="tlid-translation translation" lang="uk"><span title="">Мережевий монітор</span></span></h3> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Network_Monitor"><img alt="The Network panel in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/16370/landingPage_Network.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Дивіться мережеві запити, зроблені під час завантаження сторінки.</span></span></p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Інструменти_продуктивності">Інструменти продуктивності</h3> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Performance"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16372/landingPage_Performance.png" style="border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Проаналізуйте загальну чуйність, ефективність роботи JavaScript та компонування вашого сайту.</span></span></p> +</div> + +<div class="column-half"> +<h3 id="Режим_адаптивного_дизайну">Режим адаптивного дизайну</h3> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode"><img alt="Responsive Design mode in Firefox 57." src="https://mdn.mozillademos.org/files/16373/landingPage_ResponsiveDesign.png" style="border-style: solid; border-width: 1px; display: block; height: 865px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Подивіться, як буде виглядати ваш веб-сайт або додаток на різних пристроях та типах мережі.</span></span></p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Інспектор_доступності"><span class="tlid-translation translation" lang="uk"><span title="">Інспектор доступності</span></span></h3> + +<p><a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Accessibility_inspector"><img alt="Performance Tools in Firefox 57 Developer Tools" src="https://mdn.mozillademos.org/files/16367/landingPage_Accessibility.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 403px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Забезпечує засіб доступу до дерева доступності сторінки, що дозволяє перевірити, чого немає або потребує іншої уваги.</span></span></p> +</div> +</div> + +<div class="note"> +<p><strong>Примітка</strong>: <span class="tlid-translation translation" lang="uk"><span title="">Колективний термін для інтерфейсу, всередині якого живе DevTools, - це</span></span> <a href="https://wiki.developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Панель інструментів</a>.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14297/tools.png" style="display: block; height: 383px; margin-left: auto; margin-right: auto; width: 659px;"></p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Створення"><span class="tlid-translation translation" lang="uk"><span title="">Створення</span></span></h2> + +<p>Інструменти для створення веб-сайтів і веб-додатків.</p> + +<dl> + <dt><a href="/uk/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Текстовий редактор, вбудований у Firefox, який дозволяє писати та виконувати JavaScript.</span></span></dd> + <dt><a href="/uk/docs/Tools/Style_Editor">Style Editor</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте та редагуйте стилі CSS для поточної сторінки.</span></span></dd> + <dt><a href="/uk/docs/Tools/Shader_Editor">Shader Editor</a>Mobile</dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Перегляд і редагування вершинних і фрагментних шейдерів, які використовуються</span></span> <a href="/uk/docs/Web/WebGL">WebGL</a>.</dd> + <dt><a href="/uk/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Вивчіть графік звукових вузлів у звуковому контексті та змініть їх параметри.</span></span></dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Вивчення_та_налагодження"><span class="tlid-translation translation" lang="uk"><span title="">Вивчення та налагодження</span></span></h2> + +<p>Examine, explore, and debug websites and web apps.</p> + +<dl> + <dt><a href="/uk/docs/Tools/Tools_Toolbox">Панель інструментів (Toolbox)</a></dt> + <dd>The Toolbox provides a single home for most of the developer tools that are built into Firefox.</dd> + <dt><a href="/uk/docs/Tools/Web_Console">Консоль (Console)</a></dt> + <dd><span class="tlid-translation translation"><span title="">Переглядайте повідомлення, зареєстровані веб-сторінкою, і взаємодійте зі сторінкою за допомогою JavaScript</span></span>.</dd> + <dt><a href="/uk/docs/Tools/Page_Inspector">Інспектор сторінки (Page Inspector)</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте та змінюйте сторінку в HTML і CSS.</span></span></dd> + <dt><a href="/uk/docs/Tools/Debugger">Зневаджувач JavaScript (Debugger) </a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Зупиніть, пройдіть, вивчіть і змініть JavaScript, запущений на сторінці.</span></span></dd> + <dt><a href="/uk/docs/Tools/Network_Monitor">Монітор мережі (Network Monitor) </a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте мережеві запити, зроблені під час завантаження сторінки.</span></span></dd> + <dt><a href="/uk/docs/Tools/Storage_Inspector">Інспектор сховища (Storage Inspector)</a></dt> + <dd>Перевірте файли cookie, локальне сховище, індексованеБД і сховище сеансу, присутнє на сторінці.</dd> + <dt><a href="/uk/docs/Tools/DOM_Inspector">Інспектор DOM і стилю (DOM Inspector)</a></dt> + <dd>Inspect the page's DOM properties, functions, etc.</dd> + <dt><a href="/uk/docs/Tools/GCLI">Developer Toolbar</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Інтерфейс командного рядка для інструментів розробника.</span></span></dd> + <dt><a href="/uk/docs/Tools/Remote_Debugging">Remote Debugging</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Підключіть інструменти розробника до Firefox з віддаленого комп'ютера.</span></span></dd> + <dt><a href="/uk/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Виберіть колір на сторінці.</span></span></dd> + <dt><a href="/uk/docs/Tools/about:debugging">about:debugging</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Інформаційна панель для налагодження додаткових компонентів і робочих</span></span></dd> + <dt><a href="/uk/docs/Tools/Working_with_iframes">Working with iframes</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Як націлити певний фрейм.</span></span></dd> +</dl> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h2 id="Мобільний"><span class="tlid-translation translation" lang="uk"><span title="">Мобільний</span></span></h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Інструменти для мобільного розвитку.</span></span></p> + +<dl> + <dt><a href="/uk/docs/Tools/Responsive_Design_Mode">Responsive Design Mode</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Перегляньте, як ваш веб-сайт або програма виглядатимуть на різних розмірах екрана, не змінюючи розмірів вікна веб-переглядача.</span></span></dd> + <dt><a href="/uk/Firefox_OS/Using_the_App_Manager">App Manager</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Менеджер програм замінено на</span></span> <a href="/uk/docs/Tools/WebIDE">WebIDE</a>.</dd> + <dt><a href="/uk/docs/Tools/WebIDE">WebIDE</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Створювати, редагувати, запускати та налагоджувати веб-програми за допомогою </span></span><a href="/uk/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> <span class="tlid-translation translation" lang="uk"><span title="">або реальний пристрій Firefox OS. </span></span>WebIDE <span class="tlid-translation translation" lang="uk"><span title="">є заміною для Менеджера програм, доступного від Firefox 33 і далі.</span></span></dd> + <dt><a href="/uk/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Запускайте та налагоджуйте додаток Firefox OS на робочому столі, не потребуючи реального пристрою Firefox OS.</span></span></dd> + <dt><a href="/uk/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging on Firefox for Android</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Підключіть інструменти розробника до Firefox для Android.</span></span></dd> + <dt><a href="/uk/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Debugging Firefox for Android with WebIDE</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Для робочого столу Firefox 36+ / Android Firefox 35+ існує більш простий процес.</span></span></dd> + <dt><a href="/uk/docs/Tools/Valence">Valence</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Підключіть інструменти розробника до Chrome на Android і Safari на iOS</span></span></dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Продуктивність"><span class="tlid-translation translation" lang="uk"><span title="">Продуктивність</span></span></h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Діагностика та усунення проблем із продуктивністю.</span></span></p> + +<dl> + <dt><a href="/uk/docs/Tools/Performance">Performance Tool</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Проаналізуйте загальну чутливість вашого сайту, JavaScript і продуктивність макета.</span></span></dd> + <dt><a href="/uk/docs/Tools/Memory">Memory</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Визначте, які об'єкти зберігають пам'ять.</span></span></dd> + <dt><a href="/uk/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Перегляньте частоту кадрів для вашого сайту.</span></span></dd> + <dt><a href="/uk/docs/Tools/Performance/Waterfall">Waterfall</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Визначте, що робить браузер, коли він запускає ваш сайт.</span></span></dd> + <dt><a href="/uk/docs/Tools/Performance/Call_Tree">Call Tree</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">З'ясуйте, де ваш код JavaScript витрачає свій час.</span></span></dd> + <dt><a href="/uk/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Подивіться, які функції знаходяться в стеку протягом процесу виконання.</span></span></dd> + <dt><a href="/uk/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Виділяє частини сторінки, які перефарбовані у відповідь на події.</span></span></dd> + <dt><a href="/uk/docs/Tools/Web_Console/Console_messages#Reflow_events">Reflow Event Logging</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Див. Події перекомпонування в веб-консолі.</span></span></dd> + <dt><a href="/uk/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Подивіться, як довго завантажуються частини вашого сайту.</span></span></dd> +</dl> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h2 id="Debugging_the_browser">Debugging the browser</h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">За замовчуванням інструменти розробника додаються до веб-сторінки або веб-програми.</span> <span title="">Але ви також можете підключити їх до браузера в цілому.</span> <span title="">Це корисно для розробки браузера та додаткових компонентів.</span></span></p> + +<dl> + <dt><a href="/uk/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Переглядайте повідомлення, зареєстровані самим браузером та додатками, а також запустіть JavaScript-код у сфері браузера.</span></span></dd> + <dt><a href="/uk/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Приєднайте Інструменти розробника до самого веб-переглядача.</span></span></dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Розширення_devtools"><span class="tlid-translation translation" lang="uk"><span title="">Розширення devtools</span></span></h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Інструменти розробника розроблені для розширення.</span> <span title="">Додатки Firefox можуть отримати доступ до інструментів розробників і компонентів, які вони використовують для розширення існуючих інструментів і додавання нових інструментів.</span> <span title="">За допомогою віддаленого протоколу налагодження ви можете реалізовувати власні клієнти та сервери відлагодження, дозволяючи налагоджувати веб-сайти, використовуючи власні інструменти або налагоджувати різні цілі за допомогою інструментів Firefox.</span></span></p> + +<dl> + <dt><a href="/uk/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Напишіть додатковий компонент, який додасть нову панель до панелі інструментів.</span></span></dd> + <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Протокол, який використовується для підключення інструментів для розробників Firefox до цільової налагодження, наприклад екземпляра Firefox або пристрою Firefox OS.</span></span></dd> + <dt><a href="/uk/docs/Tools/Editor">Source Editor</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Редактор коду, вбудований у Firefox, який може бути вбудований у ваш додаток.</span></span></dd> + <dt><a href="/uk/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">API, який дозволяє коду JavaScript спостерігати за виконанням іншого коду JavaScript.</span> <span title="">Інструменти розробників Firefox використовують цей API для реалізації відладчика JavaScript.</span></span></dd> + <dt><a href="/uk/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Як розширити і налаштувати висновок </span></span><a href="/uk/docs/Tools/Web_Console">Web Console</a> та <a href="/uk/docs/Tools/Browser_Console">Browser Console</a>.</dd> + <dt><a href="/uk/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Використовуйте ці приклади, щоб зрозуміти, як реалізувати надбудову devtools.</span></span></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Внесок"><span class="tlid-translation translation" lang="uk"><span title="">Внесок</span></span></h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">Якщо ви хочете допомогти поліпшити інструменти розробника, є кілька ресурсів, щоб почати.</span></span></p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="https://wiki.mozilla.org/DevTools/GetInvolved">Get Involved</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Вікі-сторінку Mozilla, що пояснює, як взяти участь.</span></span></dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Інструмент, який допомагає знайти помилки для роботи.</span></span></dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Більше_ресурсів"><span class="tlid-translation translation" lang="uk"><span title="">Більше ресурсів</span></span></h2> + +<p><span class="tlid-translation translation" lang="uk"><span title="">У цьому розділі перелічено ресурси, які наразі не підтримуються командою розробників інструментів розробників Mozilla, але які широко використовуються веб-розробниками.</span> <span title="">Ми включили декілька додатків Firefox у цей список, але для повного списку див</span></span> <a href="https://addons.mozilla.org/uk/firefox/extensions/web-development/">“Web Development” category on addons.mozilla.org</a>.</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="https://www.getfirebug.com/">Firebug</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Дуже популярний і потужний інструмент веб-розробки, включаючи відладчик JavaScript, переглядач і редактор HTML і CSS, а також мережний монітор.</span></span></dd> + <dt><a href="/uk/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Перевірте, перегляньте та відредагуйте DOM веб-сторінок або вікон XUL.</span></span></dd> + <dt><a href="https://addons.mozilla.org/uk/firefox/addon/web-developer/">Web Developer</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Додає до браузера меню та панель інструментів з різними інструментами веб-розробника.</span></span></dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="https://webmaker.org">Webmaker Tools</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Набір інструментів, розроблених Mozilla, спрямований на людей, які починають роботу з веб-розробкою.</span></span></dd> + <dt><a href="https://www.w3.org/Status.html">W3C Validators</a></dt> + <dd><span class="tlid-translation translation" lang="uk"><span title="">Веб-сайт W3C містить ряд інструментів для перевірки правильності вашого веб-сайту, включаючи його </span></span><a href="https://validator.w3.org/" title="http://validator.w3.org/">HTML</a> та <a href="https://jigsaw.w3.org/css-validator/" title="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd> + <dt><a href="http://eslint.org/">ESLint</a></dt> + <dd>JavaScript linting and code analysis tool.</dd> +</dl> +</div> +</div> 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 +--- +<div>{{ToolsSidebar}}</div> + +<div><span class="tlid-translation translation"><span title="">Монітор мережі показує всі мережні запити Firefox (наприклад, коли він завантажує сторінку або виконується </span></span><a href="/uk/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a><span class="tlid-translation translation"><span title="">), тривалість і деталі кожного запиту.</span></span></div> + +<h2 id="Відкривання_Монітору_мережі">Відкривання Монітору мережі</h2> + +<p>Є декілька способів відкрити Монітор мережі:</p> + +<ul> + <li>Натиснути <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> на Mac).</li> + <li>З меню Веб-розробки вибрати "Мережа", (що є підменю меню Інструменти на OS X та Linux).</li> + <li>Натиснути на піктограму гайкового ключа (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), яка знаходиться в основному меню або під Гамбургер-меню (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), тоді вибрати "Мережа".</li> +</ul> + +<p><span class="tlid-translation translation"><span title="">У нижній частині вікна браузера з'явиться Монітор мережі.</span> <span title="">Щоб побачити запити, перезавантажте сторінку:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16245/network_monitor.png" style="border: 1px solid black; display: block; height: 541px; margin: 0px auto; width: 800px;" title=""></p> + +<p><span class="tlid-translation translation"><span title="">Поки панель інструментів відкрита, Монітор мережі записує мережні запити, навіть якщо він сам не вибраний.</span> <span title="">Це значить, що Ви можете почати налагодження сторінки, наприклад, у Веб-консолі, а потім перейти до Монітора мережі, щоб побачити мережну активність без перезавантаження сторінки.</span></span></p> + +<h2 id="Огляд_користувацького_інтерфейсу_(UI)">Огляд користувацького інтерфейсу (UI)</h2> + +<p>Користувацький інтерфейс складається з чотирьох основних частин :</p> + +<ul> + <li>Основний екран містить <a href="/uk/docs/Tools/Network_Monitor/Toolbar">панель інструментів</a>, <a href="/uk/docs/Tools/Network_Monitor/request_list">список мережних запитів</a> та <a href="/uk/docs/Tools/Network_Monitor/request_details">панель подробиць запитів</a>:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16246/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin: 0px auto; width: 800px;" title=""></p> + +<ul> + <li><a href="/uk/docs/Tools/Network_Monitor/Performance_analysis">Аналіз швидкодії</a> відображається у окремому вікні:</li> +</ul> + +<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/16276/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 1382px;" title=""></p> + +<h2 id="Робота_з_Монітором_мережі">Робота з Монітором мережі</h2> + +<p><span class="tlid-translation translation"><span title="">Наступні статті охоплюють різні аспекти використання Монітора мережі</span></span>:</p> + +<ul> + <li><a href="/uk/docs/Tools/Network_Monitor/Toolbar">Панель інструментів</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/request_list">Список мережних запитів</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/request_details">Подробиці мережних запитів</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/recording">Запис мережного трафіку</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/Performance_Analysis">Аналіз швидкодії</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> +</ul> 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 +--- +<p>{{ToolsSidebar}}</p> + +<p><span class="tlid-translation translation"><span title="">Монітор мережі містить інструмент Аналізу швидкодії, який допоможе Вам показати, скільки часу необхідно потратити браузеру для завантаження різних частин Вашого сайту.</span></span></p> + +<h2 id="Використання_інструменту_Аналізу_швидкодії">Використання інструменту Аналізу швидкодії</h2> + +<p><span class="tlid-translation translation"><span title="">Для запуску інструменту Аналізу швидкодії, натисніть значок секундоміра на <a href="/uk/docs/Tools/Network_Monitor/Toolbar">панелі інструментів</a>.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">(Крім того, якщо Ви тільки що відкрили Монітор мережі, і він ще не заповнений списком запитів, у головному вікні з'явиться значок секундоміра.)</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Після цього Монітор мережі завантажує сайт двічі: один раз з пустим кешем браузера і один раз із запущеним кешем браузера.</span> <span title="">Це імітує роботу першого разу, коли користувач відвідує ваш сайт, і наступні відвідування.</span> Інструмент<span title=""> відображає результати для кожного запуску поруч, або вертикально, якщо вікно веб-переглядача звужене:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16277/network_performance.png" style="border: 1px solid black; display: block; height: 1176px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p><span class="tlid-translation translation"><span title="">Результати для кожного виконання підсумовуються в таблиці та круговій діаграмі.</span> <span title="">Таблиці групують ресурси за типом і показують загальний розмір кожного ресурсу і загальний час, необхідний для їх завантаження.</span> <span title="">Супровідна до таблиць кругова діаграма показує відносний розмір кожного типу ресурсу.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Щоб повернутися до списку мережних запитів Монітору мережі натисніть кнопку "Назад", що знаходиться ліворуч.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Якщо натиснути на фрагмент "пирога", Ви перейдете до Монітора мережі для цього запуску, а фільтр автоматично буде застосовано для перегляду <a href="/uk/docs/Tools/Network_Monitor/request_list#Filtering_requests">лише цього типу ресурсу</a>.</span></span></p> + +<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> + +<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі</span></span> :</p> + +<ul> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar" rel="nofollow">Панель інструментів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list" rel="nofollow">Список мережних запитів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details" rel="nofollow">Подробиці мережних запитів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> +</ul> 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 +--- +<p>{{ToolsSidebar}}</p> + +<p><span class="tlid-translation translation"><span title="">Можна призупинити та відновити моніторинг мережного трафіку за допомогою кнопки паузи.</span></span></p> + +<h2 id="Призупинення_та_продожвення_запису_журналу_мережі"><span class="tlid-translation translation"><span title="">Призупинення та продожвення запису журналу мережі</span></span></h2> + +<p><span class="tlid-translation translation"><span title="">У Монітора мережі є кнопка, яка призупиняє та відновлює запис мережного трафіку поточної сторінки.</span> <span title="">Це корисно в ситуаціях, коли, наприклад, Ви намагаєтеся отримати стабільний вигляд сторінки для цілей налагодження, але за нормальних обставин список продовжує наповнюватися внаслідок постійних мережних запитів.</span> <span title="">Кнопка паузи дозволяє переглядати певний знімок.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">Цю кнопку можна знайти в лівій частині головної панелі інструментів Монітору мережі. Вона виглядає як типова кнопка паузи </span></span>— <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;">.</p> + +<p><span class="tlid-translation translation"><span title="">Ви можете побачити її тут у контексті:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15624/play-pause-network-traffic.png" style="border-style: solid; border-width: 1px; display: block; height: 305px; margin: 0px auto; width: 930px;"></p> + +<p><span class="tlid-translation translation"><span title="">Натиснувши цю кнопку, вона змінюється на піктограму відтворення. Продовжити запис мережного трафіку можна шляхом повторного її натискання.</span></span></p> + +<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> + +<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі:</span></span></p> + +<ul> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar" rel="nofollow">Панель інструментів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list" rel="nofollow">Список мережних запитів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details" rel="nofollow">Подробиці мережних запитів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis" rel="nofollow">Аналіз швидкодії</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> +</ul> 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 +--- +<p>{{ToolsSidebar}}</p> + +<p><span class="tlid-translation translation"><span title="">Панель </span></span>подробиць мережних запитів викликається при виборі (натисканні) <span class="tlid-translation translation"><span title="">мережного запиту у списку.</span> <span title="">Ця панель надає більш детальну інформацію про запит.</span></span></p> + +<h2 id="Подробиці_мережних_запитів">Подробиці мережних запитів</h2> + +<p><span class="tlid-translation translation"><span title="">Натискання на рядку відображає нову панель у правій частині Монітора мережі, яка надає більш детальну інформацію про запит.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16261/network_request_details.png" style="display: block; height: 741px; margin-left: auto; margin-right: auto; width: 930px;"></p> + +<p><span class="tlid-translation translation"><span title="">Вкладки у верхній частині цієї області дозволяють переключатися між наступними сторінками:</span></span></p> + +<ul> + <li><strong>Заголовки (Headers)</strong></li> + <li><strong>Куки (Cookies)</strong></li> + <li><strong>Параметри (Params)</strong></li> + <li><strong>Відповідь (Response)</strong></li> + <li><strong>Кеш (Cache)</strong></li> + <li><strong>Розклад (Timings)</strong></li> + <li><strong>Безпека (Security) </strong>(тільки для захищених сторіок)</li> + <li><strong>Трасування стека (Stack trace)</strong> ( <span class="tlid-translation translation"><span title="">тільки коли запит має трасування стека, наприклад,</span> <span title="">скрипт, викликаний іншим сценарієм</span></span>). <span class="tlid-translation translation"><span title="">Ця інформація доступна починаючи з </span></span>Firefox 55.</li> +</ul> + +<p><span class="tlid-translation translation"><span title="">Натискання крайньої правої піктограми на </span></span><a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a> ховає <span class="tlid-translation translation"><span title="">панель подробиць.</span></span></p> + +<h3 id="Заголовки_(Headers)">Заголовки <strong>(Headers)</strong></h3> + +<p><span class="tlid-translation translation"><span title="">На цій вкладці наведено основну інформацію про запит:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16262/Network_Monitor_Closeup.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Ця інформація містить:</p> + +<ul> + <li><strong>Запит URL (Request URL)</strong></li> + <li><strong>Спосіб запиту (Request method)</strong></li> + <li><strong>Віддалена адреса (Remote IP address)</strong> і <strong>port</strong></li> + <li><strong>Код стану (Status code</strong>) <span class="tlid-translation translation"><span title="">з піктограмою знаку запитання, що посилається на документ MDN, щоб отримати докладнішу інформацію (якщо вона доступна)</span></span></li> + <li><strong>Заголовки запиту</strong> і <strong>заголовки відповіді</strong> <strong>(HTTP request</strong> and <strong>response headers</strong>) що були передані</li> + <li>Кнопка <strong>Редагувати і надіслати заново</strong> (<strong>Edit and Resend</strong>) що викликає відповідну <a href="/uk/docs/Tools/Network_Monitor/request_list/#Edit_and_Resend">команду</a></li> + <li>Кнопка <strong>Необроблені заголовки (Raw headers)</strong> для відображення необроблених заголовків запитів і відповідей</li> +</ul> + +<p><span class="tlid-translation translation"><span title="">Ви можете відфільтрувати відображені заголовки:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16266/network_headers.png" style="border: 1px solid black; display: block; height: 295px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p><span class="tlid-translation translation"><span title="">Поруч із кожним заголовком у рядку коду статусу з'явиться піктограма знаку питання - це посилання на додаткову інформацію про цей код статусу в <a href="/uk/docs/Web/HTTP/Headers">документації MDN заголовків HTTP</a>.</span></span></p> + +<h3 id="Куки_(Cookies)">Куки (Cookies)</h3> + +<p><span class="tlid-translation translation"><span title="">На цій вкладці наведено повну інформацію про всі файли cookie, надіслані разом із запитом або відповіддю:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16265/network_cookies.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> + +<p><span class="tlid-translation translation"><span title="">Як і у заголовках, тут можна відфільтрувати список файлів куків, що потрібно показати.</span> <span title="">Відображається повний список атрибутів кука (див. Наведений нижче знімок екрана з прикладів cookie Response з додатковими атрибутами).</span></span></p> + +<p><img alt="cookies panel in firefox devtools network monitor, showing a number of cookie attributes including samesite" src="https://mdn.mozillademos.org/files/16108/highlight-samesite-attribute.png" style="display: block; height: 394px; margin: 0px auto; width: 1047px;"></p> + +<p><span class="tlid-translation translation"><span title="">Атрибут </span></span><code>samesite</code> <span class="tlid-translation translation"><span title="">доступний починаючи з Firefox 62 </span></span>({{bug("1452715")}}).</p> + +<h3 id="Параметри_(Params)">Параметри (Params)</h3> + +<p><span class="tlid-translation translation"><span title="">На цій вкладці відображаються параметри GET і дані POST запиту:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16333/params.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h3 id="Відповідь_(Response)">Відповідь (Response)</h3> + +<p><span class="tlid-translation translation"><span title="">Повний зміст відповіді.</span> <span title="">Якщо відповідь - HTML, JS або CSS, вона буде показана як текст:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16268/network_response.png" style="border: 1px solid black; display: block; height: 747px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p><span class="tlid-translation translation"><span title="">Якщо відповідь у форматі JSON, вона буде відображатися як об'єкт:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16332/response_json.png" style="display: block; height: 268px; margin: 0 auto; width: 900px;"></p> + +<p><span class="tlid-translation translation"><span title="">Якщо відповідь - це зображення, на вкладці відображається попередній перегляд:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16331/response_pane_image.png" style="display: block; height: 347px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h4 id="Кеш_(Cache)">Кеш (Cache)</h4> + +<p><span class="tlid-translation translation"><span title="">Якщо відповідь буде кешованою (тобто 304), на вкладці Кеш буде показано відомості про цей кешований ресурс.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16329/response_cache.png" style="border: 1px solid black; display: block; height: 245px; margin: 0px auto; width: 567px;"></p> + +<p>Ці деталі містять:</p> + +<ul> + <li><strong>Остання вибірка</strong> <strong>(Last fetched):</strong> <span class="tlid-translation translation"><span title="">Дата останньої вибірки ресурсу</span></span> </li> + <li><strong>Число вибірок</strong> <strong>(Fetched count):</strong> <span class="tlid-translation translation"><span title="">Кількість разів вибору ресурсу у поточному сеансі </span></span></li> + <li><strong>Розмір даних</strong> <strong>(Data size):</strong> Розмір ресурсу .</li> + <li><strong>Остання зміна (Last modified):</strong> <span class="tlid-translation translation"><span title="">Дата останньої зміни ресурсу</span></span></li> + <li><strong>Термін дії</strong> <strong>(Expires):</strong> <span class="tlid-translation translation"><span title="">Дата закінчення терміну дії ресурсу</span></span></li> + <li><strong>Пристрій</strong> (<strong>Device):</strong> <span class="tlid-translation translation"><span title="">Пристрій, з якого був отриманий ресурс (наприклад, "диск").</span></span></li> +</ul> + +<h4 id="HTML_перегляд_(preview)">HTML перегляд (preview)</h4> + +<p><span class="tlid-translation translation"><span title="">Якщо відповідь є HTML, на вкладці "Відповідь" ("Response"), вище "Корисного навантаження на відповідь" (</span></span>response payload<span class="tlid-translation translation"><span title="">), з'являється попередній візуальний перегляд HTML.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16272/settings_for_browser_debugger.png" style="border-style: solid; border-width: 1px; border: 1px solid black; display: block; height: 744px; margin: 0px auto; width: 900px;"></p> + +<h3 id="Розклад_(Timings)">Розклад (Timings)</h3> + +<p><span class="tlid-translation translation"><span title="">Вкладка «Розклад» (</span></span>Timings<span class="tlid-translation translation"><span title="">) розбиває мережний запит на наступний набір етапів, означених у специфікації </span></span><a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">Архіву HTTP</a> <span class="tlid-translation translation"><span title="">:</span></span></p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Назва</th> + <th scope="col">Опис</th> + </tr> + </thead> + <tbody> + <tr> + <td>Заблоковано (Blocked)</td> + <td> + <p><span class="tlid-translation translation"><span title="">Час, проведений в черзі в очікуванні мережного підключення.</span></span></p> + + <p><span class="tlid-translation translation"><span title="">Браузер накладає обмеження на кількість одночасних з'єднань, які можуть бути зроблені до одного серверу.</span> <span title="">Типово, у Firefox це значення рівне 6, але його можна змінити за допомогою налаштувань </span></span> <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code> <span class="tlid-translation translation"><span title="">.</span> <span title="">Якщо використовуються всі підключення, браузер не може завантажувати більше ресурсів, доки з'єднання не буде вивільнено.</span></span></p> + </td> + </tr> + <tr> + <td>Розв'язання DNS (DNS resolution)</td> + <td><span class="tlid-translation translation"><span title="">Час, що потребувався для розв'язання імені хоста.</span></span></td> + </tr> + <tr> + <td>З'єднання (Connecting)</td> + <td><span class="tlid-translation translation"><span title="">Час, що потребувався для створення з'єднання TCP.</span></span></td> + </tr> + <tr> + <td>Надсилання (Sending)</td> + <td><span class="tlid-translation translation"><span title="">Час, що потребувався для передачі HTTP-запиту на сервер.</span></span></td> + </tr> + <tr> + <td>Очікування (Waiting)</td> + <td><span class="tlid-translation translation"><span title="">Очікування відповіді від сервера.</span></span></td> + </tr> + <tr> + <td>Одержання (Receiving)</td> + <td><span class="tlid-translation translation"><span title="">Час, що потребувався для читання всієї відповіді від сервера (або кешу).</span></span></td> + </tr> + </tbody> +</table> + +<p>Ця вкладка <span class="tlid-translation translation"><span title=""> представляє більш детальний, анотований, перегляд смуги часу для цього запиту, що показує, як загальний час очікування розділяється на різні етапи:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16271/network_timings.png" style="border: 1px solid black; display: block; height: 749px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<h3 id="Безпека_(Security)">Безпека (Security)</h3> + +<p><span class="tlid-translation translation"><span title="">Якщо сайт обслуговується через HTTPS, Ви отримуєте додаткову вкладку під назвою "Безпека" (</span></span>"Security"<span class="tlid-translation translation"><span title="">).</span> Вона <span title="">містить відомості про захищене з'єднання, що використовується, включно з назвою протоколу, набору шифрів і деталями сертифікату:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16269/network_security.png" style="border: 1px solid black; display: block; height: 748px; margin-left: auto; margin-right: auto; width: 2276px;"></p> + +<p><span class="tlid-translation translation"><span title="">На вкладці "Безпека" відображається попередження про слабкі місця безпеки.</span> <span title="">Наразі він попереджає про два слабкі місця:</span></span></p> + +<ol> + <li>Використання SSLv3 замість TLS</li> + <li>Використання шифру RC4</li> +</ol> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10165/security-warning.png" style="display: block; height: 93px; margin-left: auto; margin-right: auto; width: 591px;"></p> + +<h3 id="Трасування_стека_(Stack_trace)">Трасування стека (Stack trace)</h3> + +<p>На цій вкладці відображається трасування <span class="tlid-translation translation"><span title="">стеків для відповідей, які мають стекові сліди.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16270/network_stack_trace.png" style="border: 1px solid black; display: block; height: 205px; margin: 0px auto; width: 900px;"></p> + +<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> + +<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі</span></span>:</p> + +<ul> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar" rel="nofollow">Панель інструментів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list" rel="nofollow">Список мережних запитів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis" rel="nofollow">Аналіз швидкодії</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> +</ul> 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 +--- +<p>{{ToolsSidebar}}</p> + +<p><span class="tlid-translation translation"><span title="">Тут відображається список всіх запитів мережі, зроблених під час завантаження сторінки.</span></span></p> + +<h2 id="Список_мережних_запитів">Список мережних запитів</h2> + +<p>Типово, Монітор мережі показує список всіх мережних запитів, <span class="tlid-translation translation"><span title="">зроблених під час завантаження сторінки.</span> <span title="">Кожен запит відображається у своєму рядку:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16258/Network_request_list.png" style="border: 1px solid black; display: block; height: 328px; margin: 0px auto; width: 900px;"><span class="tlid-translation translation"><span title="">Типово, кожного разу, як Ви переходите до нової сторінки або перезавантажуєте поточну сторінку, мережний монітор очищається.</span> <span title="">Ви можете змінити цю поведінку, встановивши прапорець "Постійне журналювання" (</span></span>"Enable persistent logs"<span class="tlid-translation translation"><span title="">) в </span></span><a href="https://developer.mozilla.org/uk/docs/Tools_Toolbox#Common_preferences">Налаштуваннях</a><span class="tlid-translation translation"><span title="">.</span></span></p> + +<h3 id="Стовпці_для_мережних_запитів">Стовпці для мережних запитів</h3> + +<p><span class="tlid-translation translation"><span title="">Ви можете показувати/приховувати потрібні стовпці шляхом їх вибору в контекстному меню (викликається правою кнопкою миші над заголовком) .</span> <span title="">Пункт контекстного меню "Скинути стовпці" (</span></span>"Reset Columns"<span class="tlid-translation translation"><span title="">) призначений для скидання переліку стовпців в початкову конфігурацію.</span> Нижче наведено перелік <span title="">усіх доступних стовпців:</span></span></p> + +<ul> + <li><strong>Стан (Status)</strong>: повернений код статусу(стану) HTTP. Значення статусу супроводжується кольоровими піктограмами: + + <ul> + <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">синій кружечок для інформаційних (коди 1XX). Зокрема, статус 101 (перемикання протоколів) для оновлень <a href="/uk/docs/Web/API/WebSocket">WebSocket</a>.</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10941/200.png" style="height: 17px; width: 17px;"> зелений кружечок для успішних (2XX codes)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10945/300.png" style="height: 17px; width: 17px;"> помаранчевий трикутник для перенаправлень (3XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10943/4-500.png" style="height: 17px; width: 17px;"> червоний квадрат для помилок (4XX та 5XX)</li> + <li><img alt="" src="https://mdn.mozillademos.org/files/10947/cached.png" style="height: 17px; width: 17px;"> <span class="tlid-translation translation"><span title="">сіре коло для відповідей, отриманих з кешу браузера</span></span></li> + </ul> + Значення <span class="tlid-translation translation"><span title="">коду відображається відразу після піктограми</span></span>.</li> + <li><strong>Спосіб (</strong>Метод, <strong>Method)</strong>: Метод запиту HTTP, який використовується.</li> + <li><strong>Файл (File)</strong>: Базове ім'я файлу, що запитується.</li> + <li><strong>Протокол (Protocol):</strong> Мережний протокол, що використовується для передачі даних. Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55.</li> + <li><strong>Схема (Scheme):</strong> Схема (https/http/ftp/...) запитуваного шляху. Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55.</li> + <li><strong>Домен (Domain)</strong>: Домен запитуваного шляху. + <ul> + <li>Якщо запит використовує SSL/TLS <span class="tlid-translation translation"><span title="">і в підключенні виявлені слабкі місця в безпеці (як слабкі шифри), поруч із доменом Ви побачите трикутник попередження.</span> <span title="">Докладніше інформацію про цю проблему можна побачити на</span></span> <a href="/uk/docs/Tools/Network_Monitor#Security">вкладці "Безпека"</a>.</li> + <li><span class="tlid-translation translation"><span title="">Наведіть курсор на "Домен", щоб переглянути його IP-адресу</span></span> </li> + <li><span class="tlid-translation translation"><span title="">Біля Домену є значок, який надає додаткову інформацію про стан безпеки для цього запиту.</span> <span title="">Див. </span></span><a href="/uk/docs/Tools/Network_Monitor#Security_icons">піктограми безпеки</a>.</li> + </ul> + </li> + <li><strong>Віддалений IP (Remote IP)</strong>: <span class="tlid-translation translation"><span title="">IP-адреса сервера, що відповідає на запит.</span> </span>Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55. </li> + <li><strong>Причина (Cause)</strong>: <span class="tlid-translation translation"><span title="">Причина ініціювання мережного запиту, наприклад, запит XHR </span></span>{{htmlelement("img")}}, скрипт, запит скрипту на отримання зображення і т.п. Доступний, починаючи з Firefox 49.</li> + <li><strong>Тип (Type)</strong>: <code>Content-type</code> відповіді.</li> + <li><strong>Куки (Cookies):</strong> <span class="tlid-translation translation"><span title="">Номер кука запиту, пов'язаного із запитом.</span> </span>Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55.</li> + <li><strong>Встановлювати куки (Set-Cookies):</strong> <span class="tlid-translation translation"><span title="">Номер кука відповіді, пов'язаного із запитом.</span> </span>Типово, цей стовпець є прихованим. Доступний, починаючи з Firefox 55.</li> + <li><strong>Передано (Transferred)</strong>: <span class="tlid-translation translation"><span title="">Кількість байтів, які були фактично передані для завантаження ресурсу.</span> <span title="">Це значення буде менше, ніж в стовпці "Розмір", якщо ресурс було стиснуто.</span> <span title="">Починаючи з Firefox 47, якщо ресурс було отримано з кешу </span></span><a href="/uk/docs/Web/API/Service_Worker_API">service worker</a><span class="tlid-translation translation"><span title="">, у цій комірці відображається напис "кешовано</span></span><span class="tlid-translation translation"><span title="">".</span></span></li> + <li><strong>Розмір (Size)</strong>: Розмір переданого ресурсу.</li> +</ul> + +<p><span class="tlid-translation translation"><span title="">Кожен стовпець панелі інструментів у верхній частині має мітку, натискання на якій за даним стовпцем сортуються всі запити.</span></span></p> + +<h4 id="Ескізи_зображень">Ескізи зображень</h4> + +<p><span class="tlid-translation translation"><span title="">Якщо запит стосується зображення, наведення на назву файлу показує в підказці попередній перегляд зображення :</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16257/image_preview.png" style="border: 1px solid black; display: block; height: 334px; margin: 0px auto; width: 900px;"></p> + +<h4 id="Піктограми_безпеки">Піктограми безпеки</h4> + +<p>У стовпці "Домен" Монітору мережі відображаються піктограми:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16194/network_message_list_63.png" style="border: 1px solid black; display: block; height: 191px; margin: 0 auto; width: 845px;"></p> + +<p><span class="tlid-translation translation"><span title="">Це надає додаткову інформацію про стан безпеки запиту:</span></span> </p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Піктограма</th> + <th scope="col">Значення</th> + </tr> + </thead> + <tbody> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11655/https.svg" style="height: 16px; width: 16px;"></td> + <td>HTTPS</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11653/https-weak.svg" style="height: 16px; width: 16px;"></td> + <td>Слабкий HTTPS (наприклад, було використано слабке шифрування)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11649/https-failed.svg" style="height: 16px; width: 16px;"></td> + <td>Помилковий HTTPS (наприклад, сертифікат є недійсним)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11651/http.svg" style="height: 16px; width: 16px;"></td> + <td>HTTP</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/11657/localhost.svg" style="height: 16px; width: 16px;"></td> + <td>Localhost</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16192/tracker_icon.png" style="height: 16px; width: 16px;"></td> + <td><span class="tlid-translation translation"><span title="">Вказує на те, що URL належить до відомого трекера, тому буде заблокований, якщо ввімкнено блокування вмісту.</span></span></td> + </tr> + </tbody> +</table> + +<p><span class="tlid-translation translation"><span title="">Для слабких і помилкових запитів HTTPS більш детальну інформацію про проблему можна побачити у</span></span> <a href="/uk/docs/Tools/Network_Monitor#Security">вкладці "Безпека</a>".</p> + +<h4 id="Стовпець_Причина">Стовпець "Причина"</h4> + +<p><span class="tlid-translation translation"><span title="">У стовпці "Причина" вказано причину запиту.</span> <span title="">Зазвичай це значення досить очевидне, і воно корелюється зі стовпцем "Тип".</span> <span title="">Найпоширенішими значеннями є:</span></span></p> + +<ul> + <li>document: вихідний документ HTML.</li> + <li>img: елемент {{htmlelement("img")}} .</li> + <li>imageset: елемент {{htmlelement("img")}} .</li> + <li>script: файл JavaScript .</li> + <li>stylesheet: файл CSS .</li> +</ul> + +<h3 id="Шкала_часу_(Timeline)">Шкала часу (Timeline)</h3> + +<p><span class="tlid-translation translation"><span title="">У списку запитів також відображається шкала часу для різних частин кожного запиту.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16259/timeline.png" style="border: 1px solid black; display: block; height: 331px; margin: 0px auto; width: 900px;"></p> + +<p><span class="tlid-translation translation"><span title="">Кожній часовій шкалі надається горизонтальне положення у своєму рядку відносно інших мережних запитів. Таким чином, можна побачити загальний час, необхідний для завантаження сторінки.</span> <span title="">Більш детальну інформацію про кольорове кодування, що використовується тут, див. у розділі </span></span><a href="/uk/docs/Tools/Network_Monitor#Timings">Часові діаграми</a><span class="tlid-translation translation"><span title="">.</span></span></p> + +<p>Починаючи з Firefox 45, шкала часу також містить дві вертикальні лінії:</p> + +<ul> + <li><a href="/uk/docs/">синя </a>лінія мітить точку в якій запускається сторінкова подія <code><a href="/uk/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> .</li> + <li><span style="color: red;">червона</span> лінія мітить точку в якій запускається сторінкова подія <a href="/uk/docs/Web/Events/load">load</a> .</li> +</ul> + +<h3 id="Фільтрація_запитів">Фільтрація запитів</h3> + +<p><span class="tlid-translation translation"><span title="">Можна фільтрувати запити за типом вмісту, за типом запитів XMLHttpRequests або WebSocket, за URL, або за властивостями запиту.</span></span> </p> + +<h4 id="Фільтрація_за_типом_вмісту">Фільтрація за типом вмісту</h4> + +<p><span class="tlid-translation translation"><span title="">Щоб відфільтрувати за типом вмісту, використовуйте відповідні кнопки з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>.</p> + +<h4 id="Фільтрація_XHR">Фільтрація XHR</h4> + +<p>Для відображення виключно запитів {{Glossary("XHR (XMLHttpRequest)", "XHR")}}, використовується кнопка "XHR" <span class="tlid-translation translation"><span title="">з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>.</p> + +<h4 id="Фільтрація_WebSockets">Фільтрація WebSockets</h4> + +<p>Для відображення виключно з'єднань WebSocket, використовується кнопка "WS" <span class="tlid-translation translation"><span title="">з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>.</p> + +<p><span class="tlid-translation translation"><span title="">Крім того, може бути корисним додатковий компонент </span></span><a href="https://addons.mozilla.org/uk/firefox/addon/websocketsniff">WebSocket Sniffer</a><span class="tlid-translation translation"><span title="">.</span></span> </p> + +<h4 id="Фільтрація_за_URL">Фільтрація за URL</h4> + +<p>Для фільтрації за URL, використовуйте пошукове поле <span class="tlid-translation translation"><span title="">з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>. Клацніть в межах пошукового поля, або натисніть <kbd>Ctrl</kbd> + <kbd>F</kbd> (або <kbd>Cmd</kbd> + <kbd>F</kbd> в Mac), почніть введення. <span class="tlid-translation translation"><span title="">Список мережних запитів буде відфільтровано для включення лише тих запитів, які містять рядок фільтра в полях "Домен" або "Файл".</span></span> </p> + +<p>Починаючи з Firefox 45, можна фільтрувати запити<span class="tlid-translation translation"><span title="">, що <em>не </em>містять означені рядки фільтрів, заповнивши запит оператором "-".</span> <span title="">Наприклад, запит "-google.com" покаже всі запити, що не містять "google.com" у своїй URL-адресі.</span></span> </p> + +<h4 id="Фільтрація_за_властивістю">Фільтрація за властивістю</h4> + +<p>Щоб відфільтрувати за певними властивостями запиту, скористайтеся пошуковим полем <span class="tlid-translation translation"><span title="">з</span></span> <a href="/uk/docs/Tools/Network_Monitor#Toolbar">панелі інструментів</a>. Пошукове поле розпізнає вказані ключові слова, які можна використовувати для фільтрації запитів за вказаними властивостями запиту. За цими ключовими словами слідують двокрапка та відповідне значення фільтра. Значення фільтра нечутливе до регістру. Встановлення мінуса (<code>-</code>) скасовує фільтр. Ви можете комбінувати різні фільтри, розділяючи їх пробілами.</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Ключове слово</th> + <th scope="col">Значення</th> + <th scope="col">Приклад</th> + </tr> + <tr> + <td><code>status-code</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси з вказаним кодом статусу HTTP.</span></span> </td> + <td><code>status-code:304</code></td> + </tr> + <tr> + <td><code>method</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси з вказаним методом запиту HTTP.</span></span></td> + <td><code>method:post</code></td> + </tr> + <tr> + <td><code>domain</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, що надходять з вказаного домену.</span></span></td> + <td><code>domain:mozilla.org</code></td> + </tr> + <tr> + <td><code>remote-ip</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, що надходять з сервера зі вказаним IP.</span></span></td> + <td><code>remote-ip:63.245.215.53</code><br> + <code>remote-ip:[2400:cb00:2048:1::6810:2802]</code></td> + </tr> + <tr> + <td><code>cause</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, що відповідають вказаному типу причини.</span> <span title="">Типи можна знайти в описі </span></span><a href="#Cause_column">стовпця "Причина" </a></td> + <td><code>cause:js</code><br> + <code>cause:stylesheet<br> + cause:img</code></td> + </tr> + <tr> + <td><code>transferred</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, що мають вказаний, або з близьким до вказаного розмір переданих даних. Як суфікс для кілобайт використовується літера</span> </span><code>k</code><span class="tlid-translation translation"><span title=""> , мегабайт - </span></span><code>m.</code><span class="tlid-translation translation"><span title=""> Наприклад</span> <span title="">значення </span></span><code>1k</code><span class="tlid-translation translation"><span title=""> еквівалентно </span></span><code>1024</code>.</td> + <td><code>transferred:1k</code></td> + </tr> + <tr> + <td><code>size</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, що мають вказаний розмір (після розпакування) або розмір, близький до вказаного.</span> <span title="">Як суфікс для кілобайт використовується літера</span> </span><code>k</code><span class="tlid-translation translation"><span title=""> , мегабайт - </span></span><code>m.</code><span class="tlid-translation translation"><span title=""> Наприклад</span> <span title="">значення </span></span><code>1k</code><span class="tlid-translation translation"><span title=""> еквівалентно </span></span><code>1024</code>.</td> + <td><code>size:2m</code></td> + </tr> + <tr> + <td><code>larger-than</code></td> + <td> + <p><span class="tlid-translation translation"><span title="">Показує ресурси, які перевищують вказаний розмір у байтах.</span> <span title="">Як суфікс для кілобайт використовується літера</span> </span><code>k</code><span class="tlid-translation translation"><span title=""> , мегабайт - </span></span><code>m.</code><span class="tlid-translation translation"><span title=""> Наприклад</span> <span title="">значення </span></span><code>1k</code><span class="tlid-translation translation"><span title=""> еквівалентно </span></span><code>1024</code>.</p> + </td> + <td><code>larger-than:2000</code><br> + <code>-larger-than:4k</code></td> + </tr> + <tr> + <td><code>mime-type</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, які відповідають вказаному типу MIME.</span></span></td> + <td><code>mime-type:text/html</code><br> + <code>mime-type:image/png</code><br> + <code>mime-type:application/javascript</code></td> + </tr> + <tr> + <td><code>is</code></td> + <td><code>is:cached</code> і <code>is:from-cache</code> <span class="tlid-translation translation"><span title="">показує лише ресурси, що надходять з кешу.</span></span><br> + <code>is:running</code> <span class="tlid-translation translation"><span title="">показує лише ресурси, які зараз передаються.</span></span></td> + <td><code>is:cached</code><br> + <code>-is:running</code></td> + </tr> + <tr> + <td><code>scheme</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, передані за вказаною схемою.</span></span></td> + <td><code>scheme:http</code></td> + </tr> + <tr> + <td><code>has-response-header</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, які містять вказаний заголовок відповіді HTTP.</span></span></td> + <td><code>has-response-header:cache-control</code><br> + <code>has-response-header:X-Firefox-Spdy</code></td> + </tr> + <tr> + <td><code>set-cookie-domain</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, які мають заголовок </span></span><code>Set-Cookie</code> <span class="tlid-translation translation"><span title="">з атрибутом </span></span><code>Domain</code><span class="tlid-translation translation"><span title="">, що відповідає вказаному значенню.</span></span></td> + <td><code>set-cookie-domain:.mozilla.org</code></td> + </tr> + <tr> + <td><code>set-cookie-name</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, які мають заголовок </span></span><code>Set-Cookie</code><span class="tlid-translation translation"><span title=""> з ім'ям, що відповідає вказаному значенню.</span></span></td> + <td><code>set-cookie-name:_ga</code></td> + </tr> + <tr> + <td><code>set-cookie-value</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, які мають заголовок </span></span><code>Set-Cookie</code><span class="tlid-translation translation"><span title=""> зі значенням, що відповідає вказаному.</span></span></td> + <td><code>set-cookie-value:true</code></td> + </tr> + <tr> + <td><code>regexp</code></td> + <td><span class="tlid-translation translation"><span title="">Показує ресурси, що мають URL, що відповідає вказаному </span></span> {{Glossary("regular expression")}}.</td> + <td><code>regexp:\d{5}<br> + regexp:mdn|mozilla</code></td> + </tr> + </thead> +</table> + +<h3 id="Контекстне_меню">Контекстне меню</h3> + +<p><span class="tlid-translation translation"><span title="">Контекстне меню рядка містить наступні пункти:</span></span></p> + +<ul> + <li>Копіювати URL (Copy URL)</li> + <li>Копіювати параметри URL (Copy URL Parameters)</li> + <li>Копіювати дані POST (тільки для запитів POST) (Copy POST Data)</li> + <li>Копіювати як cURL (Copy as cURL)</li> + <li>Копіювати заголовки запитів (Copy Request Headers)</li> + <li>Копіювати заголовки відповідей (Copy Response Headers)</li> + <li>Копіювати відповідь (Copy Response)</li> + <li>Копіювати зображення як URI даних (тільки для зображень) (Copy Image as Data URI)</li> + <li>Копіювати все як HAR (Copy All As HAR)</li> + <li>Зберегти все як HAR (Save All As HAR)</li> + <li>Зберегти зображення як (Save Image As) (тільки для зображень)</li> + <li>Редагувати і надіслати заново (Edit and Resend)</li> + <li>Відкрити в новій вкладці (Open in New Tab)</li> + <li>Почати <a href="/uk/docs/Tools/Network_Monitor#Performance_analysis">Аналіз швидкодії</a> (Start <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Performance_analysis">Performance Analysis</a> for the page)</li> +</ul> + +<h4 id="Редагувати_і_надіслати_заново_(Edit_and_Resend)">Редагувати і надіслати заново (Edit and Resend)</h4> + +<p><span class="tlid-translation translation"><span title="">Відкриває редактор, що дозволяє редагувати метод, URL-адресу, параметри та заголовки для запиту та повторно його надіслати.</span></span> </p> + +<h4 id="Відкрити_в_новій_вкладці_(Open_in_New_Tab)">Відкрити в новій вкладці (Open in New Tab)</h4> + +<p><span class="tlid-translation translation"><span title="">Відправляє запит у новій вкладці - дуже корисно для налагодження асинхронних запитів.</span></span></p> + +<h4 id="Копіювати_як_cURL_(Copy_as_cURL)">Копіювати як cURL (Copy as cURL)</h4> + +<p><span class="tlid-translation translation"><span title="">Вибір цього пункту меню приводить до копіювання мережного запиту в буфер обміну як команди </span></span> <a href="http://curl.haxx.se/">cURL</a><span class="tlid-translation translation"><span title="">, після чого можна виконати його з командного рядка.</span> <span title="">Команда може містити такі параметри:</span></span></p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>-X [METHOD]</code></td> + <td>Якщо не використовується метод GET та POST</td> + </tr> + <tr> + <td><code>--data</code></td> + <td><span class="tlid-translation translation"><span title="">Для параметрів запиту, закодованих URL-адресами</span></span></td> + </tr> + <tr> + <td><code>--data-binary</code></td> + <td>Для багатокомпонентних параметрів запиту</td> + </tr> + <tr> + <td><code>--http/VERSION</code></td> + <td>Якщо HTTP не є версією 1.1</td> + </tr> + <tr> + <td><code>-I</code></td> + <td>Якщо використовується метод HEAD</td> + </tr> + <tr> + <td><code>-H</code></td> + <td> + <p><span class="tlid-translation translation"><span title="">По одному для кожного заголовка запиту.</span></span></p> + + <p>Починаючи з Firefox 34, якщо вказаний заголовок "Accept-Encoding", команда cURL буде містити <code>--compressed</code> замість <code>-H "Accept-Encoding: gzip, deflate"</code>. <span class="tlid-translation translation"><span title="">Це значить, що відповідь буде автоматично розпаковуватися.</span></span></p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Копіюватизберегти_все_як_HAR_(CopySave_All_As_HAR)">Копіювати/зберегти все як HAR (Copy/Save All As HAR)</h4> + +<p><span class="tlid-translation translation"><span title="">Ці пункти створюють </span></span><a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">HTTP Archive</a> <span class="tlid-translation translation"><span title=""> (HAR) для всіх запитів списку.</span> <span title="">Формат HAR дозволяє експортувати детальну інформацію про мережні запити.</span> </span>"Копіювати все як HAR" (<span class="tlid-translation translation"><span title="">"</span></span>Copy All As HAR<span class="tlid-translation translation"><span title="">") копіює дані в буфер обміну. "Зберегти все як HAR"("</span></span>Save All As HAR")<span class="tlid-translation translation"><span title=""> відкриває діалогове вікно, за допомогою якого можна зберегти архів на диск.</span></span></p> + +<p><span class="tlid-translation translation"><span title="">У новому випадаючому меню "HAR" також містяться команди "Копіювати все як HAR" та "Зберегти все як HAR", а також пункт "Імпортувати ...".</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16056/har-dropdown.png" style="border-style: solid; border-width: 1px; height: 262px; width: 723px;"></p> + +<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> + +<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі</span></span> :</p> + +<ul> + <li><a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar">Панель інструментів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details" rel="nofollow">Подробиці мережних запитів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis" rel="nofollow">Аналіз швидкодії</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> +</ul> 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 +--- +<p>{{ToolsSidebar}}</p> + +<p><span class="tlid-translation translation"><span title="">Монітор мережі дозволяє обмежити швидкість мережі, щоб емулювати різні швидкості з'єднання. Це зроблено з метою приблизної оцінки того, як Ваша програма буде поводитися з різними типами підключень.</span></span></p> + +<h2 id="Обмеження_швидкості_передачі_(Throttling)">Обмеження швидкості передачі (Throttling)</h2> + +<p><span class="tlid-translation translation"><span title="">Панель інструментів містить випадаюче меню Throttling, за допомогою якого Ви можете зменшити швидкість мережі, щоб емулювати різні умови.</span> <span title="">Просто виберіть опцію з меню, і вона буде зберігатися після перезавантаження.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16260/throttling.png" style="border: 1px solid black; display: block; height: 177px; margin: 0px auto; width: 150px;"></p> + +<p><span class="tlid-translation translation"><span title="">Емульовані характеристики:</span></span></p> + +<ul> + <li>швидкість завантаження</li> + <li>швидкість вивантаження</li> + <li>мінімальна затримка</li> +</ul> + +<p><span class="tlid-translation translation"><span title="">У таблиці нижче перераховані значення, пов'язані з кожним типом мережі. Однак, слід відмітити, що не варто покладатися на цю функцію для точних вимірювань продуктивності;</span> <span title="">вона призначена для приблизного уявлення про роботу користувача в різних умовах.</span></span></p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Вибір</th> + <th scope="col">Швидкість завантаження</th> + <th scope="col">Швидксть вивантаження</th> + <th scope="col">Мінімальна затримка (ms)</th> + </tr> + </thead> + <tbody> + <tr> + <td>GPRS</td> + <td>50 KB/s</td> + <td>20 KB/s</td> + <td>500</td> + </tr> + <tr> + <td>Regular 2G</td> + <td>250 KB/s</td> + <td>50 KB/s</td> + <td>300</td> + </tr> + <tr> + <td>Good 2G</td> + <td>450 KB/s</td> + <td>150 KB/s</td> + <td>150</td> + </tr> + <tr> + <td>Regular 3G</td> + <td>750 KB/s</td> + <td>250 KB/s</td> + <td>100</td> + </tr> + <tr> + <td>Good 3G</td> + <td>1.5 MB/s</td> + <td>750 KB/s</td> + <td>40</td> + </tr> + <tr> + <td>Regular 4G/LTE</td> + <td>4 MB/s</td> + <td>3 MB/s</td> + <td>20</td> + </tr> + <tr> + <td>DSL</td> + <td>2 MB/s</td> + <td>1 MB/s</td> + <td>5</td> + </tr> + <tr> + <td>Wi-Fi</td> + <td>30 MB/s</td> + <td>15 MB/s</td> + <td>2</td> + </tr> + </tbody> +</table> + +<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> + +<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі</span></span> :</p> + +<ul> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Toolbar" rel="nofollow">Панель інструментів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list" rel="nofollow">Список мережних запитів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details" rel="nofollow">Подробиці мережних запитів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis" rel="nofollow">Аналіз швидкодії</a></li> +</ul> 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 +--- +<p>{{ToolsSidebar}}</p> + +<p><span class="tlid-translation translation"><span title="">Монітор мережі надає дві області панелей інструментів: одну над основним розділом, а іншу під ним.</span></span></p> + +<h2 id="Панель_інструментів">Панель інструментів</h2> + +<p><span class="tlid-translation translation"><span title="">Панель інструментів знаходиться у верхній частині головного вікна Монітора мережі</span></span>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16247/network_toolbar.png" style="display: block; height: 98px; margin-left: auto; margin-right: auto; width: 1200px;"></p> + +<p><span class="tlid-translation translation"><span title="">На ній знаходяться</span></span>:</p> + +<ul> + <li>Піктограма для очищення <a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list">списку мережних запитів.</a></li> + <li>Поле для вводу <a href="/uk/docs/Tools/Network_Monitor/request_list#Filtering_requests">фільтру запитів</a> за URL та за властивостями</li> + <li>Набір піктограм для фільтрування списку мережних запитів: + <ul> + <li>за типом змісту відповіді</li> + <li>XHR запити</li> + <li>оновлення WebSocket (позначені WS)</li> + </ul> + </li> + <li>типово, Монітор мережі очищується кожного разу<span class="tlid-translation translation"><span title="">, коли Ви переходите до нової сторінки або перезавантажуєте поточну сторінку.</span> <span title="">Цю поведінку можна змінити, активувавши параметр "Постійне журналювання".</span></span></li> + <li>Параметр<span class="tlid-translation translation"><span title="">, який дозволяє вимкнути кешування</span></span></li> + <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> + <li>HAR</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16248/network_monitor_bottom_toolbar.png" style="border: 1px solid black; height: 48px; width: 2010px;"></p> + +<p>Друга область панелі інструментів, що знаходиться нижче Монітора мережі, містить:</p> + +<ul> + <li>Піктограму запуску <a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_analysis">Аналізу швидкодії</a></li> + <li>Звітна інформація <span class="tlid-translation translation"><span title="">по кількості, загальному розміру і загальному часу запитів, що відображаються на</span></span> <span class="tlid-translation translation"><span title="">цій сторінці </span></span>.</li> +</ul> + +<h2 id="Можливості_Монітору_мережі">Можливості Монітору мережі</h2> + +<p><span class="tlid-translation translation"><span title="">У наступних статтях розглядаються різні аспекти використання Монітору мережі:</span></span></p> + +<ul> + <li><a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_list">Список мережних запитів</a></li> + <li><a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/request_details">Подробиці мережних запитів</a></li> + <li><a class="new" href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/recording" rel="nofollow">Записування мережного трафіку</a></li> + <li><a href="https://developer.mozilla.org/uk/docs/Tools/Network_Monitor/Performance_Analysis">Аналіз швидкодії</a></li> + <li><a href="/uk/docs/Tools/Network_Monitor/Throttling">Обмеження швидкості передачі</a></li> +</ul> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p><span class="tlid-translation translation"><span title="">Більшіу частину Веб-консолі займає область відображення повідомлень:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13278/console-messages.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 877px;"></p> + +<p>Кожне повідомлення відображається окремим рядком:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>Time</strong></td> + <td>Час, коли повідомлення було записане. Це поле за замовченням не відображається: Ви можете керувати опцією "Увімкнути відбитки часу" використовуючи <a href="/uk/docs/Tools_Toolbox#Settings">налаштування панелі інструментів</a>.</td> + </tr> + <tr> + <td><strong>Category</strong></td> + <td> + <p><strong>Категорія</strong>: показує на те, що це за повідомлення:</p> + + <ul style="margin-left: 40px;"> + <li><strong>Чорний</strong>: Мережний запит</li> + <li><span style="color: #0099ff;"><strong>Синій</strong></span>: попередження/помилка/повідомлення CSS</li> + <li><strong><span style="color: #ff8c00;">Помаранчевий</span></strong>: попередження/помилка JavaScript</li> + <li><span style="color: #ff0000;"><strong>Червоний</strong></span>: попередження/помилка безпеки</li> + <li><span style="color: #90b090;"><strong>Зелений</strong></span>: повідомлення журналу серверу</li> + <li><span style="color: #a9a9a9;"><strong>Світло-сірий </strong></span>: повідомлення API <a href="/uk/docs/Web/API/console" title="/en-US/docs/Web/API/console">Консолі</a></li> + <li><span style="color: #696969;"><strong>Темно-сірий</strong></span>: вхід/вихід інтерактивного <a href="/uk/docs/Tools/Web_Console/The_command_line_interpreter">інтерпретатору командного рядку</a></li> + </ul> + </td> + </tr> + <tr> + <td><strong>Type</strong></td> + <td><span class="tlid-translation translation"><span title="">Для всіх повідомлень, за винятком мережних запитів і інтерактивних входів/виходів, піктограма вказує на тип повідомлення: помилка (X), попередження (!) або інфомаційне повідомлення (i).</span></span></td> + </tr> + <tr> + <td><strong>Message</strong></td> + <td>Текст повідомлення.</td> + </tr> + <tr> + <td><strong>Number of occurrences</strong></td> + <td><span class="tlid-translation translation"><span title="">Якщо рядок, який генерує попередження або помилку, виконується більше одного разу, то він реєструється тільки один раз. Цей лічильник показує, скільки разів генерується дане повідомлення.</span></span></td> + </tr> + <tr> + <td><strong>Filename and line number</strong></td> + <td> + <p><span class="tlid-translation translation"><span title="">Для повідомлень JavaScript, CSS і API консолі повідомлення можна простежити до рядку коду, що повязаний з ним.</span> <span title="">Консоль надає посилання на ім'я файлу та номер рядку, що генерує повідомлення.</span></span></p> + + <p>Починаючи з Firefox 36, це поле також показує номер стовпчика.</p> + </td> + </tr> + </tbody> +</table> + +<p><span class="tlid-translation translation"><span title="">За замовчуванням консоль очищається кожного разу, коли ви переходите до нової сторінки або перезавантажуєте поточну сторінку.</span> <span title="">Щоб змінити цю поведінку, позначте пункт "Постійне журналювання" в </span></span><a href="/uk/docs/Tools_Toolbox#Common_preferences">Налаштуваннях</a><span class="tlid-translation translation"><span title="">.</span></span></p> + +<h2 id="Категорії_повідомлень">Категорії повідомлень</h2> + +<h3 id="Мережні">Мережні</h3> + +<div class="note"> +<p>Network log messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> +</div> + +<p>Network requests are logged with a line that looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>Time</strong></td> + <td>The time the message was recorded.</td> + </tr> + <tr> + <td><strong>Category</strong></td> + <td>Indicates that the message is an HTTP request.</td> + </tr> + <tr> + <td><strong>Method</strong></td> + <td> + <p>The specific HTTP request method.</p> + + <p>If the request was made as an <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, there's an additional note indicating this:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p> + </td> + </tr> + <tr> + <td><strong>URI</strong></td> + <td>The target URI.</td> + </tr> + <tr> + <td><strong>Summary</strong></td> + <td>The HTTP version, status code, and time taken to complete.</td> + </tr> + </tbody> +</table> + +<h4 id="Viewing_network_request_details">Viewing network request details</h4> + +<p>If you click on the message, you'll be redirected to the <a href="/en-US/docs/Tools/Network_Monitor">Network panel</a> 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.</p> + +<p>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:</p> + +<ul> + <li><strong>Headers:</strong> request and response headers</li> + <li><strong>Response:</strong> the response body</li> + <li><strong>Cookies:</strong> any cookies that were sent along with the request</li> + <li><strong>Call Stack</strong> (new in Firefox 50): for requests initiated by JavaScript, such as <a href="/en-US/docs/Web/API/XMLHttpRequest/Using_XMLHttpRequest">XMLHttpRequest</a> or <a href="/en-US/docs/Web/API/Fetch_API">Fetch</a>, you can see the call stack at the point the request was made.</li> +</ul> + +<p>{{EmbedYouTube("cFlcWzJ9j4I")}}</p> + +<h3 id="JS">JS</h3> + +<p>JavaScript messages look like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Learn_more_link">"Learn more" link</h4> + +<div class="geckoVersionNote">New in Firefox 49</div> + +<p>JavaScript errors contain a "Learn more" link that takes you to the<a href="/en-US/docs/Web/JavaScript/Reference/Errors"> JavaScript error reference</a> containing additional advice for fixing issues:</p> + +<p>{{EmbedYouTube("OabJc2QR6o0")}}</p> + +<h4 id="Source_maps">Source maps</h4> + +<div class="geckoVersionNote">New in Firefox 55</div> + +<p>From Firefox 55, the Web Console understands <a href="http://blog.teamtreehouse.com/introduction-source-maps">source maps</a>. 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.</p> + +<h3 id="CSS">CSS</h3> + +<div class="note"> +<p><strong>Note</strong>: CSS warnings and reflow messages are not shown by default, for performance reasons (see {{bug(1452143)}}). Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> +</div> + +<p>CSS messages look like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Reflow_events">Reflow events</h4> + +<p>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 <a href="/en-US/docs/Web/CSS/:hover">:hover</a>, or manipulating the DOM in JavaScript.</p> + +<p>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 <a href="/en-US/docs/Tools/Web_Console/Console_messages#Synchronous_and_asynchronous_reflows">synchronous reflows</a> triggered from JavaScript, which code triggered them.</p> + +<p>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 <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">toolbar</a> and selecting "Reflows".</p> + +<p>Each message is labeled "reflow" and shows the time taken to execute the reflow:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Click the link to open the file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p> + +<h4 id="Synchronous_and_asynchronous_reflows"><a name="synchronous-and-asynchronous-reflows">Synchronous and asynchronous reflows</a></h4> + +<p>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.</p> + +<p>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 <code>window.getComputedStyle(thing).height</code>:</p> + +<pre class="brush: js">var thing = document.getElementById("the-thing"); +thing.style.display = "inline-block"; +var thingHeight = window.getComputedStyle(thing).height;</pre> + +<p>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.</p> + +<h3 id="Безпеки">Безпеки</h3> + +<p>Security warnings and errors look like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p> + +<p>The complete list of security messages is as follows:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <th scope="col">Message</th> + <th scope="col">Details</th> + </tr> + <tr> + <td>Blocked loading mixed active content</td> + <td>The 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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Blocked loading mixed display content</td> + <td>The 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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) active content on a secure page</td> + <td>The 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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) display content on a secure page</td> + <td>The 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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>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.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>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.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.</td> + <td>Pages containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>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.</td> + <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.</td> + <td>iframes containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>The site specified an invalid Strict-Transport-Security header.</td> + <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td> + </tr> + <tr> + <td> + <p>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.</p> + </td> + <td> + <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p> + + <p>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 <a href="/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p> + + <p>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.</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> 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.</p> + +<h3 id="Інформаційні">Інформаційні</h3> + +<div class="note"> +<p>Messages logged from <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a>, add-ons, and <a href="/en-US/docs/Mozilla/ChromeWorkers">Chrome Workers</a> are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> +</div> + +<p>The Logging category includes messages logged using the <a href="/en-US/docs/Web/API/Console">Console</a> API.<br> + <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The Web console supports the following <a href="/en-US/docs/Web/API/Console">Console API</a> messages:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/Console.assert"><code>assert()</code></a></li> + <li><code><a href="/en-US/docs/Web/API/Console/clear">clear()</a></code> (new in Firefox 48)</li> + <li><a href="/en-US/docs/Web/API/Console.count"><code>count()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.error"><code>error()</code></a></li> + <li><code>exception()</code></li> + <li><code><a href="/en-US/docs/Web/API/Console.group">group()</a></code></li> + <li><code><a href="/en-US/docs/Web/API/Console/groupEnd">groupEnd()</a></code></li> + <li><code>info()</code></li> + <li><a href="/en-US/docs/Web/API/Console.log"><code>log()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.table"><code>table()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.time"><code>time()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></li> +</ul> + +<p>The console prints a stack trace for all error messages, like this:</p> + +<pre class="brush: js">function foo() { + console.error("it explodes"); +} + +function bar() { + foo(); +} + +function doStuff() { + bar(); +} + +doStuff();</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11665/error-stack.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 465px;"></p> + +<h3 id="Серверні">Серверні</h3> + +<div class="note"> +<p>Server-side log messages was introduced in Firefox 43, but removed in Firefox 56. You can install the <a href="https://addons.mozilla.org/en-US/firefox/addon/chromelogger/">Chrome Logger extension</a> to (re)-enable the feature.</p> +</div> + +<p>With the <a href="https://addons.mozilla.org/en-US/firefox/addon/chromelogger/">Chrome Logger extension</a>, Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.</p> + +<p>It uses the <a href="https://craig.is/writing/chrome-logger">Chrome Logger</a> protocol. Briefly, the way it works is:</p> + +<ul> + <li>your server-side code - Python, PHP, Node.js, ... - includes a library that provides a console API</li> + <li>your server-side code uses this API to log messages</li> + <li>the server-side library creates JSON objects from the messages and encodes them for transmission</li> + <li>the messages are transmitted to the client as a response header named <code>X-ChromeLogger-Data</code></li> + <li>the Web Console decodes these headers and displays them</li> +</ul> + +<p>To find a suitable library for your server code, see the <a href="https://craig.is/writing/chrome-logger">Chrome Logger documentation</a>.</p> + +<h3 id="Входивиходи_командного_рядку">Входи/виходи командного рядку</h3> + +<p>Commands sent to the browser using the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p> + +<h2 id="Filtering_and_searching"><a name="filtering-and-searching">Filtering and searching</a></h2> + +<h3 id="Filtering_by_category">Filtering by category</h3> + +<p>You can use the toolbar along the top to constrain the results displayed.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13284/console-toolbar.png" style="display: block; height: 297px; margin-left: auto; margin-right: auto; width: 877px;">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:</p> + +<ul> + <li>Net + <ul> + <li>Errors</li> + <li>Warnings</li> + <li>XHR</li> + <li>Log</li> + </ul> + </li> + <li>CSS + <ul> + <li>Errors</li> + <li>Warnings</li> + <li>Reflows</li> + </ul> + </li> + <li>JS + <ul> + <li>Errors</li> + <li>Warnings</li> + </ul> + </li> + <li>Security + <ul> + <li>Errors</li> + <li>Warnings</li> + </ul> + </li> + <li>Logging + <ul> + <li>Errors</li> + <li>Warnings</li> + <li>Info</li> + <li>Log</li> + <li>Shared Workers</li> + <li>Service Workers</li> + <li>Add-on or Chrome Workers</li> + </ul> + </li> + <li>Server + <ul> + <li>Errors</li> + <li>Warnings</li> + <li>info</li> + <li>Log</li> + </ul> + </li> +</ul> + +<h3 id="Filtering_by_text">Filtering by text</h3> + +<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p> + +<h3 id="Clearing_the_log">Clearing the log</h3> + +<p>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.</p> 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 +--- +<p>Веб-консоль:</p> + +<ol> + <li><span class="tlid-translation translation"><span title="">Реєструє інформацію, пов'язану з веб-сторінкою: мережні запити, JavaScript, CSS, помилки та попередження безпеки, а також повідомлення про помилки, попередження та інформаційні повідомлення, явно ввімкнені за допомогою коду JavaScript, запущеного в контексті сторінки</span></span></li> + <li><span class="tlid-translation translation"><span title="">Дозволяє взаємодіяти з веб-сторінкою, виконуючи вирази JavaScript у контексті сторінки</span></span></li> +</ol> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/uk/docs/Tools/Web_Console/Opening_the_Web_Console">Відкриття Веб-консолі</a></dt> + <dd>Як запустити Веб-консоль.</dd> + <dt><a href="/uk/docs/Tools/Web_Console/The_command_line_interpreter">Інтерпретатор командного рядку</a></dt> + <dd>Як взаємодіяти з документом, використовуючи Консоль.</dd> + <dt><a href="/uk/docs/Tools/Web_Console/Split_console">Розділенння консолі </a></dt> + <dd>Використання Консолі разом з іншими інструментами.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/uk/docs/Tools/Web_Console/Console_messages">Повідомлення консолі</a></dt> + <dd>Докладна інформація про реєетрацію повідомлень Консолі.</dd> + <dt><a href="/uk/docs/Tools/Web_Console/Rich_output">Збагачення виведення</a></dt> + <dd><span class="tlid-translation translation"><span title="">Переглядайте та взаємодійте з об'єктами, що реєструються Консоллю</span></span>.</dd> + <dt><a href="/uk/docs/Tools/Web_Console/Keyboard_shortcuts">Комбінації клавіш</a></dt> + <dd>Посилання на довідку.</dd> +</dl> +</div> +</div> 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 +--- +<div>{{ToolsSidebar}}</div> + +<div><span class="tlid-translation translation"><span title="">Консоль можна використовувати поряд з іншими інструментами.</span> <span title="">Поки ви перебуваєте в іншому інструменті на панелі інструментів, просто натисніть клавішу </span></span> <kbd>Esc</kbd> <span class="tlid-translation translation"><span title="">або виберіть команду "Показати розділену консоль" в меню <a href="/uk/docs/Tools_Toolbox#Toolbar">панелі інструментів</a>.</span> <span title="">Панель інструментів тепер з'явиться розділеною частиною, на ній буде розміщено оригінальний інструмент і веб-консоль.</span></span></div> + +<p> + </p><p>Ви можете закрити розділення консолі повторним натисканням <kbd>Esc</kbd>, або вибравши команду меню "Сховати розділення консолі".</p> +<p></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16106/split-console.png" style="border-style: solid; border-width: 1px; height: 77px; width: 350px;"></p> + +<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> + +<p><span class="tlid-translation translation"><span title="">В якості скорочення назви елемента, вибраного в інспекторі, </span></span>як завжди використовується <code>$0</code><span class="tlid-translation translation"><span title="">:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16105/split-console-debugger.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"><span class="tlid-translation translation"><span title="">Якщо Ви використовуєте розділену консоль з відладчиком, область видимості консолі - це поточний кадр стека.</span> <span title="">Отже, якщо Ви потрапили до точки переривання у функції, область видимості буде визначатися цією функцією.</span> <span title="">Ви отримаєте автозаповнення для об'єктів, означених у функції, і можете легко змінювати їх на льоту:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16107/split-console-show-debug.png" style="display: block; height: 805px; margin-left: auto; margin-right: auto; width: 902px;"></p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p>Для відкриття Веб-консолі:</p> + +<ul> + <li>виберіть "Веб-консоль" з під-меню "Веб-розробка" меню Firefox (або з меню Інструменти, якщо активоване відображення панелі меню або в Mac OS X)</li> + <li>або натисніть комбінацію клавіш <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> в OS X)</li> +</ul> + +<p><span class="tlid-translation translation"><span title="">В нижній частині вікна веб-переглядача з'явиться <a href="https://developer.mozilla.org/uk/docs/Tools/DevTools_Window">Панель інструментів</a> з активованою веб-консоллю (на панелі інструментів DevTools вона просто називається "консоль"):</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16191/console_63.png" style="border: 1px solid black; display: block; margin: 0 auto; width: 845px;"></p> + +<p>Інтерфейс Веб-консолі розділяється на три горизонтальні секції:</p> + +<ul> + <li><a href="/uk/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">Панель інструментів</a>: <span class="tlid-translation translation"><span title="">вздовж верхньої частини знаходиться панель інструментів, що містить дві кнопки.</span> <span title="">Натисніть кнопку "сміття", щоб очистити вміст консолі.</span> <span title="">Натисніть піктограму "воронка", щоб відфільтрувати повідомлення, які відображаються в консолі</span></span> </li> + <li><a href="/uk/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Командний рядок</a>: <span class="tlid-translation translation"><span title="">командний рядок починається з подвійних кутових дужок (>>).</span> <span title="">Використовуйте його для введення виразів JavaScript</span></span></li> + <li><a href="/uk/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Панель відображення повідомлення</a>: <span class="tlid-translation translation"><span title="">тут відображаються </span></span> <span class="tlid-translation translation"><span title="">повідомлення, що генеруються кодом на сторінці та команди, введені в командному рядку</span></span></li> +</ul> |