diff options
Diffstat (limited to 'files/uk/tools/web_console/console_messages/index.html')
| -rw-r--r-- | files/uk/tools/web_console/console_messages/index.html | 386 |
1 files changed, 386 insertions, 0 deletions
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..ad9989244b --- /dev/null +++ b/files/uk/tools/web_console/console_messages/index.html @@ -0,0 +1,386 @@ +--- +title: Повідомлення консолі +slug: Tools/Web_Console/Console_messages +translation_of: Tools/Web_Console/Console_messages +original_slug: Інструменти/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> |