diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/ru/tools | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/ru/tools')
62 files changed, 8018 insertions, 0 deletions
diff --git a/files/ru/tools/3d_view/index.html b/files/ru/tools/3d_view/index.html new file mode 100644 index 0000000000..97fdf65a90 --- /dev/null +++ b/files/ru/tools/3d_view/index.html @@ -0,0 +1,107 @@ +--- +title: 3D view +slug: Tools/3D_View +tags: + - 3D + - HTML +translation_of: Tools/3D_View +--- +<div>{{ToolsSidebar}}</div> + +<div class="warning"> +<p>Начиная с Firefox 47, "3D view" больше недоступен.</p> +</div> + +<p>Когда вы нажимаете на кнопку 3D просмотра, страница переходит в 3D режим. В нем вы можете видетьструктуру блоков HTML, когда вложеные блоки находятся выше родительских.</p> + +<p>Этот режим позволяет визуализировать структуру вашего контента.</p> + +<p><img alt="" class="default internal" src="/files/3625/3dview.png"></p> + +<p><span id="result_box" lang="ru"><span>Нажимая и перетаскивая представление, вы можете поворачивать и переориентировать трехмерную презентацию иерархии DOM на своей странице, чтобы увидеть ее под разными углами, чтобы лучше изучить ее структуру.</span> <span>Элементы вне экрана становятся видимыми, чтобы вы могли видеть, где находятся ваши элементы по отношению к видимому контенту.</span> <span>Вы можете щелкнуть по элементам, чтобы увидеть их HTML на панели HTML или на панели «Стиль».</span> <span>И наоборот, вы можете щелкнуть элементы на панели поиска, чтобы изменить, какой элемент выбран в 3D-представлении.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Если вы не видите кнопку 3D в инспекторе страницы, возможно, что ваш графический драйвер нуждается в обновлении.</span> <span>Дополнительную информацию см. На странице драйверов.</span></span></p> + +<h2 id="Управление">Управление</h2> + +<p><span id="result_box" lang="ru"><span>Для 3D-просмотра доступны горячие клавиши.</span></span></p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Function</td> + <td class="header">Keyboard</td> + <td class="header">Mouse</td> + </tr> + <tr> + <td>Zoom in/out</td> + <td><kbd>+</kbd> / <kbd>-</kbd></td> + <td>Scroll wheel up/down</td> + </tr> + <tr> + <td>Rotate left/right</td> + <td><kbd>a</kbd> / <kbd>d</kbd></td> + <td>Mouse left/right</td> + </tr> + <tr> + <td>Rotate up/down</td> + <td><kbd>w</kbd> / <kbd>s</kbd></td> + <td>Mouse up/down</td> + </tr> + <tr> + <td>Pan left/right</td> + <td><kbd>←</kbd> / <kbd>→</kbd></td> + <td>Mouse left/right</td> + </tr> + <tr> + <td>Pan up/down</td> + <td><kbd>↑</kbd> / <kbd>↓</kbd></td> + <td>Mouse up/down</td> + </tr> + <tr> + <td>Reset zoom level</td> + <td><kbd>0</kbd></td> + <td>Resets the zoom level to the default</td> + </tr> + <tr> + <td>Focus on selected node</td> + <td><kbd>f</kbd></td> + <td>Makes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td>Reset view</td> + <td><kbd>r</kbd></td> + <td>Resets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}</td> + </tr> + <tr> + <td>Hide current node</td> + <td><kbd>x</kbd></td> + <td>Makes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured {{ fx_minversion_inline("12.0") }}</td> + </tr> + </tbody> +</table> + +<h2 id="Варианты_использования">Варианты использования</h2> + +<p><span id="result_box" lang="ru"><span>Существует множество способов использования 3D-вида:</span></span></p> + +<ul> + <li><span id="result_box" lang="ru"><span>Если вы накосячили с HTML-макетом, просмотр 3D-вида поможет найти, где вы налажали.</span> <span>Часто проблемы структур вызваны неправильным вложением содержимого.</span> <span>Это будет более очевидным при использовании 3D-вида.</span></span></li> + <li><span id="result_box" lang="ru"><span>Если контент не отображается, вы можете выяснить, почему;</span> <span>поскольку 3D-вид позволяет вам уменьшить масштаб, чтобы увидеть элементы, которые визуализируются за пределами видимой области страницы.</span></span></li> + <li><span id="result_box" lang="ru"><span>Вы можете посмотреть, как структурирована ваша страница, чтобы понять, стоит ли ее оптимизировать.</span></span></li> + <li><strong>Ну и ... это шщ-и-и-и-и-и-карно</strong>.</li> +</ul> + +<h2 id="Смотреть_так_же">Смотреть так же:</h2> + +<ul> + <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> + <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> + <li> + <div class="threecolumns"> + <p><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></p> + </div> + </li> + <li><a href="/en/Tools" title="Tools">Tools</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li> +</ul> diff --git a/files/ru/tools/about_colon_debugging/index.html b/files/ru/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..2fce1108fe --- /dev/null +++ b/files/ru/tools/about_colon_debugging/index.html @@ -0,0 +1,195 @@ +--- +title: 'about:debugging' +slug: 'Tools/about:debugging' +translation_of: 'Tools/about:debugging' +--- +<div>{{ToolsSidebar}}</div><div style="padding-bottom: 30px;"><span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_0">Страница about: debugging предоставляет одно место, из которого вы можете прикрепить Firefox Developer Tools к ряду целей отладки.</span> <span class="s3gt_translate_tooltip_variant" id="s3gt_translate_tooltip_variant_to_id_1">В настоящий момент он поддерживает два основных типа целей: перезагружаемые надстройки и рабочие.</span></div> + +<h2 id="Как_открыть_страницу_aboutdebugging">Как открыть страницу about:debugging?</h2> + +<p>Есть несколько способов открыть страницу about:debugging:</p> + +<ul> + <li>Введите "about:debugging" в строке URL Firefox .</li> + <li>Новое в Firefox 47: in the Tools > Web Developer menu, click "Service Workers".</li> + <li>Новое в Firefox 47: кликни по иконке гаечного ключа (<img alt="" src="https://mdn.mozillademos.org/files/12710/wrench-icon.png" style="height: 21px; width: 21px;">), который находится на главной панели инструментов или под меню Hamburger (<img alt="" src="https://mdn.mozillademos.org/files/12712/hamburger.png" style="height: 20px; width: 22px;">), затем выбери "Service Workers".</li> +</ul> + +<p>Когда about:debugging открывается, с левой стороны будет видна боковая панель , позволяющая переключаться между двумя основными видами : один вид для "add-ons" и второй для "workers".</p> + +<h2 id="Add-ons">Add-ons</h2> + +<div class="note"> +<p>The Add-ons section in about:debugging only supports restartless add-ons, including <a href="/en-US/Add-ons/Bootstrapped_extensions">basic bootstrapped extensions</a>, <a href="/en-US/Add-ons/SDK">Add-on SDK add-ons</a>, and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">WebExtensions</a>.</p> +</div> + +<p>This page enables you to do two things:</p> + +<ul> + <li>Load an add-on temporarily from disk</li> + <li>Connect the <a href="/en-US/Add-ons/Add-on_Debugger">Add-on Debugger</a> to any restartless add-ons</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13134/about-debugging-addons.png" style="display: block; height: 535px; margin-left: auto; margin-right: auto; width: 784px;"></p> + +<h3 id="Connecting_the_Add-on_Debugger">Connecting the Add-on Debugger</h3> + +<div class="note"> +<p>Note that at the moment, it's recommended that you use the Browser Toolbox, not the Add-on Debugger, for debugging WebExtensions. See <a href="/en-US/Add-ons/WebExtensions/Debugging">Debugging WebExtensions</a> for all the details.</p> +</div> + +<p>The Add-ons page in about:debugging lists all restartless add-ons that are currently installed (note that this list may include add-ons that came preinstalled with your Firefox). Next to each entry is a button labeled "Debug".</p> + +<p>If the "Debug" button is disabled, check the "Enable add-on debugging" box.</p> + +<p>If you click "Debug", you'll see a dialog asking you to accept an incoming connection. Click "OK", and the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> will start in a separate window. Note that sometimes the debugger window is hidden by the main Firefox window.</p> + +<p>{{EmbedYouTube("tGGcA3bT3VA")}}</p> + +<p>See the page on the <a href="/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">Add-on Debugger</a> for all the things you can do with this tool.</p> + +<div class="note"> +<p><a id="Enabling_add-on_debugging" name="Enabling_add-on_debugging">The "Enable add-on debugging" button</a> works by turning on the <code>devtools.chrome.enabled</code> and <code>devtools.debugger.remote-enabled</code> preferences. Both preferences must be true to enable add-on debugging. Checking the box sets both preferences to <code>true</code>, and unchecking it sets them both to <code>false</code>.</p> + +<p>You can also modify the preferences directly in about:config, or by checking "Enable browser chrome and add-on debugging toolboxes" and "Enable remote debugging" in the <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p> +</div> + +<h3 id="Loading_a_temporary_add-on">Loading a temporary add-on</h3> + +<p>With the "Load Temporary Add-on" button you can load any sort of restartless add-on temporarily, from a directory on disk. Just click the button, navigate to the directory containing the add-on's file, and select any file in that directory.</p> + +<p>You don't have to package or sign the add-on. The add-on will stay installed until you restart Firefox.</p> + +<p>{{EmbedYouTube("sAM78GU4P34")}}</p> + +<p>The big advantages of this method, compared with installing an add-on from an XPI, are:</p> + +<ul> + <li>you don't have to rebuild an XPI and reinstall when you change the add-on's code</li> + <li>you can load an add-on without signing it and without needing to disable signing.</li> +</ul> + +<h3 id="Updating_a_temporary_add-on">Updating a temporary add-on</h3> + +<p>If you install the add-on in this way, what happens when you update the add-on's files?</p> + +<h4 id="Before_Firefox_48">Before Firefox 48</h4> + +<ul> + <li>If you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> + <li>If you change files that stay loaded the whole time, like <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a>, then you can pick up changes you've made by disabling and then re-enabling the add-on in the about:addons page.</li> + <li>If you change files that are only parsed at install time, like the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest.json</a> file, you'll need to restart Firefox, then load the add-on again.</li> +</ul> + +<div class="note"> +<p>Note that before Firefox 48, loading the add-on again by pressing "Load Temporary Add-on" without restarting Firefox <em>does not work</em>.</p> +</div> + +<h4 id="Firefox_48_onwards">Firefox 48 onwards</h4> + +<ul> +</ul> + +<p>From Firefox 48 onwards:</p> + +<ul> + <li>as before: if you change files that are loaded on demand, like <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts</a> or <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">popups</a>, then changes you make are picked up automatically, and you'll see them the next time the content script is loaded or the popup is shown.</li> + <li>there's a better way to handle the other cases: click the "Reload" button next to the "Debug" button. This does what it says: + <ul> + <li>reloading any persistent scripts, such as <a href="/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> + <li>parsing the manifest.json file again, so changes to <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/permissions">permissions</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> or any other keys will take effect.</li> + </ul> + </li> +</ul> + +<div class="note"> +<p>Note that in Firefox 49 onwards, the Reload button is only enabled for temporary add-ons. It will be disabled for all other add-ons.</p> +</div> + +<h2 id="Tabs">Tabs</h2> + +<p>In Firefox 49 onwards, a Tabs page is available in <code>about:debugging</code> — this provides a complete list of all the debuggable tabs open in the current Firefox instance.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13617/about-debugging-tabs.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> + +<p>Each tab entry has a <em>Debug</em> button next to it — when clicked, this will open up a toolbox specific to that tab, allowing you to debug that tab's contents.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13619/about-debugging-tabs-toolbox.png" style="display: block; height: 628px; margin: 0px auto; width: 900px;"></p> + +<div class="note"> +<p>Note that this feature isn't that immediately useful to debugging desktop tabs — you can open up a toolbox to debug a tab easily enough already — but this will become far more useful when <code>about:debugging</code> starts to support remote debugging, and this page can begin to list tabs available for debugging on mobile device browsers, simulators, etc. See {{bug(1212802)}} for the latest on this work.</p> +</div> + +<h2 id="Workers">Workers</h2> + +<p>The Workers page shows your workers, categorised as follows:</p> + +<ul> + <li>All registered <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a></li> + <li>All registered <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a></li> + <li>Other workers, including <a href="/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> and <a href="/en-US/docs/Web/API/Web_Workers_API/Using_web_workers#Dedicated_workers">Dedicated Workers</a></li> +</ul> + +<p>You can connect the developer tools to each worker, and send push notifications to service workers.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13058/about-debugging-workers.png" style="display: block; height: 642px; margin-left: auto; margin-right: auto; width: 784px;"></p> + +<div class="note"> +<p>This section uses a simple ServiceWorker demo, hosted at <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> +</div> + +<h3 id="Debugging_workers">Debugging workers</h3> + +<p>For a service worker, if it is already running, you'll see two buttons next to it, labeled "Debug" and "Push". If it's not already running, you'll see one button, labeled "Start": click this to start the service worker.</p> + +<p>Clicking "Debug" connects the JavaScript Debugger and Console to this worker. You can set breakpoints, step through code, watch variables, evaluate code, and so on:</p> + +<p>{{EmbedYouTube("Z8ax79sHWDU")}}</p> + +<h3 id="Registering_workers">Registering workers</h3> + +<p>At first, you won't see any workers listed under <em>Service Workers</em> or <em>Shared Workers</em>. As soon as a worker is registered, the listing is updated:</p> + +<p>{{EmbedYouTube("wy4kyWFhFF4")}}</p> + +<div class="note"> +<p>Before Firefox 47, service workers were only shown when they were actually running.</p> +</div> + +<h3 id="Unregistering_service_workers">Unregistering service workers</h3> + +<div class="geckoVersionNote"> +<p>New in Firefox 48.</p> +</div> + +<p>Starting in Firefox 48, you'll see a link named "unregister" next to each registered service worker:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13056/unregister-sw.png" style="display: block; margin-left: auto; margin-right: auto; width: 700px;"></p> + +<p>Click the link to unregister the service worker.</p> + +<h3 id="Sending_push_events_to_service_workers">Sending push events to service workers</h3> + +<div class="note"> +<p>Sending push events in about:debugging is new in Firefox 47.</p> +</div> + +<p>To debug push notifications, you can set a breakpoint in the <a href="/en-US/docs/Web/API/PushEvent">push event</a> listener. However, you can also debug push notifications locally, without needing the server. Just click the "Push" button to send a push event to the service worker:</p> + +<p>{{EmbedYouTube("62SkLyA-Zno")}}</p> + +<h3 id="Service_workers_not_compatible">Service workers not compatible</h3> + +<div> +<p>In Firefox 49+, a warning message will be displayed in the Service Workers section of the Workers page if service workers are incompatible with the current browser configuration, and therefore cannot be used or debugged.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13613/sw-not-compatible.png" style="display: block; height: 705px; margin: 0px auto; width: 1011px;"></p> +</div> + +<p>Service workers can be unavailable for several reasons:</p> + +<ul> + <li>If you are using a Private Browsing window.</li> + <li>If your History preference is set to "Never Remember History" or "Always use private browsing mode".</li> + <li>If the <code>dom.serviceWorkers.enable</code> preference is set to false in <code>about:config</code>.</li> +</ul> diff --git a/files/ru/tools/add-ons/dom_inspector/index.html b/files/ru/tools/add-ons/dom_inspector/index.html new file mode 100644 index 0000000000..0e2c41dc29 --- /dev/null +++ b/files/ru/tools/add-ons/dom_inspector/index.html @@ -0,0 +1,57 @@ +--- +title: DOM Inspector +slug: Tools/Add-ons/DOM_Inspector +translation_of: Tools/Add-ons/DOM_Inspector +--- +<div>{{ToolsSidebar}}</div><p><strong>Инспектор DOM</strong> (также известный как <strong>DOMi</strong>) — инструмент для разработчиков, используемый для проверки, просмотра и редактирования <a href="/en/DOM" title="en/DOM">объектной модели документа</a><a href="/en-US/docs/"> </a>- обычных веб-страниц или <a href="/en/XUL" title="en/XUL"> XUL</a> windows. По иерархии DOM можно перемещаться с помощью двух окон, отображающих целый ряд различных представлений документа и всех вложенных в него узлов.</p> + +<div class="note"> +<p>Этот инструмент является дополнением для приложений, основанных на XUL, таких как Firefox и Thunderbird. Если вы ищете инспектор DOM, который встроен в Firefox, обратитесь к разделу документации <a href="/ru/docs/Tools/Page_Inspector">Инспектор страницы</a>.</p> +</div> + +<h2 id="Documentation" name="Documentation">Документация</h2> + +<dl> + <dt><a href="/en/DOM_Inspector/Introduction_to_DOM_Inspector" title="en/DOM_Inspector/Introduction_to_DOM_Inspector">Введение в инспектор DOM</a></dt> + <dd>Руководствоваться учебник, который поможет вам начать работу с DOM Inspector.</dd> +</dl> + +<dl> + <dt><a href="/en/DOM_Inspector/DOM_Inspector_FAQ" title="en/DOM_Inspector/DOM_Inspector_FAQ">FAQ инспектор DOM</a></dt> + <dd>Ответы на общие вопросы по DOM Inspector.</dd> +</dl> + +<dl> + <dt><a class="external" href="http://kb.mozillazine.org/DOM_Inspector">страницы на MozillaZine</a></dt> + <dd>Более подробную информацию о DOM Inspector.</dd> + <dt><a href="http://asurkov.blogspot.com/2013/02/build-dom-inspector.html">как скомпилировать инспектор DOM</a></dt> + <dd>Сообщение в блоге на здание инспектор DOM от источника.</dd> +</dl> + +<h2 id="Getting_DOM_Inspector" name="Getting_DOM_Inspector">Получение инспектор DOM</h2> + +<dl> + <dt>Firefox и Thunderbird</dt> + <dd>Вы можете скачать и установить <a class="link-https" href="https://addons.mozilla.org/en-US/firefox/addon/6622" title="https://addons.mozilla.org/en-US/firefox/addon/6622"> Инспектор DOM</a> на веб-сайте AMO. (Thunderbird пользователей, использующих AMO в Firefox следует сохранить ссылку установки, или посетить страницу <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/6622" title="https://addons.mozilla.org/en-US/thunderbird/addon/6622"> Инспектор DOM для Thunderbird</a>).</dd> +</dl> + +<dl> + <dt>Thunderbird 2</dt> + <dd><a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/addon/1806">Инспектор DOM для Thunderbird 2</a> доступен из <a class="link-https" href="https://addons.mozilla.org/en-US/thunderbird/"> Дополнений для Thunderbird</a>. Или настройте Thunderbird сами со следующими параметрами:</dd> +</dl> + +<pre><code>ac_add_options --enable-extensions="default inspector" +ac_add_options --enable-inspector-apis</code></pre> + +<dl> + <dt>Mozilla Suite и SeaMonkey</dt> + <dd>Выберите Инструменты > Веб-разработка > Инспектор DOM. Вы также можете установить боковую панель через Правка > Настройки > Дополнительно > Инспектор DOM, затем просто откройте панель инспектора DOM и посетите любой веб-сайт.</dd> +</dl> + +<h2 id="Report_a_bug_in_DOM_Inspector" name="Report_a_bug_in_DOM_Inspector">Отчет об ошибке в DOM Inspector</h2> + +<p>Использовать удобно именованный раздел <a href="https://bugzilla.mozilla.org/enter_bug.cgi?format=__default__&product=Other%20Applications&component=DOM%20Inspector">компонент «Инспектор DOM» в Bugzilla</a>.</p> + +<p>Чтобы узнать о тех, кто знает <a href="https://hg.mozilla.org/dom-inspector" title="https://hg.mozilla.org/dom-inspector"> код DOM Inspector</a> и где он живет, см. <a class="link-https" href="https://wiki.mozilla.org/Modules/All#DOM_Inspector" title="https://wiki.mozilla.org/Modules/All#DOM_Inspector"> <span class="external"> листинг модуля DOM Inspector</span></a>.</p> + +<p>{{ languages( { "es": "es/DOM_Inspector", "it": "it/DOM_Inspector", "fr": "fr/Inspecteur_DOM", "ja": "ja/DOM_Inspector", "ko": "ko/DOM_Inspector", "pl": "pl/Inspektor_DOM" } ) }}</p> diff --git a/files/ru/tools/add-ons/index.html b/files/ru/tools/add-ons/index.html new file mode 100644 index 0000000000..ab408aeb18 --- /dev/null +++ b/files/ru/tools/add-ons/index.html @@ -0,0 +1,15 @@ +--- +title: Add-ons +slug: Tools/Add-ons +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Add-ons +--- +<div>{{ToolsSidebar}}</div><p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p> + +<dl> + <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt> + <dd>Examine the data exchanged in a WebSocket connection.</dd> + <dd> </dd> +</dl> diff --git a/files/ru/tools/application/index.html b/files/ru/tools/application/index.html new file mode 100644 index 0000000000..357953fe63 --- /dev/null +++ b/files/ru/tools/application/index.html @@ -0,0 +1,37 @@ +--- +title: Приложение +slug: Tools/Application +tags: + - Firefox + - Manifests + - Service Workers + - Отладка + - Приложение + - инструменты разработчика +translation_of: Tools/Application +--- +<div>{{ToolsSidebar}}</div> + +<p><strong>Панель приложений</strong> предоставляет инструменты для проверки и отладки современных веб-приложений (также известных как <a href="https://wiki.developer.mozilla.org/ru/docs/%D0%A1%D0%BB%D0%BE%D0%B2%D0%B0%D1%80%D1%8C/Progressive_web_apps"> Прогрессивные веб приложения</a>). Это включает в себя проверку <a href="/ru/docs/Web/API/Service_Worker_API">service worker API</a> и <a href="/ru/docs/Web/Manifest">манифесты веб-приложений</a>.</p> + +<p><img alt="the firefox application panel zoomed out view showing a picture of two artic foxes" src="https://mdn.mozillademos.org/files/17308/sw-registered.jpg" style="border-style: solid; border-width: 1px; height: 667px; width: 900px;"></p> + +<h2 id="Доступ_к_Панели_приложений">Доступ к Панели приложений</h2> + +<p>Панель приложений доступна в стандартном меню вкладки <em>Инструменты разработчика</em> в разделе <em>Приложение</em> в Firefox 79+. Если вы не видите его там, вы можете включить его, перейдя в меню "три точки" и выбрав пункт Настройки (также доступный нажатием клавиши F1), а затем поставив флажок <em>Приложение</em> в разделе Инструменты разработчика по умолчанию.</p> + +<h2 id="Найти_пример">Найти пример</h2> + +<p>Если вы хотите протестировать эту функциональность и у вас нет удобного PWA, вы можете взять один из наших простых примеров для использования:</p> + +<ul> + <li>Добавить на рабочий стол демо: показывает фотографии лис (<a href="https://github.com/mdn/pwa-examples/tree/master/a2hs">исходный код</a> | <a href="https://mdn.github.io/pwa-examples/a2hs/">live-версия</a>)</li> + <li>Js13kpwa демо: Показывает информацию о заявках на ежегодный конкурс JS13K (<a href="https://github.com/mdn/pwa-examples/tree/master/js13kpwa">исходный код</a> | <a href="https://mdn.github.io/pwa-examples/js13kpwa/">live-версия</a>)</li> +</ul> + +<h2 id="Инструкции">Инструкции</h2> + +<ul> + <li><a href="/en-US/docs/Tools/Application/Service_workers">Debug service workers</a></li> + <li><a href="/en-US/docs/Tools/Application/Manifests">Inspect web app manifests</a></li> +</ul> diff --git a/files/ru/tools/debugger/how_to/index.html b/files/ru/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..3e572d8903 --- /dev/null +++ b/files/ru/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +<div>{{ToolsSidebar}}</div><p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p> + +<p>{{ ListSubpages () }}</p> diff --git a/files/ru/tools/debugger/how_to/отладка_кода_внутри_eval/index.html b/files/ru/tools/debugger/how_to/отладка_кода_внутри_eval/index.html new file mode 100644 index 0000000000..29224f2590 --- /dev/null +++ b/files/ru/tools/debugger/how_to/отладка_кода_внутри_eval/index.html @@ -0,0 +1,36 @@ +--- +title: Отладка кода внутри eval +slug: Tools/Debugger/How_to/Отладка_кода_внутри_eval +tags: + - Отладка +translation_of: Tools/Debugger/How_to/Debug_eval_sources +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>Доступно, начиная с Firefox 36.</p> +</div> + +<p><code><font face="Open Sans, Arial, sans-serif">В Firefox версии 36 или старше доступна отладка кода, выполняемого с помощью </font><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/eval">eval()</a></code> или конструктора <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function"><code>Function</code></a>.</p> + +<p>Чтобы воспользоваться этой возможностью, используйте директиву <code>//# sourceURL </code>: </p> + +<pre class="brush: js">var button = document.getElementById("clickme"); +button.addEventListener("click", evalFoo, false); + +var script = "function foo() {" + + " console.log('called foo');" + + "}" + + "foo();//# sourceURL=my-foo.js"; + +function evalFoo() { + eval(script); +}</pre> + +<p>Такой код присвоит исполняемому скрипту имя "my-foo.js".</p> + +<p>Как только скрипт из строки <code>script</code> будет выполнен, он станет доступен в дебаггере как отдельный источник, а также будет доступен к отладке, как код из любого другого источника. Кроме этого, появится возможность, <a href="/ru/docs/Tools/Debugger/How_to/Работа_с_минифицированным_кодом">представить код в удобочитаемом виде</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9781/debug-eval-source-url.png" style="display: block; margin-left: auto; margin-right: auto; width: 836px;"></p> + +<p>Это имя также будет использоваться в стеке вызовов функций, доступном в <a href="/ru/docs/Tools/Web_Console#Error_messages">веб-консоли</a>.</p> + +<p>Начиная с Firefox 40, оператор <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/debugger">debugger;</a></code> также останавливает дебаггер в безымянных источниках выполнения.</p> diff --git a/files/ru/tools/debugger/how_to/работа_с_минифицированным_кодом/index.html b/files/ru/tools/debugger/how_to/работа_с_минифицированным_кодом/index.html new file mode 100644 index 0000000000..e224f9d591 --- /dev/null +++ b/files/ru/tools/debugger/how_to/работа_с_минифицированным_кодом/index.html @@ -0,0 +1,10 @@ +--- +title: Работа с минифицированным кодом +slug: Tools/Debugger/How_to/Работа_с_минифицированным_кодом +translation_of: Tools/Debugger/How_to/Pretty-print_a_minified_file +--- +<div>{{ToolsSidebar}}</div><p>Чтобы представить минифицированный код в удобочитаемом виде, откройте его, а затем нажмите на иконку с фигурными скобками:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7059/21-pp-before.png" style="display: block; margin-left: auto; margin-right: auto;">Файл будет преобразован в более комфортное человеческому глазу представление, благодаря добавлению отсутствующих отступов:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7061/22-pp-after.png" style="display: block; margin-left: auto; margin-right: auto;">Вы можете настроить отладчик на автоматическое представление обнаруженных минифицированных исходников в удобочитаемом виде в <a href="/ru/docs/Tools/Debugger/Settings">настройках отладчика</a>.</p> diff --git a/files/ru/tools/debugger/index.html b/files/ru/tools/debugger/index.html new file mode 100644 index 0000000000..2ff61ab577 --- /dev/null +++ b/files/ru/tools/debugger/index.html @@ -0,0 +1,73 @@ +--- +title: Отладчик +slug: Tools/Debugger +tags: + - Debugger + - Debugging + - Dev Tools + - Firefox OS + - Tools + - TopicStub + - 'l10n:priority' +translation_of: Tools/Debugger +--- +<div>{{ToolsSidebar}}</div><p>Отладчик<span id="result_box" lang="ru"><span> JavaScript</span> <span class="hps">позволяет</span> пройтись по <span class="hps">JavaScript-коду,</span> <span class="hps">исследовать и</span> <span class="hps">изменить</span> <span class="hps">его состояние</span><span>, что поможет выявить </span><span class="hps">ошибки в программе.</span></span></p> + +<p><span id="result_box" lang="ru"><span class="hps">Вы можете использовать его</span> <span class="hps">для отладки</span> <span class="hps">кода, выполняемого</span> <span class="hps">локально в</span> <span class="hps">Firefox</span> <span class="hps">или работающем </span><span class="hps">удаленно,</span> <span class="hps">например, в</span> <span class="hps">устройстве</span> <span class="hps">Firefox</span> <span class="hps">OS</span> <span class="hps">или</span> <span class="hps">Firefox</span> <span class="hps">на</span> <span class="hps">Android.</span> Изучите </span><a href="/en-US/docs/Tools/Remote_Debugging">Отладка удалённых скриптов </a><span id="result_box" lang="ru"><span class="hps">чтобы узнать, как</span> <span class="hps">подключить к ним</span> <span class="hps">отладчик</span><span>.</span></span></p> + +<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> + +<hr> +<h2 id="Пользовательский_интерфейс"><span class="short_text" id="result_box" lang="ru"><span class="hps">Пользовательский интерфейс</span> </span></h2> + +<p><span class="short_text" id="result_box" lang="ru"><span class="hps">Доступ к </span><span class="hps">отладчику:</span></span> <a href="/en-US/docs/Tools/Debugger/UI_Tour">quick tour of the UI</a>.</p> + +<hr> +<h2 id="Как">Как</h2> + +<p><span id="result_box" lang="ru"><span class="hps">Чтобы узнать</span><span> о возможностях, доступных </span><span class="hps">с помощью отладчика</span><span>,</span> <span class="hps">посмотрите</span> <span class="hps">следующие</span><span class="hps"> руководства</span><span>:</span></span></p> + +<table class="standard-table" style="height: 281px; width: 608px;"> + <tbody> + <tr> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Open_the_debugger">Open the debugger</a></td> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">Search and filter</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_breakpoint">Set a breakpoint</a></td> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">Set a conditional breakpoint</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Disable_breakpoints">Disable breakpoints</a></td> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Examine,_modify,_and_watch_variables">Examine, modify, and watch variables</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Step_through_code">Step through code</a></td> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Use a source map</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Break_on_a_DOM_event">Break on a DOM event</a></td> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Black_box_a_source">Black box a source</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Highlight_and_inspect_DOM_nodes">Highlight and inspect DOM nodes</a></td> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Debug_eval_sources">Debug eval sources</a></td> + </tr> + <tr> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Pretty-print_a_minified_file">Pretty-print a minified file</a></td> + <td><a href="/en-US/docs/Tools/Debugger/How_to/Access_debugging_in_add-ons">Access debugging in add-ons</a></td> + </tr> + </tbody> +</table> + +<hr> +<h2 id="Ссылки">Ссылки</h2> + +<div class="column-container"> +<div class="column-half"> +<ul> + <li><a href="/en-US/docs/Tools/Debugger/Keyboard_shortcuts">Keyboard shortcuts</a></li> + <li><a href="/en-US/docs/Tools/Debugger/Settings">Settings</a></li> +</ul> +</div> +</div> diff --git a/files/ru/tools/debugger/keyboard_shortcuts/index.html b/files/ru/tools/debugger/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..cc7fde5314 --- /dev/null +++ b/files/ru/tools/debugger/keyboard_shortcuts/index.html @@ -0,0 +1,16 @@ +--- +title: Комбинации клавиш отладчика +slug: Tools/Debugger/Keyboard_shortcuts +tags: + - Клавиатура + - Отладчик + - комбинации клавиш +translation_of: Tools/Debugger/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div> + +<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "debugger") }}</p> + +<h2 id="Общие_комбинации_клавиш">Общие комбинации клавиш</h2> + +<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/ru/tools/debugger/source_map_errors/index.html b/files/ru/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..40dc3098d3 --- /dev/null +++ b/files/ru/tools/debugger/source_map_errors/index.html @@ -0,0 +1,51 @@ +--- +title: Source map errors +slug: Tools/Debugger/Source_map_errors +translation_of: Tools/Debugger/Source_map_errors +--- +<p>{{ToolsSidebar}}</p> + +<p class="summary"><span id="result_box" lang="ru"><span>Исходные карты - это файлы JSON, обеспечивающие возможность связать преобразованные источники, как видно из браузера, с их исходными источниками, как написано разработчиком.</span> <span>Иногда вы можете столкнуться с проблемами, связанными с исходными картами.</span> <span>На этой странице объясняются наиболее распространенные проблемы и способы их устранения.</span></span></p> + +<div class="note"> +<p><span id="result_box" lang="ru"><span>Примечание. Если вы новичок в исходных картах, вы можете узнать больше о них в разделе </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/How_to/Use_a_source_map"><span lang="ru"><span>Use_a_source_map</span></span></a></p> +</div> + +<h2 id="Общий_отчет_об_ошибках_исходной_карты"><span class="short_text" id="result_box" lang="ru"><span>Общий отчет об ошибках исходной карты</span></span></h2> + +<p><span id="result_box" lang="ru"><span>Если вы видите проблему, на веб-консоли появится сообщение.Это сообщение покажет сообщение об ошибке, URL-адрес ресурса и URL-адрес исходной карты:</span></span></p> + +<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p> + +<p>Тут ресурс с URL говорит нам что <code>bundle.js</code> упомянут в карте исходников, и URL карты исходников говорит нам где найти данные для карты (в этом случае, относительно указанного ресурса "bundle.js.map"). Ошибка говорит нам что карта исходников не является корректным JSON-ом — т.е. мы получили некорректный файл.</p> + +<p>Есть несколько общих причин, почему карта может быть ошибочной; они подробно описаны в следующих разделах.</p> + +<h2 id="Карта_исходников_отсутствует_или_недоступна">Карта исходников отсутствует или недоступна</h2> + +<p>Ресурс карты исходников может отсутствовать, либо быть недоступным.</p> + +<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p> + +<p>Для исправления ошибки убедитесь что файл существует и доступен для браузера.</p> + +<h2 id="Некорректная_карта_исходников">Некорректная карта исходников</h2> + +<p>Карта исходников может быть некорректной - не являться JSON-файлом, или иметь некорректную структуру. Типичное сообщение об ошибке таково:</p> + +<ul> + <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li> + <li><code>Error: "version" is a required argument</code></li> +</ul> + +<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p> + +<h2 id="Оригинальный_исходник_отсутствует">Оригинальный исходник отсутствует</h2> + +<p>Оригинальный исходник может отсутствовать. Вы можете столкнуться с этим, при попытке открыть оригинальный исходник в отладчике. Сообщение об ошибке в этом случае немного отличается:</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p> + +<p>В этом случае ошибка будет также отображена во вкладке исходника в отладчике:</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p> diff --git a/files/ru/tools/eyedropper/index.html b/files/ru/tools/eyedropper/index.html new file mode 100644 index 0000000000..b03037c968 --- /dev/null +++ b/files/ru/tools/eyedropper/index.html @@ -0,0 +1,47 @@ +--- +title: Eyedropper +slug: Tools/Eyedropper +translation_of: Tools/Eyedropper +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p style="padding: 10px 0 9px 8px;">Инструмент пипетка доступен начиная с Firefox 31.</p> +</div> + +<p>Инструмент «Пипетка» позволяет получить цвет любого пикселя на странице. Он работает как увеличительное стекло, увеличивая участок страницы и позволяя точно выбрать необходимый пиксель. Под увеливаемой областью находится текстовое поле, в котором отображается выбранный цвет в соответствии с выбранной цветовой моделью, указанной в <a href="/en-US/docs/Tools_Toolbox#Inspector">Настройках</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7749/eyedropper.png" style="width: 305px; height: 204px; display: block; margin-left: auto; margin-right: auto;">Этот инструмент обычно используется:</p> + +<ul> + <li>для выбора цвета на странице и копирования его в буфер обмена</li> + <li>для изменения цвета какого-либо элемента в консоли разработчка на выбранный при помощи инструмента.</li> +</ul> + +<h2 id="Копирование_цвета_в_буфер_обмена">Копирование цвета в буфер обмена</h2> + +<p>Откройте Пипетку:</p> + +<ul> + <li>выберите пункт «Пипетка» под меню «Веб-разработка»</li> + <li>нажмите на кнопку «Пипетка» в <a href="/en-US/docs/Tools_Toolbox#Toolbar">панели инструментов</a> (однако эта опция недоступна по умолчанию: необходимо активировать её, выбрав пункт «Выбрать цвет на странице» в <a href="/en-US/docs/Tools_Toolbox#Settings">Настройках инструментов разработчиков</a>)</li> +</ul> + +<p>Двигая курсором по странице, вы увидите, что код текущего цвета изменяется. Клик мышью копирует текущий цвет в буфер обмена.</p> + +<p>{{EmbedYouTube("xf2uk6UyRB8")}}</p> + +<h2 id="Изменение_цвета_в_правилах_инспектора_страницы">Изменение цвета в правилах инспектора страницы</h2> + +<p><span id="result_box" lang="ru"><span class="hps">Напротив каждого цифрового кода цвета</span><span> <span id="result_box" lang="ru"><span class="hps">(например, #B00BCE)</span></span></span> <span class="hps">в </span><span class="hps">Инспекторе </span><span class="hps">есть</span> <span class="hps">образец этого цвета</span><span>:</span> при нажатии <span class="hps">на</span> него <span class="hps">откроется <span id="result_box" lang="ru"><span class="hps">всплывающее окно с <a href="/en-US/docs/Tools/Page_Inspector#Color_picker"><span id="result_box" lang="ru"><span class="hps"><span id="result_box" lang="ru"><span class="hps">палитрой цветов</span></span></span></span></a></span></span></span><span class="hps">.</span> </span></p> + +<p style="text-align: center;"><img alt="Палитра цветов" src="https://mdn.mozillademos.org/files/7843/colorbox.png" style="width: 330px; height: 295px;"></p> + +<p><span lang="ru"><span class="hps">Начиная с</span> <span class="hps">Firefox</span> <span class="hps">31</span><span>,</span> в этом <span class="hps">всплывающем окне также</span> будет находиться <span class="hps">иконка вызова</span> <span class="hps">пипетки</span></span>.<br> + <br> + <span lang="ru"><span class="hps">Теперь</span><span>,</span> <span class="hps">когда инструмент активен</span><span>, цвет выбранного элемента</span> <span class="hps">в Инспекторе</span><span> будет установлен таким же, какой вы выберете пипеткой</span></span><span lang="ru"><span>.</span></span></p> + +<p><br> + {{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<h2 id="Горячие_клавиши">Горячие клавиши</h2> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "eyedropper") }}</p> diff --git a/files/ru/tools/firefox_os_1.1_simulator/index.html b/files/ru/tools/firefox_os_1.1_simulator/index.html new file mode 100644 index 0000000000..57079732b6 --- /dev/null +++ b/files/ru/tools/firefox_os_1.1_simulator/index.html @@ -0,0 +1,354 @@ +--- +title: Firefox OS 1.1 Simulator +slug: Tools/Firefox_OS_1.1_Simulator +translation_of: Tools/Firefox_OS_1.1_Simulator +--- +<div>{{ToolsSidebar}}</div><div id="doc-content"> +<div class="page-content boxed"> +<div class="warning"> +<p>This page describes the "old" Firefox OS Simulator. You should only use this if you're developing apps for Firefox 1.1, and it can only be installed on Firefox 24 or Firefox 25.</p> + +<p>If you're developing apps for Firefox OS 1.2 or later, you need to <a href="/ru/Firefox_OS/Using_the_App_Manager">use the App Manager</a> instead.</p> + +<p>If you need help, try asking on the <a href="https://lists.mozilla.org/listinfo/dev-developer-tools">dev-developer-tools mailing list</a> or on <a href="irc://irc.mozilla.org/#devtools">#devtools on irc.mozilla.org</a>.</p> +</div> + +<h2 id="Summary">Summary</h2> + +<p>The Firefox OS Simulator add-on is a tool that enables you to test and debug your <a href="https://developer.mozilla.org/ru/docs/Apps" title="/ru/docs/Apps">Firefox OS app</a> on the desktop. The code-test-debug cycle is much faster with the simulator than with a real device, and of course, you don't need a real device in order to use it.</p> + +<p>Essentially, the Simulator add-on consists of:</p> + +<ul> + <li><strong>the Simulator</strong>: this includes the <a href="https://developer.mozilla.org/ru/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client" title="/ru/docs/Mozilla/Firefox_OS/Using_the_B2G_desktop_client">Firefox OS desktop client</a>, which is a version of the higher layers of <a href="https://developer.mozilla.org/ru/docs/Mozilla/Firefox_OS" title="/ru/docs/Mozilla/Firefox_OS">Firefox OS</a> that runs on your desktop. The Simulator also includes some <a href="https://developer.mozilla.org/ru/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-toolbar" title="#Simulator-toolbar">additional emulation features</a> that aren't in the standard Firefox OS desktop builds.</li> + <li><strong>the Dashboard</strong>: a tool hosted by the Firefox browser that enables you to start and stop the Simulator and to install, uninstall, and debug apps running in it. The Dashboard also helps you push apps to a real device, and checks app manifests for common problems.</li> +</ul> + +<p>The screenshot below shows a debugging session using the Simulator.</p> + +<p>The Dashboard is on the top right, running inside a Firefox tab. We've added one app, a packaged app called "Where am I?". At the top left the app is running in the Simulator. We've also connected the debugging tools, which are in the panel at the bottom. You can see that the Console pane displays messages about the app.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5513/Simulator-overview-4.0.png"></p> + +<p>This guide covers the following topics:</p> + +<ul> + <li><a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Installing" title="#Installing">how to install the Simulator add-on</a></li> + <li><a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Adding-updating-removing" title="#Adding-updating-removing">how to add, remove, and refresh apps</a></li> + <li><a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Manifest-validation" title="#Manifest-validation">manifest validation</a></li> + <li><a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Running-the-Simulator" title="#Running-the-Simulator">how to run the Simulator</a></li> + <li><a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Attaching-developer-tools" title="#Attaching-developer-tools">how to connect developer tools such as the JS debugger to apps running in the Simulator</a></li> + <li><a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-receipts" title="#Simulator-receipts">how to get test receipts for a paid app</a></li> + <li><a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Push-to-device" title="#Push-to-device">how to push apps to a connected device</a></li> + <li><a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Limitations" title="#Limitations">the limitations of the Simulator compared with a real Firefox OS device</a></li> +</ul> + +<div class="note">For a practical walkthrough that shows how to use the Simulator to debug a real web app, see the <a href="https://developer.mozilla.org/ru/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough" title="/ru/docs/Tools/Firefox_OS_Simulator/Simulator_Walkthrough">Simulator Walkthrough</a> page.</div> + +<h2 id="Installing_the_Simulator_add-on"><a name="Installing">Installing the Simulator add-on</a></h2> + +<p>The Simulator is packaged and distributed as a Firefox add-on. To install it:</p> + +<ol> + <li>Using Firefox, go to <a href="https://addons.mozilla.org/ru/firefox/addon/firefox-os-simulator/" title="https://addons.mozilla.org/ru/firefox/addon/firefox-os-simulator/">the Simulator's page on addons.mozilla.org</a>.</li> + <li>Click "Add to Firefox".</li> + <li>Once the add-on has downloaded you will be prompted to install it: click "Install Now".</li> +</ol> + +<p>Because of the size of the add-on, Firefox may freeze for several seconds while installing it, and a dialog titled "Warning: Unresponsive script" may appear. If it does, click "Continue" to wait for installation to finish. This should not occur from Firefox 27 onwards.<br> + <br> + Firefox will periodically check for newer versions of the Simulator add-on once it's installed, updating it automatically.</p> + +<p>The Dashboard opens automatically when you install the Simulator, and you can reopen it at any time by going to the "Firefox" menu (or the "Tools" menu on OS X and Linux), then "Web Developer", then "Firefox OS Simulator":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5141/simulator-open-on-windows-7.png" style="margin-right: auto; margin-left: auto; display: block;"><br> + The Dashboard is the tool you use to add your app to the Simulator and run it. Here's what it looks like: <img alt="" height="650" src="https://mdn.mozillademos.org/files/5491/dashboard-4.0.png" width="1212"></p> + +<h2 id="Adding_removing_and_refreshing_apps"><a name="Adding-updating-removing">Adding, removing and refreshing apps</a></h2> + +<h3 id="Adding_apps">Adding apps</h3> + +<p>To add a <a href="https://developer.mozilla.org/ru/docs/Apps/Packaged_apps" title="/ru/docs/Apps/Packaged_apps">packaged app</a> to the Simulator, open the Dashboard, click "Add Directory" and select the <a href="https://developer.mozilla.org/ru/docs/Apps/Manifest" title="/ru/docs/Apps/Manifest">manifest file</a> for your app.<br> + <br> + To add a hosted app, enter a URL in the textbox where it says "URL for page or manifest.webapp", then click "Add URL". If the URL points to a manifest, then that manifest will be used. If it doesn't, the Dashboard will generate a manifest for the URL, so you can add any website as an app just by entering its URL.<br> + <br> + When you add an app, the Dashboard will run a series of tests on your manifest file, checking for common problems. See the section on <a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Manifest-validation" title="#Manifest-validation">Manifest Validation</a> for details on what tests are run.</p> + +<p>The Dashboard will then automatically run your app in the Simulator unless the Manifest Validation Process discovers an error in your app.</p> + +<h3 id="Managing_apps">Managing apps</h3> + +<p>Once you have added an app, it will appear in the Manager's list of installed apps:<br> + <img alt="" src="https://mdn.mozillademos.org/files/5493/dashboard-list-apps-4.0.png"><br> + Each entry gives us the following information about the app:</p> + +<ul> + <li>its name, taken from the manifest</li> + <li>its type, which will be one of "Packaged", "Hosted", or "Generated"</li> + <li>a link to its manifest file</li> + <li>the result of manifest validation</li> +</ul> + +<p>It also gives us four commands:</p> + +<ul> + <li><strong>"Refresh":</strong> use this to update and reload the app in the Simulator after you have made changes to it. This also makes the Dashboard validate the manifest again. If you make changes to your app they will not be reflected automatically in the installed app; you will need to refresh the app to apply the changes.</li> + <li><strong>"Connect": </strong>use this to connect developer tools to the selected app. The Dashboard will start the Simulator and app if they aren't already running.</li> + <li><strong>"Remove" ("X"):</strong> use this to remove the app from the Simulator and the Dashboard. You can undo this action as long as the Dashboard tab is open.</li> + <li><strong>"Receipt":</strong> use this to test receipt verification for paid apps. After you select a type of receipt to test, the app will be reinstalled with a test receipt of the given type.</li> +</ul> + +<div class="note"> +<p><strong>Refresh App from the Simulator window</strong>: you can update and reload an app directly from the Simulator window <a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-menubar" title="#Simulator-menubar">using the menubar action or its associated shortcut</a> while the app is running.</p> +</div> + +<h3 id="Manifest_validation"><a name="Manifest-validation">Manifest validation</a></h3> + +<p>When you supply a manifest, the Manager will run some validation tests on it. It reports three categories of problems:</p> + +<ul> + <li>manifest errors: problems that will prevent your app from installing or running</li> + <li>manifest warnings: problems that may prevent your app from working properly</li> + <li>simulator-specific warnings: features your app is using that the Simulator doesn't yet support</li> +</ul> + +<p>It summarizes the problems encountered in the entry for the app; clicking on the summary provides more details.</p> + +<h4 id="Manifest_errors">Manifest errors</h4> + +<p>The Dashboard will report the following conditions as errors, meaning that you won't be able to run your app in the Simulator without fixing them:</p> + +<ul> + <li>the manifest does not include the mandatory "name" field</li> + <li>the manifest is not valid JSON</li> + <li>the app is a hosted app, but the <a href="https://developer.mozilla.org/ru/docs/Apps/Manifest#type" title="/ru/docs/Apps/Manifest#type">type</a> field in its manifest is <a href="https://developer.mozilla.org/ru/docs/Apps/Packaged_apps#Types_of_packaged_apps" title="/ru/docs/Apps/Packaged_apps#Types_of_packaged_apps">"privileged" or "certified"</a>, which are only available to packaged apps</li> + <li>common appCache errors (packaged apps can't use appCache, requests to the manifest URL return an HTTP redirect or an HTTP error status)</li> +</ul> + +<p>Here's the result of trying to add a manifest file with a missing "name":<br> + <img alt="" src="https://mdn.mozillademos.org/files/5495/dashboard-missing-name-4.0.png"></p> + +<h4 id="Manifest_warnings">Manifest warnings</h4> + +<p>The Dashboard will report the following manifest issues as warnings:</p> + +<ul> + <li>missing icons</li> + <li>the icon is less than 128 pixels: all apps submitted to the Marketplace must have at least one icon that is at least 128 pixels square</li> + <li>the <a href="https://developer.mozilla.org/ru/docs/Apps/Manifest#type" title="/ru/docs/Apps/Manifest#type">type</a> field is unrecognized</li> + <li>the manifest requests a <a href="https://developer.mozilla.org/ru/docs/Apps/Manifest#permissions" title="/ru/docs/Apps/Manifest#permissions">permission</a> that is unrecognized</li> + <li>the manifest requests a <a href="https://developer.mozilla.org/ru/docs/Apps/Manifest#permissions" title="/ru/docs/Apps/Manifest#permissions">permission</a> which will be denied</li> + <li>the manifest requests a <a href="https://developer.mozilla.org/ru/docs/Apps/Manifest#permissions" title="/ru/docs/Apps/Manifest#permissions">permission</a> for which access could not be determined</li> +</ul> + +<h4 id="Simulator-specific_warnings">Simulator-specific warnings</h4> + +<p>Finally, the Manager will emit warnings for apps that use features of Firefox OS not yet fully supported by the Simulator:</p> + +<ul> + <li>the <a href="https://developer.mozilla.org/ru/docs/Apps/Manifest#type" title="/ru/docs/Apps/Manifest#type">type</a> field is "certified", but the Simulator does not yet fully support certified apps</li> + <li>the manifest requests a <a href="https://developer.mozilla.org/ru/docs/Apps/Manifest#permissions" title="/ru/docs/Apps/Manifest#permissions">permission</a> to use an API that is <a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Unsupported-APIs" title="#Unsupported-APIs">not yet supported</a> by the Simulator</li> +</ul> + +<h2 id="Running_the_Simulator"><a name="Running-the-Simulator">Running the Simulator</a></h2> + +<p>There are two different ways the Simulator may be started:</p> + +<ul> + <li>if you add an app or click the "Refresh" or "Connect" button next to your app's entry, the Dashboard will automatically run your app in the Simulator</li> + <li>if you click the button labeled "Stopped" on the left-hand side of the Dashboard, the Simulator will boot to the Home screen and you'll need to navigate to your app</li> +</ul> + +<p>Either way, once the Simulator is running, the button labeled "Stopped" turns green and the label changes to "Running". To stop the Simulator, click this button again.<br> + <br> + The Simulator appears as a separate window, sized so the simulated screen area is 320x480 pixels, with a <a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-toolbar" title="#Simulator-toolbar">toolbar at the bottom</a> and a <a href="/ru/docs/Tools/Firefox_OS_1.1_Simulator#Simulator-menubar" title="#Simulator-menubar">menubar at the top</a> that contains some extra features:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5505/simulator-bars.png" style="margin-right: auto; margin-left: auto; display: block;"></p> + +<p>To simulate touch events you can click the mouse button and drag while holding the button down. So by clicking and dragging right-to-left from the Home Screen, you'll see the built-in apps, as well as any apps you have added:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5517/simulator-homescreen.png"></p> + +<h3 id="Simulator_toolbar"><a name="Simulator-toolbar">Simulator toolbar</a></h3> + +<p>In the bottom toolbar, from left to right, there are the <strong>Home button</strong>, the <strong>Screen Rotation button</strong>, and the <strong>Geolocation button</strong>.</p> + +<ul> + <li>The <strong>Home button</strong> takes you to the Home screen (or to the task list if you keep it pressed for a couple of seconds).</li> + <li>The <strong>Screen Rotation button</strong> switches the device between portrait and landscape orientation. This will generate the <a href="https://developer.mozilla.org/ru/docs/WebAPI/Managing_screen_orientation#Listening_orientation_change" title="/ru/docs/WebAPI/Detecting_device_orientation">orientationchange</a> event.</li> + <li>The <strong>Geolocation button</strong> triggers a dialog asking you to share your geographic location, either using your current coordinates or supplying custom coordinates; this will be made available to your app via the <a href="https://developer.mozilla.org/ru/docs/WebAPI/Using_geolocation" title="/ru/docs/WebAPI/Using_geolocation">Geolocation API</a>.</li> +</ul> + +<p><a href="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png"><img alt="" src="https://mdn.mozillademos.org/files/5511/simulator-geolocation.png" style="width: 520px; height: 309px;"></a><a href="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png"><img alt="" src="https://mdn.mozillademos.org/files/5519/simulator-screen-orientation.png" style="width: 500px; height: 297px;"></a></p> + +<h3 id="Simulator_menubar"><a name="Simulator-menubar"></a>Simulator menubar</h3> + +<p>In the top menubar, you can access some useful commands to make development more efficient:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5525/simulator-menubar.png"></p> + +<ul> + <li><strong>File -> Quit</strong> (<em>Ctrl/Cmd - Q</em>): shut down the Simulator</li> + <li><strong>App -> Refresh</strong> (<em>Ctrl/Cmd - R</em>): refresh the running app</li> +</ul> + +<p>The keyboard shortcut for the <strong>"App Refresh"</strong> command makes it possible to iteratively develop an app much like a web page:</p> + +<ul> + <li>make a change to the code (and rerun your build tool if needed, e.g., volo / yeoman / grunt)</li> + <li>type the keyboard shortcut to refresh the app running in the Simulator</li> +</ul> + +<div class="note"> +<p><strong>"Refresh App and Clear Data" hidden shortcut:</strong> sometimes it's useful to clear data that the Simulator has stored for an app, so the Simulator contains a hidden shortcut, <em>Shift - Ctrl/Cmd - R</em>, that will refresh the running app while clearing the following data:</p> + +<ul> + <li> + <p>localStorage / sessionStorage</p> + </li> + <li> + <p>cookies</p> + </li> + <li> + <p>indexedDB</p> + </li> + <li> + <p>appCache</p> + </li> +</ul> +</div> + +<h2 id="Attaching_developer_tools"><a name="Attaching-developer-tools">Attaching developer tools</a></h2> + +<p>You can attach developer tools to the Simulator to help debug your app. At the moment you can only attach the <a href="https://developer.mozilla.org/ru/docs/Tools/Debugger" title="/ru/docs/Tools/Debugger">JavaScript Debugger</a>, the <a href="https://developer.mozilla.org/ru/docs/Tools/Web_Console" title="/ru/docs/Tools/Web_Console">Web Console</a>, the <a href="https://developer.mozilla.org/ru/docs/Tools/Style_Editor" title="/ru/docs/Tools/Style_Editor">Style Editor</a>, the <a href="https://developer.mozilla.org/ru/docs/Tools/Profiler" title="/ru/docs/Tools/Profiler">Profiler</a>, and the <a href="https://developer.mozilla.org/ru/docs/Tools/Network_Monitor" title="/ru/docs/Tools/Network_Monitor">Network Monitor</a>, but we're working on adding support for more <a href="https://developer.mozilla.org/ru/docs/Tools/DevTools_Window" title="https://developer.mozilla.org/ru/docs/Tools/DevTools_Window">developer tools</a>.</p> + +<div class="geckoVersionNote"> +<p>Some of these tools are only available in Beta, Aurora, or Nightly builds of Firefox.</p> +</div> + +<p>To attach developer tools to the Simulator, click the <strong>"Connect"</strong> button for an app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5497/connect-to-app-button.png" style="margin-right: auto; margin-left: auto; display: block;"></p> + +<p>The Dashboard will then open a developer toolbox pane at the bottom of the Dashboard tab and connect it to the app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5501/simulator-devtools-connected.png" style="margin-right: auto; margin-left: auto; display: block;"></p> + +<h3 id="Web_Console">Web Console</h3> + +<p>The app can log to this console using the global <a href="https://developer.mozilla.org/ru/docs/DOM/console" title="/ru/docs/DOM/console">console</a> object, and it displays various other messages generated by the app: network requests, CSS and JS warnings/errors, and security errors. (<a href="https://developer.mozilla.org/ru/docs/Tools/Web_Console" title="/ru/docs/Tools/Web_Console">Learn more about the Web Console.</a>)</p> + +<h3 id="Debugger">Debugger</h3> + +<p>Using the Debugger, you can step through JavaScript code that is running in the connected app, manage breakpoints, and watch expressions to track down errors and problems faster. (<a href="https://developer.mozilla.org/ru/docs/Tools/Debugger" title="/ru/docs/Tools/Web_Console">Learn more about the Debugger.</a>)</p> + +<h3 id="Style_Editor">Style Editor</h3> + +<p>You can view and edit CSS files referenced in the app using the connected Style Editor. Your changes will be applied to the app in real time, without needing to refresh the app. (<a href="https://developer.mozilla.org/ru/docs/Tools/Style_Editor" title="/ru/docs/Tools/Web_Console">Learn more about the Style Editor.</a>)</p> + +<h3 id="Profiler">Profiler</h3> + +<p>Using the Profiler tool connected to the app, you can find out where your JavaScript code is spending too much time. The Profiler periodically samples the current JavaScript call stack and compiles statistics about the samples. (<a href="https://developer.mozilla.org/ru/docs/Tools/Profiler" title="/ru/docs/Tools/Web_Console">Learn more about the Profiler.</a>)</p> + +<h3 id="Network_Monitor">Network Monitor</h3> + +<p>Thanks to the new Network Monitor, you can analyze the status, headers, content, and timing of all the network requests initiated by the app through a friendly interface. (<a href="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/" title="https://hacks.mozilla.org/2013/06/network-monitor-now-in-firefox-beta/">Learn more about the Network Monitor.</a>)</p> + +<h2 id="Receipts"><a name="Simulator-receipts"></a>Receipts</h2> + +<p>If you are developing a paid app, you should test your receipt validation code (e.g., the code that verifies that a user has already purchased the app or has been issued a refund and then informs the user and locks or unlocks app features accordingly) on a valid (cryptographically signed) receipt.</p> + +<p>Thanks to the <strong>"Receipts"</strong> menu in each app entry on the Simulator Dashboard, you can install an app with a <strong>"Valid"</strong>, <strong>"Invalid"</strong>, or <strong>"Refunded"</strong> test receipt. Simply select the type of receipt you wish to test, and the Dashboard will retrieve a test receipt of that type from the Marketplace receipt service and reinstall the app with that receipt in the Simulator:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5523/simulator-receipts-selector-4.0.png"></p> + +<h2 id="Push_to_device"><a name="Push-to-device">Push to device</a></h2> + +<p>If you have a Firefox OS device, you can connect it to the Simulator and can then push apps from the Dashboard to the device.</p> + +<h3 id="Connecting_a_device">Connecting a device</h3> + +<p>To connect the device, follow the instructions in the guide to <a href="https://developer.mozilla.org/ru/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop" title="/ru/docs/Mozilla/Firefox_OS/Debugging/Connecting_a_Firefox_OS_device_to_the_desktop">connecting a Firefox OS device to the desktop</a>. Note that you don't have to install ADB, as the Simulator add-on includes it already.</p> + +<h3 id="Pushing_apps_to_the_device">Pushing apps to the device</h3> + +<p>Once you've set up the device and desktop, and connected the device to your desktop via USB, you'll see the note <strong>"Device connected"</strong> appear on the left of the Dashboard, and a new command appear in the entry for each app labeled <strong>"Push"</strong>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5521/simulator-push2device.png"></p> + +<p>Click <strong>"Push"</strong>, and the app will be installed on the Firefox OS device.</p> + +<div class="note"> +<p><strong>Manual Steps:</strong></p> + +<ul> + <li> + <p>Once you’ve pushed the app to the device, you need to manually close and restart it again to get updated content.</p> + </li> + <li> + <p>If you update anything in the manifest (e.g., app name, orientation, type, permissions), you need to reboot the operating system for those changes to have effect.</p> + </li> +</ul> +</div> + +<h3 id="Firefox_OS_Device_Connection_Confirmation">Firefox OS Device Connection Confirmation</h3> + +<p>On every device reboot, the first <strong>"Push"</strong> request needs to be confirmed on the device:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5527/device-push-confirmation.png" style="width: 320px; height: 480px;"></p> + +<h3 id="Troubleshooting_on_Linux">Troubleshooting on Linux</h3> + +<p>If you are unable to connect your device after creating udev rules, please see this <a href="https://github.com/mozilla/r2d2b2g/issues/515" title="https://github.com/mozilla/r2d2b2g/issues/515">bug</a>.</p> + +<h2 id="Limitations_of_the_Simulator"><a name="Limitations">Limitations of the Simulator</a></h2> + +<p>Note that the Firefox OS Simulator isn't a perfect simulation.</p> + +<h3 id="Hardware_limitations">Hardware limitations</h3> + +<p>Apart from screen size, the Simulator does not simulate the hardware limitations of a Firefox OS device such as available memory or CPU speed.</p> + +<h3 id="Audiovideo_codecs">Audio/video codecs</h3> + +<p>The following codecs depend on hardware-accelerated decoding and are therefore not yet supported:</p> + +<ul> + <li>MP3</li> + <li>AAC</li> + <li>H.264 (MP4)</li> + <li>WebM</li> +</ul> + +<p>This means it isn't possible to use the Simulator to test video playback in apps and on websites like Youtube that rely on these codecs.</p> + +<h3 id="Unsupported_APIs"><a name="Unsupported-APIs">Unsupported APIs</a></h3> + +<p>Certain APIs that work on the device won't work on the Simulator, generally because the supporting hardware is not available on the desktop. We've implemented simulations for some APIs such as geolocation, and expect to add more in future releases. However, at the moment the following APIs are not supported. Using them might throw errors or just return incorrect results:</p> + +<ul> + <li><a href="https://developer.mozilla.org/ru/WebAPI/WebTelephony" title="/ru/WebAPI/WebTelephony">Telephony</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/WebAPI/WebSMS" title="/ru/docs/WebAPI/WebSMS">WebSMS</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/WebAPI/WebBluetooth" title="/ru/docs/WebAPI/WebBluetooth">WebBluetooth</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/WebAPI/Using_Light_Events" title="/ru/docs/WebAPI/Using_Light_Events">Ambient Light</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/WebAPI/Proximity" title="/ru/docs/WebAPI/Proximity">Proximity</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/WebAPI/Network_Information" title="/ru/docs/WebAPI/Network_Information">Network Information</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Online_and_offline_events" title="/ru/docs/Online_and_offline_events">navigator.onLine and offline events</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/WebAPI/Vibration" title="/ru/docs/WebAPI/Vibration">Vibration</a></li> +</ul> + +<h2 id="Getting_help"><a name="Simulator-help"></a>Getting help</h2> + +<p><span style="line-height: 1.572;">If you have a question, try asking us on the </span><a href="https://lists.mozilla.org/listinfo/dev-developer-tools" style="line-height: 1.572;">dev-developer-tools mailing list</a><span style="line-height: 1.572;"> or on </span><a href="irc://irc.mozilla.org/#devtools" style="line-height: 1.572;">#devtools on irc.mozilla.org</a><span style="line-height: 1.572;">.</span></p> + +<h3 id="How_to_enable_verbose_logging"><a name="Simulator-verbose-logging"></a>How to enable verbose logging</h3> + +<p>Use about:config to create the preference <a href="mailto:extensions.r2d2b2g@mozilla.org.sdk.console.logLevel">extensions.r2d2b2g@mozilla.org.sdk.console.logLevel</a>, set it to the integer value 0, and disable/reenable the add-on. Additional messages about the Simulator's operation will appear in the Error Console (or Browser Console in newer versions of Firefox).</p> +</div> +</div> + +<div class="note"> +<p> </p> +</div> + +<p> </p> diff --git a/files/ru/tools/index.html b/files/ru/tools/index.html new file mode 100644 index 0000000000..c7cc39bfba --- /dev/null +++ b/files/ru/tools/index.html @@ -0,0 +1,209 @@ +--- +title: Инструменты разработчика Firefox +slug: Tools +tags: + - Developing Mozilla + - Tools + - TopicStub + - 'l10n:priority' + - Веб-разработка + - Разработка Mozilla + - 'веб-разработка:инструменты' + - инструменты +translation_of: Tools +--- +<div>{{ToolsSidebar}}</div> + +<p>Исследуйте, редактируйте и отлаживайте HTML, CSS и JavaScript на компьютерах и мобильных устройствах. Для получения последних обновлений для инструментов разработки <a href="https://www.mozilla.org/ru/firefox/developer/">скачайте Firefox Developer Edition</a>.</p> + +<p>Если вы ищете информацию по использованию инструментов веб-разработчика доступных в Firefox, вы зашли в правильное место - на этой странице даётся подробная информация обо всех основных и дополнительных инструментах веб-разработчика, а также информацию о том как подсоединять и настраивать Firefox для Android, как расширить набор инструментов разработчика, как настраивать браузер.<br> + Пожалуйста, посмотрите описания инструментов разработчика, расположенные далее на этой странице. Если у вас возникнут замечания или вопросы об указанном наборе инструментов, то пришлите нам собщение на нашу почту или IRC канал ( <a href="https://developer.mozilla.org/en-US/docs/Tools#Join_the_Developer_tools_community"> соответствующие ссылки находятся внизу страницы</a>). Если у вас возникнут замечания или вопросы, касающиеся документации, то напишите в <a href="https://discourse.mozilla.org/c/mdn">MDN discourse</a>.</p> + +<p>На заметку: если вы только начинаете веб разработку и использование инструментов разработчика, наши документы <a href="https://developer.mozilla.org/en-US/docs/Learn">по изучению веб разработки</a> помогут вам - для начала посмотрите <a href="https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web">Getting started with the Web</a> (Начало работы в веб) и <a href="https://developer.mozilla.org/en-US/docs/Learn/Common_questions/What_are_browser_developer_tools">What are browser developer tools </a>(Инструменты разработки браузера).</p> + +<h2 id="Основные_инструменты">Основные инструменты</h2> + +<p>Вы можете открыть Средства Разработчика Firefox (Firefox Developer Tools) с помощью меню, выбрав <em>Открыть меню > Веб-разработка > Инструменты разработчика</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>Меню в виде многоточия в правой верхней части окна Средств Разработчика содержит команды, позволяющие Вам выполнить некоторые общие действия или изменить настройки Средств Разработчика.</p> + +<p><img src="https://mdn.mozillademos.org/files/16087/DevTools_LayoutMenu.png" style="display: block; margin: 0 auto;"></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="max-width: 32px;"></td> + <td>Эта кнопка доступна только в случае, если на странице присутствует несколько фреймов (тегов <code>iframe</code>). Нажатие на эту кнопку отображает список фреймов (тегов <code>iframe</code>) на текущей странице и позволяет выбрать тот фрейм (тег <code>iframe</code>) с которым Вы хотите работать.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16088/camera_button.png" style="max-width: 32px;"></td> + <td>Щелчек по данной кнопке создает снимок экрана (screenshot) текущей страницы. (<strong>Внимание:</strong> По-умолчанию данная функция отключена и, при необходимости, должна быть включена в настройках.)</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16089/responsive_button.png" style="max-width: 32px;"></td> + <td>Преключение в/из Режима Адаптивного Дизайна (Responsive Design Mode).</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16090/menu_button.png" style="max-width: 32px;"></td> + <td>Открывает меню, которое включает настройки "прилипания" (docking) окна Средств Разработчика, возможности отобразить или скрыть консоль, а также переход к диалогу настроек Средств Разработчика. Это меню также содержит ссылки на документацию по Веб-инструментам Firefox (Firefox Web Tools) и на Mozilla Community.</td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16091/close_button.png" style="max-width: 32px;"></td> + <td>Закрывает окно Средств Разработчика</td> + </tr> + </tbody> +</table> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Инспектор_страницы">Инспектор страницы</h3> + +<p><a href="https://wiki.developer.mozilla.org/ru/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 #0080f0;"></a></p> + +<p>Инструмент для просмотра и редактирования содержимого и макета страницы. Позволяет рассмотреть страницу с разных точек зрения, включая блочную модель, анимацию и grid компоновку.</p> +</div> + +<div class="column-half"> +<h3 id="Web-консоль">Web-консоль</h3> + +<p><a href="https://wiki.developer.mozilla.org/ru/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 #0080f0;"></a></p> + +<p>Позволяет просматривать отладочные сообщения страницы и взаимодействовать с ней посредством JavaScript.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Отладчик_JavaScript">Отладчик JavaScript</h3> + +<p><a href="https://wiki.developer.mozilla.org/ru/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 #0080f0;"></a></p> + +<p>Позволяет остановить, выполнять по шагам, исследовать и изменять JavaScript код выполняемый на странице.</p> +</div> + +<div class="column-half"> +<h3 id="Сетевой_монитор">Сетевой монитор</h3> + +<p><a href="https://wiki.developer.mozilla.org/ru/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 #0080f0;"></a></p> + +<p>Показывает сетевые запросы возникающие в процессе загрузки страницы.</p> +</div> +</div> + +<div class="column-container"> +<div class="column-half"> +<h3 id="Инструменты_производительности">Инструменты производительности</h3> + +<p><a href="/en-US/docs/Tools/Performance"><img alt="" src="https://mdn.mozillademos.org/files/14536/performance.png" style="display: block; height: 1026px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Позволяют провести общий анализ отзывчивости вашего сайта, а также производительности кода JavaScript и макета.</p> +</div> + +<div class="column-half"> +<h3 id="Режим_адаптивного_дизайна">Режим адаптивного дизайна</h3> + +<p><a href="/en-US/docs/Tools/Responsive_Design_Mode"><img alt="" src="https://mdn.mozillademos.org/files/14538/rdm.png" style="display: block; height: 1542px; margin-left: auto; margin-right: auto; width: 425px;"></a></p> + +<p>Позволяет увидеть, как будут выглядеть и работать ваши сайты или приложения на различных устройствах или типах сетей.</p> + +<h3 id="Инспектор_доступности">Инспектор доступности</h3> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16396/Screen_Shot_2018-12-15_at_2.19.39_AM.png" style="display: block; height: 1542px; margin-left: auto; margin-right: auto; width: 425px;"></p> + +<p>Предоставляет средства для доступа к дереву доступности страницы, позволяя вам проверить, что отсутствует или иным образом требует внимания.</p> +</div> +</div> + +<h2 id="Больше_инструментов">Больше инструментов</h2> + +<p>Эти инструменты разработчика также встроены в Firefox. В отличие от «Core Tools» описанных выше, могут не использоватся в повседневной работе.</p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Memory">Память</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Выясните, какие объекты сохраняют память в использовании.</span></span></dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Storage Inspector</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Проверьте файлы cookie, локальное хранилище, indexedDB и хранилище сеансов на странице.</span></span></dd> + <dt><a href="/en-US/docs/Tools/DOM_Property_Viewer">DOM Property Viewer</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Проверьте свойства DOM страницы, функции и т.д.</span></span></dd> + <dt><a href="/en-US/docs/Tools/GCLI">Панель инструментов разработчика</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Интерфейс командной строки для инструментов разработчика.</span></span></dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Пипетка</a></dt> + <dd>Получите код любого цвета со страницы.</dd> + <dt><a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Текстовый редактор, встроенный в Firefox, который позволяет вам писать и выполнять JavaScript</span></span></dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Редактор стилей</a></dt> + <dd>Просмотр и редактирование стилей CSS для текущей страницы.</dd> + <dt><a href="/en-US/docs/Tools/Shader_Editor">Редактор шейдеров</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Просмотр и редактирование вершинных и фрагментных шейдеров, используемых</span></span> <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> + <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Редактор веб аудио </a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Изучите график аудиоузлов в аудиоконтексте и измените их параметры.</span></span></dd> + <dt><a href="/en-US/docs/Tools/Screenshot_tool">Делать скриншоты</a></dt> + <dd>Следайте скриншот всей страницы, или одного ее элемента.</dd> +</dl> +</div> + +<hr> +<h2 id="Подключение_инструментов_разработчика"><span class="tlid-translation translation" lang="ru"><span title="">Подключение инструментов разработчика</span></span></h2> + +<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы откроете инструменты разработчика с помощью</span></span> <a href="/en-US/docs/Tools/Keyboard_shortcuts#Opening_and_closing_tools">сочетания клавиш</a> <span class="tlid-translation translation" lang="ru"><span title="">или аналогичных пунктов меню, они будут нацелены на документ, размещенный на текущей активной вкладке.</span> <span title="">Но вы также можете прикрепить инструменты к множеству других целей, как в текущем браузере, так и в разных браузерах или даже на разных устройствах.</span></span></p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/about:debugging">about:debugging</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Отладка надстроек, вкладок контента и рабочих, работающих в браузере.</span></span></dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Подключение к Firefox для Android</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Подключите инструменты разработчика к Firefox, работающему на устройстве Android.</span></span></dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Подключение к iframes</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Подключите инструменты разработчика к конкретному iframe на текущей странице.</span></span></dd> + <dt><a href="/en-US/docs/Tools/Valence">Подключение к другим браузерам</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Подключите инструменты разработчика к Chrome на Android и Safari на iOS.</span></span></dd> +</dl> +</div> + +<h2 id="Отладка_браузера"><span class="tlid-translation translation" lang="ru"><span title="">Отладка браузера</span></span></h2> + +<p><span class="tlid-translation translation" lang="ru"><span title="">По умолчанию инструменты разработчика прикрепляются к веб-странице или веб-приложению.</span> <span title="">Но вы также можете подключить их к браузеру в целом.</span> <span title="">Это полезно для разработки браузеров и надстроек.</span></span></p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Консоль браузера</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Просматривайте сообщения, зарегистрированные самим браузером и надстройками, и запускайте код JavaScript в области видимости браузера.</span></span></dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Панель инструментов браузера</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Присоедините инструменты разработчика к самому браузеру.</span></span></dd> +</dl> +</div> + +<h2 id="Расширение_инструментов_разработчика">Расширение инструментов разработчика</h2> + +<p><span class="tlid-translation translation" lang="ru"><span title="">Инструменты разработчика предназначены для расширения.</span> <span title="">Дополнения Firefox могут получить доступ к инструментам разработчика и компонентам, которые они используют для расширения существующих инструментов и добавления новых инструментов.</span> <span title="">С помощью протокола удаленной отладки вы можете реализовать свои собственные клиенты и серверы отладки, что позволяет отлаживать веб-сайты с помощью собственных инструментов или отлаживать различные цели с помощью инструментов Firefox.</span></span></p> + +<div class="twocolumns"> +<dl> + <dt><a href="/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt> + <dd>Use these examples to understand how to implement a devtools add-on.</dd> + <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt> + <dd>Write an add-on that adds a new panel to the Toolbox.</dd> + <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt> + <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd> + <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt> + <dd>A code editor built into Firefox that can be embedded in your add-on.</dd> + <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> + <dd>An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> + <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd> +</dl> +</div> + +<h2 id="Сделать_вклад">Сделать вклад</h2> + +<p><span class="tlid-translation translation" lang="ru"><span title="">Если вы хотите помочь улучшить инструменты разработчика, эти ресурсы помогут вам начать работу.</span></span></p> + +<div class="twocolumns"> +<dl> + <dt><a href="https://devtools-html.github.io/#getting-in-touch">Увлекитесь</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Вики-страница Mozilla, объясняющая, как принять участие.</span></span></dd> + <dt><a href="http://firefox-dev.tools/">firefox-dev.tools</a></dt> + <dd><span class="tlid-translation translation" lang="ru"><span title="">Инструмент, помогающий находить ошибки для работы.</span></span></dd> +</dl> +</div> diff --git a/files/ru/tools/index/index.html b/files/ru/tools/index/index.html new file mode 100644 index 0000000000..b9d3f33dbb --- /dev/null +++ b/files/ru/tools/index/index.html @@ -0,0 +1,8 @@ +--- +title: Индекс +slug: Tools/Index +tags: + - инструменты +translation_of: Tools/Index +--- +<div>{{ToolsSidebar}}</div><p>{{Index("/ru/docs/Tools")}}</p> diff --git a/files/ru/tools/keyboard_shortcuts/index.html b/files/ru/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..17a9c25c04 --- /dev/null +++ b/files/ru/tools/keyboard_shortcuts/index.html @@ -0,0 +1,1112 @@ +--- +title: Клавиатурные сокращения +slug: Tools/Keyboard_shortcuts +tags: + - Tools + - инструменты +translation_of: Tools/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div> + +<p>Эта страница перечисляет все клавиатурные сокращения, используемые инструментами разработчика, встроенными в Firefox.</p> + +<p>Первый раздел перечисляет сокращения для открытия каждого инструмента, а второй — сокращения, применимые в самом наборе инструментов. После них идут разделы, посвящённые каждый своему инструменту, которые перечисляют сокращения, используемые в соответствующем инструменте.</p> + +<p>Поскольку клавиши доступа зависят от настроек локали, они не задокументированы на этой странице.</p> + +<h2 id="Opening_and_closing_tools" name="Opening_and_closing_tools">Открытие и закрытие инструментов</h2> + +<p>Эти клавиатурные сокращения работают в главном окне браузера для открытия определённого инструмента. Если инструмент содержится в наборе инструментов, комбинация закрывает его, если он был активен. Инструменты, которые открываются в новом окне, вроде «Консоли браузера», закрываются при закрытии их окна.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row" style="width: 40%;">Набор инструментов (открывается последний активированный инструмент)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Перенос Набора инструментов на передний план (если он в отдельном окне и в фоне)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">Закрыть Набор инструментов (если он в отдельном окне и на переднем плане)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> or <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">Веб-консоль<a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Инспектор</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Отладчик</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Редактор стилей</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Профайлер</th> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + </tr> + <tr> + <th scope="row">Сеть</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd></td> + </tr> + <tr> + <th scope="row">Панель разработки (включение и выключение)</th> + <td><kbd>Shift</kbd> + <kbd>F2</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F2</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">Режим адаптивного дизайна (включение и выключение)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + </tr> + <tr> + <th scope="row">Консоль браузера<a href="#opening-closing-browser-console-note"><sup>2</sup></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Инструменты разработчика браузера (с Firefox 39)</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Простой редактор JavaScript</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">WebIDE</th> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Инспектор Хранилища<a href="#disabled-tools-shortcut"><sup>3</sup></a></th> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + </tr> + </tbody> +</table> + +<p><a name="opening-closing-web-console-note">1. В отличие от других инструментов, находящихся в окне набора инструментов, это сокращение не закрывает веб-консоль. Вместо этого оно переводит фокус на командную строку веб-консоли. Для закрытия веб-консоли используйте глобальное сокращение набора инструментов <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>I</kbd> (<kbd>Cmd</kbd>+<kbd>Opt</kbd>+<kbd>I</kbd> на Mac).</a></p> + +<p><a id="opening-closing-browser-console-note" name="opening-closing-browser-console-note">2. До Firefox 38, когда Консоль Браузера не видна за обычным окном Firefox, та же комбинация закрывает Консоль Браузера. Начиная с Firefox 38, когда Консоль Браузера не видна за обычным окном Firefox, эта комбинация клавиш возвращает имеющуюся Консоль Браузера наверх стопки окон и переводит на неё фокус.</a></p> + +<p><a href="/ru/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">3. Этот инструмент по умолчанию выключен, так что комбинация клавиш не будет действовать, пока вы его не включите на панели настроек.</a></p> + +<h2 id="Toolbox" name="Toolbox">Набор инструментов</h2> + +<div id="toolbox-shortcuts"> +<p>Эти сокращения работают только при открытом наборе инструментов, независимо от текущего активного инструмента.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Циклическая смена инструментов слева направо</th> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>]</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + </tr> + <tr> + <th scope="row">Циклическая смена инструментов справа налево</th> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + <td style="width: 20%;"><kbd>Cmd</kbd> + <kbd>[</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + </tr> + <tr> + <th scope="row">Показать настройки инструментов разработчика</th> + <td style="width: 20%;"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Переключение между активной вкладкой панели инструментов и настройками Панели инструментов (новое в Firefox 43)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row">Переключение Панели инструментов между двумя последними <a href="/ru/docs/Tools/Tools_Toolbox#Docking_mode">Режимами прикрепления </a> (новое в Firefox 41)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row">Показать/скрыть Консоль в любой вкладке панели инструментов (кроме вкладки Консоль)</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="all-toolbox-tools"> +<p>Эти сокращения работают для всех инструментов, находящихся в окне набора инструментов.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Увеличить размер шрифта</th> + <td><kbd>Ctrl</kbd> + <kbd>+</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>+</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>+</kbd></td> + </tr> + <tr> + <th scope="row">Уменьшить размер шрифта</th> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + <td style="width: 20%;"><kbd>Cmd</kbd> + <kbd>-</kbd></td> + <td style="width: 20%;"><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + </tr> + <tr> + <th scope="row">Сбросить размер шрифта</th> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>0</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Редактор_исходного_кода">Редактор исходного кода</h2> + +<div id="source-editor"> +<p>Эта таблица перечисляет клавиатурные сокращения по умолчанию для редактора исходного кода.</p> + +<p>Вместо них в разделе <a href="/ru/docs/Tools/Tools_Toolbox#Editor_Preferences">Настройки редактора</a> настроек инструментов разработчика, вы можете выбрать схему привязки клавиш Vim, Emacs или Sublime Text.</p> + +<p>Для этого откройте страницу <code>about:config</code>, выберите настройку <code>devtools.editor.keymap</code> и присвойте ей значение "vim", "emacs" или "sublime". Если вы сделаете это, выбранная схема привязки будет использоваться для всех инструментов разработчика, использующих редактор исходного кода. Вам нужно будет повторно открыть редактор, чтобы изменения вступили в силу.</p> + +<p>Начиная с Firefox 33 и выше, настройки схемы привязки клавиш выставляются в разделе <a href="/ru/docs/Tools/Tools_Toolbox#Editor_Preferences">Настройки редактора</a> настроек инструментов разработчика, и вы можете установить её там вместо ручного редактирования <code>about:config</code>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Перейти к строке</th> + <td style="width: 20%;"><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Найти в файле</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td style="width: 20%;"><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td style="width: 20%;"><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Найти далее</th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + </tr> + <tr> + <th scope="row">Выделить всё</th> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">Вырезать</th> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>X</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + </tr> + <tr> + <th scope="row">Копировать</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Вставить</th> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row">Отменить</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Повторить</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">Отступ</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Убрать отступ</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Переместить строки вверх</th> + <td><kbd>Alt</kbd> + <kbd>вверх</kbd></td> + <td><kbd>Alt</kbd> + <kbd>вверх</kbd></td> + <td><kbd>Alt</kbd> + <kbd>вверх</kbd></td> + </tr> + <tr> + <th scope="row">Переместить строки вниз</th> + <td><kbd>Alt</kbd> + <kbd>вниз</kbd></td> + <td><kbd>Alt</kbd> + <kbd>вниз</kbd></td> + <td><kbd>Alt</kbd> + <kbd>вниз</kbd></td> + </tr> + <tr> + <th scope="row">За-/раскомментировать строки</th> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>/</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Page_Inspector" name="Page_Inspector">Инспектор</h2> + +<div id="page-inspector"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row" style="width: 40%;">Открыть инспектор</th> + <td style="width: 20%;"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td style="width: 20%;"><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td style="width: 20%;"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="HTML_pane" name="HTML_pane">Панель HTML</h3> + +<p>Эти клавиатурные сокращения работают, пока вы находитесь в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Панели HTML инспектора</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Удалить выбранный узел</th> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + </tr> + <tr> + <th scope="row">Отменить удаление узла</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Повторить удаление узла</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">Перейти к следующему узлу (только раскрытые узлы)</th> + <td><kbd>вниз</kbd></td> + <td><kbd>вниз</kbd></td> + <td><kbd>вниз</kbd></td> + </tr> + <tr> + <th scope="row">Перейти к предыдущему узлу</th> + <td><kbd>вверх</kbd></td> + <td><kbd>вверх</kbd></td> + <td><kbd>вверх</kbd></td> + </tr> + <tr> + <th scope="row">Развернуть текущий выбранный узел</th> + <td><kbd>вправо</kbd></td> + <td><kbd>вправо</kbd></td> + <td><kbd>вправо</kbd></td> + </tr> + <tr> + <th scope="row">Свернуть текущий выбранный узел</th> + <td><kbd>вправо</kbd></td> + <td><kbd>вправо</kbd></td> + <td><kbd>вправо</kbd></td> + </tr> + <tr> + <th scope="row">Шаг вперёд по атрибутам узла</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Шаг назад по атрибутам узла</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Начать редактирование выбранного атрибута</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Enter</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Скрыть/показать выбранный узел</th> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + </tr> + <tr> + <th scope="row">Переместить фокус в окно поиска по HTML панели</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Править как HTML</th> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">Остановить правку как HTML</th> + <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> +<kbd>Enter</kbd></td> + <td><kbd>F2</kbd> / <kbd>Cmd</kbd> + <kbd>Return</kbd></td> + <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> + <kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Копировать HTML выбранного узла (новое в Firefox 42)</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Прокрутить страницу до выбранного в Инспекторе узла (новое в Firefox 44)</th> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Поиск следующего совпадения в разметке, если поиск активен</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Поиск предыдущего совпадения в разметке, когда поиск активен (новое в Firefox 48)</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Навигационная_цепочка">Навигационная цепочка</h3> + +<p>Следующие сокращения работают при фокусе на <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">навигационной цепочке</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Переместиться на предыдущий элемент</th> + <td><kbd>Left arrow</kbd></td> + <td><kbd>Left arrow</kbd></td> + <td><kbd>Left arrow</kbd></td> + </tr> + <tr> + <th scope="row">Переместиться на следующий элемент</th> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + </tr> + <tr> + <th scope="row">Переключить фокус на <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">Панель HTML</a> в Инспекторе</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Переключить фокус на <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS-панель</a> в Инспекторе</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="CSS_pane" name="CSS_pane">Панель CSS</h3> + +<p>Эти клавиатурные сокращения работают, пока вы находитесь в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Панели CSS в Инспекторе</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Открыть поле поиска в Панели CSS</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Очистить поле поиска (только когда фокус на поле поиска и в нём что-нибудь введено)</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">Шаг вперёд по свойствам и значениям</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Шаг назад по свойствам и значениям</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td style="width: 20%;"><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Начать редактирование свойства или значения (Только для вкладки "Правила", когда свойство или значение ещё не редактируется)</th> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + <td><kbd>Return</kbd> or <kbd>Space</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row">Прокрутка вверх или вниз по предлагаемым вариантам (Только для вкладки "Правила", когда редактируется свойство или значение)</th> + <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td> + <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td> + <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Выбрать текущий вариант предложения имени свойства или значения (Только для вкладки "Правила", когда редактируется свойство или значение)</th> + <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td> + <td><kbd>Return</kbd> or <kbd>Tab</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Увеличить выбранное значение на единицу</th> + <td><kbd>вверх</kbd></td> + <td><kbd>вверх</kbd></td> + <td><kbd>вверх</kbd></td> + </tr> + <tr> + <th scope="row">Уменьшить выбранное значение на единицу</th> + <td><kbd>вниз</kbd></td> + <td><kbd>вниз</kbd></td> + <td><kbd>вниз</kbd></td> + </tr> + <tr> + <th scope="row">Увеличить выбранное значение на 100</th> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + </tr> + <tr> + <th scope="row">Уменьшить выбранное значение на 100</th> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + </tr> + <tr> + <th scope="row">Увеличить выбранное значение на 10</th> + <td><kbd>Shift</kbd> + <kbd>вверх</kbd></td> + <td><kbd>Shift</kbd> + <kbd>вверх</kbd></td> + <td><kbd>Shift</kbd> + <kbd>вверх</kbd></td> + </tr> + <tr> + <th scope="row">Уменьшить выбранное значение на 10</th> + <td><kbd>Shift</kbd> + <kbd>вниз</kbd></td> + <td><kbd>Shift</kbd> + <kbd>вниз</kbd></td> + <td><kbd>Shift</kbd> + <kbd>вниз</kbd></td> + </tr> + <tr> + <th scope="row">Увеличить выбранное значение на 0.1</th> + <td><kbd>Alt</kbd> + <kbd>вверх</kbd></td> + <td><kbd>Opt</kbd> + <kbd>вверх</kbd></td> + <td><kbd>Alt</kbd> + <kbd>вверх</kbd></td> + </tr> + <tr> + <th scope="row">Уменьшить выбранное значение на 0.1</th> + <td><kbd>Alt</kbd> + <kbd>вниз</kbd></td> + <td><kbd>Opt</kbd> + <kbd>вниз</kbd></td> + <td><kbd>Alt</kbd> + <kbd>вниз</kbd></td> + </tr> + <tr> + <th scope="row">Показать/скрыть больше информации о текущем свойстве (Только на вкладке "Вычислено", когда выбрано свойство. Новое в Firefox 49)</th> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + <td><kbd>Return</kbd> or <kbd>Space</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row">Открыть справочную сттаницу на MDN по текущему свойству (Только на вкладке "Вычислено", когда выбрано свойство. Новое в Firefox 49)</th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row">Открыть текущий файл CSS в Редакторе стилей (Только на вкладке "Вычислено", когда отображена расширенная информация и фокус на справочнике по файлам CSS. Новое в Firefox 49)</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Debugger" name="Debugger">Отладчик</h2> + +<div id="debugger"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Открыть отладчик</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Поиск в текущем исходном коде с использованием <a href="/ru/docs/Tools/Debugger/How_to/Search_and_filter" title="/ru/docs/Tools/Debugger/How_to/Search_and_filter">фильтра сценариев</a></th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Найти далее в текущем исходном коде</th> + <td><kbd>Enter</kbd> / <kbd>вверх</kbd><</td> + </tr> + <tr> + <th scope="row">Найти назад в текущем исходном коде</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>вниз</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>вниз</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>вниз</kbd></td> + </tr> + <tr> + <th scope="row">Поиск во всех исходных кодах с использованием <a href="/ru/docs/Tools/Debugger/How_to/Search_and_filter" title="/ru/docs/Tools/Debugger/How_to/Search_and_filter">фильтра сценариев</a></th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Искать в сценариях по имени</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Искать определения функций</th> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row">Фильтровать переменные при приостановленном выполнении</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row">Продолжить выполнение после точки останова</th> + <td><kbd>F8</kbd></td> + <td><kbd>F8</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Перешагнуть</th> + <td><kbd>F10</kbd></td> + <td><kbd>F10</kbd><a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F10</kbd></td> + </tr> + <tr> + <th scope="row">Зайти</th> + <td><kbd>F11</kbd></td> + <td><kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">Выйти</th> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd><sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">Переключить точку останова в текущей выбранной строке</th> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row">Переключить условную точку останова в текущей выбранной строке</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row">Добавить выбранный текст в выражения для отслеживания</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Перейти к строке с использованием <a href="/ru/docs/Tools/Debugger/How_to/Search_and_filter" title="/ru/docs/Tools/Debugger/How_to/Search_and_filter">фильтра сценариев</a></th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row">Искать с использованием <a href="/ru/docs/Tools/Debugger/How_to/Search_and_filter" title="/ru/docs/Tools/Debugger/How_to/Search_and_filter">фильтра сценариев</a></th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">В<a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane"> Области исходного кода</a> переход на определение функции (новое в Firefox 44)</th> + <td><kbd>Ctrl</kbd> + click</td> + <td><kbd>Cmd</kbd> + click</td> + <td><kbd>Ctrl</kbd> + click</td> + </tr> + </tbody> +</table> + +<p><a name="mac-function-key-note">1. По умолчанию, на некоторых Mac функциональные клавиши переназначены на использование специальных возможностей: например, изменение яркости экрана или громкости звука. Смотрите это </a><a href="http://support.apple.com/kb/HT3399?viewlocale=ru_RU" title="http://support.apple.com/kb/HT3399?viewlocale=ru_RU">руководство по использованию этих клавиш в качестве стандартных функциональных клавиш</a>. Для использования переназначенных клафиш в качестве стандартных функциональных клавиш, удерживайте нажатой клавишу Function (так что, например, для открытия профайлера используйте <kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd>).</p> +</div> + +<h2 id="Web_Console" name="Web_Console">Веб-консоль</h2> + +<div id="web-console"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Открыть веб-консоль</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Искать в панели показа сообщений</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td style="width: 20%;"><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td style="width: 20%;"><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Очистить <a href="/ru/docs/Tools/Web_Console#Inspecting_objects" title="/ru/docs/Tools/Web_Console#Inspecting_objects">панель инспектирования объекта</a></th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">Переместить фокус на командную строку</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Очистить</th> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>С Firefox 44:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>С Firefox 44:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Command_line_interpreter" name="Command_line_interpreter">Интерпретатор командной строки</h3> + +<p>Эти клавиатурные сокращения работают, пока вы находитесь в <a href="/ru/docs/Tools/Web_Console#The_command_line_interpreter" title="/ru/docs/Tools/Web_Console#The_command_line_interpreter">Интерпретаторе командной строки</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Прокрутить в начало вывода в консоль (новое в Firefox 34, и только при пустой командной строке)</th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row">Прикрутить в конец вывода в консоль (новое в Firefox 34, и только при пустой командной строке)</th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + <tr> + <th scope="row">Прокрутить вверх вывод консоли</th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row">Прокрутить вниз вывод консоли</th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row">Переместиться назад по <a href="/ru/docs/Tools/Web_Console#Command_history" title="/ru/docs/Tools/Web_Console#Command_history">истории команд</a></th> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row">Переместиться вперёд по истории команд</th> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Перейти в начало строки</th> + <td><kbd>Home</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">Перейти в конец строки</th> + <td><kbd>End</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Выполнить текущее выражение</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Enter</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Добавить новую строку, чтобы войти в режим ввода многострочного выражения</th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Autocomplete_popup" name="Autocomplete_popup">Всплывающее окно автодополнения</h3> + +<p>Эти клавиатурные сокращения работают, когда открыто <a href="/ru/docs/Tools/Web_Console#Autocomplete">всплывающее окно автодополнения</a>:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Выбрать текущее предложение в окне автодополнения</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Закрыть окно автодополнения</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">Перейти к предыдущему предложению в окне автодополнения</th> + <td><kbd>вверх</kbd></td> + <td><kbd>вверх</kbd></td> + <td><kbd>вверх</kbd></td> + </tr> + <tr> + <th scope="row">Перейти к следующему предложению в окне автодополнения</th> + <td><kbd>вниз</kbd></td> + <td><kbd>вниз</kbd></td> + <td><kbd>вниз</kbd></td> + </tr> + <tr> + <th scope="row">Прокрутить вверх предложения в окне автодополнения</th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row">Прокрутить вниз предложения в окне автодополнения</th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row">Прокрутить в начало списка (новое в Firefox 34)</th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row">Прокрутить в конец списка (новое в Firefox 34)</th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Style_Editor" name="Style_Editor">Редактор стилей</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Открыть редактор стилей</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Открыть всплывающее окно автодополнения</th> + <td><kbd>Ctrl</kbd> + <kbd>Пробел</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Пробел</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Пробел</kbd></td> + </tr> + </tbody> +</table> + +<div id="scratchpad"> +<h2 id="Scratchpad" name="Scratchpad">Простой редактор JavaScript</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Открыть простой редактор JavaScript</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">Запустить код из простого редактора JavaScript</th> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Запустить код из простого редактора JavaScript, отобразить результат в <a href="/ru/docs/Tools/Web_Console#Inspecting_objects" title="/ru/docs/Tools/Web_Console#Inspecting_objects">Инспекторе объектов</a></th> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Запустить код из простого редактора JavaScript, вставить результат в качестве комментария</th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row">Повторно вычислить текущую функцию</th> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Перезагрузить текущую страницу, затем запустить код из простого редактора JavaScript</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Сохранить код</th> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Открыть существующий код</th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Создать новый код</th> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>N</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + </tr> + <tr> + <th scope="row">Закрыть простой редактор JavaScript</th> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>W</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + </tr> + <tr> + <th scope="row">Красивая печать кода</th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row">Показать предложения автодополнения (новинка в Firefox 32)</th> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row">Показать встроенную документацию (только Firefox 32)</th> + <td><kbd>Shift</kbd> + <kbd>Пробел</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Пробел</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Пробел</kbd></td> + </tr> + <tr> + <th scope="row">Показать встроенную документацию (Firefox 33 и далее)</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Пробел</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Пробел</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Пробел</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="eyedropper"> +<h2 id="Eyedropper" name="Eyedropper">Пипетка</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Команда</th> + <th scope="col">Windows</th> + <th scope="col">OS X</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Выбрать текущий цвет под курсором</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Enter</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row">Закрыть пипетку</th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row">Перемещаться по 1-му пикселю</th> + <td><kbd>стрелки</kbd></td> + <td><kbd>стрелки</kbd></td> + <td><kbd>стрелки</kbd></td> + </tr> + <tr> + <th scope="row">Перемещаться по 10 пикселей</th> + <td><kbd>Shift</kbd> + <kbd>стрелки</kbd></td> + <td><kbd>Shift</kbd> + <kbd>стрелки</kbd></td> + <td><kbd>Shift</kbd> + <kbd>стрелки</kbd></td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ru/tools/memory/index.html b/files/ru/tools/memory/index.html new file mode 100644 index 0000000000..3cec3f7248 --- /dev/null +++ b/files/ru/tools/memory/index.html @@ -0,0 +1,71 @@ +--- +title: Память +slug: Tools/Memory +tags: + - DevTools + - Firefox + - Mozilla + - NeedsTranslation + - Tools + - TopicStub +translation_of: Tools/Memory +--- +<div>{{ToolsSidebar}}</div> + +<div>Инструмент "Память" позволяет вам делать снимки выделенной на <a class="external external-icon" href="http://en.wikipedia.org/wiki/Memory_management#HEAP" title="heap">куче</a> памяти текущей вкладкой. Он так же предоставляет несколько представлений кучи, которые могут показать какие объекты используют память и где именно в коде происходит выделение.</div> + +<div></div> + +<p>{{EmbedYouTube("DJLoq5E5ww0")}}</p> + +<hr> +<h3 id="Основы">Основы</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Opening_the_Memory_tool">Открываем инструмент "Память"</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Taking_a_heap_snapshot">Получаем снимок использования кучи</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Comparing_snapshots">Сравниваем два снимка</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Clearing_a_snapshot">Удаляем снимки</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Saving_and_loading_snapshots">Сохраняем и загружаем снимки</a></li> + <li><a href="/en-US/docs/Tools/Memory/Basic_operations#Recording_call_stacks">Записываем стэк вызовов</a></li> +</ul> +</div> + +<hr> +<h3 id="Анализ_снимков">Анализ снимков</h3> + +<div class="geckoVersionNote"> +<p>The Tree map view is new in Firefox 48, and the Dominators view is new in FIrefox 46.</p> +</div> + +<p>После того, как вы сделали снимок, есть три главных вида (для просмотра снимка), предоставляемых инструментом "Память".</p> + +<ul> + <li><a href="/en-US/docs/Tools/Memory/Tree_Map_view">the Tree map view</a> показывает использование памяти в виде <a href="https://en.wikipedia.org/wiki/Treemapping">treemap</a>.</li> + <li><a href="/en-US/docs/Tools/Memory/Aggregate_view">the Aggregate view</a> показывает использование памяти в виде таблицы выделенных типов.</li> + <li><a href="/en-US/docs/Tools/Memory/Dominators_view">the Dominators view</a> показывает "удерживаемый размер" объектов: то есть, размер самих объектов плюс размер других, удерживаемых через ссылки, объектов.</li> +</ul> + +<p>If you've opted to record allocation stacks for the snapshot, the Aggregate and Dominators views can show you exactly where in your code allocations are happening.</p> + +<hr> +<h3 id="Concepts">Concepts</h3> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Memory/Dominators">Доминаторы</a></li> +</ul> +</div> + +<hr> +<h3 id="Примеры">Примеры</h3> + +<p>Используемые примеры в документации инструмента "Память".</p> + +<div class="twocolumns"> +<ul> + <li><a href="/en-US/docs/Tools/Memory/Monster_example">Monster example</a></li> + <li><a href="/en-US/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a></li> +</ul> +</div> diff --git a/files/ru/tools/memory/tree_map_view/index.html b/files/ru/tools/memory/tree_map_view/index.html new file mode 100644 index 0000000000..b37817036a --- /dev/null +++ b/files/ru/tools/memory/tree_map_view/index.html @@ -0,0 +1,50 @@ +--- +title: Просмотр дерева объектов памяти +slug: Tools/Memory/Tree_map_view +tags: + - Debug + - memory + - Отладка + - Память +translation_of: Tools/Memory/Tree_map_view +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>Вид "Дерево объектов" (Tree map view) - новая возможность в Firefox 48.</p> +</div> + +<p>Вид "<em>Дерево объектов</em>" (<em>Карта объектов</em>,<em> Tree map view</em>) даёт визуальное представление снимка памяти (snapshot), который поможет быстро определить, какие из объектов используют больше оперативной памяти.</p> + +<p>Данный вид - это <a href="https://en.wikipedia.org/wiki/Treemapping">"иерархическое (древовидное) представление данных, представленное в виде набора вложенных прямоугольников"</a>. Размер прямоугольников соответствует некоторому относительному количественному представлению о данных.</p> + +<p>В Дереве, показываемом в "<a href="/ru/docs/Tools/Memory">Memory tool</a>", объекты в куче (heap) разделены на четыре верхнеуровневых категории:</p> + +<ul> + <li><strong>objects (объекты)</strong>: JavaScript и DOM-объекты, такие как <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function">Function</a></code>, <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object">Object</a> </code>или <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, а также типы DOM, такие как <code><a href="/en-US/docs/Web/API/Window">Window</a></code> и <code><a href="/en-US/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code>.</li> + <li><strong>scripts (скрипты)</strong>: скрипты JavaScript, загруженные на страницу.</li> + <li><strong>strings (строки)</strong></li> + <li><strong>other (другое)</strong>: включает внутренние объекты <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a>.</li> +</ul> + +<p>Каждая категория представлена прямоугольником, размер каждого их которых пропорционален размеру занимаемой памяти объектами в "куче". Это значит, что вы можете быстро сообразить, какие виды объектов используют больше памяти.</p> + +<p>Подкатегории верхнего уровня:</p> + +<ul> + <li><strong>objects - </strong>дополнительно делятся по типам объектов.</li> + <li><strong>scripts - </strong>дополнительно разделены по источнику происхождения. Также добавлены отдельные прямоугольники для кода, который не коррелирует с файлами, такие как <a href="https://ru.wikipedia.org/wiki/JIT-%D0%BA%D0%BE%D0%BC%D0%BF%D0%B8%D0%BB%D1%8F%D1%86%D0%B8%D1%8F"> JIT</a>-оптимизированный код.</li> + <li><strong>other -</strong> делится по типам объектов.</li> +</ul> + +<p>Вот несколько примеров снимков памяти (snapshots) в древовидном виде:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13048/treemap-domnodes.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p> + +<p>Это дерево создано по скрипту в начале страницы <a href="/en-US/docs/Tools/Memory/DOM_allocation_example">DOM allocation example</a>, создающем большое число DOM-узлов (200 объектов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLDivElement">HTMLDivElement</a></code> и 4000 объектов <code><a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLSpanElement">HTMLSpanElement</a></code>). Вы видите, как почти вся "куча" используется элементами <code>HTMLSpanElement</code>, которые уже создались.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13046/treemap-monsters.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p> + +<p>Это дерево после выполнения скрипта со страницы <a href="/en-US/docs/Tools/Memory/Monster_example">monster allocation example</a>, который создаёт три массива, каждый содержащий 5000 монстров (персонажей), каждый из которых имеет случайно-сгенерированное имя. Вы заметите, что большая часть "кучи" занята строками (strings), используемых для имён, и объектов, используемых для хранения других атрибутов монстров.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13050/treemap-bbc.png" style="display: block; margin-left: auto; margin-right: auto; width: 844px;"></p> + +<p>Это дерево со страницы <a href="http://www.bbc.com/">http://www.bbc.com/</a>, и, вероятно, является примером из жизни лучшим, чем предыдущие примеры. Вы видите, что большую часть занимают скрипты (scripts), которые загружены из множества разных источников.</p> diff --git a/files/ru/tools/network_monitor/index.html b/files/ru/tools/network_monitor/index.html new file mode 100644 index 0000000000..2acb63a582 --- /dev/null +++ b/files/ru/tools/network_monitor/index.html @@ -0,0 +1,588 @@ +--- +title: Сетевой монитор +slug: Tools/Network_Monitor +tags: + - Debug + - Dev Tools + - Firefox + - Guide + - Networking + - 'l10n:priority' + - Отладка + - инструменты +translation_of: Tools/Network_Monitor +--- +<div>{{ToolsSidebar}}</div> + +<p>Сетевой монитор (Network Monitor) показывает все сетевые запросы, которые выполняет Firefox (например, когда загружается страница или выполняются запросы типа <a href="/ru/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>), а также как долго выполняется запрос и детали запроса.</p> + +<h2 id="Как_открыть_Сетевой_монитор">Как открыть Сетевой монитор</h2> + +<p>Есть несколько различных способов:</p> + +<div class="geckoVersionNote"> +<p>Пожалуйста, обратите внимание, что сочетание клавиш было изменено в Firefox 55</p> +</div> + +<ul> + <li>Нажмите <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd> ( <kbd>Command</kbd> + <kbd>Option</kbd> + <kbd>E</kbd> на Mac).</li> + <li>Выберите "Сеть" из меню "Web Developer" (это подменю меню "Tools" на 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>Сетевой монитор появится внизу окна браузера. Для просмотра запросов перезагрузите страницу:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13535/1-new-overview-small.png" style="display: block; height: 831px; margin: 0px auto; width: 1100px;" title=""></p> + +<p>Сетевой монитор записывает сетевые запросы постоянно, пока открыты <a href="/ru/docs/Tools">Инструменты разработчика</a>, даже когда вкладка Сеть не выбрана. Поэтому можно начать отладку страницы, например, в Веб-консоли, а потом переключиться и посмотреть сетевую активность в Сетевом мониторе без перезагрузки страницы.</p> + +<h2 id="Обзор_пользовательского_интерфейса">Обзор пользовательского интерфейса</h2> + +<p>Интерфейс разбит на четыре основные части:</p> + +<ul> + <li>основной экран содержит <a href="/ru/docs/Tools/Network_Monitor#Toolbar">панель инструментов</a>, <a href="/ru/docs/Tools/Network_Monitor#Network_request_list">список сетевых запросов</a> и <a href="/ru/docs/Tools/Network_Monitor#Network_request_details">панель детализации запросов</a>:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13266/nm-pieces.png" style="display: block; height: 850px; margin-left: auto; margin-right: auto; width: 962px;" title=""></p> + +<ul> + <li>в отдельном окне представлен <a href="/ru/docs/Tools/Network_Monitor#Performance_analysis">анализатор производительности</a>:</li> +</ul> + +<p><img alt="Performance analysis view" src="https://mdn.mozillademos.org/files/14673/Performance%20analysis.png" style="display: block; height: 541px; margin-left: auto; margin-right: auto; width: 665px;"></p> + +<h2 id="Панель_инструментов"><a name="Toolbar">Панель инструментов</a></h2> + +<p>Начиная с Firefox 47 и далее, панель инструментов находится сверху окна. В ранних версиях Firefox она располагалась снизу.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13138/nm-toolbar.png" style="display: block; height: 334px; margin-left: auto; margin-right: auto; width: 1910px;" title="">Она содержит:</p> + +<ul> + <li>значок для очистки<a href="/ru/docs/Tools/Network_Monitor#Network_request_list"> списка сетевых запросов</a></li> + <li>перечень значков для фильтрации отображаемых запросов по типам: + <ul> + <li>по типу контента ответа</li> + <li>XHR-запросы</li> + <li>(новое в Firefox 48) WebSocket-взаимодействие (обозначенное WS)</li> + </ul> + </li> + <li>значок для запуска <a href="/ru/docs/Tools/Network_Monitor#Performance_analysis">анализатора производительности</a></li> + <li>суммарную информацию по текущей странице, включающую число запросов, объём информации и общее время</li> + <li>поле для ввода фильтра запросов <a href="/ru/docs/Tools/Network_Monitor#Filtering_by_URL">по URL</a> и фильтра <a href="https://developer.mozilla.org/ru/docs/Tools/Network_Monitor#Filtering_by_properties">по свойствам.</a></li> + <li>значок для отображения/скрытия <a href="/ru/docs/Tools/Network_Monitor#Network_request_details">панели детализации запроса</a>.</li> +</ul> + +<div class="note"> +<p><strong>Примечание</strong>: Начиная с Firefox 58, кнопка фильтра "Flash"более недоступна, поэтому запросы Flash включены в фильтр "Прочее" ({{bug(1413540)}}).</p> +</div> + +<h2 id="Список_сетевых_запросов"><a id="Network_request_list" name="Network_request_list">Список сетевых запросов</a></h2> + +<p>По умолчанию Сетевой монитор показывает список всех сетевых запросов, сделанных по ходу загрузки страницы. Каждый запрос отображается в отдельной строке:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13537/5-new-request-list-new.png" style="display: block; height: 257px; margin: 0px auto; width: 900px;" title="">По умолчанию Сетевой монитор очищается каждый раз, когда вы переходите на новую страницу или перезагружаете текущую. Вы можете это изменить посредством включения галочки "Включить непрерывные логи" в <a href="/en-US/docs/Tools/Settings">настройках</a>.</p> + +<h3 id="Поля_таблицы_запросов">Поля таблицы запросов</h3> + +<p>Начиная с Firefox 55, вы можете выбирать разные колонки, кликая правой кнопкой мыши на заголовок таблицы, а затем выбирая нужные колонки в выпадающем меню. Опция "Восстановить колонки" доступна для сброса списка колонок к исходному варианту. Список колонок:</p> + +<ul> + <li><strong>Статус (</strong><strong>Status</strong><strong>)</strong>: возвращенный HTTP-код статуса. Здесь есть цветной значок: + + <ul> + <li><img alt="" src="https://mdn.mozillademos.org/files/13136/1x.png" style="height: 17px; width: 17px;">синий круг - для информационных кодов (коды 1XX). В частности включает код 101 (переключение протоколов) для <a href="/ru/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)</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;"> серая окружность - для ответов, которые получены из кэша браузера.</li> + </ul> + Точный код отображен сразу после значка.</li> + <li><strong>Метод (</strong><strong>Method</strong><strong>)</strong>: <a href="/ru/docs/Web/HTTP/Methods">HTTP-метод</a> запроса.</li> + <li><strong>Файл (</strong><strong>File</strong><strong>)</strong>: базовое имя запрошенного файла.</li> + <li><strong>Протокол</strong> (<strong>Protocol</strong>): Используемый сетевой протокол. (По умолчанию скрытая колонка. Новая в Firefox 55)</li> + <li><strong>Схема (Scheme)</strong>: Схема (https/http/ftp/...), взятая из пути запроса. (По умолчанию скрытая колонка. Новая в Firefox 55)</li> + <li><strong>Домен (</strong><strong>Domain</strong><strong>)</strong>: домен, к которому происходит запрос. + <ul> + <li>Если запрос использовал SSL/TLS, и подключение имело низкий уровень безопасности, например, некриптостойкий шифр, то вы увидите предупреждающий треугольник у имени домена. Вы сможете увидеть более подробную информацию о проблеме на вкладке <a href="/ru/docs/Tools/Network_Monitor#Security">Защита</a> в области деталей запроса.</li> + <li>Наведите мышь на имя домена, чтобы увидеть IP-адрес.</li> + <li>Значок рядом с доменом предоставит расширенную информацию о статусе безопасности этого запроса. Смотрите <a href="/ru/docs/Tools/Network_Monitor#Security_icons">Значки безопасности</a>.</li> + </ul> + </li> + <li><strong>Удалённый IP (</strong><strong>Remote IP</strong><strong>)</strong>: IP-адрес сервера, отвечающего на запрос. (По умолчанию скрытая колонка. Новая в Firefox 55)</li> + <li><strong>Причина (Cause)</strong>: Причина, по который был вызван запрос, например, XHR-запрос, {{htmlelement("img")}}, скрипт, скрипт, запрашивающий изображение и др. (Новая в Firefox 49)</li> + <li><strong>Тип (</strong><strong>Type</strong><strong>)</strong>: <code>Content-type</code> ответа.</li> + <li><strong>Куки</strong> (<strong>Cookies</strong>): Количество куки, связанных с запросом. (По умолчанию скрытая колонка. Новая в Firefox 55)</li> + <li><strong>Set-Cookies</strong>: Количество куки, связанных с ответом. (По умолчанию скрытая колонка. Новая в Firefox 55)</li> + <li><strong>Передано</strong> <strong>(Transferred)</strong>: число байт, которые фактически были переданы для загрузки ресурса. Это число будет меньше, чем <strong>Размер</strong>, если ресурс был упакован. Начиная с Firefox 47, если ресурс был получен из кэша <a href="/ru/docs/Web/API/Service_Worker_API">service worker</a>, то в этой ячейке будет отображено "service worker". Если значение получено из кэша браузера - то "кэшировано".</li> + <li><strong>Размер</strong> <strong>(Size)</strong>: размер переданного ресурса.</li> +</ul> + +<p>По клику на заголовок колонки произойдёт сортировка всех запросов по этой колонке. По умолчанию сортировка происходит по колонке "Временная шкала".</p> + +<h4 id="Миниатюры_изображений">Миниатюры изображений</h4> + +<p>Если файл является изображением, то в строку будет включена его миниатюра, при наведении на которую появится посмотр изображения во всплывающей подсказке:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13539/6-new-thumb-small.png" style="display: block; height: 241px; margin: 0px auto; width: 900px;"></p> + +<h4 id="Значки_безопасности"><a id="Security_icons" name="Security_icons">Значки безопасности</a></h4> + +<p>Сетевой монитор показывает значок в колонке Домен:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13541/7-new-security-icons-new.png" style="display: block; height: 217px; margin: 0px auto; width: 900px;" title=""></p> + +<p>Это предоставляет дополнительную информацию о безопасности запроса:</p> + +<table class="standard-table" style="height: 296px; width: 852px;"> + <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> + <p>Localhost</p> + </td> + </tr> + <tr> + <td><img alt="" src="https://mdn.mozillademos.org/files/16192/tracker_icon.png" style="height: 16px; width: 16px;"></td> + <td>URL принадлежит домену, о котором известно, что он отслеживает пользователей, поэтому URL был заблокирован.</td> + </tr> + </tbody> +</table> + +<p>По слабым и ошибочным HTTPS-запросам, вы можете посмотреть более детальную информацию о проблеме на вкладке "<a href="/ru/docs/Tools/Network_Monitor#Security">Защита</a>".</p> + +<h4 id="Колонка_Причина_Cause"><a id="Cause" name="Cause">Колонка "Причина" (Cause)</a></h4> + +<p>Колонка "Причина" указывает, что было причиной запроса. Обычно это очевидно, и можно увидеть корреляцию между этой колонкой и колонкой "Тип". Наиболее распространённые значения:</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> + +<div> +<p>Когда запрос срабатывает из JavaScript, то слева от надписи в колонке "Причина" появится маленький значок JS. При наведении на него курсором мыши появится всплывающее окно, содержащее трассировку стека для запроса; это даёт подсказку, откуда был вызван запрос.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13575/stack-trace-new-small.png" style="display: block; margin: 0 auto;"></p> + +<p>Во всплывающей подсказке вы можете кликнуть в любой из появившихся элементов, чтобы открыть связанный скрипт в панели "<a href="/ru/docs/Tools/Debugger">Отладчик</a>".</p> +</div> + +<h3 id="Временной_график">Временной график</h3> + +<p>Список запросов отображает время выполнения разных частей каждого запроса.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13543/8-new-timeline-small.png" style="display: block; height: 239px; margin: 0px auto; width: 900px;"></p> + +<p>Каждый график дан в горизонтальном виде в своей строке запроса, сдвинутый относительно позиций других запросов, поэтому вы можете увидеть полное время использованное для загрузки страницы. Для понимания деталей цветового кодирования, используемого здесь, загляните в раздел "<a href="/ru/docs/Tools/Network_Monitor#Timings">Тайминги</a>".</p> + +<p>Начиная с Firefox 45 график содержит две вертикальные линии:</p> + +<ul> + <li><strong><span style="color: blue;">синяя</span> </strong>линия маркирует точку, в которой произошло событие <code><a href="/en-US/docs/Web/Events/DOMContentLoaded">DOMContentLoaded</a></code> страницы</li> + <li><strong><span style="color: red;">красная</span> </strong>линия маркирует точку, в которой произошло событие <code><a href="/en-US/docs/Web/Events/load">load</a></code> страницы</li> +</ul> + +<h3 id="Фильтр_запросов">Фильтр запросов</h3> + +<p>Вы можете отфильтровать запросы по типу контента, по URL, по XMLHttpRequests или WebSocket, или по свойствам запроса.</p> + +<h4 id="Фильтрация_по_типу_контента"><a id="Filtering_by_content_type" name="Filtering_by_content_type">Фильтрация по типу контента</a></h4> + +<p>Для фильтрации по типу контента используйте кнопки на <a href="/ru/docs/Tools/Network_Monitor#Toolbar">панели инструментов</a>.</p> + +<h4 id="Фильтрация_XHR">Фильтрация XHR</h4> + +<p>Для просмотра только {{Glossary("XHR (XMLHttpRequest)", "XHR-запросов")}} используйте кнопку "XHR" <a href="/ru/docs/Tools/Network_Monitor#Toolbar">панели инструментов</a>.</p> + +<h4 id="Фильтрация_WebSockets">Фильтрация WebSockets</h4> + +<div class="geckoVersionNote"> +<p>Новое в Firefox 48</p> +</div> + +<p>Для просмотра только подключений WebSocket, используйте кнопку "WS" <a href="/ru//docs/Tools/Network_Monitor#Toolbar">панели инструментов</a>.</p> + +<p>Для контроля данных, передаваемых через WebSocket-соединения, попробуйте использовать дополнение <a href="https://addons.mozilla.org/en-US/firefox/addon/websocketsniff/">WebSocket Sniffer</a>.</p> + +<h4 id="Фильтрация_по_URL"><a id="Filtering_by_URL" name="Filtering_by_URL">Фильтрация по URL</a></h4> + +<p>Для фильтрации по URL используйте поле поиска, расположенное правее на <a href="/ru/docs/Tools/Network_Monitor#Toolbar">Панели инструментов</a>. Кликните на это поле или нажмите клавиши <kbd>Ctrl</kbd> + <kbd>F</kbd> или <kbd>Cmd</kbd> + <kbd>F</kbd>, и начните набирать текст. При этом список запросов будет отфильтрован по строкам, содержащим введённую подстроку; кроме того, фильтрация также будет происходить по колонкам "Домен" и "Файл".</p> + +<p>Начиная с Firefox 45, вы можете фильтровать запросы, которые не содержат введённую вами строку, предварив вводимую строку символом "-". Например, запрос "-google.com" покажет все запросы, которые не имеют подстроки "google.com" в своих URL.</p> + +<h4 id="Фильтрация_по_свойствам">Фильтрация по свойствам</h4> + +<div class="geckoVersionNote"> +<p>Новое в Firefox 55</p> +</div> + +<p>Для фильтрации по конкретным свойствам запроса используйте поле поиска на <a href="/ru/docs/Tools/Network_Monitor#Toolbar">Панели инструментов</a>. Но это поле признаёт только определённые ключевые слова, которые используются для фильтрации по конкретным свойствам запроса. За ключевым словом следует двоеточие, а затем значение фильтра. Значение фильтра <em>регистро<strong>не</strong>зависимое</em>. Если написать знак "минус" (<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>Показать ресурсы, имеющие указанный код HTTP-статуса.</td> + <td><code>status-code:304</code></td> + </tr> + <tr> + <td><code>method</code></td> + <td>Показать ресурсы, запрошенные через указанный HTTP-метод запроса.</td> + <td><code>method:post</code></td> + </tr> + <tr> + <td><code>domain</code></td> + <td>Показать ресурсы, пришедшие с указанного домена.</td> + <td><code>domain:mozilla.org</code></td> + </tr> + <tr> + <td><code>remote-ip</code></td> + <td>Показать ресурсы, пришедшие с сервера с указанным IP-адреcом.</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>Показать ресурсы, соответствующие типу причины. Типы можно найти в описании колонки "<a href="#Cause">причина</a>".</td> + <td><code>cause:js</code><br> + <code>cause:stylesheet<br> + cause:img</code></td> + </tr> + <tr> + <td><code>transferred</code></td> + <td>Показать ресурсы, имеющие указанный размер переданных данных или размер близкий к нему. Буква <code>k</code> может быть использована как суффикс для килобайт, <code>m</code> - мегабайт. Например, значение <code>1k</code> эквивалентно <code>1024</code>.</td> + <td><code>transferred:1k</code></td> + </tr> + <tr> + <td><code>size</code></td> + <td>Показать ресурсы, имеющие указанный размер (после декомпрессии) или размер близкий к указанному. Буква <code>k</code> может быть использована как суффикс для килобайт, <code>m</code> - мегабайт. Например, значение <code>1k</code> эквивалентно <code>1024</code>.</td> + <td><code>size:2m</code></td> + </tr> + <tr> + <td><code>larger-than</code></td> + <td>Показать ресурсы, которые больше чем указанный размер в байтах. Буква <code>k</code> может быть использована как суффикс для килобайт, <code>m</code> - мегабайт. Например, значение <code>1k</code> эквивалентно <code>1024</code>.</td> + <td><code>larger-than:2000</code><br> + <code>-larger-than:4k</code></td> + </tr> + <tr> + <td><code>mime-type</code></td> + <td>Показать ресурсы, которые соответствуют указанному MIME-типу.</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> показывают только ресурсы, пришедшие из кэша.<br> + <code>is:running</code> показывает только ресурсы, передаваемые в настоящее время.</td> + <td><code>is:cached</code><br> + <code>-is:running</code></td> + </tr> + <tr> + <td><code>scheme</code></td> + <td>Показать ресурсы, переданные через указанную схему.</td> + <td><code>scheme:http</code></td> + </tr> + <tr> + <td><code>has-response-header</code></td> + <td>Показать ресурсы, содержащие указанный HTTP-заголовок в ответе.</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>Показать ресурсы, имеющие заголовок <code>Set-Cookie</code> с атрибутом <code>Domain</code>, который имеет указанное значение.</td> + <td><code>set-cookie-domain:.mozilla.org</code></td> + </tr> + <tr> + <td><code>set-cookie-name</code></td> + <td>Показать ресурсы, имеющие заголовок <code>Set-Cookie</code> и в нём атрибут с указанным именем.</td> + <td><code>set-cookie-name:_ga</code></td> + </tr> + <tr> + <td><code>set-cookie-value</code></td> + <td>Показать ресурсы, имеющие заголовок <code>Set-Cookie</code> и в нём атрибут с указанным значением.</td> + <td><code>set-cookie-value:true</code></td> + </tr> + <tr> + <td><code>regexp</code></td> + <td>Показать ресурсы, имеющие URL, который соответствует данному {{Glossary("regular expression", "регулярному выражению")}}.</td> + <td><code>regexp:\d{5}<br> + regexp:mdn|mozilla</code></td> + </tr> + </thead> +</table> + +<h3 id="Контекстное_меню">Контекстное меню</h3> + +<p>При кликне правой клавишей мыши по строке отобразится контекстное меню:</p> + +<ul> + <li>Копировать URL</li> + <li>Копировать параметры URL (новое в Firefox 40)</li> + <li>Копировать POST-данные (новое в Firefox 40, только для запросов POST)</li> + <li>Копировать как cURL</li> + <li>Копировать заголовки запроса (новое в Firefox 40)</li> + <li>Копировать заголовки ответа (новое в Firefox 40)</li> + <li>Копировать ответ (новое в Firefox 40)</li> + <li>Копировать изображение как URL данных (только для изображений)</li> + <li>Копировать всё как HAR (новое в Firefox 41)</li> + <li>Сохранить всё как HAR (новое в Firefox 41)</li> + <li>Сохранить изображение как (новое в Firefox 55, только для изображений)</li> + <li>Изменить и снова отправить</li> + <li>Открыть в новой вкладке</li> + <li>Запустить <a href="/ru/docs/Tools/Network_Monitor#Performance_analysis">анализ производительности</a></li> +</ul> + +<h4 id="Изменить_и_снова_отправить"><a id="Edit_and_Resend" name="Edit_and_Resend">Изменить и снова отправить</a></h4> + +<p>Эта опция открывает редактор, позволяющий вам отредактировать метод запроса, URL, параметры и заголовки и ещё раз отправить запрос.</p> + +<h4 id="Копировать_как_cURL">Копировать как cURL</h4> + +<p>Эта опция копирует сетевой запрос в буфер как команду <a href="http://curl.haxx.se/">cURL</a>, и вы сможете запустить его из командной строки. Команда может включать следующие опции:</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>Для параметров запроса, закодированных в URL</td> + </tr> + <tr> + <td><code>--data-binary</code></td> + <td>Для параметров запроса типа Multipart. Например, файлы.</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>Один для каждого заголовка запроса.</p> + + <p>Начиная с Firefox 34, если присутствует заголовок "Accept-Encoding", то команда cURL будет включать <code>--compressed</code> вместо<code> -H "Accept-Encoding: gzip, deflate"</code>. Это значит, что запрос был автоматически распакован.</p> + </td> + </tr> + </tbody> +</table> + +<h4 id="КопироватьСохранить_всё_как_HAR">Копировать/Сохранить всё как HAR</h4> + +<div class="geckoVersionNote"> +<p>Новое в Firefox 41.</p> +</div> + +<p>Эти операции создают <a href="https://w3c.github.io/web-performance/specs/HAR/Overview.html">HTTP-архив</a> (HAR) для всех запросов из списка. Формат HAR позволяет вам экспортировать детальную информацию о сетевых запросах. "Копировать всё как HAR" копирует данные в буфер, "Сохранить всё как HAR" открывает диалог сохранения архива на диск.</p> + +<h2 id="Детализация_запроса"><a id="Network_request_details" name="Network_request_details">Детализация запроса</a></h2> + +<p>После щелчка по строке в правой части Сетевого монитора появится новая панель, которая предоставит более детальную информацию о запросе.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13274/nm-headers-annotated.png" style="display: block; height: 436px; margin-left: auto; margin-right: auto; width: 935px;"></p> + +<p>Вкладки сверху этой панели позволяют переключаться между следующими страницами:</p> + +<ul> + <li><strong>Заголовки (Headers)</strong></li> + <li><strong>Куки (Cookies)</strong></li> + <li><strong>Параметры (Params)</strong></li> + <li><strong>Ответ (Response)</strong></li> + <li><strong>Тайминги (Timings)</strong></li> + <li><strong>Защита (Security) </strong>(только для защищённых запросов)</li> + <li><strong>Предпросмотр (Preview)</strong> (только для типа HTML) (Удалено в Firefox 55)</li> +</ul> + +<p>Щелчок по значку, расположенном справа на <a href="/ru/docs/Tools/Network_Monitor#Toolbar">панели инструментов</a> (справа от поиска), закроет эту панель и вернёт вас к просмотру списка.</p> + +<h3 id="Заголовки_Headers">Заголовки <em>(Headers)</em></h3> + +<p>Эта вкладка содержит основную информацию о запросе:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15013/headers-updated-2.png" style="display: block; height: 439px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>Она включает:</p> + +<ul> + <li>URL-запроса</li> + <li>Метод запроса</li> + <li>Удалённый IP-адрес и порт <em>(новое в Firefox 39)</em></li> + <li>Код состояния со ссылкой на документацию на сайте MDN (если она есть)</li> + <li>HTTP-заголовки запроса и ответа, которые были отправлены</li> + <li>кнопка "<a href="/ru/docs/Tools/Network_Monitor#Edit_and_Resend">Изменить и снова отправить</a>"</li> +</ul> + +<p>Вы можете отфильтровать отображаемые заголовки:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13244/nm-headers-filtered.png" style="display: block; height: 516px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<div class="geckoVersionNote"> +<p>Новое в Firefox 54</p> +</div> + +<p>Кроме того, каждый заголовок это ссылка для углубленного изучения <a href="/en-US/docs/Web/HTTP/Headers">документации заголовков HTTP</a>.</p> + +<h3 id="Куки_Cookies">Куки <em>(Cookies)</em></h3> + +<p>Эта вкладка показывает все детали кук, которые были отправлены с запросом или ответом:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13240/nm-cookies.png" style="display: block; height: 464px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>Как и в случае с заголовками их список можно фильтровать.</p> + +<h3 id="Параметры_Params">Параметры <em>(Params)</em></h3> + +<p>Эта вкладка отображает параметры GET и данные POST запроса:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13254/nm-params.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Ответ_Response">Ответ <em>(Response)</em></h3> + +<p>Полное содержание ответа. Если в ответе HTML, JS или CSS, то он отобразится как текст:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13258/nm-response.png" style="display: block; height: 462px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>Если ответ - JSON, то он отобразится как просматриваемый объект.</p> + +<p>Если ответ - изображение, то вкладка будет содержать предпросмотр:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13260/nm-response-image.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Тайминги_Timings"><a name="Timings">Тайминги <em>(Timings)</em></a></h3> + +<p>Вкладка "Тайминги" разбивает сетевой запрос на следующие этапы, определённые в спецификации <a href="https://dvcs.w3.org/hg/webperf/raw-file/tip/specs/HAR/Overview.html">HTTP-архива (HAR)</a>:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Имя</th> + <th scope="col">Описание</th> + </tr> + </thead> + <tbody> + <tr> + <td>Блокировка (Blocked)</td> + <td> + <p>Время, потраченное в очереди ожидания для создания сетевого соединения.</p> + + <p>Браузер накладывает ограничение на число одновременных соединений с одним сервером. В по умолчанию это 6, но это можно изменить, используя свойство <code><a href="http://kb.mozillazine.org/Network.http.max-persistent-connections-per-server">network.http.max-persistent-connections-per-server</a></code>. Если все соединения используются, то браузер не может скачивать больше ресурсов, до тех пор пока одно из соединений не освободится.</p> + </td> + </tr> + <tr> + <td>Разрешение DNS (DNS resolution)</td> + <td>Время на разрешение имени хоста.</td> + </tr> + <tr> + <td>Соединение (Connecting)</td> + <td>Время на создание TCP-соединения.</td> + </tr> + <tr> + <td>Отправка (Sending)</td> + <td>Время на отправку HTTP-запроса на сервер.</td> + </tr> + <tr> + <td>Ожидание (Waiting)</td> + <td>Ожидание ответа от сервера.</td> + </tr> + <tr> + <td>Получение (Receiving)</td> + <td>Время на чтение полного ответа с сервера (или из кэша).</td> + </tr> + </tbody> +</table> + +<p>Здесь представлена детальная информация, есть аннотации, а также "графики-полосы" времени запроса, которые показывают разбивку общего времени на этапы:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13264/nm-timings.png" style="display: block; height: 466px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h3 id="Защита_Security"><a name="Security">Защита <em>(Security)</em></a></h3> + +<p>Если работа с сайтом ведётся через HTTPS, то у вас появится дополнительная вкладка "Защита". Она содержит детали об используемой безопасной связи, включая: протокол, набор шифров, детали сертификата:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13262/nm-security.png" style="display: block; height: 231px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<p>На вкладке "Защита" отображается предупреждение о слабой безопасности:</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="Предпросмотр_Preview">Предпросмотр <em>(Preview)</em></h3> + +<p>Удалено в Firefox 55.</p> + +<p>Если тип файла это HTML, то появится вкладка "Предпросмотр". Она отображает вид, как выглядит HTML-страница в браузере:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13256/nm-preview.png" style="display: block; height: 474px; margin-left: auto; margin-right: auto; width: 894px;"></p> + +<h2 id="Приостановка_и_возобновление_записи_сетевого_трафика">Приостановка и возобновление записи сетевого трафика</h2> + +<p>В Firefox 58 и далее, Сетевой монитор имеет кнопку, которая приостанавливает и возобновляет запись трафика текущей страницы. Это полезно, когда, например, вы хотите получить установившийся вид страницы для отладки, но вид страницы пока ещё меняется, потому что она ещё грузится или выполняются запросы. Кнопка "Пауза" позволяет увидеть текущий снимок состояния (snapshot).</p> + +<p>Эта кнопка находится скраю слева на главной панели Сетевого монитора, и выгдялит как обычная кнопка "Пауза" — <img alt="" src="https://mdn.mozillademos.org/files/15625/pause-icon.png" style="height: 23px; width: 34px;">.</p> + +<p>Вот её вид:</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>Когда она нажата, то меняет значок на иконку "Пуск" (треугольник), и вы можете возобновить запись трафика, нажав на эту кнопку ещё раз.</p> + +<h2 id="Анализ_производительности"><a id="Performance_analysis" name="Performance_analysis">Анализ производительности</a></h2> + +<p>Сетевой монитор включает инструмент для анализа производительности, который покажет вам, как долго браузер загружает различные части сайта.<br> + <br> + Для запуска инструмента анализа производительности кликните значок "Часы" на <a href="/ru/docs/Tools/Network_Monitor#Toolbar">панели</a>.</p> + +<p>(Кроме того, если у вас только что открытый Сетевой монитор, и список запросов ещё пуст, то у вас будут "Часы" в главном окне.)</p> + +<p>Сетевой монитор загрузит сайт дважды: первый раз с пустым кэшем браузера, а второй - с заполненным. Это имитирует вход пользователя на сайт впервые и последующие посещения. Он показывает результаты обоих запусков бок о бок горизонтально, либо вертикально, если окно браузера сжатое:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12864/nm-performance.png" style="display: block; height: 1028px; margin-left: auto; margin-right: auto; width: 691px;"></p> + +<p>Результаты каждого запуска представлены в таблице и круговой диаграмме. Таблицы группируют ресурсы по типам и показывают их общий размер и общее время, занятое их загрузкой. Сопровождающие круговые диаграммы показывают относительный объём ресурсов каждого типа.</p> + +<p>Для возврата в Сетевой монитор нажмите кнопку "Назад", расположенную слева от результатов.</p> + +<p>Нажав на конкретную часть в круговой диаграмме вы перейдёте в Сетевой монитор, в котором будут автоматически установлены фильтры для просмотра запросов этого <a href="/ru/docs/Tools/Network_Monitor#Filtering_by_content_type">типа ресурса</a>.</p> diff --git a/files/ru/tools/network_monitor/throttling/index.html b/files/ru/tools/network_monitor/throttling/index.html new file mode 100644 index 0000000000..34e21d4452 --- /dev/null +++ b/files/ru/tools/network_monitor/throttling/index.html @@ -0,0 +1,97 @@ +--- +title: Throttling +slug: Tools/Network_Monitor/Throttling +translation_of: Tools/Network_Monitor/Throttling +--- +<p>{{ToolsSidebar}}</p> + +<p>Сетевой монитор позволяет регулировать скорость вашей сети для эмуляции различной скорости соединения, таким образом вы можете увидеть как ваше приложение будет работать с разными типами соединения.</p> + +<h2 id="Throttling">Throttling</h2> + +<p>Панель инструментов имеет выпадающее меню Trottling, которое позволяет регулировать скорость вашей сети для эмуляции различных условий сети. Просто выберите один из вариантов и оно будет использовано после перезагрузки страницы.</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>Эмулируемые характеристики:</p> + +<ul> + <li>Скорость загрузки</li> + <li>Скорость отдачи</li> + <li>Минимальная задержка</li> +</ul> + +<p>Таблица ниже содержит значения для каждого типа соединения, но не полагайтесь на эту информацию для точных измерений производительности; она предназначена для того, чтобы дать приблизительное представление о производительности. </p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col">Вариант</th> + <th scope="col">Скорость загрузки</th> + <th scope="col">Скорость отдачи</th> + <th scope="col">Минимальная задержка (мс)</th> + </tr> + </thead> + <tbody> + <tr> + <td>GPRS</td> + <td>50 Kbps</td> + <td>20 Kbps</td> + <td>500</td> + </tr> + <tr> + <td>Regular 2G</td> + <td>250 Kbps</td> + <td>50 Kbps</td> + <td>300</td> + </tr> + <tr> + <td>Good 2G</td> + <td>450 Kbps</td> + <td>150 Kbps</td> + <td>150</td> + </tr> + <tr> + <td>Regular 3G</td> + <td>750 Kbps</td> + <td>250 Kbps</td> + <td>100</td> + </tr> + <tr> + <td>Good 3G</td> + <td>1.5 Mbps</td> + <td>750 Kbps</td> + <td>40</td> + </tr> + <tr> + <td>Regular 4G/LTE</td> + <td>4 Mbps</td> + <td>3 Mbps</td> + <td>20</td> + </tr> + <tr> + <td>DSL</td> + <td>2 Mbps</td> + <td>1 Mbps</td> + <td>5</td> + </tr> + <tr> + <td>Wi-Fi</td> + <td>30 Mbps</td> + <td>15 Mbps</td> + <td>2</td> + </tr> + </tbody> +</table> + +<h2 id="Особенности_сетевого_монитора">Особенности сетевого монитора</h2> + +<p>Следующие статьи охватывают различные аспекты сетевого монитора:</p> + +<ul> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Network_Monitor/Toolbar">Toolbar</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Network_Monitor/request_list">Network request list</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Network_Monitor/request_details">Network request details</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Network_Monitor/recording">Network traffic recording</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Network_Monitor/Performance_Analysis">Performance analysis</a></li> +</ul> diff --git a/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html b/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html new file mode 100644 index 0000000000..fb3888275d --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/edit_css_shapes/index.html @@ -0,0 +1,87 @@ +--- +title: Edit Shape Paths в CSS +slug: Tools/Page_Inspector/How_to/Edit_CSS_shapes +tags: + - Просмотр правил + - Редактор путей форм + - выделение + - инструменты + - фигуры +translation_of: Tools/Page_Inspector/How_to/Edit_CSS_shapes +--- +<p>{{ToolsSidebar}}</p> + +<p class="summary">The Shape Path Editor - <span id="result_box" lang="ru"><span>это инструмент, который поможет вам увидеть и редактировать фигуры, созданные с помощью {{cssxref ("clip-path")}}, а также свойство CSS {{cssxref ("shape-outside")}} и {{cssxref ("<basic-shape>")}}. В этом руководстве вы найдете все доступные варианты.</span></span></p> + +<h2 id="Активация_деактивация_Shape_Path_Editor">Активация / деактивация Shape Path Editor</h2> + +<p>The Shape Path Editor <span id="result_box" lang="ru"><span>доступен через панель правил CSS, которую можно открыть, как описано в руководстве</span></span> <a href="/en-US/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Opening the Inspector</a>. <span id="result_box" lang="ru"><span>После того как вы выбрали свой элемент, вы увидите значок формы рядом с любым допустимым значением, например</span></span> <span id="result_box" lang="ru"><span>один для</span></span> <code>shape-outside</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15915/enable-shapes-editor.png" style="border-style: solid; border-width: 1px; height: 370px; width: 1836px;"></p> + +<p><span id="result_box" lang="ru"><span>Щелчок по иконке заставит Редактор выделить фигуру.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15916/circle.png" style="height: 686px; width: 1210px;"></p> + +<p><span id="result_box" lang="ru"><span>Чтобы отключить </span></span>Shape Path Editor<span lang="ru"><span>, щелкните по иконке еще раз или выберите другой элемент или другой редактор.</span> <span>Обратите внимание, что </span></span>Shape Path Editor<span lang="ru"><span> не сохраняется между перезагрузкой страницы - если вы перезагрузите страницу, вам нужно будет снова выбрать элемент.</span></span></p> + +<h2 id="Понимание_строк_нарисованных_редактором"><span class="short_text" id="result_box" lang="ru"><span>Понимание строк, нарисованных редактором</span></span></h2> + +<p><span id="result_box" lang="ru"><span>После того, как вы выбрали фигуру на своей странице, редактор путей будет рисовать линии, которые помогут вам понять путь, который создается.</span></span></p> + +<ul> + <li><strong>Сплошная линия</strong><span lang="ru"><span> показывает контур фигуры, которая обертывает текст.</span> <span>Это ваша форма.</span> <span>Если форма обрезается по </span></span>margin box<span lang="ru"><span>, то </span></span>margin box<span lang="ru"><span> будет составлять часть этой строки.</span></span></li> + <li><span id="result_box" lang="ru"><span><strong>Пунктирная линия</strong> демонстрирует контур формы, которая проходит мимо ссылки </span></span>margin box<span lang="ru"><span>;</span></span> <span id="result_box" lang="ru"><span>это область, которая будет обрезана по </span></span>margin box. <span id="result_box" lang="ru"><span>Чтобы понять </span></span>margin box<span lang="ru"><span> и другие поля, используемые формулой CSS, см.</span></span> <a href="/en-US/docs/Web/CSS/CSS_Shapes/From_box_values">Shapes from box values</a>.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15917/clipped-margin-box.png" style="height: 692px; width: 1290px;"></p> + +<h2 id="Редактирование_основных_фигур"><span class="short_text" id="result_box" lang="ru"><span>Редактирование основных фигур</span></span></h2> + +<p><span id="result_box" lang="ru"><span>Параметры, предоставленные вам инструментом, будут различаться в зависимости от типа базовой формы, которую вы редактируете.</span></span> <span id="result_box" lang="ru"><span>Доступ к параметрам можно получить, активировав </span></span>Shape Path Editor<span lang="ru"><span> с помощью обычного щелчка по иконке, и вы можете использовать контекстное меню</span></span> (<kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + щелчёк) <span id="result_box" lang="ru"><span>для доступа к дополнительным функциям.</span></span></p> + +<h3 id="circle()">circle()</h3> + +<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> <span id="result_box" lang="ru"><span>равно</span></span> <code>circle()</code>, значит <span id="result_box" lang="ru"><span>вы создаете </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#circle()">circle basic shape</a>. <span id="result_box" lang="ru"><span>При нажатии на иконку формы рядом со значением</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>будет выделена фигура, а также вы можете изменить размер круга или перемещать его центр.</span></span> <span id="result_box" lang="ru"><span>Если вы перемещаете или изменяете размер круга за пределами поля, края становятся обрезаны им.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15917/clipped-margin-box.png" style="height: 692px; width: 1290px;"></p> + +<p><span id="result_box" lang="ru"><span>В панели правил вы можете увидеть значения для</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>при изменении формы.</span> <span>Затем вы можете скопировать эти значения обратно в таблицу стилей, чтобы создать новый, измененный путь формы.</span></span></p> + +<h3 id="ellipse()">ellipse()</h3> + +<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> равно <code>ellipse()</code><span id="result_box" lang="ru"><span>, значит вы используете </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#ellipse()">ellipse basic shape</a>. <span id="result_box" lang="ru"><span>Значение</span></span> <code>ellipse()</code> <span id="result_box" lang="ru"><span>работает так же, как</span></span> <code>circle()</code> <span id="result_box" lang="ru"><span>в </span></span>Shape Path Editor. <span id="result_box" lang="ru"><span>Эллипс представляет собой сжатый круг и, следовательно, имеет возможность изменять размер по горизонтали и вертикали, когда вы нажимаете на значок фигур.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15920/ellipse.png" style="height: 570px; width: 1216px;"></p> + +<h3 id="inset()">inset()</h3> + +<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> равно <code>inset()</code><span id="result_box" lang="ru"><span>, значит вы используете</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#inset()">inset basic shape</a>, <span id="result_box" lang="ru"><span>которая позволяет создавать значения смещения, вытягивая содержимое из </span></span>margin box.</p> + +<p><span id="result_box" lang="ru"><span>Каждая сторона прямоугольника может быть нацелена после нажатия на значок формы, чтобы активировать </span></span> Shape Path Editor<span lang="ru"><span>, и перетаскивание каждой стороны будет обновлять значения для </span></span> top, right, bottom, и left <span lang="ru"><span> смещяя значения.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15923/inset.png" style="height: 606px; width: 1214px;"></p> + +<h3 id="polygon()">polygon()</h3> + +<p><span id="result_box" lang="ru"><span>Если значение</span></span> <code>shape-outside</code> <span id="result_box" lang="ru"><span>равно</span></span> <code>polygon()</code><span id="result_box" lang="ru"><span>, значит вы используете</span></span> <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Shapes/Basic_Shapes#polygon()">polygon basic shape</a>. <span id="result_box" lang="ru"><span>Это самый сложный из основных значений формы, поэтому инструмент дает вам больше возможностей при их редактировании:</span></span></p> + +<ul> + <li><span id="result_box" lang="ru"><span>Нажатие на значок формы активирует </span></span> Shapes Path Editor <span lang="ru"><span> и дает вам возможность перемещать любую из точек вашей фигуры многоугольника.</span></span></li> + <li><span id="result_box" lang="ru"><span>Дважды щелкните в любом месте линии формы, и вы получите новую точку для настройки.</span></span></li> + <li><span id="result_box" lang="ru"><span>Дважды щелкните по существующей точке, и она будет удалена.</span></span> <em>Помните, что многоугольник должен содержать не менее трех точек.</em></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15918/polygon-edit.png" style="height: 660px; width: 1260px;"></p> + +<h3 id="Перемещение_и_масштабирование_фигур"><span class="short_text" id="result_box" lang="ru"><span>Перемещение и масштабирование фигур</span></span></h3> + +<p><span id="result_box" lang="ru"><span>Есть дополнительные функциональные возможности, доступные на выделенной фигуре - если вы нажмете</span></span> <kbd>Ctrl</kbd>/<kbd>Cmd</kbd> + <span id="result_box" lang="ru"><span>щелчек на значок фигуры для своей фигуры, подсветка изменится, вместо этого будет возможность масштабировать и / или перемещать ее.</span></span> <span id="result_box" lang="ru"><span>Еще раз, произойдет отсечение, если вы превысите границы</span></span> margin box.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15924/scaled-circle.png"></p> + +<p>Если ваша форма является многоугольником, вы также получаете возможность вращать ее вокруг оси.</p> + +<h2 id="Поддержка_браузера"><span class="short_text" id="result_box" lang="ru"><span>Поддержка браузера</span></span></h2> + +<p>The Shape Path Editor<span id="result_box" lang="ru"><span> в настоящее время работает для форм, сгенерированных с помощью {{cssxref ("clip-path")}};</span></span> <span id="result_box" lang="ru"><span>он также будет работать для форм, созданных с помощью {{cssxref ("shape-outside")}} с Firefox 62.</span></span></p> diff --git a/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..12eae4fb72 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,195 @@ +--- +title: Просмотр и редактирование CSS +slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +<div>{{ToolsSidebar}}</div> + +<p>Просмотр и редактирование CSS в <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">панели CSS</a> Инспектора.</p> + +<h2 id="Просмотр_CSS_правил">Просмотр CSS правил</h2> + +<p>На панели <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules(Правила)</a> отображаются все правила, применяемые к выбранному элементу, в порядке приоритета сверху-вниз:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>В списке правил так же будут отображены и стили браузера <a href="/en-US/docs/Web/CSS/Cascade">(user-agent styles)</a>, если данная опция выставлена в настройках панели разработчика <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">(developer tool settings)</a>. Заметьте, эта опция не зависит от опции "Browser styles" вкладки <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</p> + +<p>Начиная с Firefox 44 и выше, на панеле Rules отображаются все авторские стили, включая те, которые не поддерживаются или содержат ошибки. Это может помочь вам понять, почему определенные стили не применяются:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Rule_display">Rule display</h3> + +<p> It displays each rule as in a stylesheet, with a list of selectors followed by a list of <code>property:value;</code> declarations.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<ul> + <li><em>Highlight matched elements</em>: иконка цели сразу за селектором: кликнув по ней подсветятся все DOM-узлы на странице, совпадающие с этим селектором.</li> + <li><em>Overridden declaration</em>: declarations that are overridden by later rules are crossed out. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">overridden declarations</a>.</li> + <li><em>Show cascade</em>: next to overridden declarations is a magnifying glass: click this to see the cascade of rules containing the overridden property. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">overridden declarations</a>.</li> + <li><em>Enable/disable</em>: if you hover over a declaration, a checkbox appears next to it: you can use this to toggle the declaration on or off.</li> + <li><em>Filename and line number</em>: on the right-hand side is a link to the rule. See <a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">link to CSS file</a>.</li> +</ul> + +<p>User-agent styles are displayed with a different background, and the link to the filename and line number contains the prefix <code>(user agent)</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p> + +<h3 id="Filtering_rules">Filtering rules</h3> + +<p>Начиная с Firefox 40, это поле вверху вкладки Ruels подписан как "Filter Styles":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;">Как только вы что-нибудь напечатаете:</p> + +<ul> + <li>все правила, которые не содержат напечатанную строку, будут скрыты.</li> + <li>все объявления, которые содержат напечатанную строку, подсветятся</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;">Нажмите на "X" в конце поискового поля для сброса фильтра.</p> + +<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p> + +<h4 id="Strict_search">Strict search</h4> + +<div class="geckoVersionNote"> +<p>New in Firefox 43</p> +</div> + +<p>По умолчанию, блок поиска подсвечивает все объявления, которые содержат любую часть строки. К примеру, для "color" подсветятся объявления, содержащие <code><a href="/en-US/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> и <code><a href="/en-US/docs/Web/CSS/background-color">background-color</a></code>, а также просто <code><a href="/en-US/docs/Web/CSS/color">color</a></code>.:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>Starting in Firefox 43, if you enclose the search query in ticks, like this: `color`, the search is restricted to exact matches:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Displaying_pseudo-elements">Displaying pseudo-elements</h3> + +<p>From Firefox 41, the Rule view displays the following <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, if they are applied to the selected element:</p> + +<p><code>:after<br> + :before<br> + :first-letter<br> + :first-line<br> + :selection<br> + :-moz-color-swatch<br> + :-moz-number-spin-box<br> + :-moz-number-spin-down<br> + :-moz-number-spin-up<br> + :-moz-number-text<br> + :-moz-number-wrapper<br> + :-moz-placeholder<br> + :-moz-progress-bar<br> + :-moz-range-progress<br> + :-moz-range-thumb<br> + :-moz-range-track<br> + :-moz-selection</code></p> + +<p>If the selected element has pseudo-elements applied to it, they are displayed before the selected element but hidden by a disclosure triangle:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p> + +<p>Clicking the triangle displays them:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<h3 id="Setting_hover_active_focus">Setting :hover, :active, :focus</h3> + +<p>From Firefox 41, there's a new button to the right of the filter box:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">Click the button to see three checkboxes, which you can use to set the {{cssxref(":hover")}}, {{cssxref(":active")}} and {{cssxref(":focus")}} pseudo-classes for the selected element:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">Although this button is new in Firefox 41, the feature existed in earlier versions of Firefox. It could - and still can - be accessed from the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">popup menu in the HTML view</a>.</p> + +<div class="geckoVersionNote"> +<p>New in Firefox 43</p> +</div> + +<p>Starting in Firefox 43, if you set one of these pseudo-classes for a node, an orange dot appears in the markup view next to all nodes to which the pseudo-class has been applied:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Link_to_CSS_file">Link to CSS file</h3> + +<p>At the top right of each rule, the source filename and line number is displayed as a link: clicking it opens the file in the <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p> + +<p>From Firefox 41 you can copy the location of the source file: right-click the link and select "Copy Location".</p> + +<p>The Inspector understands CSS source maps. That means that if you are using a CSS preprocessor that has support for source maps, and you've enabled source map support in the <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>, then the link will take you to the original source, not the generated CSS. Read more about CSS source map support in the <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Style Editor documentation</a>.</p> + +<h3 id="Get_help_for_CSS_properties">Get help for CSS properties</h3> + +<p>Starting in Firefox 40, if you context-click on a CSS property name in the Rules view, you can open a popup displaying help for that property from MDN:</p> + +<p>{{EmbedYouTube("qZRLqpJiUsI")}}</p> + +<p>Note that for the moment, this doesn't cache responses from MDN, so it requires network connectivity.</p> + +<h3 id="Overridden_declarations">Overridden declarations</h3> + +<p>If a CSS declaration is overridden by some other CSS rule with a greater weight, then the declaration is shown with a line through it.</p> + +<div class="geckoVersionNote"> +<p>New in Firefox 43</p> +</div> + +<p>Starting in Firefox 43, overridden declarations have a magnifying glass next to them. Click the magnifying glass to filter the rule view to show only the rules applying to the current node that try to set the same property: that is, the complete cascade for the given property.</p> + +<p>This makes it easy to see which rule is overriding the declaration:</p> + +<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p> + +<h2 id="Examine_computed_CSS">Examine computed CSS</h2> + +<p>To see the complete computed CSS for the selected element, switch to the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Computed view</a>. This shows the calculated value that each CSS property has for the selected element:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>Clicking the arrow next to the property name shows the rule that set this value, along with a link to the source filename and line number:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>By default, this view only shows values that have been explicitly set by the page: to see all values, click the "Browser styles" box.</p> + +<p>Typing in the search box performs a live filtering of the list, so, for example, if you just want to see font-related settings, you can type "font" in the search box, and only properties with "font" in the name will be listed. You can also search for the values of properties: to find the rule responsible for setting the font to "Lucida Grande", type that in the search box.</p> + +<h2 id="Edit_rules">Edit rules</h2> + +<p>If you click on a declaration or a selector in the Rules view you can edit it and see the results immediately. To add a new declaration to a rule, click on the last line of the rule (the line occupied by the closing brace). If you enter an invalid value for a property when editing it, or an unknown property name, a yellow alert icon appears under the declaration.</p> + +<p>Any changes you make are temporary: reloading the page will restore the original styling.</p> + +<p>You can use the arrow keys to increase/decrease numeric rules while editing. The <kbd>Up</kbd> arrow will turn "1px" to 2px, and <kbd>Shift</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> will increment by 10. <kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> change values by 0.1, and <kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> will add or subtract 100 from the value.</p> + +<p>From Firefox 44, edits that you make in the Rules view are reflected in the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, and vice versa.</p> + +<h2 id="Add_rules">Add rules</h2> + +<p>You can add new rules in the Rules view. Just right-click to show the context menu and select "Add rule". This will add a new CSS rule whose selector matches the currently selected node.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>Starting in Firefox 41, there's a button that enables you to do the same thing:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h2 id="Copy_rules">Copy rules</h2> + +<p>Starting in Firefox 41, there are extra context menu items in the Rules view to copy rules, and pieces of rules, to the clipboard:</p> + +<ul> + <li>Copy Rule</li> + <li>Copy Selector</li> + <li>Copy Property Declaration</li> + <li>Copy Property Name</li> + <li>Copy Property Value</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p> + +<h2 id="See_also">See also</h2> + +<p>The Inspector also includes a number of specialized tools for working with particular CSS features, such as colors, fonts, and animations. To read about these see the list of <a href="/en-US/docs/Tools/Page_Inspector">how to guides</a>.</p> diff --git a/files/ru/tools/page_inspector/how_to/examine_and_edit_html/index.html b/files/ru/tools/page_inspector/how_to/examine_and_edit_html/index.html new file mode 100644 index 0000000000..b501796528 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/examine_and_edit_html/index.html @@ -0,0 +1,183 @@ +--- +title: Исследование и редактирование HTML +slug: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +tags: + - Guide + - Tools + - Инспектор +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +<div>{{ToolsSidebar}}</div><p>Исследовать и редактировать HTML-код страницы можно в <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">панели HTML</a>.</p> + +<h2 id="Навигация_по_HTML-коду">Навигация по HTML-коду</h2> + +<p>Вверху панели HTML находится панель инструментов, состоящая из <a href="https://ru.wikipedia.org/wiki/%D0%9D%D0%B0%D0%B2%D0%B8%D0%B3%D0%B0%D1%86%D0%B8%D0%BE%D0%BD%D0%BD%D0%B0%D1%8F_%D1%86%D0%B5%D0%BF%D0%BE%D1%87%D0%BA%D0%B0">навигационной цепочки</a> и поля поиска.</p> + +<h3 id="Навигационная_цепочка_для_HTML-кода">Навигационная цепочка для HTML-кода</h3> + +<p>Она показывает полную иерархию элементов содержащей выбранный элемент ветви документа:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10813/inspector-breadcrumbs.png" style="display: block; height: 266px; margin-left: auto; margin-right: auto; width: 739px;"> Нажатие и удержание левой кнопки мыши на одном из элементов навигационной панели вызывает меню, позволяющее выбрать какой-либо из сиблингов этого элемента. Кнопки со стрелками на левом и правом концах панели цепочки прокручивают цепочку, если она длиннее доступного пространства.</p> + +<p>С версии Firefox 34, при наведении указателя мыши на элемент навигационной цепочки соответствующий элемент подсвечивается на странице.</p> + +<h3 id="Поле_поиска">Поле поиска</h3> + +<p>Щёлкните в поле поиска, чтобы его раскрыть, потом введите, что вы ищете. Вы увидете подсказку с результатами поиска.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10811/inspector-search-annotated.png" style="display: block; height: 278px; margin-left: auto; margin-right: auto; width: 736px;">Нажмите «Enter». Будет выбран первый элемент этого типа на странице, а повторное нажатие «Enter» найдёт следующий.</p> + +<p>Можно искать тег, или ввести любую другую <a href="/ru/docs/Glossary/CSS_Selector">строку селекторов CSS</a>, так что можно найти элемент с ID <code>myId</code>, введя строку <code>#myId</code>.</p> + +<p>Начиная с Firefox 40, можно искать по атрибутам class или id без учёта формата селекторов CSS, так что для поиска соответствующего элемента достаточно ввести просто <code>myId</code>.</p> + +<h3 id="Дерево_HTML">Дерево HTML</h3> + +<p>Остальная часть панели показывает HTML-код страницы в виде дерева. Прямо слева от каждого узла есть стрелочка, нажатие на которую раскрывает узел. Если при нажатии на стрелочку удерживать кнопку Alt, раскрываются и узел, и все его потомки.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8541/inspector-html-tree.png" style="display: block; margin-left: auto; margin-right: auto;">Наведение указателя мыши на узел в дереве подсвечивает соответствующий элемент на странице.</p> + +<p>Узлы, скрытые с помощью <a href="/ru/docs/Web/CSS/display">display:none</a>, показываются бледнее (как и совсем не отображаемые узлы, например <a href="/ru/docs/Web/HTML/Element/head"><head></a>).</p> + +<h3 id="before_и_after">::before и ::after</h3> + +<p>Начиная с Firefox 35, можно исследовать псевдо-элементы, добавленные с помощью <a href="/ru/docs/Web/CSS/::before"><code>::before</code></a> и <a href="/ru/docs/Web/CSS/::after"><code>::after</code></a>:</p> + +<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p> + +<h2 id="Контекстное_меню_элемента">Контекстное меню элемента</h2> + +<p>Некоторые частые операции с узлом можно выполнять с помощью контекстного меню. Чтобы открыть это меню, щёлкните правой кнопкой по желаемому элементу:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10541/inspector-popup-ru.png" style="display: block; height: 411px; margin-left: auto; margin-right: auto; width: 678px;">Меню содержит следующие пункты:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 30%;">Править как HTML</td> + <td><a href="#Editing_HTML">HTML-код элемента</a></td> + </tr> + <tr> + <td>Копировать внутренний HTML</td> + <td>Скопировать innerHTML элемента</td> + </tr> + <tr> + <td>Копировать внешний HTML</td> + <td>Скопировать outerHTML элемента</td> + </tr> + <tr> + <td>Копировать уникальный селектор</td> + <td>Скопировать CSS-селектор, выбирающий этот и только этот элемент.</td> + </tr> + <tr> + <td>Копировать URL данных изображения</td> + <td>Скопировать изображение в формате data:// URL, если выбранный элемент изображение.</td> + </tr> + <tr> + <td>Показать свойства DOM</td> + <td>Открыть <a href="/ru/docs/Tools/Web_Console#The_split_console">split console</a> и ввести туда команду «<code>inspect($0)»</code>, чтобы <a href="/ru/docs/Tools/Web_Console#Inspecting_objects">исследовать</a> текущий выбранный элемент.</td> + </tr> + <tr> + <td>Вставить внутренний HTML</td> + <td>Вставить содержимое буфера в узел в качестве его <a href="/ru/docs/Web/API/element.innerHTML">innerHTML</a>.</td> + </tr> + <tr> + <td>Вставить внешний HTML</td> + <td>Вставить содержимое буфера в узел в качестве его <a href="/ru/docs/Web/API/element.outerHTML">outerHTML</a>.</td> + </tr> + <tr> + <td>Вставить/Перед</td> + <td>Вставить содержимое буфера в документ прямо перед этим узлом.</td> + </tr> + <tr> + <td>Вставить/После</td> + <td>Вставить содержимое буфера в документ прямо после этого узла.</td> + </tr> + <tr> + <td>Вставить/Как первого потомка</td> + <td>Вставить содержимое буфера в документ в качестве первого дочернего элемента этого узла.</td> + </tr> + <tr> + <td>Вставить/Как последнего потомка</td> + <td>Вставить содержимое буфера в документ в качестве последнего дочернего элемента этого узла.</td> + </tr> + <tr> + <td>Прокрутить в вид</td> + <td> + <div class="geckoVersionNote"> + <p>Новое в Firefox 40</p> + </div> + Прокручивает веб-страницу, чтобы был виден выбранный узел.</td> + </tr> + <tr> + <td>Удалить узел</td> + <td>Удалить элемент</td> + </tr> + <tr> + <td>Открыть ссылку в новой вкладке</td> + <td> + <div class="geckoVersionNote"> + <p>Новое в Firefox 40</p> + </div> + (только в меню, открытом для ссылки, например атрибута href) Открывает в новой вкладке то, на что ссылка.</td> + </tr> + <tr> + <td>Открыть файл в Отладчике</td> + <td> + <div class="geckoVersionNote"> + <p>Новое в Firefox 40</p> + </div> + (только в меню, открытом для ссылки на код JS) Открывает в отладчике файл, на который ссылка.</td> + </tr> + <tr> + <td>Открыть файл в Редакторе стилей</td> + <td> + <div class="geckoVersionNote"> + <p>Новое в Firefox 40</p> + </div> + (только в меню, открытом для ссылки на CSS) Открывает код, на который ссылка, в Редакторе стилей.</td> + </tr> + <tr> + <td>Копировать адрес ссылки</td> + <td> + <div class="geckoVersionNote"> + <p>Новое в Firefox 40</p> + </div> + (только в меню для URL) Скопировать URL.</td> + </tr> + <tr> + <td>:hover</td> + <td>Установить CSS’ный псевдо-класс CSS <a href="/ru/docs/Web/CSS/:hover" title="/ru/docs/Web/CSS/:hover">:hover</a></td> + </tr> + <tr> + <td>:active</td> + <td>Установить CSS’ный псевдо-класс <a href="/ru/docs/Web/CSS/:active" title="/ru/docs/Web/CSS/:active">:active</a></td> + </tr> + <tr> + <td>:focus</td> + <td>Установить CSS’ный псевдо-класс <a href="/ru/docs/Web/CSS/:focus" title="/ru/docs/Web/CSS/:focus">:focus</a></td> + </tr> + </tbody> +</table> + +<h2 id="Редактирование_HTML"><a name="Editing_HTML">Редактирование HTML</a></h2> + +<p>Вы можете редактировать HTML — теги, атрибуты и содержимое — прямо в панели HTML: сделайте двойной щелчок по тексту, который Вы хотите изменить, измените его, нажмите Enter, — и изменения сразу же будут применены.</p> + +<p>Чтобы редактировать <a href="/ru/docs/Web/API/Element.outerHTML">outerHTML</a> элемента, откройте контекстное меню элемента и выберите «Править как HTML». Вы увидите в панели HTML поле для редактирования текста:</p> + +<p><img alt="скриншот Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10545/inspector-editHTML-ru-mc20150426.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 749px;">Вы можете добавлять здесь любой HTML: изменять тег элемента, редактировать существующие элементы, добавлять новые. Как только вы кликнете вне поля редактирования, изменения будут применены к странице.</p> + +<h3 id="Копирование_и_вставка">Копирование и вставка</h3> + +<p>Используя <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">контекстное меню</a>, можно копировать узлы в дереве HTML и потом вставлять их.</p> + +<h3 id="Drag_and_drop" name="Drag_and_drop">Перетаскивание</h3> + +<div class="geckoVersionNote"> +<p>Новое в Firefox 39.</p> +</div> + +<p>С версии Firefox 39 можно редактировать HTML перетаскиванием узлов в дереве HTML. Просто нажмите и удерживайте кнопку мыши на каком-нибудь элементе, и перетащите его вверх или вниз по дереву. Когда вы отпустите кнопку, элемент будет вставлен в соответствующем месте:</p> + +<p>{{EmbedYouTube("oI-a035nfWk")}}</p> diff --git a/files/ru/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html b/files/ru/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html new file mode 100644 index 0000000000..e19459895d --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html @@ -0,0 +1,44 @@ +--- +title: Просмотр и редакторование блоковой модели +slug: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +<div>{{ToolsSidebar}}</div> + +<h2 id="Просмотр_Блоковой_модели">Просмотр Блоковой модели</h2> + +<p>Если использовать инструмент <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Кнопка выбора элемента" </a>и навести на элемент на странице, вы увидите <a href="/ru/docs/Web/CSS/box_model">блоковую модель</a> этого элемента, которая появится поверх него:</p> + +<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p> + +<p>Также, если вы наведёте на элемент в <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">панели HTML</a>, то поверх него появится <a href="/ru/docs/Web/CSS/box_model">блоковая модель</a>:</p> + +<p>{{EmbedYouTube("xA4IxTttNLk")}}</p> + +<p>С 39той версии Firefox строковые элементы разделяются на несколько строк-блоков, подсветка показывает каждую линию в индивидуальной строке-блоке:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display: block; height: 186px; margin-left: auto; margin-right: auto; width: 351px;"></p> + +<h3 id="Вкладка_блоковой_модели">Вкладка блоковой модели</h3> + +<p>Когда элемент выбран, вы сможете получить его блоковую модель во <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Box_Model_view">вкладке блоковой модели</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10875/box-model-view.png" style="display: block; height: 330px; margin-left: auto; margin-right: auto; width: 515px;"></p> + +<p>С 40й версии Firefox если навести на значение можно увидить подсказку из какого правила оно приходит:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10877/box-model-view-tooltip.png" style="display: block; height: 322px; margin-left: auto; margin-right: auto; width: 630px;"></p> + +<p>Если в этой вкладке навести на часть блоковой модели, то эта часть подсветится на странице:</p> + +<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p> + +<h2 id="Изменение_блоковой_модели">Изменение блоковой модели</h2> + +<p>Вы также можете изменять значения во <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Box_Model_view">вкладке блоковой модели</a>, изменения мгновенно отобразятся на странице:</p> + +<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p> diff --git a/files/ru/tools/page_inspector/how_to/index.html b/files/ru/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..476882dbdf --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: Как +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +<div>{{ToolsSidebar}}</div><p><span id="result_box" lang="ru"><span>Ссылки для</span> <span>различных</span> <span>КАК</span> <span>можно найти</span> <span>здесь.</span> <span>Эти ссылки</span> <span>описывают</span> <span>подробно</span> <span>Практические</span> <span>методы</span><span>.</span></span></p> + +<p>{{ ListSubpages () }}</p> + +<p> </p> diff --git a/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html b/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html new file mode 100644 index 0000000000..50416df3b8 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/inspect_and_select_colors/index.html @@ -0,0 +1,26 @@ +--- +title: Исследование и выбор цветов +slug: Tools/Page_Inspector/How_to/Inspect_and_select_colors +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +<div>{{ToolsSidebar}}</div><p>В <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Rules_view">view «Правила»</a> панели CSS, если правило содержит цветовое значение, рядом со значением показывается пример соответствующего цвета:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> + +<p>Если щёлкнуть по примеру цвета, появится инструмент выбора цвета, позволяющий изменить цвет:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p> + +<p>Инструмент выбора цвета включает значок пипетки: щёлкнув по этому значку, можно использовать пипетку для взятия нового цвета для элемента со страницы:</p> + +<p>{{EmbedYouTube("0Zx1TN21QOo", "16:9")}}</p> + +<p>Начиная с Firefox 40, для изменения формата отображения цвета надо, удерживая кнопку Shift, щёлчкнуть на образце цвета кнопкой мыши.</p> + +<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p> + +<p> </p> diff --git a/files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html b/files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html new file mode 100644 index 0000000000..a4e0927d76 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/otkrytie_inspektora/index.html @@ -0,0 +1,19 @@ +--- +title: Открытие Инспектора +slug: Tools/Page_Inspector/How_to/Otkrytie_Inspektora +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +<div>{{ToolsSidebar}}</div><p>Есть два основных способа открытия Инспектора:</p> + +<ul> + <li><em>без выбора элемента</em>: выберите пункт «Инспектор» в меню «Разработка» или «Веб-разработка», или нажмите соответствующее <a href="https://developer.mozilla.org/ru/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">клавиатурное сокращение</a>.</li> + <li><em>с выбранным элементом</em>: щёлкните правой кнопкой мыши элемент на веб-странице и выберите «Исследовать элемент».</li> +</ul> + +<p>Инспектор появится в нижней части окна браузера:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10055/inspector-in-context.png" style="width: 845px; display: block; margin-left: auto; margin-right: auto;">Чтобы начать первые шаги по Инспектору, см. <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour">UI tour</a>.</p> diff --git a/files/ru/tools/page_inspector/how_to/vybor_elementa/index.html b/files/ru/tools/page_inspector/how_to/vybor_elementa/index.html new file mode 100644 index 0000000000..16db872b70 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/vybor_elementa/index.html @@ -0,0 +1,29 @@ +--- +title: Выбор элемента +slug: Tools/Page_Inspector/How_to/Vybor_elementa +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +<div>{{ToolsSidebar}}</div><p>{{EmbedYouTube("y2LcsxE2pR0")}}</p> + +<p>Если Вы <a href="/ru/docs/Tools/Page_Inspector/How_to/Otkrytie_Inspektora">открыли Инспектор</a> нажатием на «Исследовать элемент», элемент уже будет выбран.</p> + +<p>В противном случае, когда вы будете перемещать мышь по странице, элемент под курсором мыши будет подсвечиваться, а подсказка будет содержать его HTML-тег, атрибуты class и/или ID, а также размер. Одновременно в левой панели Инспектора появится HTML-код элемента в его контексте:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8311/inspector-open.png" style="display: block; margin-left: auto; margin-right: auto;">С версии Firefox 39 можно использовать клавиши со стрелками для перехода между выбранными элементами:</p> + +<ul> + <li>Налево: подсветить элемент родительский текущему.</li> + <li>Направо: подсветить элемент дочерний текущему, или (если у текущего нет дочерних) следующий элемент одного родителя с текущим, или (если и сиблингов/сестринских нет) следующий узел в дереве.</li> +</ul> + +<p>Это особенно полезно когда элемент и его родитель отображаются на одном и том же пространстве экрана, так что трудно выбрать один из них мышью.</p> + +<p>Нажатие на подсвеченный элемент выбирает его. Когда элемент выбран, в <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">HTML pane</a> [en] в левой части Инспектора подсвечивается его разметка, а в <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">CSS pane</a> [en] в правой части Инспектора выводится информация о его стилях:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8313/inspector-selected.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Есть два способа выбрать другой элемент: или щёлкните его разметку в HTML pane, или нажмите <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Select element" button</a> [en], а потом щёлкните по элементу на веб-странице.</p> diff --git a/files/ru/tools/page_inspector/how_to/work_with_animations/index.html b/files/ru/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..3513e300d1 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,129 @@ +--- +title: Работа с анимацией +slug: Tools/Page_Inspector/How_to/Work_with_animations +tags: + - Анимация + - Инспектор +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +<div>{{ToolsSidebar}}</div><h2 id="Редактор_ключевых_кадров">Редактор @ключевых кадров</h2> + +<p>Любые <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> <span id="result_box" lang="ru"><span>связанные</span> <span>с выбранным</span> <span>элементом</span> <span>отображаются</span> <span>в виде</span></span> <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> и редактируются:</p> + +<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p> + +<h2 id="Функция_изменения_строки">Функция изменения строки</h2> + +<p>Когда вы <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> вы можете задать <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: <span id="result_box" lang="ru"><span>это</span> <span>определяет скорость</span><span>, с которой анимация</span> <span>прогрессирует</span><span>.</span> <span>Один из способов</span> <span>определить функцию</span> <span>является синхронизация</span> <span>с кубической</span> <span>кривой Безье</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Временные</span> <span>функции</span><span>, определенные как</span> <span>кубические</span> <span>кривые</span> <span>Безье</span> <span>получают</span> <span>значок</span> <span>в правилах</span> <span>просмотра.</span> <span>При нажатии на</span> <span>иконку</span> <span>вы получаете</span> <span>визуальный редактор для</span> <span>кривой</span><span>, что позволяет</span> <span>перетащить</span></span> <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, и увидеть результат на странице:</p> + +<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p> + +<div id="gt-src-tools"> +<div id="tts_button"><span class="short_text" id="result_box" lang="ru"><span>Эта функция использует</span> <span>открытый</span> <span>исходный код</span></span><a href="http://cubic-bezier.com"> Lea Verou’s cubic-bezier.com</a>.</div> +</div> + +<p> </p> + +<p><span id="result_box" lang="ru"><span>Кубический</span> <span>редактор</span> <span>Безье</span> <span>включает в себя ряд</span> <span>предварительных настроек</span><span>, сгруппированных</span> <span>в разделе</span></span> "Ease-in", "Ease-out", и "Ease-in-out":</p> + +<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p> + +<h2 id="Инспектор_Анимации">Инспектор Анимации</h2> + +<div class="note"> +<p><span id="result_box" lang="ru"><span>Хотя этот инструмент</span> <span>был введен в</span> <span>Firefox</span> <span>41</span><span>,</span> <span>его</span> <span>пользовательский интерфейс</span> <span>был</span> <span>переделан</span> <span>в</span> <span>Firefox</span> <span>43.</span> <span>В данной статье описывается</span> <span>инспектор анимации</span><span> появившийся в</span> <span>Firefox</span> <span>43 и</span> <span>последующих выпусках.</span> <span>Если вы</span> <span>хотите увидеть, как</span> <span>инспектор анимации</span> <span>выглядит в</span> <span>Firefox</span> <span>41 и 42</span> <span>см</span></span> <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p> +</div> + +<p>Из Firefox 41, Инспектор страниц включил в себя <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">extra view labeled "Animations"</a>.</p> + +<p> Этот вид <span id="result_box" lang="ru"><span>отображает как</span> <span>CSS</span> <span>переходы и</span> <span>CSS</span> <span>анимации</span> <span>синхронизированы</span> <span>по</span> <span>шкале времени</span><span>,</span> <span>перетаскивая</span> <span>виджет вы</span> <span>можете использовать для</span> <span>перемещения любую точку</span> <span>на временной шкале</span> <span>и увидеть</span> <span>страницу</span> <span>в этой точке.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Чтобы увидеть, как</span> <span>это работает,</span> <span>мы</span> <span>разберем пример</span><span>.</span> <span>Раздел данный ниже</span> <span>содержит три</span> серые <span>иконоки</span><span>,</span> <span>каждая из которых представляет</span> <span>разные</span></span> <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. <span id="result_box" lang="ru"><span>Если щелкнуть</span> <span>значок</span><span>, он</span> <span>увеличивается</span> <span>измененяя</span> <span>цвет</span><span>,</span> <span>и</span> <span>на экране отображается название</span> <span>канала</span><span>.</span> <span>Нажмите на</span> <span>значок еще раз</span><span>, чтобы изменить</span> <span>эффект</span><span>.</span> <span>Эти анимации</span> <span>сделаны</span> <span>путем применения</span> <span>переходов</span> <span>к нескольким</span> <span>свойствам</span> <span>CSS</span><span>.</span></span></p> + +<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p> + +<p><span id="result_box" lang="ru"><span>Давайте использовать</span> <span>инспектор анимации</span><span>, чтобы увидеть</span><span>, что происходит на данном</span><span> примере</span><span>.</span></span></p> + +<ul> + <li><span id="result_box" lang="ru"><span>Используйте Firefox</span> <span>43</span> <span>или более позднюю версию</span><span>,</span> <span>щелкните правой кнопкой мыши</span> <span>один из значков</span> <span>и выберите пункт "</span><span>Проверить</span> <span>элемент"</span><span>.</span></span></li> + <li><span id="result_box" lang="ru"><span>Вы, вероятно,</span> <span>также хотите</span><span> настроить выбранный</span> <span>узел</span> <span>на один уровень вверх</span><span>,</span> <span>к</span><span> узлу.</span></span> + <div class="channel"> </div> + </li> + <li><span class="short_text" id="result_box" lang="ru"><span>Переключение</span> <span>на вкладку "</span><span>Animations</span><span>"</span></span> .</li> +</ul> + +<p>{{EmbedYouTube("U2eJYacf5XY")}}</p> + +<p><span class="short_text" id="result_box" lang="ru"><span>Теперь</span> <span>воспроизведение анимации</span><span>:</span></span></p> + +<p>{{EmbedYouTube("CwXXXEllB3o")}}</p> + +<p><span id="result_box" lang="ru"><span>Давайте</span> <span>внимательнее посмотрим на</span> <span>содержание</span> <span>инспектора анимации</span> <span>здесь</span><span>:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p> + +<p><span id="result_box" lang="ru"><span>Он показывает</span> <span>синхронизированный</span> <span>график</span> <span>для каждого</span> <span>перехода</span> <span>CSS</span> <span>свойств</span> <span>участвующих</span> <span>в анимации</span><span>.</span> <span>Шкала времени</span> <span>начинается с</span> <span>начала первого</span> <span>перехода</span><span>,</span> <span>и заканчивается</span> <span>в конце</span> <span>последнего</span> <span>перехода</span><span>,</span> <span>и</span> <span>помечена</span> <span>маркерами</span> <span>каждые 100 миллисекунд</span> <span>(</span><span>это</span> <span>зависит от</span> <span>временного масштаба</span> <span>анимации</span> <span>отображаемой в данный момент</span><span>)</span><span>.</span> <span>Вы можете</span> <span>видеть, что</span><span> приведенный выше пример</span> <span>занимает</span> <span>735</span> <span>миллисекунд</span> <span>для запуска</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Каждая анимация</span> <span>или</span> <span>переход</span> <span>показан в виде</span> <span>горизонтальной полосы</span><span>, установленной</span> <span>по</span> <span>шкале времени</span><span>:</span></span></p> + +<ul> + <li><span class="short_text" id="result_box" lang="ru"><span>Бар</span> <span>синий</span><span>, если</span></span> <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> <span id="result_box" lang="ru"><span>был использован для</span> <span>свойств анимации</span><span>,</span> <span>и оранжевый</span><span>, если</span></span> был использован <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a>.</li> + <li> + <div id="gt-src-tools"> + <div id="tts_button"><span class="short_text" id="result_box" lang="ru"><span>С</span> <span>Firefox</span> <span>44</span><span>, строка</span> <span>содержит</span> <span>значок молнии</span></span>(<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) если свойства анимации используют набранные нити (посмотреть больше о <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</div> + </div> + </li> + <li><span id="result_box" lang="ru"><span>Бар</span> <span>помечается</span><span> именем</span> <span>свойства</span> <span>существующей анимации</span> <span>или названием</span> <span>@keyframes анимации</span></span> .</li> + <li> + <div id="gt-src-tools"> + <div id="tts_button"><span id="result_box" lang="ru"><span>Если в анимации</span> <span>или</span> <span>переходе</span> <span>произошла задержка</span><span>,</span> <span>это</span> <span>показано в виде</span> <span>заштрихованной</span> <span>части</span> <span>панели</span></span>.</div> + </div> + </li> + <li><span id="result_box" lang="ru"><span>При наведении курсора на</span> <span>панели</span> <span>появляется</span> <span>подсказка</span><span>, что дает вам</span> <span>более подробную информацию</span> <span>о</span> <span>анимации</span> <span>или</span> <span>переходе</span></span> .</li> +</ul> + +<p>С левой стороны бара переключатель для узлов относящихся к анимации. если навести курсор на переключатель, то выделится узел на странице. <span id="result_box" lang="ru"><span>Нажмите</span> <span>переключатель</span> <span>для выбора</span> <span>узла в</span> <span>инспекторе</span></span></p> + +<p><span class="short_text" id="result_box" lang="ru"><span>Слева от</span> <span>переключателя имеется</span> <span>значок</span> <span>"</span><span>мишень</span><span>"</span></span> (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). <span id="result_box" lang="ru"><span>Из</span> <span>Firefox</span> <span>44</span><span>,</span> <span>нажав</span> <span>на этот значок</span> <span>будет блокировать</span> <span>фломастер</span> <span>на элементе</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Применяя</span> <span>все это</span> <span>к нашему примеру</span><span>,</span> <span>мы можем</span> <span>видеть, что</span></span> :</p> + +<ul> + <li><span class="short_text" id="result_box" lang="ru"><span>В анимации</span> <span>участвуют</span> <span>два элемента</span></span> , <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. <span id="result_box" lang="ru"><span>Проходя</span> <span>над этими</span> <span>переключателями</span><span>,</span> <span>мы</span> <span>видим</span> <span>эти элементы</span><span>,</span> <span>соответственно</span><span>,</span> <span>название канала</span> <span>"</span><span>Firefox</span> <span>Nightly</span><span>"</span> <span>и значок</span> <span>канала</span></span> : {{EmbedYouTube("EOUjHt0V1No")}}</li> + <li><span class="short_text" id="result_box" lang="ru"><span>Каждый элемент</span> <span>имеет</span> <span>два свойства</span> <span>анимации</span></span> : + <ul> + <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> и <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> <span class="short_text" id="result_box" lang="ru"><span>для</span> <span>названия канала</span></span></li> + <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> и <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> для значка</li> + <li><code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> <span class="short_text" id="result_box" lang="ru"><span>свойство</span> <span>оживлялось</span> <span>на</span> <span>наборщике</span> <span>нити</span><span>.</span></span></li> + </ul> + </li> + <li><span id="result_box" lang="ru"><span>Свойство</span> <span>фильтра</span> <span>имеет задержку</span> <span>0,25 секунды</span><span>, применяемых</span> <span>к нему</span><span>.</span></span></li> + <li><span id="result_box" lang="ru"><span>Преобразование</span> <span>перехода</span> <span>свойства</span> <span>заканчивается</span> <span>через 0,5 секунды</span><span>.</span></span></li> +</ul> + +<h3 id="Воспроизведение_анимации">Воспроизведение анимации</h3> + +<p><span class="short_text" id="result_box" lang="ru"><span>В</span> <span>верхней части</span> <span>инспектора</span></span> анимации:</p> + +<ul> + <li><strong>there are buttons to play/pause and rewind the animation (new in Firefox 44)</strong></li> + <li><span id="result_box" lang="ru"><span>текущее время</span> <span>в анимации</span> <span>отображается</span> <span>(новое в</span> <span>Firefox</span> <span>44</span><span>)</span><span>.</span></span></li> +</ul> + +<p><span id="result_box" lang="ru"><span>И, наконец</span><span>,</span> <span>если вы</span> <span>щелкните внутри</span> <span>панели в верхней</span> <span>части шкалы времени</span><span>,</span> <span>вы получаете</span> <span>скруббер</span><span>, который</span> <span>вы можете перетащить</span> <span>влево и вправо</span> <span>для перемотки анимации</span> <span>назад и вперед</span><span>,</span> <span>и</span> <span>точно определить</span><span>, что происходит</span><span>, когда</span><span>:</span></span></p> + +<p>{{EmbedYouTube("1hqNaMsB48g")}}</p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> + +<p> </p> diff --git a/files/ru/tools/page_inspector/how_to/исследовать_event_listeners/index.html b/files/ru/tools/page_inspector/how_to/исследовать_event_listeners/index.html new file mode 100644 index 0000000000..c5ea101f0b --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/исследовать_event_listeners/index.html @@ -0,0 +1,28 @@ +--- +title: Исследовать Event Listeners +slug: Tools/Page_Inspector/How_to/Исследовать_event_listeners +tags: + - Инспектор + - Руководство + - инструменты +translation_of: Tools/Page_Inspector/How_to/Examine_event_listeners +--- +<div>{{ToolsSidebar}}</div><p>Начиная с Firefox 33 вы увидите значок «ev» в области HTML, напротив элементов, у которых есть связаные с ними Event Listeners:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9955/ev-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 571px;"></p> + +<p>Нажмите на иконку, затем вы увидите всплывающее окно со списком всех Event Listeners, связанных с этим элементом:<img alt="" src="https://mdn.mozillademos.org/files/9953/ev-popup.png" style="display: block; margin-left: auto; margin-right: auto; width: 628px;">Каждая строка содержит:</p> + +<ul> + <li>кнопка паузы: щелкните на нее, чтобы перейти к "event Listener" в <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger">Отладчик</a>, где вы сможете установить контрольную точку в нем</li> + <li>название события</li> + <li>название и номер строки обработчика: нажмите, чтобы увидеть функцию обработчика во всплывающем окне</li> + <li>метка, указывающая, является ли событие высплывающим</li> + <li>метка, указывающая систему, которая определяет событие. Firefox может отображать: + <ul> + <li>стандартные DOM события</li> + <li><a class="external external-icon" href="http://api.jquery.com/category/events/">jQuery events</a></li> + <li><a href="https://facebook.github.io/react/docs/events.html">React events</a> (new in Firefox 53)</li> + </ul> + </li> +</ul> diff --git a/files/ru/tools/page_inspector/how_to/просмотр_шрифтов/index.html b/files/ru/tools/page_inspector/how_to/просмотр_шрифтов/index.html new file mode 100644 index 0000000000..24b490e3d3 --- /dev/null +++ b/files/ru/tools/page_inspector/how_to/просмотр_шрифтов/index.html @@ -0,0 +1,24 @@ +--- +title: Просмотр шрифтов +slug: Tools/Page_Inspector/How_to/Просмотр_шрифтов +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/How_to/Edit_fonts +--- +<div>{{ToolsSidebar}}</div><h2 id="Всплывающая_подсказка_у_font-family">Всплывающая подсказка у font-family</h2> + +<p>Если навести указатель на свойство <a href="/ru/docs/Web/CSS/font-family"><code>font-family</code></a> на <a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Rules_view">вкладке «Правила»</a>, всплывёт подсказка с примером написанным соответствующим шрифтом:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9957/font-popup.png" style="width: 565px; display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Вкладка_«Шрифты»">Вкладка «Шрифты»</h2> + +<p><a href="/ru/docs/Tools/Page_Inspector/UI_Tour#Fonts_view">Режим просмотра шрифтов</a> показывает все шрифты, используемые выбранным элементом. Заметьте, что он показывает шрифты, используемые на вашей системе, и они могут отличаться от шрифтов, указанных в CSS:</p> + +<p><img alt="Скриншот вкладки Шрифты инспектора Nightly 2014-04-26 40.0a1.ru.linux-x86_64." src="https://mdn.mozillademos.org/files/10547/css-fonts-ru-20150426.png" style="width: 494px; display: block; margin-left: auto; margin-right: auto; height: 313px;"></p> + +<p>Образец шрифта по умолчанию «Abc», но до Firefox 36 он был <strong><a href="https://developer.mozilla.org/ru/docs/Web/HTML/Global_attributes/contenteditable">contenteditable</a></strong> и <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1158634">свободно редактировался</a>.</p> + +<p> </p> diff --git a/files/ru/tools/page_inspector/index.html b/files/ru/tools/page_inspector/index.html new file mode 100644 index 0000000000..c069e2ba2a --- /dev/null +++ b/files/ru/tools/page_inspector/index.html @@ -0,0 +1,86 @@ +--- +title: Инспектор страниц +slug: Tools/Page_Inspector +tags: + - CSS + - DOM + - Development + - 'Development:Tools' + - HTML + - Tools + - Web + - 'l10n:priority' + - Стили +translation_of: Tools/Page_Inspector +--- +<div>{{ToolsSidebar}}</div><p>Используйте Инспектор, чтобы исследовать и модифицировать HTML и CSS страницы.</p> + +<p>Вы можете исследовать страницы, загруженные в локальном Firefox или где-то удалённо, например в устройстве на Firefox OS или на Firefox для Android. См. <a href="/ru/docs/Tools/Remote_Debugging">удалённая отладка</a> о том, как подключить инструменты разработчика к чему-то удалённому.</p> + +<hr> +<h2 id="Тур_по_интерфейсу_пользователя">Тур по интерфейсу пользователя</h2> + +<p>Чтобы осмотреться в Инспекторе, см. <a href="/ru/docs/Tools/Page_Inspector/UI_Tour">небольшой тур по интерфейсу пользователя</a>.</p> + +<hr> +<h2 id="Как…">Как…</h2> + +<p>Что можно делать с помощью Инспектора, читайте в следующих руководствах:</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Otkrytie_Inspektora">Открыть Инспектор</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Исследовать и редактировать HTML</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Исследовать и выбирать цвета</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Просмотр_шрифтов">Смотреть шрифты</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualize transforms</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Использовать API Инспектора</a></dt> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Vybor_elementa">Выбрать элемент</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследовать и редактировать CSS</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Исследовать слушатели событий</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Work_with_animations">Работать с анимациями</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Редактировать CSS'ные фильтры</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/View_background_images">Смотреть фоновые изображения (background-image)</a></dt> + <dd> </dd> + <dt><a href="/ru/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Использовать Инспектор из Веб-консоли</a></dt> +</dl> +</div> +</div> + +<hr> +<h2 id="Справка">Справка</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/ru/docs/Tools/Page_Inspector/Сочетания_клавиш">Сочетания клавиш</a></dt> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/ru/docs/Tools/Tools_Toolbox#Inspector">Настройки</a></dt> + <dd> </dd> +</dl> +</div> +</div> diff --git a/files/ru/tools/page_inspector/ui_tour/index.html b/files/ru/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..467b4a8edc --- /dev/null +++ b/files/ru/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,96 @@ +--- +title: Обзор интерфейса +slug: Tools/Page_Inspector/UI_Tour +tags: + - Guide + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/UI_Tour +--- +<div>{{ToolsSidebar}}</div><p>Эта статья предлагает быстрый обзор основных разделов пользовательского интерфейса Инспектора страниц.</p> + +<p>Она охватывает три основных компонента интерфейса Инспектора:</p> + +<ul> + <li>кнопка выбора элемента</li> + <li>панель HTML</li> + <li>панель CSS</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10029/inspector-ui.png" style="display: block; margin-left: auto; margin-right: auto; width: 918px;">Это руководство нарочно как можно более короткое. В нём ссылки на другие руководства, с подробностями об использовании Инспектора.</p> + +<h2 id="Select_element_button" name="Select_element_button">Кнопка выбора элемента</h2> + +<p>Инспектор даёт вам подробную информацию о выбранном сейчас элементе. Кнопка выбора элемента — один из способов выбрать элемент для рассмотрения:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10031/select-button.png" style="display: block; height: 640px; margin-left: auto; margin-right: auto; width: 1674px;"></p> + +<p>Заметьте: она на <a href="/ru/docs/Tools/Tools_Toolbox#Панель инструментов">главной панели инструментов веб-разработчика</a>, так что быстро доступна из любого инструмента, не только Инспектора.</p> + +<p>Чтобы научиться выбирать элемент, см. руководство по <a href="/ru/docs/Tools/Page_Inspector/How_to/Vybor_elementa">выбору элемента</a>.</p> + +<h2 id="HTML_pane" name="HTML_pane">Панель HTML</h2> + +<p>Инспектор разделён на две половины. Левую половину занимает панель HTML:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10033/html-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;"></p> + +<p>Чтобы узнать больше о структуре панели HTML, см. руководство по <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">исследованию и редактированию</a>.</p> + +<h2 id="CSS_pane" name="CSS_pane">Панель CSS</h2> + +<p>Правую сторону Инспектора занимает панель CSS:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10035/css-pane.png" style="display: block; margin-left: auto; margin-right: auto; width: 835px;">Панель CSS имеет 5 режимов для просмотра различных данных:</p> + +<ul> + <li>Правила</li> + <li>Вычислено</li> + <li>Шрифты</li> + <li>Блоковая модель</li> + <li>Анимации</li> +</ul> + +<p>Переключаться между этими режимами можно с помощью вкладок наверху панели.</p> + +<h3 id="Rules_view" name="Rules_view">Просмотр правил</h3> + +<p>Вкладка «Правила» содержит список всех правил, которые применены к выбранному элементу, в порядке from most-specific to least-specific:</p> + +<p><img alt="Вкладка Правила Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10555/css-rules-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p> + +<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследование и редактирование CSS</a>.</p> + +<h3 id="Computed_view" name="Computed_view">Просмотр вычисленного</h3> + +<p>Вкладка «Вычислено» показывает стили, вычисленные для выбранного элемента.</p> + +<p><img alt="Вкладка Вычислено Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10553/css-computed-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p> + +<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Исследование и редактирование CSS</a>.</p> + +<h3 id="Fonts_view" name="Fonts_view">Просмотр шрифтов</h3> + +<p>Вкладка «Шрифты» показывает все используемые на странице шрифты вместе с небольшими образцами (<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1158634">которые до Firefox 36 можно было редактировать</a>).</p> + +<p><img alt="Вкладка Шрифты Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10549/css-fonts-ru-20150426-2.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p> + +<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/View_fonts">Просмотр шрифтов</a>.</p> + +<h3 id="Box_Model_view" name="Box_Model_view">Вкладка «Блоковая модель»</h3> + +<p>Вкладка "Блоковая модель" отображает блоковую модель выбранного элемента. В данной вкладке можно выполнять редактирование свойств элемента. Для этого нужно двойным щелчком выбрать число на рисунке для редактирования.</p> + +<p><img alt="Вкладка Блоковая модель Инспектора Nightly 2015-04-26" src="https://mdn.mozillademos.org/files/10551/css-box-model-ru-20150426.png" style="display: block; height: 314px; margin-left: auto; margin-right: auto; width: 495px;"></p> + +<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examine and edit the box model</a>.</p> + +<h3 id="Animations_view" name="Animations_view">Вкладка «Анимации»</h3> + +<p>Вкладка «Анимации» показывает информацию об анимациях, применяемых к выбранному элементу, и кнопку, чтобы их приостановить:</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10009/css-animations.png" style="display: block; margin-left: auto; margin-right: auto; width: 451px;"></p> + +<p>См. подробности в <a href="/ru/docs/Tools/Page_Inspector/How_to/Work_with_animations">Work with animations</a>.</p> diff --git a/files/ru/tools/page_inspector/сочетания_клавиш/index.html b/files/ru/tools/page_inspector/сочетания_клавиш/index.html new file mode 100644 index 0000000000..ae162ef628 --- /dev/null +++ b/files/ru/tools/page_inspector/сочетания_клавиш/index.html @@ -0,0 +1,13 @@ +--- +title: Клавиатурные сокращения +slug: Tools/Page_Inspector/Сочетания_клавиш +tags: + - Инспектор + - инструменты +translation_of: Tools/Page_Inspector/Keyboard_shortcuts +--- +<div>{{ToolsSidebar}}</div><p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p> + +<h3 id="Глобальные_сокращения">Глобальные сокращения</h3> + +<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/ru/tools/profiler/index.html b/files/ru/tools/profiler/index.html new file mode 100644 index 0000000000..2d3de16835 --- /dev/null +++ b/files/ru/tools/profiler/index.html @@ -0,0 +1,168 @@ +--- +title: Профилирование JavaScript +slug: Tools/Profiler +tags: + - Firefox + - Отладка + - Профайлер + - Профилирование + - Руководство + - инструменты +translation_of: Tools/Performance +--- +<div>{{ToolsSidebar}}</div><p>Используйте средства профилирования, чтобы находить узкие места в своём JavaScript коде. Профайлер периодически проверяет состояние стека вызовов JavaScript и составляет статистику на основе полученных в результате измерения величин.</p> + +<p>Вы можете запустить профайлер выбрав «Profiler» из меню «Web Develeper». Для операционных систем Linux и OS X данное меню находится в меню «Tools», в Windows его можно вызвать из меню «Firefox».</p> + +<p>В открывшемся меню уже будет выбран профайлер.</p> + +<p> </p> + +<h2 id="Семплирующие_профайлеры"><a name="sampling-profilers">Семплирующие профайлеры</a></h2> + +<p> </p> + +<p>Профайлер JavaScript — сэмплирующий профайлер. Это означает, что он периодически собирает информацию о состоянии интерпретатора JavaScript, сохраняет стек выполняющегося на момент сэмплирования кода. Статистически, число образцов полученных во время выполнения какой-либо функции, соответствует количеству времени, которое браузер проводит выполняя её, таким образом вы можете находить узкие места в своём коде.</p> + +<p><a name="profiling-example">Рассмотрим следующую программу в качестве примера:</a></p> + +<pre class="brush: js">function doSomething() { + var x = getTheValue(); + x = x + 1; // -> sample A + logTheValue(x); +} + +function getTheValue() { + return 5; +} + +function logTheValue(x) { + console.log(x); // -> sample B, sample C +} + +doSomething();</pre> + +<p>Допустим мы запустили данную программу с активным профайлером, и во время её выполнения, профайлер взял три сэмпла, в местах указанных комментариями.</p> + +<p>Они все взяты внутри doSomething(), но вторые два внутри функции logTheValue() вызванной doSomething(). В результате получим профиль состоящий из трёх записей:</p> + +<pre>Sample A: doSomething() +Sample B: doSomething() > logTheValue() +Sample C: doSomething() > logTheValue()</pre> + +<p>Конечно этих данных недостаточно, чтобы сделать какие-то выводы, но с гораздо большим количеством сэмплов, мы поймём, что узким местом в нашей программе является logTheValue().</p> + +<p> </p> + +<h2 id="Создание_профиля">Создание профиля</h2> + +<p>Нажмите кнопку <em>stopwatch</em> в профайлере, чтобы начать сбор сэмплов. Кнопка <em>stopwatch</em> подсвечена, если профайлер активен. Кликните на ней ещё раз и сохраните новый профиль:</p> + +<p> </p> + +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p> + +<p>Новый профиль будет открыт автоматически при нажатии "Stop".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Панель разделена на две части:</p> + +<ul> + <li>Левая сторона содержит список всех записанных профилей и позволяет загрузить любой из них. Ниже находятся две кнопки: <em>stopwatch</em> позволяет записать новый профиль, в то время как<em> import... </em>позволяет импортировать ранее сохраненные данные. Когда профиль выбран, вы можете сохранить его данные как файл в формате JSON нажав на кнопке <em>Save</em>.</li> + <li>Правая сторона показывает текущий загруженный профиль.</li> +</ul> + +<p> </p> + +<h2 id="Анализируем_профиль">Анализируем профиль</h2> + +<p> </p> + +<p>Профиль разделён на две части:</p> + +<ul> + <li><a href="#profile-timeline" title="#profile-timeline">График профилирования (profile timeline</a>)</li> + <li><a href="#profile-details" title="#profile-details">Детали профилирования (profile details</a>)</li> +</ul> + +<h3 id="График_профилирования"><a id="profile-timeline" name="profile-timeline">График профилирования</a></h3> + +<p>График профилирования располагается в верхней части экрана профиля.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Горизонтальная ось это время, а вертикальная — размер стека вызовов на текущий сэмпл. Стек вызовов представляет количество активных функций на момент сэмплирования.<br> + Красные сэмплы на графике говорят о том, что браузер был недоступен на тот момент и пользователь мог наблюдать паузы в анимации и отклике браузера. Если профиль содержит красные образцы, их следует разбить на несколько событий и рассмотреть используя <a href="/en-US/docs/Web/API/window.requestAnimationFrame" title="/en-US/docs/Web/API/window.requestAnimationFrame">requestAnimationFrame</a> и <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Workers</a>.</p> + +<p>Подсветив определённый участок в профиле рамкой, можно исследовать его более детально:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>В таком случае, над графиком появится новая кнопка с надписью вида: "Sample Range [AAA, BBB]". Нажав на неё, можно приблизить рассматриваемый участок и детально его рассмотреть.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Детали_профилирования"><a name="profile-details">Детали профилирования</a></h3> + +<p>Детали профилирования расположены в нижней части экрана профиля:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Когда вы впервые открываете новый сэмпл, панель сэмплов содержит единственную строку «(total)», как на скриншоте ниже. Если кликнуть на стрелке следующей за надписью «(total)», вы увидилте список всех функций верхнего уровня которые находятся в сэмпле.</p> + +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p> + +<p>Время выполнения (<strong>Running time</strong>) показывает число сэмплов в которых присутствует данная функция<a href="#footnote-1"><sup>1</sup></a> , далее следует процент появления функции в остальных сэмплах профиля. Первая сверху строка показывает, что в профиле 2021 сэмпл, вторая строка показывает, что 1914 или 94.7% из них содержат в себе функцию detectImage().</p> + +<p><strong>Self</strong> показывает количество сэмплов полученное во время выполнения самой функции, а не функции её вызвавшей. В <a href="#profiling-example" title="#profiling-example">примере</a> выше doSomething() имеет время выполнения (<strong>Running time</strong>) равное 3 (сэмпл A, B и C), но значение <strong>Self</strong> равно единице (sample A).</p> + +<p>Третий столбец содержит имена функций, а также имена файлов и номера строк (для локальных функций) или полное/доменное имя (для внешних). Функции серого цвета — встроенные функции браузера, чёрные — JavaScript загруженный страницей. Если вы переместите курсор мыши вдоль строк, то обнаружите справа от имён функций стрелочку: кликните по ней и увидите исходный код функции.</p> + +<p> </p> + +<h3 id="Раскрываем_древо_вызовов">Раскрываем древо вызовов</h3> + +<p> </p> + +<p>В строке, если какие-либо сэмплы были взяты в функции вызванной другой функцией (т. е. Если время выполнения (<strong>Running time</strong>) больше чем <strong>Self</strong> для заданной строки) — появляется стрелочка слева от имени функции, дающая возможность раскрыть древо вызовов.</p> + +<p>Для <a href="#profiling-example" title="#profiling-example">примера</a> приведённого выше, полностью раскрытое древо вызовов будет выглядеть следующим образом:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td style="text-align: center;"><strong>Running Time</strong></td> + <td style="text-align: center;"><strong>Self</strong></td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">3 100%</td> + <td style="text-align: center;">1</td> + <td style="text-align: center;">doSomething()</td> + </tr> + <tr> + <td style="text-align: center;">2 67%</td> + <td style="text-align: center;">2</td> + <td style="text-align: center;">logTheValue()</td> + </tr> + </tbody> +</table> + +<p>Более реалистичный пример: на скриншоте ниже, на второй строке видно 1914 сэмпла взятых внутри функции detectImage(). Но все сэмплы были получены внутри функции названной detectImage() (<strong>Self</strong> равно нулю). Мы можем развернуть древо вызовов чтобы определить какая из функций на самом деле выполнялась когда было взято большинство сэмплов:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Далее можно сделать вывод, что 6 сэмплов было взято во время выполнения detectAtScale(), 12 во время getRect() и так далее.</p> + +<p>Примечания</p> + +<ol> + <li><a name="footnote-1"> </a>Если функция вызывается несколько раз из различных источников, в выводе профайлера представлена она будет так же несколько раз. Так структуры вроде forEach будут появляться несколько раз в древе вызовов. + + <p> </p> + </li> +</ol> + +<p> </p> diff --git a/files/ru/tools/release_notes/index.html b/files/ru/tools/release_notes/index.html new file mode 100644 index 0000000000..38c96a4e83 --- /dev/null +++ b/files/ru/tools/release_notes/index.html @@ -0,0 +1,127 @@ +--- +title: Замечания к релизу +slug: Tools/Release_notes +translation_of: Mozilla/Firefox/Releases +--- +<div>{{ToolsSidebar}}</div><h2 id="Firefox_48">Firefox 48</h2> + +<p>Главное:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Storage_Inspector#Editing_storage_items">Редактирование сохранённых вещей в инспекторе хранилища</a></li> + <li><a href="/en-US/docs/Tools/Memory/Tree_Map_view">Утилита для просмотра дерева памяти</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Перемещение элементов по странице путём перетаскивания</a></li> + <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Viewing_network_request_details">Просмотр деталей HTTP запросов в консоли веб</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">Инспектор анимации для Web Animations API</a></li> + <li><a href="/en-US/docs/Tools/Settings#Choose_DevTools_theme">Тема Firebug</a></li> + <li><a href="/en-US/docs/Tools/DOM_Property_Viewer">Утилита для просмотра свойств DOM</a></li> +</ul> + +<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2016-04-25&query_format=advanced&chfield=resolution&chfieldfrom=2016-03-07&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20about%3Adebugging&component=Developer%20Tools%3A%20Animation%20Inspector&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Computed%20Styles%20Inspector&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20CSS%20Rules%20Inspector&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Font%20Inspector&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20JSON%20Viewer&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Performance%20Tools%20%28Profiler%2FTimeline%29&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Storage%20Inspector&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20Web%20Audio%20Editor&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&component=Developer%20Tools%3A%20WebIDE&product=Firefox&list_id=12832440">Другие исправления багов</a></p> + +<h2 id="Firefox_32">Firefox 32</h2> + +<p>Highlights:</p> + +<ul> + <li><a href="/ru/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></li> + <li><a href="/ru/docs/Tools/Scratchpad#Code_completion_and_inline_documentation">Code completion and inline documentation in Scratchpad</a></li> + <li><a href="/ru/docs/Tools/Page_Inspector#Rules_view">User agent styles in the Inspector's Rules view</a></li> + <li><a href="/ru/docs/Tools/Page_Inspector#Firefox_32_onwards_2">Element picker button has moved</a></li> + <li><a href="/ru/docs/Tools/Page_Inspector#Firefox_32_onwards">Node dimensions added to the Inspector's infobar</a></li> + <li><a href="/ru/docs/Tools/Tools_Toolbox#Extra_tools">Full page screenshot button added</a></li> +</ul> + +<p>More details:</p> + +<ul> + <li>HiDPI images added to the tools</li> + <li>Nodes that have <code>display:none</code> are shown differently in the Inspector</li> +</ul> + +<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-06-09&chfield=resolution&query_format=advanced&chfieldfrom=2014-04-28&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox">All devtools bugs fixed between Firefox 31 and Firefox 32</a>.</p> + +<h2 id="Firefox_31">Firefox 31</h2> + +<p>Highlights:</p> + +<ul> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Eyedropper">Eyedropper tool to select colors in web pages</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Web_Console#Error_messages">full stack traces for console error messages</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector#Box_model_view">editable Box Model View</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Web_Console#Styling_messages">%c formatting to style console messages</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Network_Monitor#Copy_as_cURL">"copy as cURL" command in Network Monitor</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/tools/Keyboard_shortcuts#Source_editor">Sublime Text keybindings in the source editor</a></li> +</ul> + +<p>More details:</p> + +<ul> + <li><a href="/ru/docs/Tools/Network_Monitor#Network_request_list">Option to make Network Monitor logs persistent</a></li> + <li><a href="/ru/docs/Tools/Web_Console#JavaScript_errors_and_warnings">JavaScript warnings on by default in the Web Console</a></li> + <li><a href="/ru/docs/Tools/Page_Inspector#HTML_pane_2">Alt+click to expand all descendants of a node</a></li> +</ul> + +<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-04-28&chfield=resolution&query_format=advanced&chfieldfrom=2014-03-17&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox&list_id=10022921">All devtools bugs fixed between Firefox 30 and Firefox 31</a>.</p> + +<h2 id="Firefox_30">Firefox 30</h2> + +<p>Highlights:</p> + +<ul> + <li><a href="https://www.youtube.com/watch?v=y2LcsxE2pR0">Box model highlighting in the Page Inspector</a></li> + <li><a href="/ru/docs/Tools/Web_Console#Working_with_iframes">Web Console support for executing JS in frames</a></li> + <li>Web Console display improvements: code highlighting, <a href="/ru/docs/Tools/Web_Console#Highlighting_and_inspecting_nodes">node highlighting and inspection</a></li> + <li>Network Monitor theme improvements, <a href="/ru/docs/Tools/Network_Monitor#Network_request_fields">image thumbnails, image preview</a>, <a href="/ru/docs/Tools/Network_Monitor#Preview">HTML preview</a></li> + <li><a href="/ru/docs/Tools/Browser_Console#Browser_Console_command_line">Browser Console input must now be enabled in Settings</a></li> + <li><a href="/ru/docs/Tools_Toolbox#Available_Toolbox_Buttons">Icons for Scratchpad and other tools now hidden by default</a></li> +</ul> + +<p>More details:</p> + +<ul> + <li>Support for <a href="/ru/docs/Web/API/console.count">console.count()</a></li> + <li><a href="/ru/docs/Tools/Web_Console#Keyboard_shortcuts">New shortcut key to focus on web console command line</a></li> + <li><a href="/ru/docs/Tools/Page_Inspector#font-family_tooltip">Font family tooltip in the Inspector</a></li> + <li><a href="/ru/Firefox_OS/Debugging/Developer_settings#Developer_HUD">Firefox OS HUD</a> features: memory tracking and jank monitor</li> +</ul> + +<p><a href="https://bugzilla.mozilla.org/buglist.cgi?resolution=FIXED&classification=Client%20Software&chfieldto=2014-03-17&chfield=resolution&query_format=advanced&chfieldfrom=2014-02-03&chfieldvalue=FIXED&bug_status=RESOLVED&bug_status=VERIFIED&component=Developer%20Tools&component=Developer%20Tools%3A%203D%20View&component=Developer%20Tools%3A%20App%20Manager&component=Developer%20Tools%3A%20Canvas%20Debugger&component=Developer%20Tools%3A%20Console&component=Developer%20Tools%3A%20Debugger&component=Developer%20Tools%3A%20Framework&component=Developer%20Tools%3A%20Graphic%20Commandline%20and%20Toolbar&component=Developer%20Tools%3A%20Inspector&component=Developer%20Tools%3A%20Memory&component=Developer%20Tools%3A%20Netmonitor&component=Developer%20Tools%3A%20Object%20Inspector&component=Developer%20Tools%3A%20Profiler&component=Developer%20Tools%3A%20Responsive%20Mode&component=Developer%20Tools%3A%20Scratchpad&component=Developer%20Tools%3A%20Source%20Editor&component=Developer%20Tools%3A%20Style%20Editor&component=Developer%20Tools%3A%20User%20Stories&component=Developer%20Tools%3A%20WebGL%20Shader%20Editor&product=Firefox&list_id=9755315">All devtools bugs fixed between Firefox 29 and Firefox 30</a>.</p> + +<h2 id="Firefox_29">Firefox 29</h2> + +<p><a href="https://hacks.mozilla.org/2014/02/css-source-map-support-network-performance-analysis-more-firefox-developer-tools-episode-29/" title="http://www.mozilla.org/ru/firefox/aurora/">Firefox 29 Hacks post</a>. Highlights:</p> + +<ul> + <li><a href="/ru/docs/Tools_Toolbox#Choose_DevTools_theme">Theme improvements</a>, including major updates to the light theme</li> + <li><a href="/ru/docs/Tools/Network_Monitor#Performance_analysis">Network Monitor performance analysis tool</a></li> + <li><a href="/ru/docs/Tools/Style_Editor#Source_map_support">CSS source maps</a></li> + <li><a href="/ru/docs/Tools/Page_Inspector#Selecting_elements">Changes in the way node selection works in the Inspector</a></li> + <li><a href="/ru/docs/Tools/Debugger#Call_stack_pane">Classic call stack</a> for the Debugger, and added the ability to <a href="/ru/docs/Tools/Debugger#Highlight_and_inspect_DOM_nodes">highlight and inspect nodes</a></li> + <li><a href="/ru/docs/Tools/Using_the_Source_Editor#See_also">Emacs and Vim keybindings in the source editor</a></li> +</ul> + +<h2 id="Firefox_28">Firefox 28</h2> + +<p><a href="https://hacks.mozilla.org/2013/12/split-console-pretty-print-minified-js-and-more-firefox-developer-tools-episode-28/" title="Aurora Hacks post">Firefox 28 Hacks post</a>. Highlights:</p> + +<ul> + <li>The App Manager has an integrated <a href="/ru/Firefox_OS/Using_the_App_Manager#Manifest_editor">manifest editor</a></li> + <li>The <a href="/ru/docs/Tools/Web_Console#The_split_console">Split Console</a> feature enables you to use the Web Console and another developer tool side by side</li> + <li><a href="/ru/docs/Tools/Debugger#Pretty-print_a_minified_file">Pretty-print minified JavaScript</a> in the Debugger</li> + <li><a href="/ru/docs/Tools/Page_Inspector#Rules_view">Color picker tooltip</a> in the Inspector</li> + <li><a href="/ru/docs/Tools/Browser_Toolbox">Browser Toolbox</a> for debugging platform or add-on code</li> +</ul> + +<h2 id="Firefox_27">Firefox 27</h2> + +<p><a href="https://hacks.mozilla.org/2013/11/firefox-developer-tools-episode-27-edit-as-html-codemirror-more/">Firefox 27 Hacks post</a>. Highlights:</p> + +<ul> + <li><a href="/ru/docs/Tools/Shader_Editor">Редактор шейдеров</a> позволяет просматривать и редактировать шейдеры WebGL</li> + <li>Возможность поставить точку остановки в дебаггере на определенное <a href="/ru/docs/Tools/Debugger#Break_on_a_DOM_event">DOM событие</a> которое Вам нужно отловить</li> + <li><a href="/ru/docs/Tools/Page_Inspector#Editing_HTML">Редактирование HTML в Инспекторе</a></li> + <li>See color swatches and background images in the Inspector's <a href="/ru/docs/Tools/Page_Inspector#Rules_view">Rules view</a></li> + <li>The Web Веб консольConsole now <a href="/ru/docs/Tools/Web_Console#Reflow_events">logs reflow events</a></li> + <li>CodeMirror is now used as the source editor in many tools</li> +</ul> diff --git a/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html b/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html new file mode 100644 index 0000000000..89fc9d3890 --- /dev/null +++ b/files/ru/tools/remote_debugging/debugging_firefox_desktop/index.html @@ -0,0 +1,84 @@ +--- +title: Отладка Firefox Desktop +slug: Tools/Remote_Debugging/Debugging_Firefox_Desktop +tags: + - Debug + - Debugging + - Guide + - Tools + - Отладка +translation_of: Tools/Remote_Debugging/Debugging_Firefox_Desktop +--- +<div>{{ToolsSidebar}}</div><p>Это руководство объясняет, как использовать <a href="/ru/docs/Tools">Инструменты разработчика Firefox</a> для отладки различных версий десктопного Firefox, запущенного на том же компьютере. В этом документе экземпляр Firefox, который будет отлаживаться, назовём <em>отлаживаемый(</em><em>debuggee</em><em>)</em>, а тот, с которого производится отладка - <em>отлаживающий</em> (<em>debugger, отладчик</em>).</p> + +<h2 id="Включение_удалённой_отладки">Включение удалённой отладки</h2> + +<p>Во-первых, убедитесь, что в обоих Firefox (отлаживаемый и отлаживающий) установлены галочки "Включить удалённую отладку" (Enable remote debugging) и "Включить инструменты отладки browser chrome и дополнений" (Enable chrome and add-on debugging), которые находятся в настройках <a href="/ru/docs/Tools">Инструментов разработчика Firefox</a>. Если у вас используется <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>, то галочки уже установлены по умолчанию.</p> + +<p>Это потребуется сделать только однажды. После перезагрузки настройки сохранятся.</p> + +<h2 id="Запуск_сервера_отладчика">Запуск сервера отладчика</h2> + +<p>Далее нужно стартовать сервер отладчика в отлаживаемом Firefox.</p> + +<h3 id="До_Firefox_37">До Firefox 37</h3> + +<p>До Firefox 37: открыть <a href="/ru/docs/Tools/GCLI">Панель разработчика</a> и введите команду:</p> + +<pre>listen 6000</pre> + +<p>Это укажет отлаживаемому прослушивать клиентов-отладчиков на порту 6000. Кроме этого нигде больше не используйте порт 6000.</p> + +<p>После перезагрузки нужно будет ввести команду заново.</p> + +<h3 id="После_Firefox_37">После Firefox 37</h3> + +<p>Начиная с Firefox 37 и далее описанный метод работает, но есть другой: запустите <em>отлаживаемый </em>из командной строки, передав ему параметр <code>--start-debugger-server</code>:</p> + +<pre>/path/to/firefox --start-debugger-server</pre> + +<p>Без аргументов параметр <code>--start-debugger-server</code> запустит прослушивание сервером 6000 порта. Для использования другого порта передайте его номер:</p> + +<pre>/path/to/firefox --start-debugger-server 1234</pre> + +<p>Отметьте: в Windows вызов <code>start-debugger-server</code> записывается с одним "минусом":</p> + +<pre>firefox.exe -start-debugger-server 1234</pre> + +<div class="note"> +<p><strong>Примечание</strong>: По умолчанию и по соображениям безопасности включена (через about:config) опция<code> devtools.debugger.force-local</code>. Если нужно отлаживать Firefox с другого компьютера, то измените её, но только в безопасной сети или за файерволом, чтобы предотвратить несанкционированный доступ.</p> +</div> + +<h2 id="Подключение">Подключение</h2> + +<p>Есть два способа подключения: "Экран подключения" и "WebIDE".</p> + +<h3 id="Экран_подключения">Экран подключения</h3> + +<p>На <em>отлаживающем </em>Firefox в меню "Разработка" есть пункт "Соединиться...". Кликните его и увидите страницу:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14157/connect1.png" style="display: block; height: 441px; margin-left: auto; margin-right: auto; width: 606px;"></p> + +<p>Введите номер порта, заданный для <em>отлаживаемого</em> и нажмите "Connect". В <em>отлаживаемом</em> увидите диалог для подтверждения подключения:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10073/remote-warning.png" style="display: block; height: 193px; margin-left: auto; margin-right: auto; width: 502px;">Нажмите"OK" и вернитесь в отладчик. Появится такая страница:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10065/remote-connect-2.png" style="display: block; margin-left: auto; margin-right: auto; width: 640px;"></p> + +<ul> + <li>Под "Available remote tabs" (Доступные удалённые вкладки) находится список всех вкладок <em>отлаживаемого</em>. Кликните в одну для соединения Инструментов разработчика Firefox c ней.</li> + <li>Под "Available remote add-ons" (Доступные удалёныне дополнения) находится список всех дополнений на <em>отлаживаемом</em>. Кликните в один для соединения Инструментов разработчика Firefox.</li> + <li>Под "Available remote processes" (Доступные удалённые процессы) - список процессов, запущенных в Firefox. Кликните "Main process" (Главный процесс) для соединения Инструментов разработчика с самим браузером.</li> +</ul> + +<h3 id="WebIDE">WebIDE</h3> + +<p>На <em>отлаживающем </em>Firefox откройте WebIDE кликните "Select Runtime"/"Remote Runtime" (Удалённый Runtime):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14153/webide_select_runtime1.png" style="display: block; height: 580px; margin-left: auto; margin-right: auto; width: 819px;">Вас попросят предоставить имя компьютера и порт. Введите "localhost:6000" или другой номер порта, если прислушивается иной порт (смотря какой вы указали).</p> + +<p>На <em>отлаживаемом </em>Firefox появится предупреждение:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10073/remote-warning.png" style="display: block; height: 193px; margin-left: auto; margin-right: auto; width: 502px;">Кликните OK. WebIDE подключится к главному процессу. Если вы захотите подключиться к вкладке, то в списке слева выберите нужную вкладку, которую будете отлаживать.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14159/webide_select_tab1.png" style="display: block; height: 569px; margin-left: auto; margin-right: auto; width: 818px;"></p> diff --git a/files/ru/tools/remote_debugging/firefox_for_android/index.html b/files/ru/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..6bcd7b2b47 --- /dev/null +++ b/files/ru/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,146 @@ +--- +title: Remotely debugging Firefox for Android +slug: Tools/Remote_Debugging/Firefox_for_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +<div>{{ToolsSidebar}}</div><p>This guide explains how to use <a href="/docs/Tools/Remote_Debugging">remote debugging </a>to inspect or debug code running in <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox for Android </a>over USB.</p> + +<div class="note"> +<p>Мы недавно сильно упростили процесс подключения инструментов разработки к Firefox для Android. Если вы работаете с Firefox Desktop 36 или новее, и Firefox для Android 35 или новее, то <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">попробуйте новый процесс</a> вместо этого.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. </p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>First, you'll need:</p> + +<ul> + <li>a desktop or laptop computer with Firefox 15 or higher running on it</li> + <li>an Android device <a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable of running Firefox for Android</a> with Firefox for Android 15 or higher running on it</li> + <li>a USB cable to connect the two devices</li> +</ul> + +<h3 id="ADB_setup">ADB setup</h3> + +<p>Next, you'll need to get the desktop and the Android device talking to each other using the <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> command-line tool.</p> + +<h4 class="note" id="On_the_Android_device">On the Android device</h4> + +<ul> + <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">Enable USB debugging (step 2 of this link only)</a>.</li> + <li>Attach the device to the desktop via USB.</li> +</ul> + +<h4 class="note" id="On_the_desktop">On the desktop</h4> + +<ul> + <li>Установите корректную версию <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> для вашего устройства.</li> + <li>С помощью Android SDK установите инструменты платформы <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a>.</li> + <li>Платформа Android Tools устанавливает adb (Android Debug Bridge) в директорию "Platform-инструментов", в которой установлена Android SDK. Убедитесь, что каталог "инструментов платформы" находится в переменной окружения path.</li> +</ul> + +<p>To check it worked, open up a command shell on the desktop and type:</p> + +<pre>adb devices</pre> + +<p>You should see some output like:</p> + +<pre>List of devices attached +51800F220F01564 device +</pre> + +<p>(The long hex string will be different.)</p> + +<p>If you do, then <code>adb</code> has found your device and you've successfully set up ADB.</p> + +<h3 id="Enable_remote_debugging">Enable remote debugging</h3> + +<p>Next, you need to enable remote debugging on both the Android device and the desktop.</p> + +<h4 id="Firefox_for_Android_24_and_earlier">Firefox for Android 24 and earlier</h4> + +<p>To enable remote debugging on the device, you need to set the <code>devtools.debugger.remote-enabled</code> preference to <code>true</code>.</p> + +<p>Go to <code>about:config</code> in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the <code>devtools.debugger.remote-enabled</code> preference, and press "Toggle".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 class="note" id="Firefox_for_Android_25_and_later">Firefox for Android 25 and later</h4> + +<p>On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The browser will display a notification reminding you to set up port forwarding, which we'll do later on.</p> + +<h4 id="On_the_desktop_2">On the desktop</h4> + +<p>On the desktop, remote debugging is enabled by a setting in the Toolbox. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Open the Toolbox</a>, click the "Settings" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>, and check "Enable remote debugging" in the <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings </a>tab:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="Note">If you're using a version of Firefox older than 27, you'll need to restart the browser for the setting to take effect.</div> + +<p>You'll then see a new option in the Web Developer menu labeled "Connect...":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Connecting">Connecting</h2> + +<p>Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.</p> + +<h4 class="note" id="On_the_desktop_3">On the desktop</h4> + +<p>For Firefox for Android 35 and later, go to a command prompt, and type:</p> + +<pre>adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket</pre> + +<p>For Firefox for Android builds in other channels, the <code>org.mozilla.firefox</code> part should be changed to:</p> + +<ul> + <li><code>org.mozilla.firefox_beta</code> for Beta</li> + <li><code>org.mozilla.fennec_aurora</code> for Aurora</li> + <li><code>org.mozilla.fennec</code> for Nightly</li> +</ul> + +<p>For Firefox for Android 34 and earlier, type:</p> + +<pre>adb forward tcp:6000 tcp:6000</pre> + +<p>(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)</p> + +<p>For Firefox OS, type:</p> + +<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + +<p>You'll need to reissue this command each time you physically attach desktop and device with the USB cable.</p> + +<p>Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Unless you've changed the port numbers, choose 6000 and press the "Connect" button.</p> + +<h4 class="note" id="On_the_Android_device_2">On the Android device</h4> + +<p>Next you'll see a dialog on the Android device asking you to confirm the connection:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.</p> + +<h4 class="note" id="On_the_desktop_4">On the desktop</h4> + +<p>Next, the desktop shows you a dialog that looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.</p> + +<ul> + <li>You'll see one entry under "Available remote tabs" for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab. If you want to debug your web content, you'll choose the relevant content tab.</li> + <li>You'll see one entry under "Available remote processes": this is the browser process itself. You'll choose this option if you want to debug the browser's own code.</li> +</ul> + +<p>Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ru/tools/remote_debugging/index.html b/files/ru/tools/remote_debugging/index.html new file mode 100644 index 0000000000..85483004df --- /dev/null +++ b/files/ru/tools/remote_debugging/index.html @@ -0,0 +1,46 @@ +--- +title: Отладка удалённых скриптов +slug: Tools/Remote_Debugging +tags: + - Tools + - 'l10n:priority' + - Отладка + - инструменты +translation_of: Tools/Remote_Debugging +--- +<div>{{ToolsSidebar}}</div><p>Вы можете использовать <a href="/ru/docs/Tools">Инструменты разработчика Firefox</a> на вашем компьютере для отладки веб-сайтов и веб-приложений, запущенных в других браузерах или программах. Другие браузеры могут быть на том же устройстве, где запущены Инструменты, или же на другом, например, на телефоне, подключенном через USB.</p> + +<p>Конкретные инструкции по подключению Инструментов специфичны для каждой из сред.</p> + +<h2 id="Среды_выполнения_основанные_на_Gecko">Среды выполнения, основанные на <a href="/ru/docs/Glossary/Gecko">Gecko</a></h2> + +<p>В первую очередь можете подключить Инструмены разработчика к Gecko-программам, таких как Firefox Desktop, Firefox для Android, Firefox OS или Thunderbird.</p> + +<ul> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_Desktop">Firefox Desktop</a></li> + <li>Firefox for Android + <ul> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">over USB</a></li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">over WiFi</a></li> + </ul> + </li> + <li>Firefox OS + <ul> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_USB">over USB</a></li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">over WiFi</a></li> + </ul> + </li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Thunderbird">Thunderbird</a></li> +</ul> + +<h2 id="Другие_варианты_сред">Другие варианты сред</h2> + +<p>Экспериментальное дополнение <a href="/en-US/docs/Tools/Valence">Valence</a> позволяет отлаживать веб-сайты в средах выполнения отличных от Gecko, например, Google Chrome Desktop, Chrome для Android или Safari на iOS.</p> + +<p>Valence по умолчанию включен в <a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>.</p> + +<ul> + <li><a href="/en-US/docs/Tools/Valence">Chrome для Android</a></li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Chrome_Desktop">Chrome Desktop</a></li> + <li><a href="/en-US/docs/Tools/Valence">Safari на iOS</a></li> +</ul> diff --git a/files/ru/tools/responsive_design_view/index.html b/files/ru/tools/responsive_design_view/index.html new file mode 100644 index 0000000000..e5acc43af0 --- /dev/null +++ b/files/ru/tools/responsive_design_view/index.html @@ -0,0 +1,100 @@ +--- +title: Режим адаптивного дизайна +slug: Tools/Responsive_Design_View +tags: + - Design + - Firefox + - Guide + - Tools + - Web Development + - 'l10n:priority' + - Дизайн + - адаптивный дизайн + - инструменты разработки +translation_of: Tools/Responsive_Design_Mode +--- +<div>{{ToolsSidebar}}</div> + +<p><a href="/ru/docs/Web_Development/Responsive_Web_design">Адаптивные дизайны </a>(<a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive designs</a>) адаптируются к различным размерам экрана, чтобы обеспечить подходящее отображение для различных видов устройств, таких как мобильные телефоны или планшеты. Режим адаптивного дизайна даёт легкую возможность увидеть, как ваш сайт или веб-приложение будет выглядеть на экранах разных размеров.</p> + +<p>{{EmbedYouTube("LBcE72sG2s8")}}</p> + +<p>Скриншот ниже показывает страницу мобильной версии Википедии, отображаемой при размере области контента 320 на 480.</p> + +<p><img alt="Окно Firefox, в области содержимого которого показывается короткая панель инструментов и маленькая область содержимого, в которой показана статья «мобильной» Википедии «Вода» соответственно размеру маленькой области." src="https://mdn.mozillademos.org/files/10517/responsive-design-view-ru.png" style="height: 757px; width: 864px;">Режим адаптивного дизайна удобен тем, что можно быстро и точно изменять размер области содержимого.</p> + +<p>Конечно, можно просто изменить размер окна браузера: но этим вы уменьшите и все остальные вкладки, что может очень затруднить использование браузера.</p> + +<p>В режиме адаптивного дизайна можно ходить по страницам в изменённой области содержимого как и обычно.</p> + +<h2 id="Включение_и_выключение">Включение и выключение</h2> + +<p>Есть три способа включения режима адаптивного дизайна:</p> + +<ul> + <li>Выбрать «Адаптивный дизайн» в подменю «Веб-разработка» в меню Firefox (или в меню Инструменты, если включить панель меню или на Mac OS X)</li> + <li>Нажать кнопку «Режим адаптивного дизайна» на <a href="/ru/docs/Tools_Toolbox#Toolbar" title="/ru/docs/Tools_Toolbox#Toolbar">панели инструментов набора инструментов веб-разработчика</a>.</li> + <li>Нажать Ctrl + Shift + M, (или Cmd + Opt + M на OS X)</li> +</ul> + +<p>и три способа выключить режим адаптивного дизайна:</p> + +<ul> + <li>снова выбрать пункт меню «Режим адаптивного дизайна» или «Адаптивный дизайн»;</li> + <li>кликнуть кнопку «Выйти» («закрыть») в верхнем левом углу окна режима;</li> + <li>Нажать Ctrl + Shift + M, (or Cmd + Opt + M on OS X). До Firefox 34, Escape тоже закрывала Режим адаптивного дизайна.</li> +</ul> + +<h2 id="Изменение_размера">Изменение размера</h2> + +<p>Изменить размер области содержимого можно двумя способами:</p> + +<ul> + <li>используя <a href="#select-size">элемент управления «Выбрать размер»</a>;</li> + <li>щёлкнуть и перескивать элементы управления на правой и/или нижней стороне области, или в правом нижнем углу.</li> +</ul> + +<p>При использовании перетаскивания можно удерживать клавишу Control (command на Max OS X), чтобы изменение шло медленнее. Это помогает установить размер точнее.</p> + +<div style="overflow: hidden;"> +<h2 id="Элементы_управления_режимом">Элементы управления режимом</h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10515/responsive-design-view-controls-ru.png" style="display: block; height: 356px; margin-left: auto; margin-right: auto; width: 540px;" title=""></p> + +<table class="standard-table"> + <tbody> + <tr> + <td><strong>Выйти</strong></td> + <td>Закрыть Режим адаптивного дизайна и вернуться к нормальному просмотру</td> + </tr> + <tr> + <td><strong><a name="select-size">Выбрать размер</a></strong></td> + <td> + <p>Выбрать из ряда комбинаций ширины и высоты, или определить свои собственные.</p> + + <p>Начиная с Firefox 33, показываемые здесь числа можно редактировать на месте, так что можно легко определять собственные измерения.</p> + </td> + </tr> + <tr> + <td><strong>Повернуть</strong></td> + <td>Переключить экран между книжной и альбомной ориентацией.</td> + </tr> + <tr> + <td> + <p><strong>Симулировать события прикосновения</strong></p> + </td> + <td> + <p>Включить / выключить симуляцию сенсорных событий: когда она включена, события мыши переводятся в <a href="/ru/docs/Web/Guide/API/DOM/Events/Touch_events">touch events</a>.</p> + </td> + </tr> + <tr> + <td> + <p><strong>Скриншот</strong></p> + </td> + <td>Сделать скриншот (снимок) области содержимого.</td> + </tr> + </tbody> +</table> +</div> + +<p> </p> diff --git a/files/ru/tools/settings/index.html b/files/ru/tools/settings/index.html new file mode 100644 index 0000000000..f4e2574ca5 --- /dev/null +++ b/files/ru/tools/settings/index.html @@ -0,0 +1,139 @@ +--- +title: Settings +slug: Tools/Settings +translation_of: Tools/Settings +--- +<div>{{ToolsSidebar}}</div><h2 id="Opening_Settings">Opening Settings</h2> + +<p>To see the Developer Tools Settings pane, open any of the Developer Tools, and then:</p> + +<ul> + <li>either click the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/13158/settings-icon.png" style="display: inline-block; height: 25px; margin-bottom: -7px; width: 24px;">) in the Toolbox toolbar:<img alt="" src="https://mdn.mozillademos.org/files/13176/settings-show-icon.png" style="display: block; height: 632px; margin-left: auto; margin-right: auto; width: 890px;"></li> + <li>or press <kbd>F1</kbd> (new in Firefox 43) to toggle between the active tool and the Settings pane</li> + <li>or press <kbd>Ctrl/Cmd</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> to toggle between the active tool and the Settings pane</li> +</ul> + +<p>The Settings pane looks something like this:</p> + +<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/14506/devtools-settings.png" style="display: block; height: 1970px; margin-left: auto; margin-right: auto; width: 852px;"></p> + +<h2 id="Categories">Categories</h2> + +<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3> + +<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p> + +<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3> + +<p>This group of checkboxes determines which tools get <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">an icon in the Toolbox's toolbar</a>.</p> + +<p>Note that in Firefox 52 we removed the checkbox to toggle the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Select element" button</a>. The "Select element" button is now always shown.</p> + +<h3 id="Choose_DevTools_theme">Choose DevTools theme</h3> + +<p>This enables you to choose one of three different themes.</p> + +<p>There's a light theme, which is the default:</p> + +<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/13172/theme-light-shadowed.png" style="display: block; height: 317px; margin-left: auto; margin-right: auto; width: 890px;"></p> + +<p>A dark theme (the default on <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p> + +<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/13168/theme-dark.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 875px;"></p> + +<p class="geckoVersionNote">New in Firefox 48</p> + +<p>There's also a Firebug theme that looks like the <a href="https://getfirebug.com/">Firebug extension</a>, letting you feel at home if you're used to Firebug:</p> + +<p><img alt="Firebug theme for DevTools" src="https://mdn.mozillademos.org/files/13170/theme-firebug-shadowed.png" style="display: block; height: 318px; margin-left: auto; margin-right: auto; width: 890px;"></p> + +<h3 id="Common_preferences">Common preferences</h3> + +<p>Settings that apply to more than one tool. There's just one of these:</p> + +<dl> + <dt><em>Enable persistent logs</em></dt> + <dd>A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</dd> +</dl> + +<h3 id="Inspector">Inspector</h3> + +<dl> + <dt><em>Show browser styles</em></dt> + <dd>A setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</dd> + <dt><em>Truncate DOM attributes</em> (new in Firefox 47)</dt> + <dd>By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".</dd> + <dt><em>Default color unit</em></dt> + <dd>A setting to control how colors are represented in the inspector: + <ul> + <li>Hex</li> + <li>HSL(A)</li> + <li>RGB(A)</li> + <li>color name</li> + <li>As authored (new in Firefox 44).</li> + </ul> + </dd> +</dl> + +<h3 id="Web_Console">Web Console</h3> + +<dl> + <dt><em>Enable timestamps</em></dt> + <dd>Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.</dd> +</dl> + +<h3 id="Style_Editor">Style Editor</h3> + +<dl> + <dt><em>Show original sources</em></dt> + <dd>When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</dd> + <dt><em>Autocomplete CSS</em></dt> + <dd>Enable the Style Editor to offer autocomplete suggestions.</dd> +</dl> + +<h3 id="JavaScript_Profiler">JavaScript Profiler</h3> + +<dl> + <dt><em>Show Gecko platform data</em></dt> + <dd>A setting to control whether or not profiles should include Gecko platform symbols.</dd> +</dl> + +<h3 id="Editor_Preferences">Editor Preferences</h3> + +<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p> + +<dl> + <dt><em>Detect indentation</em></dt> + <dd>Auto-indent new lines based on the current indentation.</dd> + <dt><em>Autoclose brackets</em></dt> + <dt> </dt> + <dt><em>Indent using spaces</em></dt> + <dt> </dt> + <dt><em>Tab size</em></dt> + <dt> </dt> + <dt><em>Keybindings</em></dt> + <dd>Choose the default CodeMirror keybindings, or keybindings from one of several popular editors: + <ul> + <li>Vim</li> + <li>Emacs</li> + <li>Sublime Text</li> + </ul> + </dd> +</dl> + +<h3 id="Advanced_settings">Advanced settings</h3> + +<dl> + <dt><em>Disable HTTP Cache</em></dt> + <dd>Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option. + <div class="note">Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>/the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</div> + </dd> + <dt><em>Disable JavaScript</em></dt> + <dd>Reload the current tab with JavaScript disabled.</dd> + <dt><em>Enable Service Workers over HTTP</em></dt> + <dd>Enable Service Worker registrations from insecure websites.</dd> + <dt><em>Enable browser chrome and add-on debugging toolboxes</em></dt> + <dd>Enable you to use developer tools in the context of the browser itself, and not only web content.</dd> + <dt><em>Enable remote debugging</em></dt> + <dd>Enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a>.</dd> +</dl> diff --git a/files/ru/tools/shader_editor/index.html b/files/ru/tools/shader_editor/index.html new file mode 100644 index 0000000000..7eda1afe34 --- /dev/null +++ b/files/ru/tools/shader_editor/index.html @@ -0,0 +1,56 @@ +--- +title: Редактор шейдеров +slug: Tools/Shader_Editor +translation_of: Tools/Shader_Editor +--- +<div>{{ToolsSidebar}}</div><p>Редактор шейдеров позволяет просматривать и редактировать вершинные и фрагментные шейдеры, используемые <a href="/en-US/docs/Web/WebGL">WebGL</a>.</p> + +<p>{{EmbedYouTube("hnoKqFuJhu0")}}</p> + +<p>WebGL - это программный интерфейс языка JavaScript, который позволяет отрисовывать интерактивную 3D- и 2D-графику в браузере без использования дополнительных плагинов. Для работы WebGL необходимо создать 2 программы, называемые "шейдерами", которые выполняются на определённой стадии работы <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">графического конвейера OpenGL</a>. Первым выполняеся <a href="https://www.opengl.org/wiki/Vertex_Shader">вершинный шейдер</a>, сообщающий координаты каждой геометрической вершины, которую следует отрисовать. После этого выполняется <a href="https://www.opengl.org/wiki/Fragment_Shader">фрагментный шейдер</a>, сообщающий цвет каждого отдельного пикселя, поступающего в отрисовку.</p> + +<p>Для создания шейдеров применяется Шейдерный Язык OpenGL или же <a href="https://www.opengl.org/documentation/glsl/">GLSL</a>. Можно по-разному внедрять шейдеры на страницу для работы с WebGL: например, их можно "прохардкодить" в JavaScript-исходниках, или подключить в виде отдельных файлов, используя тег <script>, или же подгрузить с сервера в виде простого текста. Исполняемый JavaScript-код отправляет шейдерную программу через программный интерфейс в WebGL, где она компилируется и выполняется с помощью графического ускорителя.</p> + +<p>С помощью Редактора шейдеров Вы можете изучать и редактировать исходники вершинных и фрагментных шейдеров.</p> + +<p>Вот ещё одна демонстрация того, как Вы можете применять Редактор шейдеров при разработке сложных приложений (в данном случае пример создан на движке <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>):</p> + +<p>{{EmbedYouTube("YBErisxQkPQ")}}</p> + +<h2 id="Запуск_Редактора_шейдеров">Запуск Редактора шейдеров</h2> + +<p>По умолчанию Редактор шейдеров отключён. Чтобы активировать его, откройте <a href="/ru/docs/Tools/Tools_Toolbox#Settings">Настройки инструментов разработчика</a> и поставьте галочку на пункте "Шейдеры" в разделе "Инструменты разработчика по умолчанию". Вы можете заметить, что в панели инструментов появился элемент "Шейдеры". Нажмите на нём для запуска Редактора шейдеров.</p> + +<p>Сначала Вы увидите пустое окно с кнопкой, предлагающей обновить страницу:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Для начала откройте страницу, которая создает контекст WebGL и загружает в него программу. Приведенные ниже скриншоты взяты из демонстрации <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p> + +<p>Перед Вами появится рабочее окно, разделённое на три части: список шейдерных программ GLSL (слева), вершинный шейдер текущей выбранной программы (по центру), а также фрагментный шейдер текущей выбранной программы (справа):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Управление_программами">Управление программами</h2> + +<p>Левая часть представляет список текущих шейдерных программ, используемых контекстом WebGL. При наведении курсора мыши на элемент списка, представляющий шейдерную программу, Вы увидите, что геометрические объекты, обрабатываемые данной программой, подсвечены красным цветом:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">Если нажать на иконку глаза слева от названия программы, она будет отключена. Это полезно для концентрации на отдельных шейдерах или сокрытия пересекающихся геометрических фигур:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">При нажатии на элемент списка, представляющий шейдерную программу, откроются исходники вершинного и фрагментного шейдеров, составляющих её, и Вы сможете их редактировать.</p> + +<h2 id="Редактирование_шейдеров">Редактирование шейдеров</h2> + +<p>Средняя и правая часть рабочего окна представляют вершинный и фрагментный шейдеры выбранной шейдерной программы.</p> + +<p>Вы можете отредактировать эти программы и просмотреть результат при следующей отрисовке контекста WebGL (например, при следующем кадре анимации). Например, Вы можете изменить цвета:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">Редактор подсвечивает синтаксические ошибки в Вашем коде:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">Вы увидите дополнительную информацию о проблеме, если наведёте курсор на крестик в левой части строки с ошибкой:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p> </p> + +<p> </p> diff --git a/files/ru/tools/storage_inspector/index.html b/files/ru/tools/storage_inspector/index.html new file mode 100644 index 0000000000..0356665fea --- /dev/null +++ b/files/ru/tools/storage_inspector/index.html @@ -0,0 +1,179 @@ +--- +title: Инспектор Хранилища +slug: Tools/Storage_Inspector +translation_of: Tools/Storage_Inspector +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p>Инспектор хранилища отключен по умолчанию. Включите его в <a href="/en-US/docs/Tools_Toolbox#Settings">Developer Tools Settings</a>.</p> +</div> + +<p>Инспектор хранилища позволяет проверить различные типы хранилищ, которые веб-страница может использовать. В настоящее время он может быть использован для проверки следующих типов хранения:</p> + +<ul> + <li>Кэш хранилищ (новое в Firefox 47) - любых DOM кэшей созданных с помощью <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li> + <li><em>Cookies - </em>Всех <a href="https://developer.mozilla.org/en-US/docs/Web/API/Document/cookie">cookies</a>, созданных для страниц или элементов iframe внутри страниц.<br> + Cookies, созданных как часть ответа для сетевых вызовов лишь на время работы ресурса.</li> + <li><em>Local Storage</em> - Всех <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> элементов страниц или элементов iframe внутри страниц.</li> + <li><em>Session Storage</em> - Всех <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> элементов страниц или элементов iframe внутри страниц.</li> + <li><em>IndexedDB</em> - Всех <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> баз данных, созданных по странице, каких-либо элементов iframe внутри страниц, их объектов и элементов.</li> +</ul> + +<p>На данный момент, инспектор хранения дает представление только для чтения памяти. Но мы работаем, чтобы позволить вам редактировать содержимое хранилища в будущих выпусках.</p> + +<h2 id="Открыть_инспектор_хранилища">Открыть инспектор хранилища</h2> + +<p>После включения вы можете открыть "Storage Inspector" из Web Developer подменю в Firefox панели (Tools меню на Mac), или нажатием клавиш Shift + F9.</p> + +<p><a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> инспектора активируется в нижней части окна браузера. Называется просто "Storage" в Developer Toolbox.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12826/storage-open.png" style="display: block; height: 657px; margin-left: auto; margin-right: auto; width: 931px;"></p> + +<h2 id="Storage_Inspector_User_Interface">Storage Inspector User Interface</h2> + +<p>The Storage Inspector UI is split into three main components:</p> + +<ul> + <li><a href="#storage-tree">Storage tree</a></li> + <li><a href="#table-widget">Table Widget</a></li> + <li><a href="#sidebar">Sidebar</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12824/storage-ui.png" style="display: block; height: 657px; margin-left: auto; margin-right: auto; width: 931px;"></p> + +<h3 id="Storage_tree"><a name="storage-tree">Storage tree</a></h3> + +<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12806/storage-types.png" style="display: block; height: 230px; margin-left: auto; margin-right: auto; width: 468px;"></p> + +<p>Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.</p> + +<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12810/storage-tree-cache-storage.png" style="display: block; height: 360px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12814/storage-tree-indexeddb.png" style="display: block; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12812/storage-tree-cookies.png" style="display: block; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.</p> + +<p>Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.</p> + +<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3> + +<p>The table widget is the place where all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.</p> + +<p>All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12818/table-widget-context-menu.png" style="display: block; height: 250px; margin-left: auto; margin-right: auto; width: 717px;"></p> + +<div class="geckoVersionNote">New in Firefox 47</div> + +<p>Starting in Firefox 47, there's a search box at the top of the Table Widget:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12822/storage-filter.png" style="display: block; height: 220px; margin-left: auto; margin-right: auto; width: 717px;"></p> + +<p>This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.</p> + +<h4 id="Cache_Storage">Cache Storage</h4> + +<div class="geckoVersionNote">New in Firefox 47</div> + +<p>Under the Cache Storage type you can see the contents of any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>. If you select a cache, you'll see a list of the resources it contains. For each resource, you'll see:</p> + +<ul> + <li>the URL for the resource</li> + <li>the status code for the request that was made to fetch it.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12816/storage-cache-list.png" style="display: block; height: 208px; margin-left: auto; margin-right: auto; width: 717px;"></p> + +<h4 id="Cookies">Cookies</h4> + +<p>When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table. The table then has the following columns:</p> + +<ul> + <li><em>Name</em> - The name of the cookie</li> + <li><em>Path</em> - The path property of the cookie</li> + <li><em>Domain</em> - The domain of the cookie</li> + <li><em>Expires On</em> - The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session"</li> + <li><em>Created On</em> - When the cookie was created</li> + <li><em>Last Accessed On</em> - When the cookie was last read</li> + <li><em>Value</em> - The value of the cookie</li> + <li><em>isDomain</em> - Is this cookie a domain cookie: that is, the domain value starts with a "."</li> + <li><em>isSecure</em> - Is this cookie a secure cookie</li> + <li><em>isHttpOnly</em> - Is this cookie http only.</li> +</ul> + +<h4 id="Local_storage_Session_storage">Local storage / Session storage</h4> + +<p>When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.</p> + +<p>You can manipulate the storage in the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> with the <a href="/en-US/docs/Web/API/Storage#Methods">Storage API methods</a>.</p> + +<h4 id="IndexedDB">IndexedDB</h4> + +<p>When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin. Databases have the following details:</p> + +<ul> + <li><em>Database Name</em> - The name of the database</li> + <li><em>Origin</em> - Its origin</li> + <li><em>Version</em> - The database version</li> + <li><em>Object Stores</em> - Number of object stores in the database</li> +</ul> + +<p>When an IndexedDB database is selected in the storage tree, details about all the object stores are listed in the table. Any object store has the following details:</p> + +<ul> + <li><em>Object Store Name</em> - The name of the object store</li> + <li><em>Key</em> - The keyPath property of the object store.</li> + <li><em>Auto Increment</em> - Whether auto increment is enabled</li> + <li><em>Indexes</em> - Array of indexes present in the object store as shown below</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12828/storage-tree-widget-indexeddb.png" style="display: block; height: 207px; margin-left: auto; margin-right: auto; width: 717px;"></p> + +<p>When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.</p> + +<div class="geckoVersionNote">New in Firefox 49</div> + +<p>An IndexedDB database can be deleted via its context menu. If the IndexedDB cannot be deleted (most commonly when there are still active connections to the database), a warning message will be displayed in the Storage Inspector to make it clear what the situation is:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13623/IDB-delete-error-message.png" style="display: block; height: 235px; margin: 0px auto; width: 900px;"></p> + +<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3> + +<p>When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.</p> + +<p>The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example, a stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON<code> {foo: "bar"}</code>, a key separated value like <code>1~2~3~4</code> is shown like an array <code>[1, 2, 3, 4]</code>. Below are a few screenshots giving examples of different types of parsed values:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8517/capture6.jpg" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p style="text-align: center;"><em>A stringified JSON being shown as the original JSON in the parsed value section of the sidebar</em></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8519/capture7.jpg" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p style="text-align: center;"><em>A string containing key-value pairs being shown as JSON in the parsed value section of the sidebar</em></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8521/capture8.jpg" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p style="text-align: center;"><em>A string containing key separated values being shown as an Array in the parsed value section of the sidebar</em></p> + +<h2 id="Editing_storage_items">Editing storage items</h2> + +<div class="geckoVersionNote">New in Firefox 48</div> + +<p>Starting in Firefox 48 you can edit storage items by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> and editing the values they contain:</p> + +<p>{{EmbedYouTube("tUusjX_Gfow")}}</p> + +<p>You can edit cookies, local storage, and session storage entries. You can edit the names of entries as well as the values.</p> + +<p>You can also delete cookies, local storage, and session storage entries using the context menu:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13150/storage-delete-menu.png" style="display: block; height: 249px; margin-left: auto; margin-right: auto; width: 700px;"></p> diff --git a/files/ru/tools/style_editor/index.html b/files/ru/tools/style_editor/index.html new file mode 100644 index 0000000000..04da9c17d8 --- /dev/null +++ b/files/ru/tools/style_editor/index.html @@ -0,0 +1,111 @@ +--- +title: Редактор стилей +slug: Tools/Style_Editor +tags: + - Stylesheets + - 'Web Development:Tools' +translation_of: Tools/Style_Editor +--- +<div>{{ToolsSidebar}}</div> + +<p>Редактор Стилей позволит вам:</p> + +<ul> + <li><span id="result_box" lang="ru"><span class="hps">просматривать и</span> <span class="hps">редактировать все</span> <span class="hps">таблицы стилей</span><span>, находящиеся</span> на<span class="hps"> странице</span></span></li> + <li><span id="result_box" lang="ru"><span class="hps">создать новые</span> <span class="hps">таблицы стилей</span> <span class="hps">с нуля, и</span> <span class="hps">применять их</span> <span class="hps">к странице</span></span></li> + <li><span id="result_box" lang="ru"><span class="hps">импортировать существующие</span> <span class="hps">таблицы стилей</span> <span class="hps">и применять их</span> <span class="hps">к странице</span></span></li> +</ul> + +<p>{{EmbedYouTube("7839qc55r7o")}}</p> + +<p><span id="result_box" lang="ru"><span class="hps">Чтобы открыть</span> <span class="hps">редактор стилей</span> <span class="atn hps">выберите опцию "Редактор стилей</span><span>" из меню</span> <span class="atn hps">"Разработка</span><span>"</span> <span class="hps">(который является</span> <span class="hps">подменю</span> <span class="atn hps">в меню "</span><span>Инструменты"</span><span class="hps">)</span><span>. </span><a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window">Инструменты</a> <span class="hps">появятся в</span> <span class="hps">нижней части окна</span> <span class="hps">браузера,</span> <span class="hps">с активной панелью редактора</span> <span class="hps">стилей</span><span>:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p><span id="result_box" lang="ru"><span>Редактор Стилей</span> <span class="hps">делится</span> <span class="hps">на три основные</span> <span class="hps">части:</span></span></p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_style_sheet_pane"> the style sheet pane on the left</a></li> + <li><span lang="ru"><span class="hps"> </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_editor_pane">the editor on the right</a></li> +</ul> + +<div class="geckoVersionNote"> +<p>Начиная с Firefox 33 и далее, существует третий компонент Редактора Стилей:медиа боковая панель.</p> +</div> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#The_media_sidebar"> the media sidebar.</a></li> +</ul> + +<h2 id="sect1"> </h2> + +<h2 id="Панель_таблицы_стилей">Панель таблицы стилей</h2> + +<p>Панель стилей слева, перечисляет все таблицы стилей в текущем документе. Вы можете быстро включать и выключать стили листа нажав на против него значок глаза. <span id="result_box" lang="ru"><span class="hps">Вы</span> <span class="hps">можете сохранить</span> <span class="hps">любые изменения</span><span>, внесенные в</span> <span class="hps">таблицу стилей</span> <span class="hps">на локальном компьютере</span><span>, нажав</span> <span class="hps">кнопку Сохранить</span> <span class="hps">в</span> <span class="hps">правом нижнем</span> <span class="hps">углу</span> возли <span class="alt-edited hps">каждого листа</span> <span class="hps">в</span> <span class="hps">списке.</span></span></p> + +<h2 id="Панель_редактора"><span class="short_text" id="result_box" lang="ru"><span>Панель редактора</span></span></h2> + +<p><span id="result_box" lang="ru"><span class="hps">Справа находится</span> <span class="hps">панель редактора</span><span>.</span> <span class="hps">Где</span> <span class="hps">вы можите видеть и редактировать исходный код выбранного листа</span> <span class="hps">стилей</span><span>. </span></span><span id="result_box" lang="ru"><span class="hps">Любые</span> <span class="hps">изменения, которые вы</span> <span class="hps">делаете,</span> <span class="hps">немедленно применяются к</span> <span class="hps">странице</span></span>. <span id="result_box" lang="ru"><span class="hps">Это позволяет легко </span><span class="hps">экспериментировать</span><span>, просматривать</span><span>, а также изменять</span> <span class="alt-edited hps">тестировать</span><span>.</span></span> <span id="result_box" lang="ru"><span class="hps">После того как Вы</span><span class="hps"> удовлетворены</span> <span class="hps">вашими изменениями</span><span>, Вы можете</span> <span class="hps">сохранить копию</span> <span class="hps">локально</span><span>, нажав</span> <span class="hps">кнопку</span> <span class="hps">Сохранить</span> <span class="hps">в нижнем правом углу</span> <span class="hps">листа</span> <span class="hps">в</span> <span id="result_box" lang="ru"><span class="hps">панели</span></span> <span class="hps">таблица стилей</span><span class="hps">.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Редактор</span> <span class="hps">предоставляет номера</span> <span class="hps">строк</span> <span class="hps">и подсветку синтаксиса</span><span>, что облечает</span> <span class="hps">читать вам</span> <span class="hps">CSS.</span> <span class="hps">Он также поддерживает</span> номер <span class="hps">ряда</span> </span><a href="https://developer.mozilla.org/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts">keyboard shortcuts</a>.</p> + +<p><span id="result_box" lang="ru"><span>Редактор Стилей</span> <span class="hps">автоматически</span> <span class="hps">де</span><span class="atn">-</span><span>минимизирует</span> <span class="hps">таблицы стилей</span><span>, которые он обнаруживает</span><span>, не влияя на</span> <span class="hps">оригинал.</span> <span class="hps">Что делает его гораздо</span> <span class="hps">легче для работаты</span> <span class="hps">на страницах, которые</span> <span class="hps">были оптимизированы.</span></span></p> + +<p><span id="result_box" lang="ru"><span id="result_box" lang="ru"><span>Редактор Стилей</span></span> <span class="hps">поддерживает</span> <span class="hps">автозаполнение</span><span>.</span> <span class="hps">Просто начните</span> <span class="hps">печатать,</span> <span class="hps">и</span> <span class="hps">он будет предлагать</span> <span class="hps">вам перечень </span><span class="hps">предложений.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Вы можете включить автозаполнение в <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>.</p> + +<h2 id="Боковая_панель_media">Боковая панель @media</h2> + +<p><span id="result_box" lang="ru"><span class="hps">С</span> <span class="hps">Firefox</span> <span class="hps">33</span> <span class="hps">и далее,</span> <span class="hps">Редактор</span> <span class="hps">Стилей</span> <span class="hps">отображает</span> <span class="alt-edited hps">боковую панель</span> <span class="hps">на</span> <span class="hps">правой</span> <span class="hps">стороне</span><span>, где</span> <span class="hps">текущий лист</span> <span class="hps">содержит какие-либо</span></span> <a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> правлила</a>. <span id="result_box" lang="ru"><span class="alt-edited">Боковая панель</span> <span class="hps">содержит список</span> <span class="hps">правил</span> <span class="hps">и</span> <span class="hps">ссылку на</span> <span class="alt-edited hps">строки</span> <span class="hps">таблицы</span><span>, где</span> <span class="hps">правило</span> <span class="hps">определено.</span> <span class="hps">Щелкните элемент</span><span>, чтобы перейти к</span> <span class="hps">этому правилу</span> <span class="hps">в листе</span><span>.</span></span>Состояние текста остаётся серым, если запрос медиа в настоящее время не применяется.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">Б<span id="result_box" lang="ru"><span class="alt-edited hps">оковая панель<code> медиа </code></span><span class="hps">особенно хорошо работает</span> <span class="hps">с </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> <span lang="ru"> <span class="hps">для создания и</span> <span class="hps">отладки</span> <span class="hps">мобильных</span> <span class="alt-edited hps">макетов</span></span>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8363/style-editor-media-sidebar.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Создание_и_импортирование_таблицы_стилей"><span class="short_text" id="result_box" lang="ru"><span class="hps">Создание и импортирование</span> <span class="hps">таблицы стилей</span></span></h2> + +<p><span id="result_box" lang="ru"><span class="hps">Вы можете</span> <span class="hps">создать новую</span> <span class="hps">таблицу стилей</span><span>, нажав на</span> <span class="hps">кнопку Создать</span> <span class="hps">на панели инструментов.</span> <span class="hps">После чего начать ввод</span> <span class="hps">CSS</span> <span class="hps">в отрывшемся</span> <span class="hps">редакторе и</span> <span class="hps">видеть, как</span> <span class="hps">новые стили</span> <span class="hps">в реальном времени применяются</span> <span class="hps">так же, как</span> <span class="hps">изменяются в</span> <span class="hps">других таблицах</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span class="hps">Вы можете загрузить</span> <span class="hps">таблицу стилей</span> <span class="hps">с диска и</span> <span class="hps">применить его</span> <span class="hps">на страницу</span><span>, нажав</span> <span class="hps">на кнопку Импорт.</span></span></p> + +<h2 id="Источник_карты_поддержки"><span class="short_text" id="result_box" lang="ru"><span class="hps">Источник</span> <span class="alt-edited hps">карты поддержки</span></span></h2> + +<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p> + +<p><span id="result_box" lang="ru"><span class="hps">Веб-разработчики</span> <span class="hps">часто создают</span> <span class="hps">CSS</span> <span class="hps">файлы, используя</span> <span class="hps">препроцессор</span> <span class="hps">как</span> </span><a href="http://sass-lang.com/">Sass</a>,<span lang="ru"><span> </span></span><a href="http://lesscss.org/">Less</a>,<span lang="ru"> <span class="alt-edited hps">или </span></span><a href="https://developer.mozilla.org/ru/docs/Tools/Style_Editor$edit#5">Stylus</a>. <span lang="ru"> <span class="hps">Эти</span> <span class="hps">инструменты создания</span> <span class="hps">CSS</span> <span class="alt-edited hps">файлов с</span> <span class="alt-edited hps">более богатым и</span> <span class="alt-edited hps">выразительным</span> <span class="alt-edited hps">синтаксисам.</span> <span class="alt-edited hps">Если это сделать</span><span>, будучи в состоянии</span> <span class="alt-edited hps">просматривать и редактировать</span> <span class="alt-edited hps">созданный</span> <span class="hps">CSS</span> <span class="hps">не так</span> <span class="alt-edited hps">полезен, потому что</span> <span class="hps">код, который вы</span> <span class="hps">поддерживать</span> <span class="hps">синтаксис</span> <span class="hps">препроцессора</span><span>, а не</span> <span class="alt-edited hps">генерирует</span> <span class="hps">CSS</span><span>.</span> <span class="alt-edited hps">Так вы</span> <span class="hps">должны были бы</span> <span class="hps">изменить</span> <span class="hps">сгенерированный</span> <span class="hps">CSS,</span> <span class="hps">затем вручную</span> <span class="hps">работать, как с</span><span class="hps"> первоисточником</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span class="hps">Источник</span> <span class="hps">карты</span> имеет <span class="hps">инструменты для</span> <span class="hps">карты вернутся </span><span class="hps">из полученных</span> <span class="hps">CSS</span> <span class="hps">к первоначальному</span> <span class="hps">синтаксису</span><span>, так что они</span> <span class="hps">могут отображать</span><span>,</span> <span class="hps">и позволяют</span> <span class="hps">редактировать</span> <span class="hps">файлы в</span> <span class="hps">оригинальном</span> <span class="hps">синтаксисе.</span> <span class="hps">С</span> <span class="hps">Firefox</span> <span class="hps">29</span> <span class="hps">и далее,</span> <span class="hps">Редактор</span> <span class="hps">Стиль</span> <span class="hps">могу понять</span> <span class="hps">исходные карты</span> <span class="hps">CSS</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span class="hps">Это означает, что</span> <span class="hps">если вы используете</span><span>, например,</span> <span class="hps">Sass</span><span>, то</span> <span class="hps">редактор</span> <span class="hps">Стиль</span> <span class="hps">покажу вам</span><span>,</span> <span class="hps">и вы сможете</span> <span class="hps">редактировать,</span> <span class="hps">Sass</span> <span class="hps">файлы</span><span>, а не</span> <span class="hps">CSS</span><span>, который генерируется</span> <span class="hps">из них:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;"><span class="short_text" id="result_box" lang="ru"><span class="hps">Для этого</span><span>, чтобы работать,</span> <span class="hps">вы должны:</span></span></p> + +<ul> + <li><span id="result_box" lang="ru"><span class="hps">использовать</span> <span class="hps">CSS</span> <span class="hps">препроцессора</span><span>, который понимает</span> </span> <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. <span lang="ru"> <span class="hps">В настоящее время</span> <span class="hps">это означает,</span> </span><a href="http://sass-lang.com/">Sass</a><span lang="ru"> <span class="hps">3.3.0</span> <span class="hps">или</span> <span class="hps">выше, или</span> </span><a href="http://roots.io/using-less-source-maps/">1.5.0 version of Less</a>.<span lang="ru"><span class="hps">.</span> <span class="hps">Другие</span> <span class="hps">препроцессоры</span> <span class="hps">активно</span> <span class="hps">работаем над добавлением</span> <span class="hps">поддержки</span> <span class="hps">или</span> <span class="hps">его рассмотрения.</span></span></li> + <li><span id="result_box" lang="ru"><span class="hps">на самом деле</span> <span class="hps">поручить</span> <span class="hps">препроцессор</span> <span class="hps">для генерации</span> <span class="hps">исходного</span> <span class="hps">карту</span><span>,</span> <span class="hps">например,</span> <span class="hps">пропусканием</span> <span class="hps">--sourcemap</span> <span class="hps">аргумент</span></span> Sass <span id="result_box" lang="ru"><span class="hps">инструмента</span></span> <span id="result_box" lang="ru"><span class="hps">командной строки.</span></span></li> +</ul> + +<h3 id="Просмотр_первоисточников"><span id="result_box" lang="ru"><span class="hps">Просмотр</span> <span class="alt-edited hps">первоисточников</span></span></h3> + +<p><span id="result_box" lang="ru"><span class="hps">Теперь, если</span> <span class="atn hps">вы выберете "</span><span>Показать</span> <span class="hps">оригинальные</span> <span class="hps">источники"</span> <span class="hps">в </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>,<span lang="ru"><span> ссылки</span> <span class="hps">рядом с правилом</span> <span class="hps">CSS</span> <span class="hps">в </span></span><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector#Rules_view">Rules view</a> <span lang="ru"> <span class="alt-edited hps">будет ссылаться</span> <span class="hps">к первоисточникам</span> <span class="hps">в</span> <span class="hps">редакторе стилей</span></span></p> + +<h3 id="Редактирование_первоисточников"><span class="short_text" id="result_box" lang="ru"><span class="hps">Редактирование</span> <span class="alt-edited hps">первоисточников</span></span></h3> + +<p><span id="result_box" lang="ru"><span class="hps">Вы также можете</span> <span class="hps">редактировать перво</span><span class="hps">источники в</span> <span class="hps">редакторе стилей</span> <span class="hps">и видеть результаты</span> <span class="hps">сразу </span><span class="hps">на странице</span><span>.</span> <span class="hps">Чтобы это сделать есть</span><span class="hps"> два</span> <span class="hps">варианта</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span class="hps">Во-первых,</span> <span class="hps">настроить</span> <span class="hps">препроцессор</span> <span class="hps">так</span> <span class="alt-edited hps">следит за</span> <span class="alt-edited hps">оригиналом</span> <span class="hps">и автоматически</span> <span class="hps">восстанавливает</span> <span class="hps">CSS</span> <span class="alt-edited hps">при изменении исходного кода</span><span>.</span> <span class="hps">С</span> <span class="hps">Sass</span> <span class="hps">вы можете сделать</span> <span class="hps">это, просто</span> <span class="hps">передавая</span> в этой опции</span>:</p> + +<pre>sass index.scss:index.css --sourcemap --watch</pre> + +<p><span id="result_box" lang="ru"><span class="hps">Затем сохраните</span> <span class="hps">оригинал</span> <span class="hps">в</span> <span class="hps">редакторе стилей</span><span>, нажав на</span> <span class="hps">кнопку "Сохранить"</span> <span class="hps">рядом с файлом</span><span>,</span> <span class="hps">и сохранение</span> <span class="hps">его на</span> <span class="hps">исходный файл.</span></span></p> + +<p><span id="result_box" lang="ru"><span class="hps">Теперь, когда</span> <span class="hps">вы вносите изменения</span> <span class="hps">в исходный</span> <span class="hps">файл</span> <span class="hps">в редакторе</span> <span class="hps">стилей</span> <span class="hps">CSS</span> <span class="hps">регенерируется</span><span>, и вы можете</span> <span class="hps">видеть изменения</span> <span class="hps">сразу.</span></span></p> + +<h2 id="Сочетания_клавиш"><span class="short_text" id="result_box" lang="ru"><span class="hps">Сочетания клавиш</span></span></h2> + +<h3 id="Редактор_исходного_сочетания"><span class="short_text" id="result_box" lang="ru"><span class="hps">Редактор исходного</span> <span class="hps">сочетания</span></span></h3> + +<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p> diff --git a/files/ru/tools/tools_toolbox/index.html b/files/ru/tools/tools_toolbox/index.html new file mode 100644 index 0000000000..6e7b6c8175 --- /dev/null +++ b/files/ru/tools/tools_toolbox/index.html @@ -0,0 +1,171 @@ +--- +title: Toolbox +slug: Tools/Tools_Toolbox +tags: + - инструменты +translation_of: Tools/Tools_Toolbox +--- +<div>{{ToolsSidebar}}</div><p>Окно Инструменты включает в себя все встроенные в Firefox инструменты. Его можно открыть, выбрав «Инструменты разработки» из меню Веб разработка (в «Инструменты» на OS X и Linux, или «Firefox» в Windows), или активировав любой включённый туда инструмент (например, Отладчик JavaScript Debugger или Инспектор страниц). Ещё можно нажать Ctrl + Shift + I на Windows и Linux, или Cmd + Opt + I на OS X.</p> + +<p>По умолчанию окно появляется прикреплённым к нижнему краю окна Firefox, но его можно и отсоединить. Вот как оно выглядит прикреплённым:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;">Само окно разделено на две части: панель инструментов вверху и главная панель внизу:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Режим_Прикрепления">Режим Прикрепления</h2> + +<p>По умолчанию Панель инструментов прикреплена к низу окна браузера. Используя иконки настройки Панели управления, Вы можете прикрепить его к правой части окна браузера или открепить его и вывести в отдельное окно.</p> + +<h2 id="sect1"> </h2> + +<h2 id="Панель_инструментов">Панель инструментов</h2> + +<p>Панель содержит набор контролов (управляющих элементов интерфейса), с помощью которых можно выбрать инструмент или отсоединить/присоединить/закрыть окно.</p> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Инструмент_для_выбора_объекта">Инструмент для выбора объекта</h3> + +<p>Крайняя левая иконка Панели инструментов служит для включения инструмента выбора различных элементов. Она позволяет кликом выбрать элемент кода, который Вам необходим для исследования. См. <a href="/ru/docs/Tools/Page_Inspector/How_to/Select_an_element">«Выбор элемента»</a>.</p> + +<h3 id="Основной_набор_инструментов">Основной набор инструментов</h3> + +<p>Далее располагается раздел кнопок, позволяющий активировать основные инструменты Панели. В этом разделе могут находится следующие инструменты:</p> + +<ul> + <li><a href="/ru/docs/Tools/Web_Console" title="/ru/docs/Tools/Web_Console">Веб-консоль</a></li> + <li><a href="/ru/docs/Tools/Debugger" title="/ru/docs/Tools/Debugger">Отладчик JavaScript</a></li> + <li><a href="/ru/docs/Tools/Page_Inspector" title="/ru/docs/Tools/Page_Inspector">Инспектор страниц</a></li> + <li><a href="/ru/docs/Tools/Style_Editor" title="/ru/docs/Tools/Style_Editor">Редактор стилей</a></li> + <li><a href="/ru/docs/Tools/Profiler" title="/ru/docs/Performance/Profiling_with_the_Built-in_Profiler">Профайлер</a></li> + <li><a href="/ru/docs/Tools/Network_Monitor" title="/ru/docs/Performance/Profiling_with_the_Built-in_Profiler">Монитор Сетевых Параметров</a></li> +</ul> + +<p>Учтите, что в этом разделе не всегда могут быть видны все инструменты Панели: в этом разделе показываются только те инструменты, которые доступные в данном контексте (например, пока еще не все инструменты поддерживают функцию удалённой отладки. Таким образом, если элементом отладки, из-за которого открыта Панель инструментов, является объект, который не поддерживает функцию отладки Firefox, то в этом разделе будут показаны не все инструменты Основного набора).</p> + +<h3 id="Дополнительные_инструменты">Дополнительные инструменты</h3> + +<p>Дальше идёт ряд кнопок, которые можно добавлять и удалять через <a href="https://developer.mozilla.org/ru/docs/Tools/Tools_Toolbox$edit#Settings">окно настроек инструментов разработки</a>. По умолчанию этот ряд включает:</p> + +<ul> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Web_Console#The_split_console">Toggle split console</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Responsive_Design_View">Режим адаптивного дизайна</a></li> +</ul> + +<p>Следующие инструменты по умолчанию отсутствуют на панели, но их можно добавить в <a href="https://developer.mozilla.org/ru/docs/Tools/Tools_Toolbox$edit#Settings">настройках</a>:</p> + +<ul> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Paint_Flashing_Tool">Подсвечивать прорисованную область</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/3D_View">3D-вид</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Scratchpad">Простой редактор JavaScript</a></li> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/Eyedropper">Захватить цвет со страницы</a></li> + <li>Сделать скриншот всей страницы: этот появился в Firefox 32. Он делает скриншот целой веб-страницы и сохраняет его в каталоге Загрузки.</li> + <li><a href="https://developer.mozilla.org/ru/docs/tools/Working_with_iframes">SВыберите iframe в качестве текущего целевого документа</a>: появился в Firefox 34.</li> +</ul> + +<h3 id="Toolbox_controls">Toolbox controls</h3> + +<p>Наконец, ряд кнопок, позволяющих:</p> + +<ul> + <li>закрыть окно</li> + <li>переключить место прикрепления окна между низом окна браузера и боковой стороной</li> + <li>переключиться между отдельным окном и прикреплённым к окну браузера</li> + <li>открыть <a href="https://developer.mozilla.org/ru/docs/Tools/Tools_Toolbox$edit#Настройки" title="#Settings">настройки инструментов разработчика</a></li> +</ul> + +<h2 id="Настройки"><a name="Settings">Настройки</a></h2> + +<p>Кнопка «Настройки» (<img alt="" src="https://mdn.mozillademos.org/files/8623/settings-cog-small.png" style="display: inline-block; height: 22px; width: 30px;">) даёт вам доступ к настройкам самого Набора инструментов и находящихся в нём инструментов:</p> + +<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/10411/devtools-settings.png" style="display: block; height: 669px; margin-left: auto; margin-right: auto; width: 644px;"></p> + +<h3 id="Инструменты_разработчика_Firefox_по_умолчанию">Инструменты разработчика Firefox по умолчанию</h3> + +<p>Эта группа галочек определяет, какие инструменты включаются в набор инструментов. Часто бывает, что новый инструмент добавляется в Firefox, но по умолчанию выключен.</p> + +<h3 id="Доступные_кнопки_инструментов">Доступные кнопки инструментов</h3> + +<p>This group of checkboxes determines which "standalone tools" get buttons in the <a href="https://developer.mozilla.org/ru/docs/Tools_Toolbox#Toolbar">toolbar</a>. This defaults to the node picker, the split console, and responsive design mode.</p> + +<p>Firefox 32 adds a button to take a screenshot of the complete web page, which is unchecked by default.</p> + +<h3 id="Темы">Темы</h3> + +<p>This enables you to switch between a light and a dark theme:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6933/light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/6931/dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Общие_настройки">Общие настройки</h3> + +<p>Settings that apply to more than one tool. There's just one of these:</p> + +<ul> + <li><em>Enable persistent logs</em>: a setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</li> +</ul> + +<h3 id="Инспектор">Инспектор</h3> + +<ul> + <li><em>Show browser styles</em>: a setting to control whether styles applied by the browser (<a href="https://developer.mozilla.org/ru/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. This setting is new in Firefox 32. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</li> + <li><em>Default color unit</em>: a setting to control how colors are represented in the inspector: + <ul> + <li>Hex</li> + <li>HSL(A)</li> + <li>RGB(A)</li> + <li>name.</li> + </ul> + </li> +</ul> + +<h3 id="Редактор_стилей">Редактор стилей</h3> + +<ul> + <li><em>Show original sources</em>: when a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. <a href="https://developer.mozilla.org/ru/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</li> + <li><em>Autocomplete CSS</em>: enable the Style Editor to offer autocomplete suggestions.</li> +</ul> + +<p> </p> + +<h3 id="Профайлер_JavaScript">Профайлер JavaScript</h3> + +<p> </p> + +<ul> + <li><em>Show Gecko platform data</em>: a setting to control whether or not profiles should include Gecko platform symbols.</li> +</ul> + +<h3 id="Настройки_редактора">Настройки редактора</h3> + +<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="https://developer.mozilla.org/ru/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="https://developer.mozilla.org/ru/docs/Tools/Style_Editor">Style Editor</a>.</p> + +<ul> + <li><em>Определять стиль отступов</em>: auto-indent new lines based on the current indentation</li> + <li><em>Автозакрытие скобок</em></li> + <li><em>Отступ с помощью пробелов</em></li> + <li><em>Размер отступа табуляции</em></li> + <li><em>Сочетания клавиш</em>: choose the default CodeMirror keybindings, or keybindings from one of several popular editors: + <ul> + <li>Vim</li> + <li>Emacs</li> + <li>Sublime Text</li> + </ul> + </li> +</ul> + +<h3 id="Расширенные_настройки">Расширенные настройки</h3> + +<ul> + <li><em>Отключить кэш</em>: позволяет отключить кэш браузера, чтобы определить скорость загрузки всех данных из сети. Начиная с Firefox 33 и новее эта настройка сохраняемая. Это означает, что если Вы отключите кэш, закроете инструменты разработчика и откроете снова, то обнаружите, что кэш все еще отключен. Тем не менее кэширование автоматически будет включено когда инструменты разработчика закрыты.</li> + <li><em>Отключить JavaScript</em>: позволяет выключить JavaScript (требуется перезагрузить страницу)</li> + <li><em>Enable Service Workers over HTTP:</em> enable Service Worker registrations from insecure websites</li> + <li><em>Включить отладку chrome и дополнений</em>: позволяет инструментам разработчика получить доступ к контексту самого браузера, а не только веб контента</li> + <li><em>Включить удаленную отладку</em>: позволяет выполнять <a href="/ru/docs/Tools/Remote_Debugging">отладку удаленных экземпляров Firefox</a> с помощью инструментов разработчика</li> +</ul> + +<h2 id="Главная_панель">Главная панель</h2> + +<p>The content of the main pane in the window is entirely controlled by, and specific to, the hosted tool currently selected.</p> diff --git a/files/ru/tools/web_audio_editor/index.html b/files/ru/tools/web_audio_editor/index.html new file mode 100644 index 0000000000..2638a12414 --- /dev/null +++ b/files/ru/tools/web_audio_editor/index.html @@ -0,0 +1,69 @@ +--- +title: Web аудио редактор +slug: Tools/Web_Audio_Editor +tags: + - API веб-аудио + - Firefox + - Mozilla + - Мозилла + - инструменты +translation_of: Tools/Web_Audio_Editor +--- +<div>{{ToolsSidebar}}</div><p>С помощью <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Web Audio API</a>, разработчики создают {{domxref("AudioContext", " аудиоконтекст")}}. Затем в<span id="result_box" lang="ru"><span> этом контексте они создают ряд</span></span> {{domxref ("AudioNode", "audio nodes")}}, <span id="result_box" lang="ru"><span>включая:</span></span></p> + +<ul> + <li><span id="result_box" lang="ru"><span>Узлы, предоставляющие <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_sources">источник звука</a></span></span><span id="result_box" lang="ru"><span>, такие как генератор или источник буфера данных</span></span></li> + <li><span id="result_box" lang="ru"><span>Узлы, выполняющие <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">преобразования</a>,</span></span> <span id="result_box" lang="ru"><span>такие как задержка и усиление</span></span></li> + <li><span id="result_box" lang="ru"><span>Узлы, представляющие <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_destinations">назначение аудиопотока</a>,</span></span> <span id="result_box" lang="ru"><span>такие как динамики</span></span></li> +</ul> + +<p><span id="result_box" lang="ru"><span>Каждый узел имеет ноль или более свойств</span></span> {{domxref ("AudioParam")}} <span id="result_box" lang="ru"><span>которые настраивают его работу.</span> <span>Например </span></span>{{domxref ("GainNode")}} <span id="result_box" lang="ru"><span> имеет одно свойство усиления, в то время как</span></span> {{domxref ("OscillatorNode")}} <span id="result_box" lang="ru"><span>имеет частоту и свойства насстройки.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Разработчик соединяет узлы в виде графика, а полный граф определяет поведение аудиопотока.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Web Audio Editor исследует аудиоконтекст, созданный на странице, и обеспечивает визуализацию его графика.</span> <span>Это дает вам представление о его работе на высоком уровне и позволяет вам убедиться, что все узлы подключены так, как вы ожидаете.</span> <span>Затем вы можете изучить и отредактировать свойства AudioParam для каждого узла на графике.</span> <span>Некоторые свойства non-AudioParam, например свойство типа OscillatorNode, отображаются, и вы также можете их редактировать.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Этот инструмент все еще экспериментальный.</span></span> <span id="result_box" lang="ru"><span>Если вы найдете ошибки, мы будем рады,</span></span> <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Web%20Audio%20Editor">если вы отправите их в Bugzilla</a>. <span id="result_box" lang="ru"><span>Если у вас есть вопросы или предложения по новым функциям, </span></span> <a href="http://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas">ffdevtools.uservoice.com</a> или <a href="http://twitter.com/firefoxdevtools">Twitter</a> <span id="result_box" lang="ru"><span>отличные места для их регистрации.</span></span></p> + +<h2 id="Открытие_веб-аудиоредактора"><span class="short_text" id="result_box" lang="ru"><span>Открытие веб-аудиоредактора</span></span></h2> + +<p><span id="result_box" lang="ru"><span>Web Audio Editor по умолчанию</span></span><span lang="ru"><span> не включен в Firefox 32. Чтобы включить его, откройте Настройки инструмента разработчика и отметьте «Web Audio».</span> <span>Теперь на панели инструментов Toolbox должна быть дополнительная вкладка с надписью «Web Audio».</span> <span>Щелкните вкладку и загрузите страницу, которая создает звуковой контекст.</span> <span>Два хороших демки:</span></span></p> + +<ul> + <li><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a> <span id="result_box" lang="ru"><span> может применять различные эффекты к входу микрофона, а также обеспечивает визуализацию результата</span></span></li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, <span id="result_box" lang="ru"><span>изменяет высоту и громкость синусоидальной волны при перемещении указателя мыши</span></span></li> +</ul> + +<h2 id="Визуализация_графа">Визуализация графа</h2> + +<p><span id="result_box" lang="ru"><span>Теперь Web Audio Editor отобразит график загруженного аудиоконтекста.</span> <span>Вот график демоверсии The Violent:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10171/web-audio-editor.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;"> <span id="result_box" lang="ru"><span>Вы можете видеть, что он использует три узла: {{domxref ("OscillatorNode")}} в качестве источника, {{domxref ("GainNode")}} для управления томом и {{domxref ("GainNode")}} в качестве места назначения.</span></span></p> + +<h3 id="Подключения_к_AudioParams"><span class="short_text" id="result_box" lang="ru"><span>Подключения к AudioParams</span></span></h3> + +<div class="geckoVersionNote"> +<p><span id="result_box" lang="ru"><span>Отображение подключений к AudioParams является новым в Firefox 34.</span></span></p> +</div> + +<p><span id="result_box" lang="ru"><span>Соединения между узлами отображаются сплошными линиями.</span> <span>Если вместо этого вы подключили узел к AudioParam в другом узле, то соединение будет показано пунктирной линией между узлами и будет помечено именем AudioParam:</span></span><img alt="" src="https://mdn.mozillademos.org/files/8819/web%20audio-editor-connect-param.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Проверка_и_изменение_AudioNodes"><span class="short_text" id="result_box" lang="ru"><span>Проверка и изменение AudioNodes</span></span></h2> + +<p><span id="result_box" lang="ru"><span>Если вы нажмете на узел, он подсветится, и вы получите инспектор узла справа.</span> <span>В этом списке перечислены значения свойств AudioParam этого узла.</span> <span>Например, вот как выглядит OscillatorNode:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10173/web-audio-editor-props.png" style="display: block; height: 648px; margin-left: auto; margin-right: auto; width: 868px;"> <span id="result_box" lang="ru"><span>В демоверсии Viplent, параметр частоты изменяется когда пользователь перемещает мышь влево и вправо, и вы можете увидеть это, отраженное в инспекторе узлов.</span> <span>Однако значение не обновляется в реальном времени: вам нужно снова щелкнуть узел, чтобы увидеть обновленное значение.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Если вы щелкнете значение в инспекторе узлов, вы можете изменить его: нажмите</span></span> <kbd>Enter</kbd> или <kbd>Tab</kbd> <span id="result_box" lang="ru"><span>и новое значение вступит в силу немедленно.</span></span></p> + +<h2 id="Обход_узлов"><span class="short_text" id="result_box" lang="ru"><span>Обход узлов</span></span></h2> + +<div class="geckoVersionNote"> +<p><span class="short_text" id="result_box" lang="ru"><span>Новое в Firefox 38.</span></span></p> +</div> + +<p><span id="result_box" lang="ru"><span>В панели, которая показывает детали узла, есть кнопка включения / выключения:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10183/web-audio-editor-on-off.png" style="display: block; height: 97px; margin-left: auto; margin-right: auto; width: 316px;"> <span id="result_box" lang="ru"><span>Нажмите на него, и график будет изменен для обхода этого узла, поэтому он больше не будет иметь никакого эффекта.</span> <span>Узлы, которые обойдены, показаны заштрихованным фоном:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10181/web-audio-editor-bypassed.png" style="display: block; height: 74px; margin-left: auto; margin-right: auto; width: 348px;"></p> diff --git a/files/ru/tools/web_console/helpers/index.html b/files/ru/tools/web_console/helpers/index.html new file mode 100644 index 0000000000..fd55c2d723 --- /dev/null +++ b/files/ru/tools/web_console/helpers/index.html @@ -0,0 +1,66 @@ +--- +title: Веб-Консоль Помощь +slug: Tools/Web_Console/Helpers +tags: + - Веб-консоль + - Веб-разработка + - Отладка +translation_of: Tools/Web_Console/Helpers +--- +<div>{{ToolsSidebar}}</div><h2 id="Команды">Команды</h2> + +<p>Командная строка JavaScript, предоставляемая Веб-Консолью, предлагает несколько встроенных вспомогательных функций, которые делают определенные задачи проще.</p> + +<dl> + <dt><code>$()</code></dt> + <dd>Ищет CSS-селектор, возвращая первый найденный элемент. Эквивалентно {{ domxref("document.querySelector()") }} или же вызывается функция $, в случае, если таковая найдена на странице.</dd> + <dt><code>$$()</code></dt> + <dd>Ищет CSS-селектор, возвращая перечень соответствующих ему DOM-узлов. Это упрощённый вариант, используемый вместо {{ domxref("document.querySelectorAll()") }}.</dd> + <dd>Начиная с билда Firefox 41 этот метод больше не является упрощением для {{ domxref("document.querySelectorAll()")}}, а наоборот возвращает массив элементов.</dd> + <dt><code>$0</code></dt> + <dd>Ныне исследуемый элемент страницы.</dd> + <dt><code>$_</code></dt> + <dd><em>Появилась в Firefox 39. </em>Хранит результат последнего выражения, выполненного через командную строку. Например, если вы введёте "2+2 <enter>", затем "$_ <enter>", то консоль ответит "4".</dd> + <dt><code>$x()</code></dt> + <dd>Оценивает <a href="/en-US/docs/XPath">XPath</a>-выражение и возвращает массив соответствующих ему узлов.</dd> + <dt><code>keys()</code></dt> + <dd>Задаёт объект, возвращает перечень ключей (или имён свойств) характерных объекту. Является упрощённым вариантом <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys"><code>Object.keys</code></a>.</dd> + <dt><code>values()</code></dt> + <dd>Задаёт объект, возвращает перечень значений объекта; является дополнением для <code>keys()</code>.</dd> + <dt><code>clear()</code></dt> + <dd>Очищает область вывода консоли.</dd> + <dt><code>inspect()</code></dt> + <dd>Задаёт объект, открывает инспектор объектов.</dd> + <dt><code>pprint()</code></dt> + <dd>Форматирует указанные значения до читаемого вида; полезно для дампа содержимого объектов и массивов.</dd> + <dt><code>help()</code></dt> + <dd>Показывает текст помощи. На самом деле (вот восхитительный пример рекурсии) он приведет вас к этой странице.</dd> + <dt><code>cd()</code></dt> + <dd>Переключает механизм оценки контекста JavaScript к другому айфрейму, имеющемуся на странице. Смотрите страницу <a href="/en-US/docs/Tools/Web_Console#Working_with_iframes">работа с айфреймами</a>.</dd> + <dt><code>copy()</code></dt> + <dd><em>Появилась в Firefox 38.</em> Копирует аргумент в клипборд. Если аргумент является строкой, то он копируется как есть. Если аргумент является DOM-узлом, то копируется его <code><a href="/en-US/docs/Web/API/Element/outerHTML">outerHTML</a></code>. Можно также использовать функцию <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify">JSON.stringify</a></code>, которая также вызовет аргумент и скопирует его значение в клипборд.</dd> + <dt><code>clearHistory()</code></dt> + <dd><em>Появилась в Firefox 39.</em> Как и любая другая командная строка, Веб-консоль <a href="/en-US/docs/Tools/Web_Console#Command_history">помнит введённые вами команды</a>. Используйте функцию для очистки истории командной строки.</dd> + <dt>Пожалуйста, обратитесь к тексту<a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console"> API консоли</a> для получения большей информации о записи контента.</dt> +</dl> + +<h2 id="Примеры">Примеры</h2> + +<h3 id="Пример_Смотрим_на_содержимое_DOM-узлов">Пример: Смотрим на содержимое DOM-узлов</h3> + +<p>Допустим, у вас есть DOM-узел с ID "title". На самом деле такой ID есть и у страницы, которую вы сейчас читаете, т.е. вы можете открыть Веб-консоль и попробовать прямо сейчас.</p> + +<p>Давайте посмотрим на содержимое этого узла, используя <code>функции</code>:<code> $()</code> и <code>inspect()</code></p> + +<pre><code>inspect($("#title"))</code></pre> + +<p>Автоматически откроется окно объектного инспектора, показывающее содержимое DOM-узла, соответствующего CSS-селектору "#title", являющемуся элементом ID "title".</p> + +<h3 id="Пример_Дамп_содержимого_DOM-узла">Пример: Дамп содержимого DOM-узла</h3> + +<p>Это нормально и хорошо, если вы столкнулись с какими-то проблемами, используя браузер, но, давайте представим, что вы делаете удалённую отладку для пользователя и должны посмотреть на содержимое узла. В таком случае, ваш пользователь может открыть Веб-консоль, сделать дамп содержимого узла, затем скопировать текст получившегося лога, и отправить его вам по электронной почте, используя для всех своих действий функцию <code>pprint()</code></p> + +<pre>pprint($("#title")) +</pre> + +<p>Консоль изрыгнёт содержимое узла, так что, вы сможете взглянуть на него. Конечно, полезней использовать функцию не для DOM-узлов, но вы уже поняли идею...</p> diff --git a/files/ru/tools/web_console/index.html b/files/ru/tools/web_console/index.html new file mode 100644 index 0000000000..db38988978 --- /dev/null +++ b/files/ru/tools/web_console/index.html @@ -0,0 +1,719 @@ +--- +title: Веб-консоль +slug: Tools/Web_Console +tags: + - NeedsTranslation + - Tools + - TopicStub + - Web Development + - Веб-консоль + - Отладка + - Руководство + - 'веб-разработка:инструменты' +translation_of: Tools/Web_Console +--- +<div>{{ToolsSidebar}}</div><p>Веб-консоль:</p> + +<ol> + <li>Выводит информацию, связанную с веб-страницей: сетевые запросы, ошибки и предупреждения JavaScript и CSS, а также сообщения об ошибках, предупреждения и информационные сообщения, выдаваемые кодом JavaScript, выполняющимся в контексте страницы;</li> + <li>Позволяет взаимодействовать с веб-страницей, выполняя выражения JavaScript в её контексте.</li> +</ol> + +<p>Это часть замены старой <a href="/ru/docs/Error_Console" title="ru/docs/Error_Console">Консоли Ошибок</a>, встроенной в Firefox. Старая Консоль Ошибок выводила ошибки, предупреждения и сообщения от всех веб-страниц, ошибки самого выполнения самого браузера и его дополнений. Из-за этого было трудно выделить, сообщения от конкретной страницы. Новая Веб-консоль всегда привязана к определенной веб-странице и показывает только связанную с ней информацию.</p> + +<p>На другой половине Консоли ошибок заменили — <a href="/ru/docs/Tools/Browser_Console" title="/ru/docs/Tools/Browser_Console">Консоль браузера</a>, которая выводит ошибки, предупреждения и сообщения от кода браузера и от дополнений.</p> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<h2 id="Opening_the_Web_Console" name="Opening_the_Web_Console">Как открыть Веб Консоль</h2> + +<p>Чтобы открыть Веб-консоль, выберите «Веб-консоль» в меню (Веб-)разработка в Меню Firefox (или меню Инструменты, если Вы настроили показывать панель меню или Вы работаете на Mac OS X), или нажмите её комбинацию клавиш <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> в OS X).</p> + +<p>Внизу окна браузера появится <a href="https://developer.mozilla.org/ru/docs/Tools/DevTools_Window" title="/ru/docs/Tools/DevTools_Window">Набор инструментов</a> с выбранной Веб-консолью (в <a href="https://developer.mozilla.org/ru/docs/Tools/DevTools_Window#Toolbar" title="/ru/docs/Tools/DevTools_Window#Toolbar">Панели инструментов разработчика</a> она называется просто «Консоль»):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5581/web-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Под <a href="/ru/docs/Tools/DevTools_Window#Toolbar" title="/ru/docs/Tools/DevTools_Window#Toolbar">панелью инструментов окна инструментов разработчика</a>, интерфейс веб-консоли разделён на три части:</p> + +<ul> + <li><a href="#filtering-and-searching" title="#filtering-and-searching">Панель инструментов</a>: вдоль верхнего края — панель инструментов с кнопками типа «Сеть» ("Net"), «CSS», «JS», "Защита" ("Security"), "Журнал" ("Logging") и "Сервер". Эта панель — для фильтрации выводимых сообщений.</li> + <li><a href="#command-line" title="#command-line">Командная строка</a>: вдоль нижнего края — командная строка, в которую можно вводить выражения JavaScript</li> + <li><a href="#message-display-pane" title="#message-display-pane">Поле вывода сообщений</a>: между панелью инструментов и командной строкой, занимая большую часть окна, располагается пространство, в которое Веб-консоль выводит сообщения.</li> +</ul> + +<h2 id="Поле_вывода_сообщений"><a name="message-display-pane">Поле вывода сообщений</a></h2> + +<p>Большую часть Веб-консоли занимает поле вывода сообщений:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5599/web-console-messages-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>В поле вывода сообщений можно увидеть:</p> + +<ul> + <li><a href="/ru/docs/Tools/Web_Console#HTTP_requests">HTTP-запросы</a></li> + <li><a href="/ru/docs/Tools/Web_Console#JavaScript_errors_and_warnings">предупреждения и ошибки JavaScript</a></li> + <li><a href="/ru/docs/Tools/Web_Console#CSS_errors.2C_warnings.2C_and_reflow_messages">предупреждения, ошибки и события перерисовки CSS (event reflow)</a></li> + <li><a href="/ru/docs/Tools/Web_Console#Security_warnings_and_errors">предупреждения и ошибки безопасности</a></li> + <li><a href="/ru/docs/Tools/Web_Console#console_API_messages">вызовы консольного API</a></li> + <li><a href="/ru/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output сообщения</a>: команды посылаемые в браузер через командную строку Веб консоли, и их результат выполнения.</li> +</ul> + +<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>Время когда сообщение было записано. Начиная с Firefox 28 и новее, по умолчанию время сообщения не выводится. Но при необходимости можно изменить это поведение активировав вывод времени в <a href="/ru/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>: HTTP-запрос</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: #a9a9a9;"><strong>светло-серый</strong></span>: сообщения которые выводятся в консоль с помощью <a href="/ru/docs/Web/API/console" title="/ru/docs/Web/API/console">консольного API </a>cс использование кода JavaScript</li> + <li><span style="color: #696969;"><strong>Dark Gray</strong></span>: input/output из интерфейса <a href="/ru/docs/Tools/Web_Console#The_command_line_interpreter">интерпретатора командной строки</a></li> + </ul> + </td> + </tr> + <tr> + <td><strong>Тип (Type)</strong></td> + <td>Для все сообщений за исключением HTTP запросов и интерактивного input/output, иконка обозначает тип сообщения: ошибка (X), предупреждение(!), или просто информационное сообщение(i).</td> + </tr> + <tr> + <td><strong>Сообщение (Message)</strong></td> + <td>Само сообщение.</td> + </tr> + <tr> + <td><strong>Количество повторов (Occurrences)</strong></td> + <td>Если строка которая генерирует предупреждение или ошибку выполняется больше одного раза, то на поле сообщений она попадет только один раз, но рядом появится счётчик который укажет сколько раз это сообщение было выведено в поле сообщений.</td> + </tr> + <tr> + <td><strong>Имя файля и номер строки<br> + (Filename:Line number)</strong></td> + <td> + <p>Для сообщений JavaScript, CSS, и консольного API, можно отследить строку с кодом которая стала причиной этого сообщения. Консоль также покажет ссылку на файл и номер строки ставшей причиной сообщения..</p> + + <p>Начиная с Firefox 36, сообщение также включает в себя в номер колонки в строке.</p> + </td> + </tr> + </tbody> +</table> + +<p>По умолчанию консоль очищается каждый раз когда вы открываете новую страницу или перезагружает текущую. Чтобы переопределить это поведение, активируйте опцию "Enable persistent logs" в <a href="/ru/docs/Tools_Toolbox#Common_preferences">Настройках</a>.</p> + +<h3 id="HTTP_запросы">HTTP запросы</h3> + +<p>HTTP запросы записываются следующим образом:</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>Время (Time)</td> + <td>Время записи сообщения</td> + </tr> + <tr> + <td>Категория (Category)</td> + <td>Показывает что сообщение является HTTP запросом.</td> + </tr> + <tr> + <td>Метод (Method)</td> + <td>Вид запроса HTTP</td> + </tr> + <tr> + <td><strong>URI</strong></td> + <td>целевая ссылка URI</td> + </tr> + <tr> + <td>Резюме (Summary)</td> + <td>Версия и статус HTTP протокола, время выполнения запроса.</td> + </tr> + </tbody> +</table> + +<p> </p> + +<p>Нажав мышкой на сообщение вы увидите следующее окно с более детальной информацией о запросе и ответе на него:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3148/detailspanel.png" style="display: block; height: 502px; margin-left: auto; margin-right: auto; width: 430px;"> <span id="result_box" lang="ru"><span>Прокрутка</span> <span>вниз</span> <span>показывает</span> <span>заголовки ответа</span><span>.</span> <span>По умолчанию</span> <span>веб-консоль</span> <span>не записывает в журнал</span> <span>запрос и ответ</span> <span>тела</span><span>: чтобы сделать это</span><span>, войдите в</span> <span>контекстное меню</span> <span>веб-консоли</span> <span>и выберите</span> <span>"</span></span>Log Request and Response Bodies<span lang="ru"><span>",</span> <span>перезагрузите страницу</span><span>, а затем</span> <span>вы увидите их</span> <span>в окне "</span> </span>Inspect Network Request<span lang="ru"> <span>"</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Только первый</span> <span>мегабайт</span> <span>данных</span> <span>регистрируется</span> <span>для каждого</span> <span>запроса или ответа</span> <span>тела, поэтому</span> <span>очень большие</span> <span>запросы и ответы</span> <span>будут обрезаны</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Сообщения журнала</span> <span>сети</span> <span>не отображаются</span> <span>по умолчанию.</span> <span>Используйте</span></span> <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">filtering</a> <span class="short_text" id="result_box" lang="ru"><span> чтобы</span> <span>показать их</span></span>.</p> + +<h4 id="XHR">XHR</h4> + +<p><span id="result_box" lang="ru"><span>С</span> <span>Firefox</span> <span>38</span> <span>и далее,</span> <span>веб-консоль</span> <span>показывает, когда</span> <span>сетевой запрос</span> <span>был сделан</span> <span>как</span></span> <a href="/ru/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>:</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> + +<p><span class="short_text" id="result_box" lang="ru"><span>Кроме того, с</span> <span>Firefox</span> <span>38</span> <span>и далее,</span> <span>вы можете</span></span> <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">filter</a> <span class="short_text" id="result_box" lang="ru"><span>сетевые запросы</span> <span>так</span><span>, чтобы</span> <span>только</span> <span>видеть</span></span> XMLHttpRequests.</p> + +<p><span id="result_box" lang="ru"><span>Как и обычный</span> <span>журнал</span> <span>запроса</span> <span>сетевых сообщений</span><span>,</span> <span>журналы</span> <span>запросы XMLHttpRequest</span> <span>не отображаются</span> <span>по умолчанию.</span> <span>Использовать</span></span> <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">filtering</a> feature to show them.</p> + +<h3 id="JavaScript_ошибки_и_предупреждения">JavaScript ошибки и предупреждения</h3> + +<p>JavaScript ошибки выглядят вот так:</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> + +<h3 id="CSS_ошибки_сообщения_и_переформатирование_сообщения">CSS ошибки, сообщения и <span id="result_box" lang="ru"><span>переформатирование</span></span> сообщения</h3> + +<p>CSS сообщения выглядят так:</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> + +<p>По умолчанию, CSS предупреждения и регистрирования сообщений не отображаются.</p> + +<h4 id="Отправка-события">Отправка-события</h4> + +<p><span id="result_box" lang="ru"><span>Веб-консоль</span> <span>также регистрирует</span> <span>события</span> </span> <span id="result_box" lang="ru"><span>переформатированые</span></span> <span lang="ru"><span> в</span> <span>CSS категорию</span><span>.</span> </span> <span id="result_box" lang="ru"><span>Переформатирование</span></span> <span lang="ru"> <span>это</span> <span>название</span> <span>операции,</span><span> которой браузер</span> <span>вычисляет</span> <span>расположение</span> <span>части или всей страницы</span><span>.</span> </span> <span id="result_box" lang="ru"><span>Переформатирования</span></span><span lang="ru"> <span>происходят, когда</span> <span>изменение</span> <span>произошли</span> <span>на странице, чтобы</span> <span>браузер</span> <span>считал, что</span> <span>влияет на</span> <span>расположение</span><span>.</span></span> <span lang="ru"><span>.</span> <span>Многие</span> <span>события могут вызвать</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>, в том числе</span><span>:</span> <span>изменение размера окна браузера</span><span>, активируя</span> <span>как</span> </span> <span class="short_text" id="result_box" lang="ru"><span>псевдо-классы</span></span> <a href="/ru/docs/Web/CSS/:hover">:hover</a>, <span class="short_text" id="result_box" lang="ru"><span>или</span> <span>манипулирование</span></span> DOM в JavaScript.</p> + +<p><span id="result_box" lang="ru"><span>Поскольку</span> <span>переформатирования</span></span><span lang="ru"> <span>могут</span> <span>быть дорогостоящими вычислениями</span><span> и</span> <span>непосредственно влияют на</span> <span>пользовательский интерфейс</span><span>,</span> <span>они могут иметь</span> <span>большое влияние на</span> <span>отзывчивость</span> <span>веб-сайта или</span> <span>веб-приложения</span><span>.</span> <span>При </span></span> <span id="result_box" lang="ru"><span>переформатировании</span></span><span lang="ru"> <span>события</span> <span>веб-консоль</span> <span>может дать вам</span> <span>понять в какой момент оно начинает</span><span> инициацию</span><span>,</span> <span>как долго</span> <span>они принимаются к</span> <span>выполнению и</span><span>,</span> <span>если</span> <span>есть</span> </span><span id="result_box" lang="ru"><span>переформатирования</span></span> <a href="#synchronous-and-asynchronous-reflows">synchronous reflows</a> <span class="short_text" id="result_box" lang="ru"><span>сработавшие</span> <span>от</span></span> JavaScript, то <span class="short_text" id="result_box" lang="ru"><span>какой код</span> <span>вызвал</span> <span>их</span></span> .</p> + +<p> <span id="result_box" lang="ru"><span>Переформатирования</span></span> <span lang="ru"><span>события регистрируются</span> <span>как</span> <span>"Журнал" сообщений</span><span>, в отличие от</span> <span>ошибок</span> <span>CSS</span> <span>или предупреждений</span><span>.</span> <span>По умолчанию они</span> <span>отключены</span><span>.</span> <span>Вы можете включить</span> <span>их, нажав на</span> <span>кнопку</span> <span>"CSS</span><span>"</span> <span>в</span></span> <a href="#filtering-and-searching">toolbar</a> и выбрать "Журнал".</p> + +<p><span id="result_box" lang="ru"><span>Каждое сообщение</span> <span>маркируется "</span><span>переформатирование</span><span>"</span> <span>и показывает</span> <span>время, необходимое для</span> <span>выполнения</span> <span>переформатирования</span></span> :</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;"> <span id="result_box" lang="ru"><span>Если</span> <span>переформатирование</span></span><span lang="ru"> <span>является синхронным</span> </span><span id="result_box" lang="ru"><span>переформатированием</span></span><span lang="ru"><span>, вызванным</span> <span>JavaScript</span><span>,</span> <span>будет также показанна</span> <span>ссылка на</span> <span>строку кода</span><span>, инициировавшего</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>:</span></span></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;"> <span class="short_text" id="result_box" lang="ru"><span>Нажмите на ссылку</span><span>, чтобы открыть файл</span> <span>в</span></span> <a href="/ru/docs/Tools/Debugger">Debugger</a>.</p> + +<h4 id="Синхронные_и_асинхронные_переформатирования"><a name="synchronous-and-asynchronous-reflows"></a> <span class="short_text" id="result_box" lang="ru"><span>Синхронные</span> <span>и асинхронные</span> </span><span id="result_box" lang="ru"><span>переформатирования</span></span> <a name="synchronous-and-asynchronous-reflows"></a></h4> + +<p><span id="result_box" lang="ru"><span>Если</span> сделанное <span>изменение</span> <span>аннулирует</span> <span>текущую схему</span> <span>-</span> <span>например,</span> <span>окно браузера</span> <span>изменяется</span> <span>или</span> <span>некоторые</span> <span>JavaScript</span> <span>изменяют</span> <span>CSS</span> <span>элемент -</span> <span>макет</span> <span>не пересчитывается</span> <span>немедленно.</span> <span>Вместо</span></span><span lang="ru"> <span>переформатирования </span></span><span lang="ru"> <span>в асинхронном режиме</span><span>,</span> <span>в следующий</span> <span>раз браузер</span> <span>решает что это</span> <span>должно быть сделано</span> <span>(как правило</span><span>,</span> <span>в следующий</span> <span>раз браузер</span> <span>перекрашивается</span><span>)</span><span>.</span> <span>Таким образом,</span> <span>браузер может</span> <span>накопить</span> <span>коллекцию</span> <span>основаную на недействующих </span><span>изменениях</span> <span>и</span> <span>пересчитать</span> <span>их эффект</span> <span>сразу</span><span>.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Тем не менее</span><span>,</span> <span>если</span> <span>какой-то</span> <span>JavaScript код</span> <span>читает что</span> <span>стиль</span><span> был изменен</span><span>,</span> <span>то</span> <span>браузер должен</span> <span>выполнить</span> <span>синхронное</span> <span>переформатирование</span></span><span lang="ru"><span> в порядке вычисленным расчетом стиля</span><span> чтобы вернуться</span><span>.</span> <span>Например</span><span>, код</span><span> как</span> <span>этот хочет вызовать</span> <span>немедленное</span><span>,</span> <span>синхронное</span><span>,</span> </span><span id="result_box" lang="ru"><span>переформатирование</span></span><span lang="ru"><span>,</span> <span>когда вызовет</span></span> <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><span id="result_box" lang="ru"><span>Из-за этого,</span> <span>эта хорошая</span> <span>идея избежать</span> <span>чередования</span> <span>чтения и записи</span> <span>вызовов выше указанных основ</span> <span>стилей</span><span>, когда</span> <span>воздействует</span> <span>DOM</span><span>, потому что</span> <span>каждый раз, когда</span> <span>вы возвращаете</span> <span>стиль, который</span> <span>был</span> <span>недействительным</span> <span>в ранее вызваной</span> <span>записи</span><span>,</span> <span>вы принуждаете к </span> <span>синхронному</span> <span>переформатированию</span></span><span lang="ru"><span>.</span></span></p> + +<h3 id="Предупреждения_безопасности_и_ошибки"><span class="short_text" id="result_box" lang="ru"><span>Предупреждения безопасности и</span> <span>ошибки</span></span></h3> + +<p><span id="result_box" lang="ru"><span>Предупреждения безопасности и</span> <span>ошибки</span> <span>выглядят следующим образом</span></span> :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"> <span id="result_box" lang="ru"><span>Сообщения</span> <span>безопасности</span><span> показанные в </span><span>веб-консоли помогают разработчикам</span> <span>найти</span> <span>потенциальные или фактические</span> <span>уязвимости в</span> <span>своих сайтах</span><span>.</span> <span>Кроме того, многие</span> <span>из этих сообщений</span> <span>помогают обучающимся</span> <span>разработчикам</span><span>, потому что они</span> <span>заканчиваются</span> <span>"Подробной</span><span>" ссылкой ведущей</span><span> вас</span> <span>на страницу</span> <span>со</span> <span>справочной информации и рекомендациями</span> <span>для смягчения</span> <span>этой проблемы.</span></span></p> + +<p><span id="result_box" lang="ru"><span>Полный список</span> <span>сообщений</span> <span>безопасности</span> <span>выглядит следующим образом</span></span> :</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <th scope="col">Сообщение</th> + <th scope="col">Подробности</th> + </tr> + <tr> + <td>Blocked loading mixed active content</td> + <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанные</span><span> активные доли</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span> <span>для загрузки</span> <span>"</span><span>активные доли</span><span>"</span><span>, такие как</span> <span>скрипты</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>заблокировал</span> <span>активные доли</span></span>. Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td> + </tr> + <tr> + <td>Blocked loading mixed display content</td> + <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанное отображение долей</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span><span>, чтобы загрузить</span> <span>"</span><span>отображение долей</span><span>"</span><span>,</span> <span>таких как изображения</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>заблокировал</span> <span>эти отображения долей</span><span>.</span></span> Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td> + </tr> + <tr> + <td>Loading mixed (insecure) active content on a secure page</td> + <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанные</span><span> активные доли</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span> <span>для загрузки</span> <span>"</span><span>активные доли</span><span>"</span><span>, такие как</span> <span>скрипты</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>загрузил эти</span> <span>активные доли</span></span><span lang="ru"><span>.</span></span> Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</td> + </tr> + <tr> + <td>Loading mixed (insecure) display content on a secure page</td> + <td><span id="result_box" lang="ru"><span>Страница</span> <span>содержит</span> <span>смешанное отображение долей</span><span>:</span> <span>то есть</span><span>, главная страница</span> <span>была подана</span> <span>через</span> <span>HTTPS</span><span>,</span> <span>но попросил</span> <span>браузер</span><span>, чтобы загрузить</span> <span>"</span><span>отображение долей</span><span>"</span><span>,</span> <span>таких как изображения</span><span>,</span> <span>через</span> <span>HTTP</span><span>.</span> <span>Браузер</span> <span>загрузил</span> <span>эти отображения долей</span><span>.</span></span> Смотрите <a href="/ru/docs/Security/MixedContent">Mixed Content</a> чтобы узнать подробнее.</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>Смотрите <a href="/ru/docs/Security/CSP">Content Security Policy</a> чтобы узнать подробнее.</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>Смотрите <a href="/ru/docs/Security/CSP">Content Security Policy</a> чтобы узнать подробнее.</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><span id="result_box" lang="ru"><span>Страницы, содержащие</span> <span>регистрационные</span> <span>формы</span> <span>должны</span> <span>быть поданы</span> <span>через</span> <span>HTTPS</span><span>, а не</span> <span>HTTP</span><span>.</span></span></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><span id="result_box" lang="ru"><span>Формы</span><span>, содержащие</span> <span>поля пароля</span> <span>должны представить</span> <span>их через</span> <span>HTTPS</span><span>, а не</span> <span>HTTP</span><span>.</span></span></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><span id="result_box" lang="ru"><span>плавающие фреймы</span><span>, содержащие</span> <span>регистрационные</span> <span>формы</span> <span>должны</span> <span>быть поданы</span> <span>через</span> <span>HTTPS</span><span>, а не</span> <span>HTTP</span><span>.</span></span></td> + </tr> + <tr> + <td>The site specified an invalid Strict-Transport-Security header.</td> + <td>Смотрите <a href="/ru/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> чтобы узнать подробнее.</td> + </tr> + <tr> + <td> + <div class="geckoVersionNote"> + <p>Новое в Firefox 36</p> + </div> + + <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><span id="result_box" lang="ru"><span>Сайт</span> <span>использует сертификат</span> <span>чья подпись</span> <span>использует</span> <span>алгоритм хеширования</span> <span>SHA-1</span><span>.</span></span></p> + + <p><span id="result_box" lang="ru"><span>SHA-</span><span>1</span> <span>по-прежнему</span> <span>до сих пор широко</span> <span>используется</span> <span>в сертификатах</span><span>,</span> <span>но он</span> <span>начинает</span> <span>показывать свой возраст</span><span>.</span> <span>Веб-сайтам и</span> <span>центрам сертификации</span><span> рекомендуется</span> <span>перейти на</span> <span>более сильные</span> <span>хэш-алгоритмы</span> <span>в</span> <span>будущем</span><span>.</span></span> Смотрите <a href="/ru/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> статью рассказывающюю подробнее.</p> + + <p><span id="result_box" lang="ru"><span>Обратите внимание</span><span>, что сертификат</span> <span>SHA-</span><span>1</span> <span>не</span> <span>может</span> <span>быть</span> <span>собственным сертификат</span>ом <span>вашего сайта</span><span>,</span> <span>но может</span> <span>свидетельствовать о</span> <span>принадлежности к</span> <span>сертификации, которая</span> <span>использовалась</span> <span>для подписи сертификата</span> <span>вашего сайта</span><span>.</span></span></p> + </td> + </tr> + </tbody> +</table> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> <span id="result_box" lang="ru"><span>это</span> <span>мета-</span><span>ошибка</span> <span>для регистрации</span> <span>соответствующих</span> <span>сообщений о проблемах безопасности</span> <span>в веб-консоль</span><span>.</span> <span>Если у вас есть</span> <span>идеи для</span> <span>полезных</span> <span>функций, таких как</span> <span>те, что</span> <span>обсуждаемые здесь</span><span>,</span> <span>или заинтересованы</span> <span>в содействии</span><span>, проверьте</span> <span>мета-ошибку</span> <span>и ее зависимости</span><span>.</span></span></p> + +<h3 id="Сообщения_консоли_API"><span class="short_text" id="result_box" lang="ru"><span>Сообщения</span> <span>консоли API</span></span></h3> + +<p><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>This section describes the Web Console output for those console API calls that actually result in output. For more general documentation on the console API, please refer to its <a href="/ru/docs/Web/API/console">documentation page</a>.</p> + +<p>From Firefox 40 onwards, the Web Console can display console messages from <a href="/ru/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/ru/docs/Web/API/ServiceWorker_API">Service Workers</a>, and <a href="/ru/docs/Mozilla/ChromeWorkers">Chrome Workers</a>. Check the relevant options in the <a href="/ru/docs/Tools/Web_Console#Filtering_and_searching">Filtering dropdown menu</a> to see them.</p> + +<h4 id="Сообщения_об_ошибках">Сообщения об ошибках</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Message content</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ru/docs/Web/API/Console.error"><code>error()</code></a></td> + <td> + <p>The argument to <code>error()</code>.</p> + + <pre class="brush: js"> +console.error("an error");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7143/api-error.png" style="display: block; margin-left: auto; margin-right: auto;"> + <p>The console will display a full stack trace for errors:</p> + + <pre class="brush: js"> +function error() { + console.error("an error"); +} + +function call_error() { + error(); +} + +call_error();</pre> + + <p><img alt="" src="https://mdn.mozillademos.org/files/7745/console-error-stack.png" style="display: block; height: 109px; margin-left: auto; margin-right: auto; width: 497px;"></p> + </td> + </tr> + <tr> + <td><a href="/ru/docs/Web/API/Console.exception"><code>exception()</code></a></td> + <td>An alias for <code>error()</code>.</td> + </tr> + <tr> + <td><a href="/ru/docs/Web/API/Console.assert"><code>assert()</code></a></td> + <td> + <p>If the assertion succeeds, nothing. If the assertion fails, the argument:</p> + + <pre class="brush: js"> +console.assert(false, "My assertion always fails");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7139/api-assert.png" style="display: block; margin-left: auto; margin-right: auto;"> + <p>The console will display a full stack trace for assertions:</p> + + <pre class="brush: js"> +function assertion() { + console.assert(false, "assertion failed"); +} + +function call_assertion() { + assertion(); +} + +call_assertion();</pre> + + <p><img alt="" src="https://mdn.mozillademos.org/files/7743/console-assert-stack.png" style="display: block; height: 111px; margin-left: auto; margin-right: auto; width: 497px;"></p> + </td> + </tr> + </tbody> +</table> + +<h4 id="Предупреждающие_сообщения">Предупреждающие сообщения</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Message content</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ru/docs/Web/API/Console.warn"><code>warn()</code></a></td> + <td> + <p>The argument to <code>warn()</code>.</p> + + <pre class="brush: js"> +console.warn("a warning");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7155/api-warn.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + </tbody> +</table> + +<h4 id="Информативные_сообщения">Информативные сообщения</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Message content</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ru/docs/Web/API/Console.info"><code>info()</code></a></td> + <td> + <p>The argument to <code>info()</code>.</p> + + <pre class="brush: js"> +console.info("some info");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7145/api-info.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + </tbody> +</table> + +<h4 id="Журнальные_сообщения">Журнальные сообщения</h4> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">API</th> + <th scope="col">Message content</th> + </tr> + </thead> + <tbody> + <tr> + <td><a href="/ru/docs/Web/API/Console.count"><code>count()</code></a></td> + <td> + <p>The label supplied, if any, and the number of times this occurrence of <code>count()</code> has been called with the given label:</p> + + <pre class="brush: js"> +console.count(user.value);</pre> + + <p><img alt="" src="https://mdn.mozillademos.org/files/7359/api-count.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + </td> + </tr> + <tr> + <td><a href="/ru/docs/Web/API/Console.dir"><code>dir()</code></a></td> + <td> + <p>Listing of the object's properties:</p> + + <pre class="brush: js"> +var user = document.getElementById('user'); +console.dir(user);</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7157/api-dir.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></td> + <td>Aliased to <code>log()</code>.</td> + </tr> + <tr> + <td><a href="/ru/docs/Web/API/Console.log"><code>log()</code></a></td> + <td> + <p>The argument to <code>log()</code>.</p> + + <pre class="brush: js"> +console.log("logged");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7147/api-log.png" style="display: block; margin-left: auto; margin-right: auto;"> + <p> </p> + + <p>Если аргумент — это узел DOM, консоль выдаст его в виде <a href="/ru/docs/Tools/Web_Console#Highlighting_and_inspecting_DOM_nodes">инспектируемого</a> rich text:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/10807/console-log.png" style="display: block; height: 79px; margin-left: auto; margin-right: auto; width: 458px;"></p> + </td> + </tr> + <tr> + <td><a href="/ru/docs/Web/API/Console.table"><code>table()</code></a></td> + <td> + <p>Display tabular data as a table.</p> + </td> + </tr> + <tr> + <td><a href="/ru/docs/Web/API/Console.time"><code>time()</code></a></td> + <td> + <p>Notification that the specified timer started.</p> + + <pre class="brush: js"> +console.time("t");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7149/api-time.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></td> + <td> + <p>Duration for the specified timer.</p> + + <pre class="brush: js"> +console.timeEnd("t");</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7151/api-timeEnd.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + <tr> + <td><a href="/ru/docs/Web/API/Console.trace"><code>trace()</code></a></td> + <td> + <p>Stack trace:</p> + + <pre class="brush: js"> +console.trace();</pre> + <img alt="" src="https://mdn.mozillademos.org/files/7159/api-trace.png" style="display: block; margin-left: auto; margin-right: auto;"></td> + </tr> + </tbody> +</table> + +<h4 id="Группировка_сообщений">Группировка сообщений</h4> + +<p>Вы можете использовать <code>console.group()</code> для создания indented groups в выводе консоли. Смотрите <a href="/ru/docs/Web/API/console#Using_groups_in_the_console">Использование групп в консоли</a> для более детальной информации.</p> + +<h4 id="Оформление_сообщений">Оформление сообщений</h4> + +<p>Начиная с Firefox 31, вы можете использовать спецификатор формата <code>"%c"</code> для стилизации консольных сообщений:</p> + +<pre class="brush: js">console.log("%cMy stylish message", "color: red; font-style: italic");</pre> + +<div><img alt="" src="https://mdn.mozillademos.org/files/7739/console-style.png" style="display: block; height: 52px; margin-left: auto; margin-right: auto; width: 293px;"></div> + +<h3 id="Сообщения_вводавывода">Сообщения ввода/вывода</h3> + +<p>Команды, отправленные браузеру через <a href="#command-line">командную строку</a>, как и результаты их выполнения, выводятся в <a href="#message-display-pane">поле вывода сообщений</a> Веб-консоли в следуюем виде:</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;">Темно-серая полоса служит индикатором того, что это сообщения ввода/вывода, тогда как направление стрелки обозначает разлчия между вводом и выводом.</p> + +<h3 id="Фильтрация_и_поиск"><a name="filtering-and-searching">Фильтрация и поиск</a></h3> + +<h4 id="Фильтрация_по_типу">Фильтрация по типу</h4> + +<p>Для фильтрации сообщений в <a href="#message-display-pane">поле вывода сообщений</a> Веб-консоли используется панель вверху.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;">Чтобы увидеть только сообщения определённого типа, нажмите на кнопку, название которой соответствует желаемому типу сообщений ("Net", "CSS", и т.д.). Нажатие на основную часть кнопки включает/выключает отображение сообщений выбранного типа, тогда как нажатие на стрелку в правой части кнопки вызывает выпадающее меню с более специфическими вариантами фильтров для сообщений выбранного типа (например, вывод только предупреждений и сообщений об ошибках).</p> + +<p>Начиная с Firefox 40, можно настроить опции фильтра "Logging", чтобы видеть сообщения от workers и add-ons:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10805/console-worker-filtering.png" style="display: block; height: 355px; margin-left: auto; margin-right: auto; width: 855px;"></p> + +<h4 id="Фильтрация_по_тексту">Фильтрация по тексту</h4> + +<p>Чтобы видеть только сообщения, содержащие определённую строку, введите её в поле с меткой "Filter output".</p> + +<h4 id="Очистка_содержимого">Очистка содержимого</h4> + +<p>Наконец, Вы можете использовать эту панель для очистки всех выведенных сообщений.</p> + +<dl> +</dl> + +<h2 id="Интерпретатор_командной_строки"><a name="command-line">Интерпретатор командной строки</a></h2> + +<p>Вы можете выполнять JavaScript-код в реальном времени, используя командную строку в Web-консоли.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5597/web-console-commandline-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Ввод_выражений">Ввод выражений</h3> + +<p>Для ввода выражений просто введите в командную строку и нажмите <kbd>Enter</kbd>. Для ввода выражений, состоящих из нескольких строк, используйте комбинацию <kbd>Shift</kbd><kbd>Enter</kbd> вместо <kbd>Enter</kbd>.</p> + +<p>Введённое выражение отобразится в окне сообщений, с выводом результата последующей строкой:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7377/commandline-executejs.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Accessing_variables">Accessing variables</h3> + +<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript like <code>jQuery</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Автозавершение">Автозавершение</h3> + +<p>The command line has autocomplete: enter the first few letters and a popup appears with possible completions:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7375/commandline-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Type <kbd>Enter</kbd> or <kbd>Tab</kbd> to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.</p> + +<p>The console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.</p> + +<p>You get autocomplete suggestions for array elements, as well:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7383/commandline-arrayautocomplete.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Объявление_переменных">Объявление переменных</h3> + +<p>Вы можете объявить ваши собственные переменные, и в последующем обращаться к ним:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7371/commandline-addingvariable1.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7373/commandline-addingvariable2.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="История_команд">История команд</h3> + +<p>Командная строка запоминает введённые ранее команды: чтобы перемещаться вперёд и назад по истории, используйте стрелки вниз и вверх на клавиатуре.</p> + +<p>Начиная с Firefox 39, эта история сохраняется между сессиями. Чтобы очистить историю, используйте <code>clearHistory()</code> <a href="/ru/docs/Tools/Web_Console#Helper_commands">helper function</a>.</p> + +<h3 id="Работа_с_iframes">Работа с iframes</h3> + +<p>If a page contains embedded <a href="/ru/docs/Web/HTML/Element/iframe">iframes</a>, you can use the <code>cd()</code> command to change the console's scope to a specific iframe, and then you can execute functions defined in the document hosted by that iframe. There are three ways to select an iframe using <code>cd()</code>:</p> + +<p>You can pass the iframe DOM element:</p> + +<pre class="brush: js">var frame = document.getElementById("frame1"); +cd(frame);</pre> + +<p>You can pass a CSS selector that matches the iframe:</p> + +<pre class="brush: js">cd("#frame1");</pre> + +<p>You can pass the iframe's global window object:</p> + +<pre class="brush: js">var frame = document.getElementById("frame1"); +cd(frame.contentWindow); +</pre> + +<p>To switch the context back to the top-level window, call <code>cd()</code> with no arguments:</p> + +<pre class="brush: js">cd();</pre> + +<p>For example, suppose we have a document that embeds an iframe:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>The iframe defines a new function:</p> + +<pre class="brush: html"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "I'm frame1"; + } + </script> + </head> + <body> + </body> +</html></pre> + +<p>You can switch context to the iframe like this:</p> + +<pre class="brush: js">cd("#frame1");</pre> + +<p>Now you'll see that the global window's document is the iframe:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">And you can call the function defined in the iframe:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h3 id="Helper_commands">Helper commands</h3> + +<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p> + +<h2 id="Rich_output_for_objects">Rich output for objects</h2> + +<p>When the Web console prints objects, it includes a richer set of information than just the object's name. In particular, it:</p> + +<ul> + <li><a href="/ru/docs/Tools/Web_Console#Type-specific_rich_output">provides extra information for certain types</a></li> + <li><a href="/ru/docs/Tools/Web_Console#Examining_object_properties">enables detailed examination of the object's properties</a></li> + <li><a href="/ru/docs/Tools/Web_Console#Highlighting_and_inspecting_DOM_nodes">provides richer information for DOM elements, and enables you to select them in the Inspector</a></li> +</ul> + +<h3 id="Type-specific_rich_output">Type-specific rich output</h3> + +<p>The Web Console provides rich output for many object types, including the following:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>Object</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9597/web-console-object.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Array</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9589/web-console-array.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Date</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9591/web-console-date.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Promise</code></td> + <td> + <div class="geckoVersionNote"> + <p>Новое в Firefox 36</p> + </div> + + <p><img alt="" src="https://mdn.mozillademos.org/files/9599/web-console-promise.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 600px;"></p> + </td> + </tr> + <tr> + <td><code>RegExp</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9601/web-console-regexp.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Window</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9603/web-console-window.png" style="display: block; height: 38px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Document</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9593/web-console-document.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + <tr> + <td><code>Element</code></td> + <td><img alt="" src="https://mdn.mozillademos.org/files/9595/web-console-element.png" style="display: block; height: 39px; margin-left: auto; margin-right: auto; width: 600px;"></td> + </tr> + </tbody> +</table> + +<h3 id="Examining_object_properties">Examining object properties</h3> + +<p>When an object is logged to the console it appears in italics. Click on it, and you'll see a new panel appear containing details of the object:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7381/commandline-inspecting.png" style="display: block; margin-left: auto; margin-right: auto;">To dismiss this panel press <kbd>Esc</kbd>..</p> + +<h3 id="Выделение_и_инспектирование_узлов_DOM">Выделение и инспектирование узлов DOM</h3> + +<p>If you hover the mouse over any DOM element in the console output, it's highlighted in the page:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7379/commandline-highlightnode.png" style="display: block; margin-left: auto; margin-right: auto;">In the screenshot above you'll also see a blue "target" icon next to the node in the console output: click it to switch to the <a href="https://developer.mozilla.org/ru/docs/Tools/Page_Inspector">Inspector</a> with that node selected.</p> + +<h2 id="The_split_console">The split console</h2> + +<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> + +<p>You can use the console alongside other tools. While you're in another tool in the Toolbox, just press <kbd>Esc</kbd> or press the "Toggle split console" button in the <a href="/ru/docs/Tools_Toolbox#Toolbar">Toolbar</a>. The toolbox will now appear split, with the original tool above and the web console underneath.</p> + +<p>As usual, <code>$0</code> works as a shorthand for the element currently selected in the Inspector:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Клавиши_быстрово_вызова">Клавиши быстрово вызова</h2> + +<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "web-console") }}</p> + +<h3 id="Global_shortcuts">Global shortcuts</h3> + +<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> diff --git a/files/ru/tools/web_console/opening_the_web_console/index.html b/files/ru/tools/web_console/opening_the_web_console/index.html new file mode 100644 index 0000000000..41f3e760cc --- /dev/null +++ b/files/ru/tools/web_console/opening_the_web_console/index.html @@ -0,0 +1,23 @@ +--- +title: Opening the Web Console +slug: Tools/Web_Console/Opening_the_Web_Console +translation_of: Tools/Web_Console/UI_Tour +--- +<div>{{ToolsSidebar}}</div><p>To open the Web Console:</p> + +<ul> + <li>either select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X)</li> + <li>or press the <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> on OS X) keyboard shortcut.</li> +</ul> + +<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11669/console.png" style="display: block; height: 324px; margin-left: auto; margin-right: auto; width: 952px;"></p> + +<p>The Web Console's interface is split into three horizontal sections:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">Toolbar</a>: along the top is a toolbar containing buttons with labels like "Net", "CSS", and "JS". This toolbar is used to filter which messages are displayed</li> + <li><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Command Line</a>: along the bottom is a command line that you can use to enter JavaScript expressions</li> + <li><a href="/en-US/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Message Display Pane</a>: in between the toolbar and the command line, and occupying most of the window, is the space in which the Web Console displays messages</li> +</ul> diff --git a/files/ru/tools/web_console/split_console/index.html b/files/ru/tools/web_console/split_console/index.html new file mode 100644 index 0000000000..8085c9a199 --- /dev/null +++ b/files/ru/tools/web_console/split_console/index.html @@ -0,0 +1,18 @@ +--- +title: Разделённая консоль +slug: Tools/Web_Console/Split_console +translation_of: Tools/Web_Console/Split_console +--- +<div>{{ToolsSidebar}}</div> + +<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Вы можете использовать консоль вместе с другими инструментами.</span></span> <span class="ChMk0b JLqJ4b"><span>Находясь в другом инструменте панели инструментов, просто нажмите клавишу <kbd>Esc</kbd> или выберите команду «Показать разделенную консоль» в меню панели инструментов.</span></span> <span class="ChMk0b JLqJ4b"><span>Панель инструментов теперь будет разделена, с исходным инструментом вверху и веб-консолью внизу.</span></span></span></p> + +<p><span class="VIiyi" lang="ru"><span class="ChMk0b JLqJ4b"><span>Вы можете закрыть разделенную консоль, снова нажав <kbd>Esc</kbd> или выбрав команду меню «Скрыть разделенную консоль».</span></span></span></p> + +<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> + +<p>Как обычно, <code>$0</code> работает как сокращение для элемента, выбранного в данный момент в Инспекторе:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">При использовании разделенной консоли с отладчиком, областью действия консоли является текущий выполняемый кадр стека. Таким образом, если вы нажмете точку останова в функции, область действия будет областью действия функции. Вы получите автозаполнение для объектов, определенных в функции, и сможете легко изменять их на лету:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ru/tools/webide/index.html b/files/ru/tools/webide/index.html new file mode 100644 index 0000000000..f8c0ab40fd --- /dev/null +++ b/files/ru/tools/webide/index.html @@ -0,0 +1,252 @@ +--- +title: WebIDE +slug: Tools/WebIDE +tags: + - Apps + - Firefox OS + - WebIDE + - tool + - Отладка + - инструменты +translation_of: Archive/WebIDE +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>WebIDE даёт вам возможность запускать и выполнять отладку веб-приложений, используя <a href="https://developer.mozilla.org/ru/docs/Tools/Firefox_OS_Simulator">Симулятор Firefox OS</a> или реальное устройство, работающее на Firefox OS.</p> + +<p>Она представляет собой среду разработки, в которой можно создавать и редактировать приложения для Firefox OS. WebIDE удобно отображет файлы проекта в древовидной структуре, что обеспечивает легкий доступ к файлам для их последующего редактирования и сохранения. В дополнение прилагается пара шаблонов для быстрого старта.</p> +</div> + +<p>Для начала <a href="/ru/docs/Tools/WebIDE/Setting_up_runtimes">настройте среду выполнения</a> в WebIDE. Среда выполнения — это окружение, в котором вы сможете запускать и/или выполнять отладку приложения. Среда исполнения может быть реальным устройством, работающим под Firefox OS и подключенным к персональному компьютеру через USB (или по Wi-Fi, начиная с <a href="/ru/Firefox/Releases/39">Firefox 39</a>), или это может быть Симулятор Firefox OS, установленный на компьютере.</p> + +<p>Затем <a href="/ru/docs/Tools/WebIDE/Creating_and_editing_apps">создайте или откройте существующее приложение</a>. Если вы создаете новое приложение, то можете выбрать один из шаблонов. Это может быть шаблон с минимальной конфигурацией, включающий только базовый набор файлов, необходимых для разработки, либо расширенный, который содержит примеры использования специфического API. WebIDE покажет файлы проекта в виде дерева, и вы можете редактировать и сохранять их во встроенном редакторе. Конечно, совсем необязательно использовать встроенный редактор: можно разрабатывать приложение и во внешней среде разработки, используя WebIDE как дебаггер.</p> + +<p>В завершение установите <a href="/ru/docs/Tools/WebIDE/Running_and_debugging_apps">приложение в одну из сред выполнения и запустите его</a>. Затем откройте стандартный набор иструментов разработчика - <a href="/ru/docs/Tools/Page_Inspector">Инспектор</a>, <a href="/ru/docs/Tools/Web_Console">Веб-консоль</a>, <a href="https://developer.mozilla.org/ru/docs/Tools/Debugger">Отладчик JavaScript</a> и так далее — и можете начать изучать и изменять запущенное приложение.</p> + +<hr> +<dl> + <dt><a href="/ru/docs/Tools/WebIDE/Opening_WebIDE">Запуск WebIDE</a></dt> + <dd>Как открыть WebIDE из Firefox.</dd> + <dt><a href="/ru/docs/Tools/WebIDE/Setting_up_runtimes">Настройка сред выполнения</a></dt> + <dd>Как подключиться к среде выполнения, в которой вы можете устанавливать приложения в устройства на Firefox OS, на симулятор Firefox OS, и на Firefox для Android.</dd> + <dt><a href="/ru/docs/Tools/WebIDE/Creating_and_editing_apps">Создание и редактирование приложений</a></dt> + <dd>Как создавать, открывать, и разрабатывать приложения, используя WebIDE.</dd> + <dt><a href="/ru/docs/Tools/WebIDE/The_runtime_menu">Меню среды выполнения</a></dt> + <dd>Выбрав среду выполнения, используйте меню, чтобы получить информацию о среде выполнения и о его приложениях, изменять настройки, или сделать снимок.</dd> + <dt><a href="/ru/docs/Tools/WebIDE/Running_and_debugging_apps">Запуск и отладка приложений</a></dt> + <dd>Как установить приложения в среду выполнения и отлаживать их, используя Инструменты разработчика Firefox.</dd> + <dt><a href="/ru/docs/Tools/WebIDE/Working_with_Cordova_apps_in_WebIDE">Работа над приложениями Cordova в WebIDE</a></dt> + <dd>начиная с Firefox версии 39, вы можете редактировать и отлаживать приложения Cordova, используя WebIDE.</dd> + <dt><a href="/ru/docs/Tools/WebIDE/Troubleshooting">Устранение неполадок</a></dt> + <dd>Помощь с проблемами с WebIDE, в особенности с проблемами подключения к среде выполнения.</dd> +</dl> + +<div class="note"> +<p>Чтобы разрабатывать и отлаживать приложения с помощью WebIDE, всё что вам нужно — это Firefox версии 33 или новее. Чтобы протестировать на реальном устройстве работающем под Firefox OS, вам потребуется устройство с Firefox OS 1.2 или новее и USB кабель.</p> + +<p>WebIDE совместима только с Firefox OS 1.2 или новее.</p> +</div> + +<h2 id="Установка_среды_исполнения">Установка среды исполнения</h2> + +<p>Среды исполнения в списке "Select Runtime" (Выбрать среду исполнения), сгруппированы в 3 секции:</p> + +<ul> + <li><a href="https://developer.mozilla.org/ru/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">USB устройства</a>: Firefox OS устройства, подключенные через USB</li> + <li><a href="/ru/docs/Tools/WebIDE#Adding_a_Simulator">Симуляторы</a>: установленные и зарегистрированные экземпляры Firefox OS Симулятора</li> + <li><a href="/ru/docs/Tools/WebIDE#Custom_runtimes">Особые настройки</a>: воспользуйтесь этим пунктом, чтобы подключиться к WebIDE с помощью произвольного имени и порта.</li> +</ul> + +<p>Если вы впервые установили и настроили WebIDE, то вы возможно не увидите сред исполнения в списке:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">Оставшаяся часть главы описывает, как добавить несколько сред исполнения.</p> + +<h3 id="Соединение_с_устройством_Firefox_OS">Соединение с устройством Firefox OS</h3> + +<p>Перед тем как установить соединение с устройством Firefox OS, требуется предварительно проделать некоторые действия:</p> + +<ul> + <li><strong>проверьте вашу версию Firefox OS: </strong>убедитесь, что на вашем устройстве запущена Firefox OS 1.2/Boot2Gecko 1.2 или более свежая версия. Чтобы узнать версию установленной Firefox OS, откройте меню Настройки (Settings) на устройстве, затем перейдите в <code>Device Information(Информация об устройстве) > Softwar<code>e</code>(Програмное обеспечение)</code>. Если у вас установлена старая версия, но у вас Geeksphone, то обновите ваше программное обеспечение, следуя <a href="/Firefox_OS/Developer_phone_guide/Geeksphone">нашему руководству</a>.</li> + <li><strong>активируйте удаленную отладку: </strong>в приложении Settings (Настройки), пройдите в <code>Device information (Информация об устройстве) > More information (Дополнительная информация)> Developer(Разработка)</code>. Если элемент Удаленная Отладка (Remote Debugging) — это обыкновенный флажок, то нажмите на него, чтобы активировать. Если устройство дополнительно спросит активировать только "ADB", или "ADB and DevTools", выберите "ADB and DevTools".</li> + <li><strong>отключите блокировку экрана на устройстве:</strong> в приложении Настройки (Settings) пройдите в меню к <code>Screen Lock <code>(Блокировка Экрана) </code></code>и уберите флажок с <code>Lock Screen</code> <code>(Блокировать Экран)</code>. Это облегчит вам работу, поскольку при блокировке экрана соединение с телефоном разрывается и процесс отладки приложения прервётся.</li> + <li><strong>Только для пользователей Linux:</strong> добавьте файл с правилами<code> udev</code> , как указано в документации на шаге 3 руководства по <a href="http://developer.android.com/tools/device.html#setting-up">настройке устройств на Андроид</a>. Атрибут <code>idVendor</code> для Geeksphone имеет значение "05c6", а <a href="http://developer.android.com/tools/device.html#VendorIds">здесь</a> можно найти список других значений <code>idVendor.</code></li> + <li><strong>Только для пользователей Windows:</strong> вам потребуется установить драйвера, как указано в документации на шаге 3 руководства по <a href="http://developer.android.com/tools/device.html#setting-up">настройке устройств на Андроид</a>. Вы сможете найти драйвера для устройств Geeksphone на сайте <a href="http://downloads.geeksphone.com/">Geeksphone</a>. Windows 8 по умолчанию не позволит вам установить неподписанные драйвера. Обратитесь к статье <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Как установить неподписанные драйвера в Windows 8"</a>.</li> + <li><strong>отключите все другие Андроид устройства:</strong> убедитесь что у вас нет других Андроид устройств, подключенных к компьютеру.</li> +</ul> + +<p>Теперь подсоедините устройство к компьютеру с помощью USB. Вы должны увидеть ваше устройство в подгруппе "USB DEVICES" (USB Устройства):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> + +<h4 id="Исправление_ошибок">Исправление ошибок</h4> + +<p>Если вы не видите ваше устройство, то попробуйте следующее:</p> + +<ol> + <li><strong>включите логирование:</strong> + + <ol start="1" style="list-style-type: lower-alpha;"> + <li>откройте <a href="http://kb.mozillazine.org/About:config">about:config</a>, и добавьте новый параметр <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>/ Присвойте ему строковое значение <code>all</code>.</span></span></li> + <li>в <a href="https://support.mozilla.org/ru/kb/disable-or-remove-add-ons">Менеджере Дополнений</a> отключите и снова включите дополнение ADB Helper.</li> + <li>Откройте <a href="/ru/docs/Tools/Browser_Console">К</a><a href="/ru/docs/Tools/Browser_Console">онсоль Браузера</a> и вы увидите в сообщения начинающиеся с <code>adb</code>. Если смысл сообщений вам непонятен, то попросите помощи.</li> + </ol> + </li> + <li><strong>где можно попросить помощи:</strong> зайдите на <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools чат IRC</a>, и мы постараемся вам помочь.</li> + <li><strong>отредактируйте asb_usb.ini</strong>: если команда "adb devices" выводит пустой список даже когда телефон подключен и разблокирован, то можно попробовать отредактировать <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">adb_usb.ini</a>.</li> +</ol> + +<h3 id="Добавление_Симулятора_Firefox_OS">Добавление Симулятора Firefox OS</h3> + +<p><span style="line-height: 1.5;"><a href="/ru/docs/Tools/Firefox_OS_Simulator">Симулятор Firefox OS</a> is <span style="line-height: 1.5;">a version of the higher layers of Firefox OS</span> that simulates a Firefox OS device, but runs on the desktop. </span><span style="line-height: 1.5;">It runs in a window the same size as a Firefox OS device, includes the Firefox OS user interface and built-in apps, and simulates many of the Firefox OS device APIs.</span></p> + +<p><span style="line-height: 1.5;">Это означает, что в большинстве случаев вам не требуется настоящее устройство, чтобы тестировать и выполнять отладку ваших приложений. </span></p> + +<p>Симулятор имеет большой объем, поэтому он не встроен в Firefox, а поставляется как <a href="/ru/Add-ons">плагин</a>. Если вы нажмёте "Установить Симулятор" (Install Simulator) в меню Среды Исполнения, вас перенаправит на страницу, с которой можно установить различные версии Firefox OS Симулятора.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">Вы можете установить сколько угодно версий Симулятора. Но будьте терпеливы — Симуляторы имеют большой объем, и поэтому их загрузка может занять продолжительное время. Как только вы установили Симуляторы, они появятся в меню Среды Исполнения:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">Чтобы узнать больше о Симуляторах, просмотрите <a href="/ru/docs/Tools/Firefox_OS_Simulator">документацию к ним</a>.</p> + +<h3 id="Custom_runtimes">Custom runtimes</h3> + +<p>With a custom runtime you can use an arbitrary hostname and port to connect to the remote device.</p> + +<p>Under the hood, Firefox OS devices and Android devices connect to the desktop using a program called the Android Debug Bridge, or <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. By default, the WebIDE uses an add-on called the ADB Helper: this simplifies the process for you by installing ADB and setting up port forwarding so the Firefox desktop tools can exchange messages with the device.</p> + +<p>This is convenient, but sometimes you need to manage ADB directly, because you have your own custom port forwarding, and in this case you need to set up a custom runtime. For example, you can connect a <a href="/ru/docs/Tools/Remote_Debugging/Firefox_for_Android">Firefox for Android device using adb</a>, then set up port forwarding from that device, then use the port number in a custom runtime to connect WebIDE to it.</p> + +<h2 id="Как_создать_новое_или_открыть_существующее_приложение">Как создать новое или открыть существующее приложение</h2> + +<p>В списке меню «Открыть приложение» (Open App) есть 3 опции: «Создать новое приложение», «Открыть упакованное приложение» и «Открыть приложение на удаленном хосте»:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p> + +<h3 id="Создание_нового_приложения">Создание нового приложения</h3> + +<p>Выберите "Создать Приложение... " (New App...), чтобы создать новое приложение. Откроется диалог, предлагающий выбрать между двумя шаблонами "Пустое Приложение" (Privileged Empty App) и "Приложение Образец" (Privileged App).</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p> + +<p>Оба шаблона взяты из колекции шаблонов <a href="https://github.com/mozilla/mortar/">Mortar</a>, и оба предоствавляют базовую структуру для начала разработки приложения. "Приложение Образец" (Privileged App) показывает, как приложение может использовать разрешения для загрузки контента с удаленного источника.</p> + +<p>Выбрав шаблон, введите имя приложения и выберите директорию, в которую следует сохранить файлы, после чего новое приложение откроется в <a href="https://developer.mozilla.org/ru/docs/Tools/WebIDE#Editing_apps">редакторе проекта</a>.</p> + +<h3 id="Как_открыть_упакованное_приложение">Как открыть упакованное приложение</h3> + +<p>Выберите "Открыть Упакованное Приложение" (Open Packaged App...), чтобы открыть <a href="/ru/Marketplace/Options/Packaged_apps">упакованное приложение</a>. Затем укажите директорию, в которой содержится <a href="/ru/Apps/Build/Manifest">манифест</a> приложения, и оно откроется в <a href="https://developer.mozilla.org/ru/docs/Tools/WebIDE#Editing_apps">редакторе проекта</a>.</p> + +<h3 id="Как_открыть_приложение_на_удаленном_хосте">Как открыть приложение на удаленном хосте</h3> + +<p>Выберите "Открыть Удаленное Приложение" (Open Hosted App...), затем укажите ссылку (URL) на <a href="/ru/Apps/Build/Manifest">манифест</a> приложения, и приложение откроется в <a href="https://developer.mozilla.org/ru/docs/Tools/WebIDE#Editing_apps">редакторе проекта</a>.</p> + +<h2 id="Редактирование_приложений">Редактирование приложений</h2> + +<p>Редактор проекта предлагает удобное окружение для разработки приложений. Слева можно увидеть файловую структуру проекта в виде дерева, а справа панель редактора. Вы можете добавлять и удалять файлы, используя контекстное меню.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p> + +<h3 id="Валидация_Манифеста">Валидация Манифеста</h3> + +<p>WebIDE автоматически проверяет манифест на наличие определенных общих ошибок. Если она найдет ошибку, то укажет, что в приложении имеются проблемы, а также даст более детальное описание проблемы:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p> + +<h3 id="Редактор_кода">Редактор кода</h3> + +<p>WebIDE использует редактор кода <a href="http://codemirror.net/">CodeMirror</a>.</p> + +<h4 id="Шорткаты_редактора_кода">Шорткаты редактора кода</h4> + +<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<h4 id="Автодополнение_кода">Автодополнение кода</h4> + +<p>Редактор имеет функцию автодополнения кода CSS и JavaScript. Для CSS автодополнение всегда включено:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">Чтобы открыть подсказки автодополнения для JavaScript, нажмите Control + Space:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p> + +<h4 id="Встроенная_документация">Встроенная документация</h4> + +<p>Редактор также может показывать встроенную документацию к JavaScript. Нажмите Shift + Space, чтобы увидеть всплывающее окно с документацией к объекту, на котором находится курсор:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p> + +<p>Нажатие на ссылку <code>[docs]</code> в окне с документацией перенаправит вас на страницу с MDN с описанием объекта, к которому требуется дополнительная документация.</p> + +<h2 id="Запуск_и_отладка_приложений">Запуск и отладка приложений</h2> + +<p>Когда вы готовы к запуску приложения, то выберите среду исполнения из меню "Выбрать среду исполнения" (Select Runtime). Если у вас еще нет ни одной зарегистрированной среды исполнения, то узнайте, как можно это сделать, в главе <a href="/ru/docs/Tools/WebIDE#Setting_up_runtimes">Настройка среды исполнения</a>.</p> + +<ul> + <li>Если вы выбрали Симулятор, WebIDE запустит его.</li> + <li>Если вы выбрали устройство Firefox OS, WebIDE соединится с устройством. На устройстве появится диалог, который попросит подтверждения того, что вы желаете установить соединение: нажмите "ДА" (OK).</li> +</ul> + +<p>Теперь две вещи изменились. Во-первых, в меню Среды Исполнения появилось 3 дополнительных пункта:</p> + +<ul> + <li>информация о текущей среде исполнения;</li> + <li>таблица, содержащая список <a href="/ru/Apps/Build/App_permissions">разрешений приложения</a> в активной среде исполнения, в которой указан каждый API и каждый <a href="/ru/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">тип приложения</a>, доступ к которому разрешен (✓), запрещен (✗), или разрешение будет запрошено у пользователя (!);</li> + <li>команда, позволяющая сделать скриншот с экрана среды исполнения.</li> +</ul> + +<p>Во-вторых, кнопка "play" в центре панели инструментов WebIDE теперь активна: нажмите на неё, чтобы установить и запустить приложение в выбранной среде исполнения:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">Чтобы включить отладку приложения, нажмите кнопку "Приостановить" (Pause) — появится <a href="/ru/docs/Tools/Tools_Toolbox">Панель Разработчик</a><a href="/ru/docs/Tools/Tools_Toolbox">а, </a>соединённая с вашим приложением:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">В зависимости от среды исполнения список доступных инструментов может изменяться, однако как минимум будут доступны базовые инструменты: <a href="/ru/docs/Tools/Page_Inspector">Инспектор</a>, <a href="/ru/docs/Tools/Web_Console">Консоль</a>, <a href="/ru/docs/Tools/Debugger">Дебаггер JavaScript</a>, <a href="/ru/docs/Tools/Style_Editor">Редактор Стилей</a>, <a href="/ru/docs/Tools/Profiler">Профайлер</a> and <a href="/ru/docs/Tools/Scratchpad">Скратчпад</a>. Как и при работе с веб страницами, любое сделанное вами изменение немедленно отобразится в приложении, но при перезапуске приложения изменения не сохраняются. И наоборот, любые сделанные вами изменения в редакторе можно сохранить сразу на диск, но они станут видимыми только после рестарта приложения.</p> + +<h3 id="Отладка_подписанных_приложений">Отладка подписанных приложений</h3> + +<p>With the Simulator, if you click on the app dropdown menu while the runtime is selected, you can see and debug not only your app but all apps running in that runtime, including <a href="/ru/Marketplace/Options/Packaged_apps#Certified_app">certified apps</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p> + +<p><br> + Как бы там ни было, чтобы запустить отладку подписанного приложения на реальном устройстве:</p> + +<ul> + <li>устройство должно работать под сборкой Firefox OS версии 1.2+;</li> + <li>вы должны активировать отладку подписанных приложений.</li> +</ul> + +<p>Чтобы активировать отладку подписанных приложений, проделайте следующие операции:</p> + +<ol> + <li>На своем компьютере откройте терминал/консоль и выполните команду, чтобы войти на файловую систему устройства через шел: + <pre class="brush: bash">adb shell</pre> + + <p>Приглашение в терминале должно измениться на root@android.</p> + </li> + <li> + <p>Следующий шаг — остановите B2G:</p> + + <pre class="brush: bash">stop b2g</pre> + </li> + <li> + <p>Смените текущую директорию:</p> + + <pre class="brush: bash">cd /data/b2g/mozilla/*.default/</pre> + </li> + <li> + <p>Добавьте следующую строку в файл prefs.js :</p> + + <pre class="brush: bash">echo 'user_pref("devtools.debugger.forbid-certified-apps", false);' >> prefs.js +</pre> + </li> + <li> + <p>Перезапустите B2G:</p> + + <pre class="brush: bash">start b2g</pre> + </li> + <li> + <p>Выйдите из файловой системы Андроида с помощью команды <code>exit</code>; это вернет вас в ваш обычный терминал и вы увидите стандартное приглашение командной строки.</p> + </li> +</ol> + +<p>Теперь в WebIDE доступны все подписанные приложения на вашем устройстве.</p> + +<p> </p> + +<p> </p> diff --git a/files/ru/tools/webide/monitor/index.html b/files/ru/tools/webide/monitor/index.html new file mode 100644 index 0000000000..0f7a579909 --- /dev/null +++ b/files/ru/tools/webide/monitor/index.html @@ -0,0 +1,110 @@ +--- +title: Monitor +slug: Tools/WebIDE/Monitor +tags: + - Monitor +translation_of: Archive/WebIDE/Monitor +--- +<div>{{ToolsSidebar}}</div><p>WebIDE Monitor инструмент предназначеный помочь вам отслеживать эффективность работы <a href="/ru/docs/">Firefox OS</a> приложений и устройств.</p> +<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="width: 800px; height: 464px;"></p> +<p>Monitor способен отображать существующие, интерактивные графики для визуализации временных рядов.</p> +<h2 id="Доступные_графики">Доступные графики</h2> +<p>Monitor поставляется с несколькими различными графиками. Они появляются сразу после того, как WebIDE подключается к Firefox OS.</p> +<h3 id="Обычный_пример">Обычный пример</h3> +<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="width: 879px; height: 310px;"></p> +<p>График показывает работу всех процессов Firefox OS в течение данного времени. Если вас интересует потребление памяти приложением в Firefox OS, запустите приложения, и процесс использования памяти отобразится на графике.</p> +<h2 id="Отображение_ваших_данных">Отображение ваших данных</h2> +<p>Отображать любые данные на Monitor очень легко, он принимает отформатированные обновления из разных источников.</p> +<h3 id="Устройства_Firefox_OS">Устройства Firefox OS</h3> +<p>Вы можете отправить данные с подключенного устройства, путем отправки уведомления наблюдателя.</p> +<p>Примечание: Если вы хотите сделать это в <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app">сертифицированном приложении</a> пожалуйста, следуйте <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">этой инструкции</a>.</p> +<h4 id="JavaScript">JavaScript</h4> +<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p> +<p>Вы можете отправить данные из любого кода JS с chrom привилегией. Пример измерения времени выполнения определенного кода JS:</p> +<p><code>const Services = require('Services');<br> + <br> + var start = Date.now();<br> + // code to benchmark<br> + var stop = Date.now();<br> + <br> + var data = { graph: 'Performance', myFeature: stop-start, time: stop }</code><code>;<br> + Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</code></p> +<h4 id="C">C++</h4> +<p><code>observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);</code></p> +<p>Вы можете отправить данные из любого места в Gecko. Пример измерения времени выполнения определенного кода:</p> +<p><code>#include <time.h><br> + #include "nsPrintfCString.h"<br> + #include "nsIObserverService.h"<br> + <br> + clock_t start = clock();<br> + // code to benchmark<br> + clock_t stop = clock();<br> + double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);<br> + <br> + nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();<br> + if (observerService) {<br> + nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);<br> + nsAutoString data = NS_ConvertUTF8toUTF16(str);<br> + observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());<br> + }</code></p> +<h3 id="С_вашего_компьютера">С вашего компьютера</h3> +<p> </p> +<p>Можно легко передавать данные на Monitor по серверу WebSockets. Это может быть полезно, если вы пишете расширение Firefox, инструмент командной строки или веб-service.</p> +<p>По умолчанию Monitor ищет сервер работающий на порту 9000 вашего компьютера. Вы можете изменить это путем обновления</p> +<p><code>devtools.webide.monitorWebSocketURL</code> preference.</p> +<p>Вы также можете в этот момент принимать данные из локальной сети или из любой точки мира через Интернет.</p> +<h4 id="Node.js">Node.js</h4> +<p><code>TODO</code></p> +<h4 id="Python">Python</h4> +<p><code>TODO</code></p> +<h3 id="Поддерживаемые_форматы">Поддерживаемые форматы</h3> +<p>Monitor принимает данные в виде объектов JSON, которые обычно выглядят следующим образом:</p> +<p><code>{</code><br> + <code> "graph": "myGraph",<br> + "curve": "myCurve",<br> + "value": 42,<br> + "time": 1234567890<br> + }</code></p> +<p>Этот формат предназначен для большего удобства. Если указано, что График или кривая не существует, он будет создан автоматически.</p> +<h4 id="Произвольные_имена">Произвольные имена</h4> +<p>Неопознанные записи будут рассматриваться как имя кривой и стоимости.</p> +<p>Для маленького пакета данных вы можете использовать что-то вроде:</p> +<p><code>{ "myCurve": 42 }</code></p> +<p>Это добавит данные указывающие на "myCurve" в графе no name. Отсутствует time по умолчанию, когда Monitor получил пакет.</p> +<p>Для повышения точности лучше всегда указывать метку времени "timestamp" для хранения данных:</p> +<p><code>{<br> + "current": 60,</code><br> + <code> "voltage": 500,<br> + <code>"time": 1234567890</code><br> + }</code></p> +<h4 id="Несколько_значений">Несколько значений</h4> +<p>В одном обновлении, вы можете отправить данные для нескольких кривых:</p> +<p><code>{<br> + "graph": "myGraph",<br> + "myCurve1": 50,<br> + "myCurve2": 300,<br> + "myCurve3": 9000,<br> + "time": 1234567890<br> + }</code></p> +<p>Или несколько точек данных для одной кривой:</p> +<p><code>{<br> + "graph": "myGraph",<br> + "curve": "myCurve",<br> + "values": [<br> + { "time": 1234567890, "value": 42 },<br> + { "time": 1234567981, "value": 51 }<br> + ]<br> + }</code></p> +<h4 id="Multiple_обновления">Multiple обновления</h4> +<p>И вы также можете отправить несколько обновлений данных в виде массива:</p> +<p><code>[<br> + { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },<br> + { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }<br> + ]</code></p> +<h4 id="Специальное_событие">Специальное событие</h4> +<p>Чтобы отметить специальное событие в графе с вертикальной чертой, добавьте ключ событий для обновления вашего:</p> +<p><code>{<br> + "graph": "myGraph",<br> + "event": "myEvent",<br> + "time": 1234567980<br> + }</code></p> diff --git a/files/ru/tools/webide/setting_up_runtimes/index.html b/files/ru/tools/webide/setting_up_runtimes/index.html new file mode 100644 index 0000000000..2fd78e6f57 --- /dev/null +++ b/files/ru/tools/webide/setting_up_runtimes/index.html @@ -0,0 +1,132 @@ +--- +title: Настройка времени выполнения +slug: Tools/WebIDE/Setting_up_runtimes +tags: + - Боковая панель + - Операционная Система + - Руководство + - Симуляторы +translation_of: Archive/WebIDE/Setting_up_runtimes +--- +<p>{{ToolsSidebar}}</p> + +<p>Время выполнения это среда где вы будете выполнять и отлаживать приложение, такое как веб браузер. Время выполнения может быть:</p> + +<ul> + <li>экземпляр Firefox, или настольная версия или экземпляр Firefox дляAndroid запускающаяся на телефоне</li> + <li>устройство запускающее Firefox OS, или Firefox OS Симулятор установленный на рабочем столе</li> + <li>различные браузерные движки, такие как Google Chrome или Safari, запускающиеся на рабочем столе или на мобильном устройстве.</li> +</ul> + +<p>В WebIDE, вы будете использовать боковую панель в правой стороне для управления временами выполнения:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12149/webide-right-sidebar.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;"></p> + +<p>В этой боковой панели времена выполнения сгрупирированны в четыре типа:</p> + +<dl> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_a_Firefox_OS_device">USB УСТРОЙСТВА</a></dt> + <dd>Устройства Firefox OS подключены через USB. С Firefox 36 это также позволяет вам подключиться к <a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Firefox for Android over USB</a>.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">WI-FI УСТРОЙСТВА</a></dt> + <dd>Устройства Firefox OS подключены через Wi-Fi. Новое в Firefox 39.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Adding_a_Simulator">СИМУЛЯТОРЫ</a></dt> + <dd>Экземпляры установленного вами симулятора Firefox OS.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Other_runtimes">ДРУГИЕ</a></dt> + <dd>Удаленные среды выполнения для подключения WebIDE к произвольному хосту и порту. Если у вас есть <a href="/en-US/docs/Tools/Valence">Valence</a> надстройка установлена, этот раздел также перечислит <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Valence-enabled_runtimes">additional runtimes it enables</a>.</dd> +</dl> + +<p>Остальная часть этого раздела описывает, как вы можете добавить некоторые среды выполнения.</p> + +<h2 id="Подключение_Firefox_OS_устройства">Подключение Firefox OS устройства</h2> + +<p>Если у вас достаточно свежая версия Firefox и Firefox OS, вы можете <a href="/en-US/docs/Tools/WebIDE/Setting_up_runtimes#Connecting_over_WiFi">подключиться по WI-FI</a>. В противном случае вы должны подключиться через USB.</p> + +<ul> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_USB">how to connect over USB</a></li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_OS_over_Wifi">how to connect over WiFi</a></li> +</ul> + +<h2 id="Подключение_к_Firefox_для_Android">Подключение к Firefox для Android</h2> + +<p>Устройства Android, подключенные через USB и работающие с Firefox для Android, отображаются как среда выполнения в разделе «Устройства USB». Начиная с Firefox 42, вы можете подключаться к Firefox для Android через Wi-Fi.</p> + +<ul> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Как подключиться по USB</a></li> + <li><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_over_Wifi">Как подключиться по WiFi</a></li> +</ul> + +<h2 id="Добавление_Симулятора">Добавление Симулятора</h2> + +<p><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a></p> + +<p>является версией более высоких уровней ОС Firefox, которая имитирует устройство с ОС Firefox, но работает на рабочем столе. Он работает в окне того же размера, что и устройство с ОС Firefox, включает в себя пользовательский интерфейс ОС Firefox и встроенные приложения, а также имитирует многие API-интерфейсы устройства с ОС Firefox.</p> + +<p>Это означает, что во многих случаях вам не нужно реальное устройство для тестирования и отладки вашего приложения.</p> + +<p>Симулятор поставляется не внутри Firefox, а как Firefox<a href="/en-US/Add-ons"> дополнение</a>.Если вы нажмете «Установить симулятор» на боковой панели «Runtime», вы перейдете на страницу, с которой вы можете установить симуляторы для различных версий Firefox OS.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12151/webide-extra-components.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">Вы можете установить сколько вам угодно. Однако будьте терпеливы: Симулятор может занять несколько минут для скачивания.</p> + +<p>Заметьте для того чтобы запустить Firefox OS Симулятор 2.6 или позднюю версию, вы должны использовать Firefox 45 или позднюю версию.</p> + +<p>Один раз установя некоторые Симуляторы вы можете закрыть это "Extra Components" окно, и Симуляторы которые вы установили появляются как опция в панели времён выполнения:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12153/webide-installed-simulators.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;"></p> + +<p>Для того чтобы узнать больше о Симуляторе, посмотрите его <a href="/en-US/docs/Tools/Firefox_OS_Simulator">документацию</a>.</p> + +<h3 id="Конфигурирование_Симуляторов">Конфигурирование Симуляторов</h3> + +<p>Новое в Firefox 42</p> + +<p>Начиная с Firefox 42, в боковой панели рядом с каждым перечисленным Симулятором вы увидите иконку настроек:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11321/webide-settings.png" style="display: block; height: 50px; margin-left: auto; margin-right: auto; width: 364px;"></p> + +<p>Кликните его, и вы увидите экран позволяющий вам управлять Симулятором:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12155/webide-simulator-options.png" style="display: block; height: 712px; margin-left: auto; margin-right: auto; width: 811px;">Вы можете:</p> + +<ul> + <li>назвать данную запись</li> + <li>указать ему выбранный <a href="/en-US/Firefox_OS/Building_the_Firefox_OS_simulator">Desktop B2G build</a></li> + <li>указать ему выбранный Gaia профиль</li> + <li>симулировать специфичное устройство и размер экрана</li> +</ul> + +<h2 id="Другие_времена_выполнения">Другие времена выполнения</h2> + +<h3 id="Удалённое_время_выполнения">Удалённое время выполнения</h3> + +<p>С помощью удаленной среды выполнения вы можете использовать произвольное имя хоста и порт для подключения к удаленному устройству.</p> + +<p>Устройства Firefox OS и Android подключаются к рабочему столу с помощью программы, называемой Android Debug Bridge, или <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. По умолчанию в WebIDE используется надстройка, которая называется ADB Helper: это упрощает процесс, устанавливая ADB и настраивая переадресацию портов, чтобы инструменты рабочего стола Firefox могли обмениваться сообщениями с устройством.</p> + +<p>В большинстве случаев это удобно, но иногда вам может понадобиться использовать ADB вне WebIDE: например, вы можете запускать ADB непосредственно из командной строки. В этом случае вы подключитесь к устройству, указав хост и порт, используя <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a> команду (пример: <code>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</code>).<br> +<br> +Если вы затем хотите использовать WebIDE для подключения, вам следует <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">разблокировать дополнения</a> и подключить WebIDE, используя опцию Custom runtime, указав хост и порт, которые вы передали в adb forward (пример: <code>localhost:6000</code>).</p> + +<p>Кроме того, до Firefox 36 помощник ADB еще не поддерживает подключение к Firefox для Android, поэтому, если вы хотите подключить WebIDE к Firefox для Android, вам нужно настроить собственную переадресацию портов и использовать пользовательскую среду выполнения. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">узнайте больше о подключении FireFox для Android c использованием </a>.</p> + +<h3 id="Valence-enabled_времена_выполнения">Valence-enabled времена выполнения</h3> + +<p>Если у вас установлено дополнение Valence, вы увидите три дополнительных среды выполнения:</p> + +<ul> + <li>Chrome на Android</li> + <li>Safari на iOS</li> + <li>Chrome Desktop</li> +</ul> + +<p>Инструкции по подключению к этим средам выполнения см. В соответствующей записи в <a href="/en-US/docs/Tools/Remote_Debugging">удаленной отладке</a>.</p> + +<h2 id="Выбор_времени_выполнения">Выбор времени выполнения</h2> + +<p>После настройки среды выполнения вы можете выбрать ее с помощью боковой панели «Runtime».</p> + +<ul> + <li>Если вы выбираете симулятор, WebIDE запускает симулятор.</li> + <li>При выборе устройства с ОС Firefox WebIDE подключается к устройству. На устройстве появится диалоговое окно с просьбой подтвердить, что вы хотите подключиться: нажмите «ОК».</li> +</ul> + +<p>Теперь кнопка «играть» в центре панели инструментов WebIDE включена: нажмите ее, чтобы <a href="/en-US/docs/Tools/WebIDE/Running_and_debugging_apps">установить и запустить приложение</a> в выбранной среде выполнения.</p> diff --git a/files/ru/tools/webide/troubleshooting/index.html b/files/ru/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..f4aed2ec9d --- /dev/null +++ b/files/ru/tools/webide/troubleshooting/index.html @@ -0,0 +1,155 @@ +--- +title: Решение проблем с WebIDE +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +<div>{{ToolsSidebar}}</div><h2 id="Connecting_a_Firefox_OS_device_over_USB" name="Connecting_a_Firefox_OS_device_over_USB">Подключение устройства на Firefox OS по USB</h2> + +<p>Если вы пытаетесь подключить устройство на Firefox OS к WebIDE и его не видно, вот некоторые вещи, которые вы можете попробовать:</p> + +<ul> + <li>Проверьте версию Вашей Firefox OS: Вы должны быть убедиться, что Ваше устройство работает под управлением<strong> Firefox OS 1.2/Boot2Gecko 1.2 или выше</strong>. Для того, чтобы это проверить, войдите в настройки приложений на устройстве, затем <code>Информация > Программное обеспечение</code>. Если ваша версия достаточно старая, найдите ваше устройство в <a href="https://developer.mozilla.org/ru/Firefox_OS/Phone_guide" lang="ru">руководстве разработчика</a> и следуйте инструкциям по обновлению.</li> + <li>Включите удалённую отладку: войдите в настройки приложений на устройстве, далее <code>Для разработчиков > Отладка через USB</code>. + <ul> + <li>В предыдущих версиях данная настройка включается в <code>Информация > Подробная информация > Меню разработчика</code></li> + <li>Firefox OS 1.3 и ниже: "Удалённая отладка" это просто обычный флажок (checkbox). Отметьте флажок.</li> + <li>Firefox OS 1.4 и выше: "Удалённая отладка" попросит вас включиться только для ADB или для ADB и DevTools. Выберите "ADB и DevTools".</li> + </ul> + </li> + <li>Отключите блокировку экрана на вашем устройстве: в настройках на устройстве, войдите в <code>Блокировка экрана </code>и уберите флажок с<code> Экран блокировки</code>. Это хорошая идея, потому что, когда экран гаснет, соединение с телефоном обрывается, что означает, устройство больше недоступно для отладки.</li> + <li>Убедитесь, что вы не подключились к Android устройству в то же время, когда Firefox OS устройство уже было подключено к вашему компьютеру.</li> + <li>Проверьте USB-кабель, который вы используете: + <ul> + <li>Попробуйте отключить и снова включить USB-кабель.</li> + <li>Попробуйте подключить USB-кабель в другой порт на вашем компьютере</li> + <li>Попробуйте подключить другой USB-кабель. Кабели, которые идут в комплекте с телефоном, часто бывают плохого качества.</li> + <li>Попробуйте использовать более короткий USB-кабель. Длинные кабели, как известно, не работают так хорошо.</li> + </ul> + </li> + <li>Попробуйте выключить и снова включить удалённую отладку в настройках приложений на устройстве.</li> + <li>Если <a href="/ru/docs/Tools/WebIDE#Custom_runtimes">у вас отключено дополнение ADB Helper</a>, вы успешно запустили команду <code>adb forward</code>?</li> + <li>Если вы используете Linux: + <ul> + <li>Убедитесь, что вы добавили файл правил <code>udev</code>, как описано в шаге 3 руководства <a href="http://developer.android.com/tools/device.html#setting-up">настройки Android устройства</a>. Аттрибут <code>idVendor</code> для Geeksphone равен "05c6", а <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">эта страница</a> содержит другие значения <code>idVendor</code>. Далее, запустите <code>adb devices</code>, что убедиться, что устройство присутствует в списке. Если устройство отображается "не разрешённым", вам нужно перезапустить adb сервер (например, <code>adb kill-server;adb start-server</code>).</li> + </ul> + </li> + <li>Если вы используете Windows: + <ul> + <li>Вам нужно установить драйвера, как описано в шаге 3 этого руководства <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">настройки Android устройства</a>. Вы можете найти драйвера для Geeksphone устройств на <a class="external external-icon" href="http://downloads.geeksphone.com/">сайте Geeksphone</a> и драйвера для устройств Google на <a href="http://developer.android.com/sdk/win-usb.htm">сайте Google</a>. Windows 8 по умолчанию не даёт вам устанавливать неподписанные драйвера. Смотрите это руководство <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Как установить неподписанный драйвер на Windows 8"</a>.</li> + <li>Если WebIDE не удаётся увидеть ваше устройство после следующих шагов, вам может понадобиться <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">отредактировать adb_usb.ini</a>.</li> + </ul> + </li> + <li>Если вы используете OS X: + <ul> + <li>Если вы получаете ошибки тайм-аута и с эмуляторами, и с реальными устройствами, то возможно вам не удаётся подключиться к localhost из-за пустого файла /etc/hosts. Вы можете решить проблему заполнением файла и очисткой кеша DNS, <a href="https://discussions.apple.com/thread/2729411?tstart=0">как описано тут</a>.</li> + <li>Если вы пользователь EasyTether, то вам понадобится удалить или отключить EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> + </ul> + </li> +</ul> + +<h2 id="Подключение_к_устройству_Firefox_OS_по_Wi-Fi">Подключение к устройству Firefox OS по Wi-Fi</h2> + +<ul> + <li>Проверьте вашу версию: отладка по Wi-Fi требует Firefox 39 или выше, и Firefox OS устройство, работающее на сборке Firefox OS 3.0 от 27-03-2015 или позже.</li> + <li>Компьютер с Firefox и Firefox OS устройство должны быть подключены к той же Wi-Fi сети + <ul> + <li>Точнее говоря, компьютер <strong>не может</strong> использовать проводное соединение, относящееся к тому же роутеру. Вместо этого, оба устройства должны быть подключены через Wi-Fi.</li> + </ul> + </li> +</ul> + +<h2 id="Подключение_к_Firefox_для_Android">Подключение к Firefox для Android</h2> + +<p>Если вы пытаетесь подключиться к Firefox, работающему на Android OS и устройство не отображается, то вот несколько вещей, которые вы можете попробовать:</p> + +<ul> + <li>Проверьте свою версию Firefox: убедитесь, что на вашем устройстве запущен<strong> Firefox 36 или выше</strong>. WebIDE не находит версии старее автоматически, так что вам понадобится включить проброску портов и подключиться к устройству - следуйте инструкциям <a class="external external-icon" href="/ru/docs/Tools/Remote_Debugging/Firefox_for_Android">здесь</a>.</li> + <li>Убедитесь, что вы включили удалённую отладку в Firefox: откройте Firefox для Android, откройте его меню, выберите <code>Параметры</code>, а затем отметьте галочку в <code>Дополнительно > Удалённая отладка через USB</code>.</li> + <li>Убедитесь, что USB отладка разрешена в опциях разработчика на устройстве.</li> + <li>Если вы всё ещё не видите своё устройство в окне WebIDE, попробуйте выключить и включить заново <code>удалённую отладку</code> на устройстве. + <ul> + <li>Отключите своё устройство от компьютера и выключите <code>удалённую отладку</code> на устройстве.</li> + <li>Заново подключите устройство и включите <code>удалённую отладку</code> - перезапустится отладчик на устройстве.</li> + <li>Попробуйте подключиться через WebIDE снова.</li> + </ul> + </li> + <li>Если вы используете Linux: + <ul> + <li>Убедитесь, что вы добавили файл правил <code>udev</code>, как описано в шаге 3 руководства <a href="http://developer.android.com/tools/device.html#setting-up">настройки Android устройства</a>. Список <a href="http://developer.android.com/tools/device.html#VendorIds">значений <code>idVendor</code></a> Android может помочь. Далее, запустите <code>adb devices</code>, что убедиться, что устройство присутствует в списке. Если устройство отображается "не разрешённым", вам нужно перезапустить adb сервер (например, <code>adb kill-server;adb start-server</code>).</li> + <li>Если вы используете <code>android-tools-adb</code> package из Debian, ADB Helper может вызывать закрытие сервера ADB. Этот пакет отключает TCP соединения с сервером, на который полагается ADB Helper.</li> + </ul> + </li> + <li>Если вы используете Windows: + <ul> + <li>Убедитесь, что ваше Android устройство разпознаётся корректно и использует Google USB Driver, который поставляется с Android SDK.</li> + </ul> + </li> + <li>Если вы используете Mac OS X: + <ul> + <li>Если вы пользователь EasyTether, вам понадобиться удалить или отключить EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> + </ul> + </li> +</ul> + +<h2 id="Подключение_Firefox_для_Android_по_Wi-Fi">Подключение Firefox для Android по Wi-Fi</h2> + +<ul> + <li>Проверьте ваши версии Firefox: отладка по Wi-Fi требует Firefox 42 или выше, и Firefox для Android 42 или выше.</li> + <li>Компьютер с Firefox и Android устройство должны быть подключены к той же Wi-Fi сети + <ul> + <li>Точнее говоря, компьютер <strong>не может</strong> использовать проводное соединение, относящееся к тому же роутеру. Вместо этого, оба устройства должны быть подключены через Wi-Fi.</li> + </ul> + </li> +</ul> + +<ul> +</ul> + +<h2 id="Подключение_к_другим_браузерам_(Chrome_Safari)">Подключение к другим браузерам (Chrome, Safari)</h2> + +<p>WebIDE использует <a href="/ru/docs/Tools/Valence">Valence (бывший Firefox Tools Adapter)</a> для подключения к другим браузерам, например, Chrome and Safari.</p> + +<p>При возникновении проблем с подключением к другим браузерам, проверьте настройки, а также примечания касаемо этих браузеров на <a href="/ru/docs/Tools/Valence">странице Valence</a>.</p> + +<h2 id="Не_удаётся_отладить_некоторые_приложения">Не удаётся отладить некоторые приложения</h2> + +<p>Если вы понимаете, что вам не удаётся отладить сертифицированные приложения, встроенные приложения или приложения уже установленные на реальном устройстве, то вы вероятно столкнулись с ограниченными привилегиями политики безопасности WebIDE. Чтобы узнать больше, посмотрите раздел <a href="/ru/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Unrestricted app debugging (including certified apps, main process, etc.)</a>.</p> + +<h2 id="Не_удаётся_загрузить_список_проектов">Не удаётся загрузить список проектов</h2> + +<p>Если открыть WebIDE в одной версии Firefox, а потом откатиться до предыдущей версии Firefox с тем же профилем, вы можете увидеть сообщение об ошибке "не удается загрузить список проектов" при открытии WebIDE в предыдущей версии Firefox.</p> + +<p>Это случается, когда система хранения данных, которую использует WebIDE (<a href="/ru/docs/Web/API/IndexedDB_API">IndexedDB</a>), требует переместить и реструктурировать внешние файлы для новой версии Firefox. Список проектов становится фактически недоступным для старых версий Firefox.</p> + +<p>Данные не теряются, но вам придётся продолжить использовать самую новую версию Firefox, с которой использовался ваш профиль, чтобы получить список проектов обратно.</p> + +<p>Если вы очень хотите использовать старую версию Firefox, вы можете попытаться удалить только список проектов следующим образом, но это не поддерживается и может привести к проблемам в дальнейшим или дополнительным потерям данных:</p> + +<ol> + <li>Закройте Firefox</li> + <li>Найдите вашу директорию профиля Firefox</li> + <li>Найдите папку <code>storage</code> внутри директории профиля</li> + <li>В некоторых местах этого древа файлов могут быть файлы и/или директории, которые начинаются с <code>4268914080AsptpcPerjo</code> (хэшированное имя базы данных)) + <ul> + <li> + <p>Например, они могут располагаться в <code><профиль>/storage/permanent/indexeddb+++fx-devtools/idb</code></p> + </li> + </ul> + </li> + <li>Удалите все подобные файлы и директории</li> + <li>Запустите Firefox и WebIDE снова</li> +</ol> + +<h2 id="Включить_ведение_журнала">Включить ведение журнала</h2> + +<p>Вы также можете включить подробное протоколирование для сбора диагностических данных:</p> + +<ol start="1" style="list-style-type: decimal;"> + <li>Откройте <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, и добавьте новый параметр, называемый <code>extensions.adbhelper@mozilla.org.sdk.console.logLevel</code> со значением <code>all</code> и установите <code>extensions.adbhelper@mozilla.org.debug</code> в <code>true</code>.</li> + <li>В <a class="external external-icon" href="https://support.mozilla.org/ru/kb/udalenie-dopolnenij">дополнениях</a>, отключите и заново включите дополнение ADB Helper.</li> + <li>Откройте <a href="https://developer.mozilla.org/ru/docs/Tools/Browser_Console">Веб-консоль</a> и вы увидите сообщения с префиксом <code>adb</code>. Если эти сообщения ничего для вас не значат, <a href="/ru/docs/Tools/WebIDE/Troubleshooting#Get_help">попросите помощи</a>.</li> +</ol> + +<h2 id="Получить_помощь">Получить помощь</h2> + +<p>Зайдите на <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">IRC-канал #devtools</a>, и мы постараемся вам помочь.</p> diff --git a/files/ru/tools/webide/запуск_webide/index.html b/files/ru/tools/webide/запуск_webide/index.html new file mode 100644 index 0000000000..929a74b817 --- /dev/null +++ b/files/ru/tools/webide/запуск_webide/index.html @@ -0,0 +1,29 @@ +--- +title: Запуск WebIDE +slug: Tools/WebIDE/Запуск_WebIDE +tags: + - Tools + - WebIDE +translation_of: Archive/WebIDE/Opening_WebIDE +--- +<div>{{ToolsSidebar}}</div><p>Есть три способа открытия WebIDE:</p> + +<ul> + <li>В меню <em>Инструменты > Веб-разработка</em>, нажмите пункт <em>WebIDE</em>.</li> + <li>Используйте комбинацию клавиш <em>Shift + F8</em>.</li> + <li>Click the dedicated icon in the Firefox toolbar. This is always present if you're using <a href="/ru/Firefox/Developer_Edition">Firefox Developer Edition</a>, and with any other Firefox from <a href="/ru/Firefox/Releases/36">version 36</a> onwards it appears after you've opened WebIDE once:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> + +<p>Нажмите на него и вы увидите как откроется WebIDE:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">Ниспадающий список слева с надписью <em>«Открыть Приложение» (Open App)</em> позволяет открывать существующие приложения или создавать новые. Ниспадающий список справа с надписью <em>«Выбрать Runtime» (Select Runtime)</em> позволяет выбрать среду исполнения или <a href="/ru/docs/Tools/WebIDE/Setting_up_runtimes">установить и настроить новую</a>.</p> + +<p>Кнопки посередине «запустить», «остановить» и «отладка» приложения активны только, когда уже открыто какое-то приложение и выбрана среда исполнения для него.</p> + +<p>You can change the font size throughout WebIDE using the standard keyboard shortcuts (use <code>Command</code> instead of <code>Control</code> on OS X):</p> + +<ul> + <li><code>Ctrl +</code> increases font size.</li> + <li><code>Ctrl -</code> decreases font size.</li> + <li><code>Ctrl 0</code> resets the font size to the default.</li> +</ul> diff --git a/files/ru/tools/working_with_iframes/index.html b/files/ru/tools/working_with_iframes/index.html new file mode 100644 index 0000000000..c1985d882a --- /dev/null +++ b/files/ru/tools/working_with_iframes/index.html @@ -0,0 +1,28 @@ +--- +title: Работа с фреймами +slug: Tools/Working_with_iframes +tags: + - фрейм +translation_of: Tools/Working_with_iframes +--- +<div>{{ToolsSidebar}}</div><div class="geckoVersionNote"> +<p><span class="short_text" id="result_box" lang="ru"><span>Эта</span> <span>особенность является новинкой</span> <span>в</span></span> Firefox 34.</p> +</div> + +<p>From Firefox 34 <span id="result_box" lang="ru"><span>и далее</span><span>,</span> <span>вы можете указать</span> <span>инструменты разработчика</span> <span>на</span> <span>конкретный</span></span> <a href="/en-US/docs/Web/HTML/Element/iframe"><code>iframe</code></a> <span class="short_text" id="result_box" lang="ru"><span>в пределах документа</span></span> .</p> + +<p>{{EmbedYouTube("Me9hjqd74m8")}}</p> + +<p><span id="result_box" lang="ru"><span>Эта функция</span> <span>отключена по умолчанию</span><span>:</span> <span>чтобы</span> <span>включить ее</span><span>, откройте</span></span> <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">developer tool settings</a> и выберите "Select an iframe as the currently targeted document":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8551/frame-selection-setting.png" style="display: block; margin-left: auto; margin-right: auto;"> <span class="short_text" id="result_box" lang="ru"><span>Вы не</span> <span>увидите новую</span> <span>кнопку на панели инструментов</span><span>:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8547/frame-selection-button.png" style="display: block; margin-left: auto; margin-right: auto;"> <span id="result_box" lang="ru"><span>Нажмите на него</span><span>,</span> <span>и вы увидите</span> <span>всплывающее окно</span> <span>со списком всех</span> <span>вложенных фреймов в</span> <span>документе</span><span>, а также</span> <span>самого</span> <span>главного документа</span><span>.</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8549/frame-selection-popup.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="note"> +<p><span id="result_box" lang="ru"><span>Обратите внимание, что</span> <span>на данный момент</span> <span>вам нужно</span> <span>обновить страницу или</span> <span>закрыть и снова открыть</span> <span>инструменты разработчика</span><span>, чтобы видеть</span> <span>всплывающее окно</span><span>.</span> <span>Это</span> <span>отслеживается</span><span>, как</span></span> <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1062233">bug 1062233</a>.</p> +</div> + +<p><span id="result_box" lang="ru"><span>При выборе</span> <span>записи в</span> <span>списке</span><span>,</span> <span>все инструменты</span> <span>на панели инструментов</span> </span> <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">Debugger</a> <span id="result_box" lang="ru"><span>и так далее -</span> <span>теперь</span> <span>нацелены</span> <span>только этот фрейм</span><span>,</span> <span>и</span> <span>по существу,</span> <span>ведут себя</span> <span>так, как будто</span> <span>остальная часть страницы</span> <span>не существует</span><span>.</span></span></p> diff --git a/files/ru/tools/инспектор_доступности/index.html b/files/ru/tools/инспектор_доступности/index.html new file mode 100644 index 0000000000..a375a027ae --- /dev/null +++ b/files/ru/tools/инспектор_доступности/index.html @@ -0,0 +1,166 @@ +--- +title: Инспектор доступности +slug: Tools/Инспектор_доступности +translation_of: Tools/Accessibility_inspector +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Инспектор доступности предоставляет средства для доступа к важной информации, предоставляемой вспомогательным технологиям на текущей странице, через дерево доступности, позволяя вам проверить, что отсутствует или иным образом требует внимания. В этой статье вы узнаете основные функции инспектора доступности и способы его использования.</p> + +<h2 id="Очень_краткое_руководство_по_доступности">Очень краткое руководство по доступности</h2> + +<p>Доступность - это средство, позволяющее использовать ваши сайты как можно большему числу людей. Это означает, что вы стараетесь изо всех сил не ограничивать кого-либо в доступе к информации из-за какой-либо имеющейся инвалидности, или любых других личных особенностей, таких как используемое устройство, скорости их сетевого подключения или их географического местоположения или языка.</p> + +<p>Здесь мы в основном говорим о том, чтобы донести информацию людям с нарушениями зрения - это делается с помощью <a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">API доступности</a>, доступных внутри веб-браузеров, которые раскрывают информацию о том, какие роли играют разные элементы на вашей странице (например, они являются текстом или кнопками, ссылками, элементами форм и т. д.?).</p> + +<p>Семантические элементы DOM имеют роли, назначенные им по умолчанию, которые имеют свое предназначение. Иногда приходится использовать некоторую не семантическую разметку (например, {{htmlelement ("div")}}) для создания сложного настраиваемого элемента управления, а элемент управления не будет иметь роль по умолчанию, которая отражает его назначение. В такой ситуации вы можете использовать атрибуты роли WAI-ARIA для обозначения своих собственных ролей.</p> + +<p>Роли и другая информация, предоставляемая API-интерфейсами браузера, представлена в иерархической структуре, называемой деревом доступности. Это немного похоже на дерево DOM, за исключением того, что оно содержит более ограниченный набор элементов и немного другую информацию о них.</p> + +<p>Вспомогательные технологии, такие как скринридеры, используют эту информацию, чтобы узнать, что находится на веб-странице и сообщают своим пользователям и это позволяет им взаимодействовать со страницей. Инспектор доступности также использует эту информацию для обеспечения возможностей для отладки доступности в DevTools.</p> + +<h2 id="Доступ_к_инспектору_доступности">Доступ к инспектору доступности</h2> + +<p>The accessibility inspector (available since Firefox 61) is not shown by default in the DevTools. To turn it on, you need to go to DevTools Settings (press <kbd>F1</kbd>, or go to the "three dots" menu and choose <em>Settings</em>) and check the <em>Accessibility</em> checkbox under the <em>Default Developer Tools</em> heading. This will cause the <em>Accessibility</em> tab to appear in the main DevTools display, which can be clicked on to display the accessibility panel:</p> + +<p><img alt="Accessibility tab in firefox devtools, turned off, with a button labeled Turn On Accessibility Features" src="https://mdn.mozillademos.org/files/16021/accessibility-inspector-panel-off.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;" title=""></p> + +<p>Initially the DevTools accessibility features are turned off (unless you've already got them turned on in another browser tab, or got the Firefox accessibility engine started already, e.g., you might be a screenreader user or tester). This is because the accessibility engine runs in the background when the accessibility features are turned on. While it’s running, it slows performance and takes up memory; therefore it interferes with the metrics from other panels such as <a href="/en-US/docs/Tools/Memory">Memory</a> and <a href="/en-US/docs/Tools/Performance">Performance</a> as well as overall browser performance. For this reason you should keep it turned off when you aren't specifically using it.</p> + +<p>You can turn the features on using the <em>Turn On Accessibility Features</em> button.</p> + +<p>Once the panel content loads, you can then turn it off again using the <em>Turn Off Accessibility Features</em> button available in the top-left corner, unless you have the accessibility engine running previously to operate a screenreader, in which case this button will be disabed.</p> + +<div class="note"> +<p><strong>Note</strong>: If are using the accessibility features in multiple tabs, turning them off in one tab turns them off in all tabs.</p> +</div> + +<h2 id="Особенности_панели_доступности">Особенности панели доступности</h2> + +<p>The enabled accessibility panel looks like so:</p> + +<p><img alt="Accessibility tab in firefox devtools, turned on, showing two information panels plus a button labeled Turn Off Accessibility Features" src="https://mdn.mozillademos.org/files/16022/accessibility-inspector-panel-on.png" style="border-style: solid; border-width: 1px; height: 654px; width: 1692px;" title=""></p> + +<p>On the left-hand side, there is a tree diagram representing all the items in the accessibility tree for the current page. Items with nested children have arrows that can be clicked to reveal the children, so you can move deeper into the hierarchy. Each item has two properties listed:</p> + +<ul> + <li><em>Role</em> — the role this item has on the page (e.g., <code>pushbutton</code>, or <code>footer</code>). This can be either a default role provided by the browser, or a role given to it via a WAI-ARIA <code>role</code> attribute.</li> + <li><em>Name</em> — the name this item has on the page. Where this comes from depends on the element; for example, the name of most text elements is simply their <code>textContent</code>, whereas form elements' names are the contents of their associated {{htmlelement("label")}}.</li> +</ul> + +<p>On the right-hand side, you can see further information about the currently selected item. The listed properties are as follows:</p> + +<ul> + <li><em>name</em> — the item's name, as described above.</li> + <li><em>role</em> — the item's role, as described above.</li> + <li><em>actions</em> — a list of the actions that can be performed on the item, for example a pushbutton would have "Press" listed, while a link would have "Jump" listed.</li> + <li><em>value</em> — the value of the item. This can mean different things depending on the type of item; for example, a form input (role: entry) would have a value of whatever is entered in the input, whereas a link's value would be the URL in the corresponding <code><a></code> element's <code>href</code>.</li> + <li><em>DOMNode</em> — the type of DOM node that the item in the accessibility tree represents. You can click on the "target" icon that comes after it to select the node in the <a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a>. Hovering over the "target" icon highlights the DOM node in the page content.<br> + <img alt="DOMNode property in accessibility inspector with target icon highlighted" src="https://mdn.mozillademos.org/files/16025/dom-node-target-icon.png" style="height: 55px; width: 294px;"></li> + <li><em>description</em> — any further description provided on the element, usually by the content of a title attribute.</li> + <li><em>help</em> — this is not implemented in Gecko, so it always returns an empty string. This will be removed from the inspector in Firefox 62 ({{bug(1467643)}}).</li> + <li><em>keyboardShortcut</em> — any keyboard shortcut that is available to activate the element, as specified in an <code>accessKey</code> attribute. Note that this works correctly as of Firefox 62 ({{bug("1467381")}}).</li> + <li><em>childCount</em> — the number of child items the current item has in the accessibility tree hierarchy.</li> + <li><em>indexInParent</em> — an index value indicating what number child the item is, inside its parent. If the item is the first item inside its parent, it has a value of 0. If it is the second, it has a value of 1. And so on.</li> + <li><em>states</em> — a list of the different accessibility-relevant states that can apply to the current item. For example, one of the links in one demo has states of focusable, linked, selectable text, opaque, enabled, and sensitive. For a full list of internal states, see <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/States">Gecko states</a>.</li> + <li><em>attributes</em> — a list of all the accessibility-relevant attributes that are applied to the item. This can include style-related attributes such as margin-left and text-indent, and other useful states for accessibility information, such as draggable and level (e.g., what heading level is it, in the case of headings). For a full list of possible attributes, see <a href="/en-US/docs/Web/Accessibility/AT-APIs/Gecko/Attrs">Gecko object attributes</a>.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: The exposed information is the same across all platforms — the inspector exposes Gecko's accessibility tree, rather than information from the platform accessibility layer.</p> +</div> + +<h3 id="Keyboard_controls">Keyboard controls</h3> + +<p>The <em>Accessibility</em> tab is fully keyboard-accessible:</p> + +<ul> + <li>You can tab between the <em>Turn Off Accessibility Features</em> button and left and right panels.</li> + <li>When one of the panels is focused, you can move the focus up and down items using the up and down arrow keys, and use the left and right arrow keys to expand and collapse expandable rows (e.g., different hierarchy levels of the accessibility tree).</li> +</ul> + +<h3 id="Вывод_дерева_доступности_в_JSON-формате">Вывод дерева доступности в JSON-формате</h3> + +<p>You can print the contents of the accessibility tree to json by right-clicking on an entry in the Accessibility tab and selecting <strong>Print to json:</strong></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16423/print_to_json.png" style="border: 1px solid black; display: block; height: 238px; margin: 0px auto; width: 800px;" title=""></p> + +<p>When you do, you will get a new tab with the selected accessibility tree loaded into the JSON viewer:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16424/accessibility_json.png" style="display: block; height: 586px; margin: 0px auto; width: 800px;"></p> + +<p>Once opened, you can save or copy the data as necessary. The JSON viewer can also show you the raw json data on a separate tab in the viewer.</p> + +<h2 id="Известные_связанные_особенности">Известные связанные особенности</h2> + +<p>When the accessibility features are turned on, there are a number of useful additional features available in the DevTools, which are detailed below:</p> + +<h3 id="Context_menu_options">Context menu options</h3> + +<p>An extra context menu option is added, both for the general context menu on the web page when right/<kbd>Ctrl</kbd> + clicking a UI feature, and the HTML pane of the page inspector when right/<kbd>Ctrl</kbd> + clicking a DOM element:</p> + +<p><img alt="context menu in the browser viewport, with a highlighted option: Inspect Accessibility Properties" src="https://mdn.mozillademos.org/files/16028/web-page-context-menu.png" style="border-style: solid; border-width: 1px; height: 798px; width: 1200px;" title=""></p> + +<p><img alt="context menu in the DOM inspector, with a highlighted option: Show Accessibility Properties" src="https://mdn.mozillademos.org/files/16020/dom-inspector-context-menu.png" style="border-style: solid; border-width: 1px; height: 803px; width: 1200px;"></p> + +<p>When you choose the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu options, the <em>Accessibility</em> tab is immediately opened to show the corresponding accessibility tree item and its properties.</p> + +<div class="note"> +<p><strong>Note</strong>: Some DOM elements do not have accessibility properties — in such a case, the <em>Inspect Accessibility Properties</em>/<em>Show Accessibility Properties</em> context menu item is grayed out.</p> +</div> + +<h3 id="Выделение_элементов_интерфейса">Выделение элементов интерфейса</h3> + +<p>In the Accessibility tab, when the mouse hovers over accessibility items, you can see a semi-transparent highlight appear over the UI items they relate to, if appropriate. The role and name of the item will be shown in a small information bar. This is useful for determining how the items in the accessibility tree relate to the UI items on the actual page.</p> + +<p>In the following example, you can see that the image has been highlighted and its role, graphic, and name, "Road, Asphalt, Sky, Clouds, Fall" appears in the information bar above it.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16173/role_name_pc.png" style="border: 1px solid black; display: block; height: 331px; margin: 0 auto; width: 424px;"></p> + +<h4 id="Цветовой_контраст">Цветовой контраст</h4> + +<p>Contrast ratio information is particularly useful when you are designing the color palette for your website because if the contrast is not sufficient, readers with visual impairments such as color blindness will be unable to read the text. The Web Content Accessibility Guidelines (WCAG) 2.0 defines 4.5:1 as the minimum suggested contrast ratio between the foreground and background colors for smaller text on a web page. For example:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16305/text_contrast_2.png" style="display: block; height: 67px; margin: 0px auto; width: 259px;"></p> + +<p>The color contrast in the image above is 2.77, potentially not enough contrast to make it easy to read. Notice the warning symbol that indicates that the contrast fails to meet the acceptable contrast ratio. Compare that to the following:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16304/text_contrast_1.png" style="display: block; height: 64px; margin: 0 auto; width: 336px;"></p> + +<p>In this example, the contrast is 12.63. This time the number is followed by AAA and a checkmark in green, indicating that the text has a contrast ratio of 7:1 or more, meaning it meets the criteria for enhanced contrast, or Level AAA.</p> + +<h3 id="Accessibility_picker">Accessibility picker</h3> + +<p>In a similar way to the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">Page Inspector HTML pane picker</a>, when the <em>Accessibility</em> tab's picker button is pressed you can then hover and select UI items in the current page, and the corresponding accessible object is highlighted in the accessibility tree.</p> + +<p>The accessibility tab picker differs in look slightly from the Page Inspector HTML pane picker, as shown below:</p> + +<p><img alt="highlighted dom inspector picker button, with a tooltip saying Pick an element from the page" src="https://mdn.mozillademos.org/files/16024/dom-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1716px;"></p> + +<p><img alt="highlighted accessibility inspector button, with a tooltip saying Pick accessible object from the page" src="https://mdn.mozillademos.org/files/16023/accessibility-inspector-picker.png" style="border-style: solid; border-width: 1px; height: 677px; width: 1717px;" title=""></p> + +<p>When you "perform a pick", you see the accessibility object highlighted in the accessibility tree, and the picker is then deactivated. Note, however, that if you hold the <kbd>Shift</kbd> key down when "performing a pick", you can "preview" the accessibility object in the tree (and its properties in the right-hand pane), but then continue picking as many times as you like (the picker does not get cancelled) until you release the <kbd>Shift</kbd> key.</p> + +<p>When the picker is activated, you can also deactivate it by pressing the picker button a second time, or pressing the <kbd>Esc</kbd> key.</p> + +<h2 id="Типичное_использование">Типичное использование</h2> + +<p>The accessibility inspector is very useful for spotting accessibility problems at a glance. For a start, you can investigate items that don't have a proper text equivalent — images without <code>alt</code> text and form elements without proper labels have a <code>name</code> property of <code>null</code>, for example.</p> + +<p><img alt="A form input highlighted in the UI, with information about it shown in the accessibility inspector to reveal that it has no label — it has a name property of null" src="https://mdn.mozillademos.org/files/16027/use-case-no-label.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p> + +<p>It is also very handy for verifying semantics — you can use the <em>Inspect Accessibility Properties</em> context menu option to quickly see whether an item has the correct role set on it (e.g., whether a button is really a button, or whether a link is really a link).</p> + +<p><img alt="A UI element that looks like a button, with information about it shown in the accessibility inspector to reveal that it isn't a button, it is a section element. It has a name property of null" src="https://mdn.mozillademos.org/files/16026/use-case-fake-button.png" style="border-style: solid; border-width: 1px; height: 1180px; width: 1182px;"></p> + +<h2 id="Смотри_также">Смотри также</h2> + +<ul> + <li><a href="/en-US/docs/Learn/Accessibility">Accessibility fundamentals</a></li> + <li><a href="/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Accessibility">Practical debugging information</a></li> + <li><a href="/en-US/docs/Web/Accessibility/Understanding_WCAG">Understanding WCAG</a></li> + <li><a href="/en-US/docs/Learn/Accessibility/WAI-ARIA_basics">WAI-ARIA basics</a></li> + <li><a href="https://www.smashingmagazine.com/2015/03/web-accessibility-with-accessibility-api/">Accessibility APIs: A Key To Web Accessibility</a> by Léonie Watson</li> +</ul> + +<div class="TnITTtw-translate-selection-button" style="top: 1199.5px; left: 280.25px;"> </div> diff --git a/files/ru/tools/консоль_браузера/index.html b/files/ru/tools/консоль_браузера/index.html new file mode 100644 index 0000000000..487bc2eb5e --- /dev/null +++ b/files/ru/tools/консоль_браузера/index.html @@ -0,0 +1,180 @@ +--- +title: Консоль браузера +slug: Tools/Консоль_браузера +tags: + - Tools + - Web Development + - Браузер + - Отладка + - 'веб-разработка:инструменты' + - консоль +translation_of: Tools/Browser_Console +--- +<div>{{ToolsSidebar}}</div><p>Консоль браузера — как <a href="/ru/docs/Tools/Web_Console" title="/ru/docs/Tools/Web_Console">Веб-консоль</a>, но для работы со всем браузером, а не с отдельной его вкладкой.</p> + +<p>То есть, она протоколирует такую же информацию, что и Веб-консоль: сетевые запросы, ошибки и предупреждения JavaScript и CSS, ошибки и предупреждения о безопасности, и информационные сообщения, выдаваемые непосредственно кодом JavaScript. Однако она протоколирует эту информацию не только для одной вкладки с контентом, но для всех вкладок с контентом, для дополнений, и для кода самого браузера.</p> + +<p>Если вы хотите использовать и другие инструменты, доступные в обычном <a href="/ru/docs/Tools/Tools_Toolbox">наборе инструментов веб-разработки</a>, с кодом дополнений или браузера, вам может пригодиться <a href="/ru/docs/Tools/Browser_Toolbox">Панель инструментов браузера</a>.</p> + +<p>В Консоли браузера можно также выполнять и выражения JavaScript. But while the Web Console executes code in the page window scope, the Browser Console executes them in the scope of the browser's chrome window. This means you can interact with all the browser's tabs using the <a href="/ru/docs/Code_snippets/Tabbed_browser" title="/ru/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> global, and even with the XUL used to specify the browser's user interface.</p> + +<div class="geckoVersionNote"> +<p>Внимание: начиная с Firefox 30, командная строка Консоли браузера (куда вставляются выражения JavaScript) по умолчанию выключена. Чтобы её включить, присвойте настройке about:config <code>devtools.chrome.enabled</code> значение <code>true</code>, либо поставьте галочку «Включить инструменты отладки browser chrome и дополнений» (начиная с Firefox 40) / «Включить отладку chrome и дополнений» (по Firefox 38.0.5 включительно) в <a href="/ru/docs/Tools_Toolbox#Advanced_settings">настройках панели инструментов разработчика</a>.</p> +</div> + +<h2 id="Открытие_Консоли_браузера">Открытие Консоли браузера</h2> + +<p>Консоль браузера можно открыть двумя способами:</p> + +<ol> + <li>из меню: выбрать «Консоль браузера» из меню Разработка в меню Firefox (или меню Инструменты, если оно включено или на OS X)</li> + <li>с клавиатуры: нажать Ctrl+Shift+J (или Cmd+Shift+J на Mac).</li> +</ol> + +<p>Note that until Firefox 38, if the Browser Console has become hidden by a normal Firefox window and you select it again, either from the menu or from the keyboard, then it will be closed. From Firefox 38 onwards, this instead has the effect of switching the focus back to the Browser Console, which is more likely to be what you wanted.</p> + +<p>You can also start the Browser Console by launching Firefox from the command line and passing the <code>-jsconsole</code> argument:</p> + +<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre> + +<p>The Browser Console looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>You can see that the Browser Console looks and behaves very much like the <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a>:</p> + +<ul> + <li>most of the window is occupied by a <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">pane that display messages</a></li> + <li>at the top, a <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">toolbar</a> enables you to filter the messages that appear</li> + <li>at the bottom, a <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">command line interpreter</a> enables you to evaluate JavaScript expressions.</li> +</ul> + +<h2 id="Browser_Console_logging">Browser Console logging</h2> + +<p>The Browser console logs the same sorts of messages as the Web Console:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">HTTP requests</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Warnings and errors</a> (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API)</li> + <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Input/output messages</a>: commands send to the browser via the command line, and the result of executing them.</li> +</ul> + +<p>However, it displays such messages from:</p> + +<ul> + <li>web content hosted by all browser tabs</li> + <li>the browser's own code</li> + <li>add-ons.</li> +</ul> + +<h3 id="Messages_from_add-ons">Messages from add-ons</h3> + +<p>The Browser Console displays messages logged by all Firefox add-ons.</p> + +<h4 id="Console.jsm">Console.jsm</h4> + +<p>To use the console API from a traditional or bootstrapped add-on, get it from the Console module.</p> + +<p>One exported symbol from Console.jsm is "console". Below is an example of how to acess it, which adds a message to the Browser Console.</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/devtools/Console.jsm"); +console.log("Hello from Firefox code"); //output messages to the console</pre> + +<p>Learn more:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/console">console API reference</a></li> + <li><a href="http://mxr.mozilla.org/mozilla-release/source/toolkit/devtools/Console.jsm">Console.jsm source code in the <span style="line-height: 1.5;">Mozilla Cross-Reference</span></a></li> +</ul> + +<h4 id="HUDService">HUDService</h4> + +<p>There is also the HUDService which allows access to the Browse Console. The module is available at <a href="http://mxr.mozilla.org/mozilla-release/source/browser/devtools/webconsole/hudservice.js">Mozilla Cross-Reference</a>. We see we can not only access the Browser Console but also Web Console.</p> + +<p>Here is an example on how to clear the contents of the Browser console:</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/devtools/Loader.jsm"); +var HUDService = devtools.require("devtools/webconsole/hudservice"); + +var hud = HUDService.getBrowserConsole(); +hud.jsterm.clearOutput(true);</pre> + +<p>If you would like to access the content document of the Browser Console this can be done with the HUDService. This example here makes it so that when you mouse over the "Clear" button it will clear the Browser Console:</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/devtools/Loader.jsm"); +var HUDService = devtools.require("devtools/webconsole/hudservice"); + +var hud = HUDService.getBrowserConsole(); + +var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button'); +clearBtn.addEventListener('mouseover', function() { + hud.jsterm.clearOutput(true); +}, false);</pre> + +<h4 id="Bonus_Features_Available">Bonus Features Available</h4> + +<p>For <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Add-on SDK</a> add-ons, the console API is available automatically. Here's an example add-on that just logs an error when the user clicks a widget:</p> + +<pre class="brush: js">widget = require("sdk/widget").Widget({ + id: "an-error-happened", + label: "Error!", + width: 40, + content: "Error!", + onClick: logError +}); + +function logError() { + console.error("something went wrong!"); +}</pre> + +<p>If you <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">build this as an XPI file</a>, then open the Browser Console, then open the XPI file in Firefox and install it, you'll see a widget labeled "Error!" in the Add-on bar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Click the icon. You'll see output like this in the Browser Console:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>For Add-on SDK-based add-ons only, the message is prefixed with the name of the add-on ("log-error"), making it easy to find all messages from this add-on using the <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filter output"</a> search box. By default, only error messages are logged to the console, although <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">you can change this in the browser's preferences</a>.</p> + +<h2 id="Browser_Console_command_line">Browser Console command line</h2> + +<div class="geckoVersionNote"> +<p>From Firefox 30, the Browser Console command line is disabled by default. To enable it set the <code>devtools.chrome.enabled</code> preference to <code>true</code> in about:config, or set the "Enable chrome debugging" option in the <a href="/en-US/docs/Tools_Toolbox#Advanced_settings">developer tool settings</a>.</p> +</div> + +<p>Like the Web Console, the command line interpreter enables you to evaluate JavaScript expressions in real time:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Also like the Web Console's command line interpreter, this command line supports <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocomplete</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">history</a>, and various <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">keyboard shortcuts </a>and <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">helper commands</a>. If the result of a command is an object, you can <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click on the object to see its details</a>.</p> + +<p>But while the Web Console executes code in the scope of the content window it's attached to, the browser console executes code in the scope of the chrome window of the browser. You can confirm this by evaluating <code>window</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>This means you can control the browser: opening, closing tabs and windows and changing the content that they host, and modify the browser's UI by creating, changing and removing XUL elements.</p> + +<h3 id="Controlling_the_browser">Controlling the browser</h3> + +<p>The command line interpreter gets access to the <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a> object, through the <code>gBrowser</code> global, and that enables you to control the browser through the command line. Try running this code in the Browser Console's command line (remember that to send multiple lines to the Browser Console, use Shift+Enter):</p> + +<pre class="brush: js">var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab); +newTabBrowser.addEventListener("load", function() { + newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>"; +}, true); +newTabBrowser.contentDocument.location.href = "https://mozilla.org/";</pre> + +<p>It adds a listener to the currently selected tab's <code>load</code> event that will eat the new page, then loads a new page.</p> + +<h3 id="Modifying_the_browser_UI">Modifying the browser UI</h3> + +<p>Since the global <code>window</code> object is the browser's chrome window, you can also modify the browser's user interface. On Windows, the following code will add a new item to the browser's main menu:</p> + +<pre class="brush: js">var parent = window.document.getElementById("appmenuPrimaryPane"); +var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); +makeTheTea.setAttribute("label", "A nice cup of tea?"); +parent.appendChild(makeTheTea);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">On OS X, this similar code will add a new item to the "Tools" menu:</p> + +<pre class="brush: js">var parent = window.document.getElementById("menu_ToolsPopup"); +var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem"); +makeTheTea.setAttribute("label", "A nice cup of tea?"); +parent.appendChild(makeTheTea);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p> diff --git a/files/ru/tools/линейки/index.html b/files/ru/tools/линейки/index.html new file mode 100644 index 0000000000..c8d17fffac --- /dev/null +++ b/files/ru/tools/линейки/index.html @@ -0,0 +1,24 @@ +--- +title: Линейки +slug: Tools/Линейки +translation_of: Tools/Rulers +--- +<div>{{ToolsSidebar}}</div><p class="geckoVersionNote">Новое в Firefox 40.</p> + +<p>Начиная с Firefox 40, можно отобразить горизонтальную и вертикальную линейки на странице:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11181/rulers.png" style="display: block; height: 555px; margin-left: auto; margin-right: auto; width: 700px;">Единица измерения - пиксели (точки, px).</p> + +<p>Есть два способа включить линейки:</p> + +<ul> + <li>используя команду <code>rulers</code> (линейки) в Developer Toolbar's (shift+f2)</li> + <li>использовать специально назначенную кнопку на тулбаре. По умолчанию эта кнопка не отображается, чтобы она стала видна нужно отметить галочку в разделе "Available Toolbox Buttons" ("Доступные кнопки инструментов") в <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">Настройках</a>.</li> +</ul> + +<p>Нужно помнить при пользованиями линейками:</p> + +<ul> + <li>Команда включения линеек должна быть вызвана снова на <strong>новой вкладке </strong>и после <strong>каждого обновления страницы.</strong></li> + <li>Команда не является постоянно активной.</li> +</ul> diff --git a/files/ru/tools/производительность/index.html b/files/ru/tools/производительность/index.html new file mode 100644 index 0000000000..ba11369101 --- /dev/null +++ b/files/ru/tools/производительность/index.html @@ -0,0 +1,95 @@ +--- +title: Производительность +slug: Tools/Производительность +translation_of: Tools/Performance +--- +<div>{{ToolsSidebar}}</div><p>Инструмент даёт Вам понять общую отзывчивость вашего сайта, JavaScript и общее представление о разметке. С помощью инструмента производительности Вы создадите запись или профиль своего сайта за определенный промежуток времени. Затем, инструмент покажет Вам действия браузера и график смены частоты кадров, поверх профиля, рендера Вашего сайта.</p> + +<p>Вы получите четыре набора инструментов для более подробного изучения аспектов профиля:</p> + +<ul> + <li> <a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> (Водопад) показывает различные операции браузера, например, выполняет макет, JavaScript, перерисовывает и собирает мусор</li> + <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> (Дерево вызова) показывает функции JavaScript, в которых браузер провел большую часть своего времени</li> + <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> (Пламенный График) показывает стек вызовов JavaScript над конечной записью.</li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">Allocations</a>. В этом представлении отображаются распределения кучи, сделанные вашим кодом в ходе записи. Это представление появляется только в том случае, если вы отметили «Записать выделение» в настройках инструмента «Производительность».</li> +</ul> + +<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> + +<hr> +<h2 id="Приступая_к_работе">Приступая к работе</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour (Пользовательский интерфейс)</a></dt> + <dd> + <p>Чтобы найти свой вариант производительности инструмента, вот краткий обзор пользовательского интерфейса UI.</p> + </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/How_to">How to (Как)</a></dt> + <dd>Основные задачи: откройте инструмент создать, сохранить, загрузить и настроить записи.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Компоненты_инструмента_производительности">Компоненты инструмента производительности</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Frame_rate" dir="ltr">Frame rate (Частота кадров)</a></dt> + <dd>Исследование Вашего сайта на отзывчивость.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree (Дерево вызовов)</a></dt> + <dd>Поиск узких мест Вашего сайта на JavaScript.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall (Водопад)</a></dt> + <dd>Исследует работу браузера на взаимодействие пользователей с Вашим сайтом.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart (Диаграмма)</a></dt> + <dd>Обзор выполнения функций JavaScript во времени.</dd> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Performance/Allocations">Allocations (Распределение)</a></dt> + <dd>Просмотр распределений сделанных вашим кодом во время записи.</dd> + <dt> </dt> + <dd> </dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Сценарии">Сценарии</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties (Свойства анимации CSS)</a></dt> + <dd>Использует водопад чтобы понять как браузер обновляет страницу, и как меняя разные свойства CSS можно улучшить производительность.</dd> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript (Интенсивный JS)</a></dt> + <dd>Использует частоту кадров и инструменты водопада для выделения проблем с производительностью, вызванные длительной загрузкой JavaScript и каким образом с помощью инструментов разработчика возможно исправить ситуацию.</dd> +</dl> +</div> +</div> + +<p> </p> + +<div class="column-half"> +<dl> + <dd> </dd> +</dl> +</div> + +<p> </p> diff --git a/files/ru/tools/производительность/waterfall/index.html b/files/ru/tools/производительность/waterfall/index.html new file mode 100644 index 0000000000..1531a44a10 --- /dev/null +++ b/files/ru/tools/производительность/waterfall/index.html @@ -0,0 +1,386 @@ +--- +title: Waterfall +slug: Tools/Производительность/Waterfall +translation_of: Tools/Performance/Waterfall +--- +<div>{{ToolsSidebar}}</div><div class="summary"> +<p>Водопад (Waterfall) дает вам представление о различных процессах, которые происходят внутри браузера, когда вы открывайте ваш сайт или запускаете ваше приложение. Он основан на идее разделения всех происходящих внутри браузера процессов на различные типы - запуск JavaScript, обновление layout и так далее - и что в любой момент времени браузрер выполняет один из этих процессов.</p> + +<p>Поэтому если вы увидите признаки проблем с производительностью - например, падения частоты кадров - вы можете запустить Waterfall, чтобы увидеть, что делает браузер в этот момент.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10951/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Ось X это ось времени. Записанные операции и вызванные маркеры отображаются в виде горизонтальных прямоуголников, расположенных в виде водопада, чтобы подчеркнуть последовательность выполнения внутри браузера.</p> + +<p>При выборе маркера вы увидите подробную информацию о нем на панели справа. В этой панели вы сможете узнать продолжительность и другую специфичную для <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">конктреного типа</a> процесса инофрмацию .</p> + +<h2 id="Markers"><a id="timeline-color-coding" name="timeline-color-coding"></a>Markers</h2> + +<p>The markers for operations are color-coded and labeled. The following operations are recorded:</p> + +<table class="fullwidth-table standard-table"> + <thead> + <tr> + <th scope="col" style="width: 20%;">Name and description</th> + <th scope="col">Color</th> + <th scope="col">Detailed information</th> + </tr> + </thead> + <tbody> + <tr> + <td style="width: 40%;"> + <p><a id="DOM_Event_Marker" name="DOM_Event_Marker"><strong>DOM Event</strong></a></p> + + <p>JavaScript code that's executed in response to a DOM event.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td style="width: 45%;"> + <dl> + <dt>Event Type</dt> + <dd>For example, "click" or "message".</dd> + </dl> + + <dl> + <dt>Event Phase</dt> + <dd>For example, "Target" or "Capture".</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p>JavaScript functions executed in the page are labeled with the reason the function was called:</p> + + <p><strong>Script Tag<br> + setInterval<br> + setTimeout<br> + requestAnimationFrame<br> + Promise Callback<br> + Promise Init<br> + Worker<br> + JavaScript URI<br> + Event Handler</strong></p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Stack</dt> + <dd>Call stack, with links to functions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Parse HTML</strong></p> + + <p>Time spent parsing the page's HTML.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Stack</dt> + <dd>Call stack, with links to functions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Parse XML</strong></p> + + <p>Time spent parsing the page's XML.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10703/orange.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Stack</dt> + <dd>Call stack, with links to functions.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Recalculate Style</strong></p> + + <p>Calculating the computed styles that apply to page elements.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Restyle Hint</dt> + <dd>A string indicating what kind of restyling is needed. The hint may be any of:<br> + Self<br> + Subtree<br> + LaterSiblings<br> + CSSTransitions<br> + CSSAnimations<br> + SVGAttrAnimations<br> + StyleAttribute<br> + StyleAttribute_Animations<br> + Force<br> + ForceDescendants</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Layout</strong></p> + + <p>Calculating the position and size of page elements. This operation is sometimes called "reflow".</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10707/purple.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>Paint</strong></p> + + <p>Drawing pixels to the screen.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10705/green.png" style="height: 21px; width: 60px;"></td> + <td> </td> + </tr> + <tr> + <td> + <p><strong>GC Event</strong></p> + + <p><a href="/en-US/docs/Tools/Performance/Waterfall#Garbage_collection">Garbage collection event</a>. Non-incremental GC events are labeled "(Non-incremental)".</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10709/red.png" style="height: 21px; width: 60px;"></td> + <td> + <dl> + <dt>Reason</dt> + <dd>A string the indicating the reason GC was performed.</dd> + <dt>Non-incremental Reason</dt> + <dd>If the GC event was non-incremental, a string the indicating the reason non-incremental GC was performed.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Console</strong></p> + + <p>The period between matching calls to <code>console.time()</code> and <code>console.timeEnd()</code>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10955/gray.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>Timer name</dt> + <dd>The argument passed to the <code>console</code> functions.</dd> + <dt>Stack at start</dt> + <dd>Call stack <code>console.time()</code>, with links to functions.</dd> + <dt>Stack at End</dt> + <dd>(New in Firefox 41). Call stack at <code>console.timeEnd()</code>. If this is inside a callback from a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, this will also show the <a href="/en-US/docs/Tools/Performance/Waterfall#Async_stack">"Async stack"</a>.</dd> + </dl> + </td> + </tr> + <tr> + <td> + <p><strong>Timestamp</strong></p> + + <p>A single call to <code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>.</p> + </td> + <td><img alt="" src="https://mdn.mozillademos.org/files/10953/blue.png" style="height: 54px; width: 60px;"></td> + <td> + <dl> + <dt>Label</dt> + <dd>The argument passed to <code>timeStamp()</code>.</dd> + </dl> + </td> + </tr> + </tbody> +</table> + +<p>The markers, and their colors, are the same in the Waterfall tool as in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">Waterfall overview</a>, making is easy to correlate from one to the other.</p> + +<h3 id="Filtering_markers">Filtering markers</h3> + +<p>You can control which markers are displayed using a button in the <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">Toolbar</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10975/toolbar-filter.png" style="display: block; height: 72px; margin-left: auto; margin-right: auto; width: 1000px;"></p> + +<h2 id="Waterfall_patterns">Waterfall patterns</h2> + +<p>Exactly what you'll see in the Waterfall is very dependent on the kind of thing your site is doing: JavaScript-heavy sites will have a lot of orange, while visually dynamic sites will have a lot of purple and green. But there are common patterns which can alert you to possible performance problems.</p> + +<h3 id="Rendering_waterfall">Rendering waterfall</h3> + +<p>One pattern that you'll often see in the Waterfall view is something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10711/perf-timeline-waterfall.png" style="display: block; height: 286px; margin-left: auto; margin-right: auto; width: 727px;"></p> + +<p>This is a visualization of the basic algorithm the browser uses to update the page in response to some event:</p> + +<ol> + <li><strong>JavaScript Function Call</strong>: some event - for example, a DOM event - causes some JavaScript in the page to run. The JavaScript changes some of the page's DOM or CSSOM.</li> + <li><strong>Recalculate Style</strong>: if the browser thinks the computed styles for page elements have changed, it must then recalculate them.</li> + <li><strong>Layout</strong>: next, the browser uses the computed styles to figure out the position and geometry for the elements. This operation is labeled "layout" but is also sometimes called "reflow".</li> + <li><strong>Paint</strong>: finally, the browser needs to repaint the elements to the screen. One last step is not shown in this sequence: the page may be split into layers, which are painted independently and then combined in a process called "Composition".</li> +</ol> + +<p>This sequence needs to fit into a single frame, since the screen isn't updated until it is complete. It's commonly accepted that 60 frames per second is the rate at which animations will appear smooth. For a rate of 60 frames per second, that gives the browser 16.7 milliseconds to execute the complete flow.</p> + +<p>Importantly for responsiveness, the browser doesn't always have to go through every step:</p> + +<ul> + <li><a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">CSS animations</a> update the page without having to run any JavaScript.</li> + <li>Not all CSS property changes cause a reflow. Changing properties that can alter an object's geometry and position, such as <code><a href="/en-US/docs/Web/CSS/width">width</a></code>, <code><a href="/en-US/docs/Web/CSS/display">display</a></code>, <code><a href="/en-US/docs/Web/CSS/font-size">font-size</a></code>, or <code><a href="/en-US/docs/Web/CSS/top">top</a></code>, will cause a reflow. However, changing properties that don't alter geometry or position, such as <code><a href="/en-US/docs/Web/CSS/color">color</a></code> or <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code>, will not.</li> + <li>Not all CSS property changes cause a repaint. In particular, if you animate an element using the <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> property, the browser will use a separate layer for the transformed element, and doesn't even have to repaint when the element is moved: the new position of the element is handled in composition.</li> +</ul> + +<p>The <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a> article shows how animating different CSS properties can give different performance outcomes, and how the Waterfall can help signal that.</p> + +<h3 id="Blocking_JavaScript">Blocking JavaScript</h3> + +<p>By default, a site's JavaScript is executed in the same thread that the browser uses for layout updates, repaints, DOM events, and so on. This means that long-running JavaScript functions can cause unresponsiveness (jank): animations may not be smooth, or the site might even freeze.</p> + +<p>Using the frame rate tool and the Waterfall together, it's easy to see when long-running JavaScript is causing responsiveness problems. In the screenshot below, we've zoomed in on a JS function that's caused a drop in the frame rate:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10973/perf-js-blocking-waterfall.png" style="display: block; height: 432px; margin-left: auto; margin-right: auto; width: 1128px;"></p> + +<p>The <a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a> article shows how the Waterfall can highlight responsiveness problems caused by long JavaScript functions, and how you can use asynchronous methods to keep the main thread responsive.</p> + +<h3 id="Expensive_paints">Expensive paints</h3> + +<p>Some paint effects, such as <code><a href="/en-US/docs/Web/CSS/box-shadow">box-shadow</a></code>, can be expensive, especially if you are applying them in a transition where the browser has to calculate them in every frame. If you're seeing drops in the frame rate, especially during graphically-intensive operations and transitions, check the Waterfall for long green markers.</p> + +<h3 id="Garbage_collection">Garbage collection</h3> + +<p>Red markers in the Waterfall represent garbage collection (GC) events, in which <a href="/en-US/docs/Mozilla/Projects/SpiderMonkey">SpiderMonkey</a> (the JavaScript engine in Firefox) walks the heap looking for memory that's no longer reachable and subsequently releasing it. GC is relevant to performance because while it's running the JavaScript engine must be paused, so your program is suspended and will be completely unresponsive.</p> + +<p>To help reduce the length of pauses, SpiderMonkey implements <em>incremental GC</em>: this means that it can perform garbage collection in fairly small increments, letting the program run in between. Sometimes, though, it needs to perform a full non-incremental collection, and the program has to wait for it to finish.</p> + +<p>When the Waterfall records a GC marker it indicates:</p> + +<ul> + <li>whether the GC was incremental or not</li> + <li>the reason the GC was performed</li> + <li>if the GC was non-incremental, the reason it was non-incremental</li> +</ul> + +<p>In trying to avoid GC events, and especially non-incremental GC events, it's wise not to try to optimize for the specific implementation of the JavaScript engine. SpiderMonkey uses a complex set of heuristics to determine when GC is needed, and when non-incremental GC in particular is needed. In general, though:</p> + +<ul> + <li>GC is needed when a lot of memory is being allocated</li> + <li>non-incremental GC is usually needed when the memory allocation rate is high enough that SpiderMonkey may run out of memory during incremental GC</li> +</ul> + +<h2 id="Adding_markers_with_the_console_API">Adding markers with the console API</h2> + +<p>Two markers are directly controlled by <a href="/en-US/docs/Web/API/Console">console API</a> calls: "Console" and "Timestamp".</p> + +<h3 id="Console_markers">Console markers</h3> + +<p>These enable you to mark a specific section of the recording.</p> + +<p>To make a console marker, call <code>console.time()</code> at the start of the section, and <code>console.timeEnd()</code> at the end. These functions take an argument which is used to name the section.</p> + +<p>For example, suppose we have code like this:</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + + console.timeEnd("calculating..."); + + return primes; +}</pre> + +<p>The Waterfall's output will look something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10967/perf-console-time.png" style="display: block; height: 430px; margin-left: auto; margin-right: auto; width: 1192px;"></p> + +<p>The marker is labeled with the argument you passed to <code>console.time()</code>, and when you select the marker, you can see the program stack in the right-hand sidebar.</p> + +<h4 id="Async_stack">Async stack</h4> + +<p class="geckoVersionNote">New in Firefox 41.</p> + +<p>Starting in Firefox 41, the right-hand sidebar will also show the stack at the end of the period: that is, at the point <code>console.timeEnd()</code> was called. If <code>console.timeEnd()</code> was called from the resolution of a <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promise</a></code>, it will also display "(Async: Promise)", under which it will show the "async stack": that is, the call stack at the point the promise was made.</p> + +<p>For example, consider code like this:</p> + +<pre class="brush: js">var timerButton = document.getElementById("timer"); +timerButton.addEventListener("click", handleClick, false); + +function handleClick() { + console.time("timer"); + runTimer(1000).then(timerFinished); +} + +function timerFinished() { + console.timeEnd("timer"); + console.log("ready!"); +} + +function runTimer(t) { + return new Promise(function(resolve) { + setTimeout(resolve, t); + }); +}</pre> + +<p>The Waterfall will display a marker for the period between <code>time()</code> and <code>timeEnd()</code>, and if you select it, you'll see the async stack in the sidebar:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11179/async-stack.png" style="display: block; height: 378px; margin-left: auto; margin-right: auto; width: 352px;"></p> + +<h3 id="Timestamp_markers">Timestamp markers</h3> + +<p>Timestamps enable you to mark an instant in the recording.</p> + +<p>To make a timestamp marker, call <code><a href="/en-US/docs/Web/API/Console/timeStamp">console.timeStamp()</a></code>. You can pass an argument to label the timestamp.</p> + +<p>For example, suppose we adapt the code above to make a timestamp every 10 iterations of the loop, labeled with the iteration number:</p> + +<pre class="brush: js">var iterations = 70; +var multiplier = 1000000000; + +function calculatePrimes() { + console.time("calculating..."); + + var primes = []; + for (var i = 0; i < iterations; i++) { + + if (i % 10 == 0) { + console.timeStamp(i.toString()); + } + + var candidate = i * (multiplier * Math.random()); + var isPrime = true; + for (var c = 2; c <= Math.sqrt(candidate); ++c) { + if (candidate % c === 0) { + // not prime + isPrime = false; + break; + } + } + if (isPrime) { + primes.push(candidate); + } + } + console.timeEnd("calculating..."); + return primes; +}</pre> + +<p>In the Waterfall you'll now see something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10971/perf-timestamp.png" style="display: block; height: 530px; margin-left: auto; margin-right: auto; width: 1192px;"></p> + +<p> </p> diff --git a/files/ru/tools/черновик/index.html b/files/ru/tools/черновик/index.html new file mode 100644 index 0000000000..2046bd6a74 --- /dev/null +++ b/files/ru/tools/черновик/index.html @@ -0,0 +1,123 @@ +--- +title: Черновик +slug: Tools/Черновик +tags: + - Scratchpad + - Блокнот + - Веб-разработка + - Редактор + - 'веб-разработка:инструменты' + - инструменты +translation_of: Archive/Tools/Scratchpad +--- +<div>{{ToolsSidebar}}</div> + +<p>Простой редактор (Scratchpad, блокнот) JavaScript обеспечивает среду для экспериментов с JavaScript-кодом. Вы можете писать и запускать в нём код, взаимодействующий с содержимым веб-страницы, и проверять результаты его выполнения.</p> + +<p>В отличие от <a href="/ru/Tools/Web_Console" title="ru/Использование Веб-консоли">Веб-консоли</a>, которая позволяет интерпретировать только одну строку кода за раз, этот редактор позволяет вам редактировать большие фрагменты кода на JavaScript, затем запускать их разными способами в зависимости от того, как вы хотите использовать вывод результата.</p> + +<p>{{EmbedYouTube("Pt7DZACyClM")}}</p> + +<h2 id="Использование">Использование</h2> + +<h3 id="Открываем_редактор_в_отдельном_окне">Открываем редактор в отдельном окне</h3> + +<p>Чтобы открыть окно редактора JavaScript в отдельном окне:</p> + +<ul> + <li>нажмите <kbd>Shift</kbd> + <kbd>F4</kbd>, либо перейдите в меню Веб-разработка (которое находится в меню Инструменты на OS X и Linux), где выберите пункт «Простой редактор JavaScript».</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;">), после выберите «Простой редактор JavaScript».</li> +</ul> + +<h3 id="Открытие_Редактора_в_окне_Инструменты_разработки">Открытие Редактора в окне Инструменты разработки</h3> + +<div class="geckoVersionNote">Новое в Firefox 47.</div> + +<p>Начиная с Firefox 47, вы можете открыть редактор внутри окна "<a href="/ru/docs/Tools/Tools_Toolbox">Инструменты разработки</a>". Вначале установите галочку напротив «Простой редактор JavaScript», которая находится в <a href="/ru/docs/Tools/Tools_Toolbox#Settings">настройках</a> окна "Инструменты разработки" в области "Инструменты разработчика Firefox по умолчанию".</p> + +<p>Теперь Редактор будет доступен в окне "Инструменты", наряду с Инспектором, Консолью, Отладчиком и другими. Это особенно удобно в <a href="/en-US/docs/Tools/Web_Console/Split_console">режиме раздельной консоли</a>: например, можно использовать редактор как постоянный многострочный редактор, и консоль для взаимодесствия со страницей.</p> + +<h3 id="Редактирование">Редактирование</h3> + +<p>Окно Редактора выглядит так (на Mac OS X строка меню находится сверху экрана):</p> + +<p><img alt="A screenshot of the Scratchpad" src="https://mdn.mozillademos.org/files/14143/own_window1.png" style="height: 249px; width: 831px;"></p> + +<p>Меню File предлагает варианты для сохранения и загрузки фрагментов JavaScript-кода, так что вы можете повторно использовать код позже, если захотите.</p> + +<h4 id="Автозавершение_кода"><span class="short_text" id="result_box" lang="ru"><span>Автозавершение кода</span></span></h4> + +<p><span class="short_text" lang="ru"><span>Редактор интегрирует анализатор кода <a href="http://ternjs.net/">Tern</a>, и использует его для предоставления автодополнений и всплывающих подсказок с информацией о текущем символе. Для просмотра автодополнений нажмите </span></span> <kbd>Ctrl</kbd> + <kbd>Space</kbd>.</p> + +<p>Например, напишите <kbd>d</kbd>, после нажмите <kbd>Ctrl</kbd> + <kbd>Space</kbd>. Вы увидите окно с вариантами автодополнений: </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14147/autocomplete1.png" style="display: block; height: 275px; margin-left: auto; margin-right: auto; width: 838px;"></p> + +<p>Иконка рядом с каждым вариантом указывает на тип выбираемого элемента. Здесь же по выбранному элементу отображается полезная информация. Можно выбирать разные варианты предложений клавишами <kbd>↑</kbd> and <kbd>↓</kbd>. Для утверждения и вставки слова в текст нажмите <kbd>Enter</kbd> or <kbd>Tab</kbd>.</p> + +<h4 id="Inline_documentation">Inline documentation</h4> + +<p>Для просмотра всплывающего окна с документацией нажмите <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>, когда курсор на идентификаторе (Javascript). Например, если вы напишите <code>document</code>.<code>addEventListener</code>, нажмёте <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd>, то <span id="result_box" lang="ru"><span>увидите</span> <span>всплывающее окно, которое</span> <span>показывает</span> <span>краткую информацию о</span> <span>синтаксисе</span> этой <span>функции</span> <span>и</span> <span>краткое описание:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14145/inline_doc1.png" style="display: block; height: 310px; margin-left: auto; margin-right: auto; width: 827px;"></p> + +<p>Ссылка [документация] откроет в окне документацию MDN по элементу.</p> + +<h3 id="Выполнение_кода">Выполнение кода</h3> + +<div class="note"> +<p>После того, как вы написали свой код, выделите код, который вы хотите запустить. Если вы ничего не выделите, будет запущен весь код в окне. Затем выберите способ, которым хотите запустить, с помощью одной из кнопок наверху, меню Выполнить в строке меню, или контекстного меню. Код выполняется в контексте выбранной в данный момент вкладке. Все переменные, которые вы определили вне функции, будут добавлены в глобальный объект этой вкладки.</p> +</div> + +<p>Доступны четыре варианта выполнения.</p> + +<h4 id="Запуск">Запуск</h4> + +<p>Когда вы выбираете опцию Запустить, то выполняется выделенный код. Это способ, которым вы будете выполнять функцию или другой код, который воздействует на содержание вашей страницы. Без необходимости просмотра результата.</p> + +<h4 id="Исследовать">Исследовать</h4> + +<p>Опция Исследовать выполняет код так же, как и Запустить; однако затем открывается объект Инспектор, чтобы вы могли узнать возвращенное кодом значение.</p> + +<p>Например, если вы введете код:</p> + +<pre class="notranslate">window +</pre> + +<p>Затем выберите Исследовать, вы получите окно Инспектора, которое может выглядеть примерно так:</p> + +<p><img alt="Inspecting an object in the Scratchpad" src="https://mdn.mozillademos.org/files/14151/inspect1.png" style="height: 308px; width: 833px;"></p> + +<h4 id="Отобразить">Отобразить</h4> + +<p>Опция «Отобразить» выполняет выделенный код, затем вставляет результат непосредственно в окно редактора в качестве комментария, так что его можно будет использовать согласно циклу <a href="http://ru.wikipedia.org/wiki/REPL">REPL</a> для дальнейшего программирования.</p> + +<h4 id="Перезагрузить_и_запустить">Перезагрузить и запустить</h4> + +<p>Опция «Перезагрузить и запустить» доступна только в меню Выполнить. Она сначала перезагружает страницу, затем выполняет код по событию страницы «load». Это полезно для выполнения кода в первоначальном окружении.</p> + +<h2 id="Запуск_Редактора_в_контексте_браузера"><span class="short_text" id="result_box" lang="ru"><span>Запуск</span> Редактора <span>в контексте</span> <span>браузера</span></span></h2> + +<p><span id="result_box" lang="ru"><span>Вы можете запустить</span> <span>блокнот</span> <span>в контексте</span> <span>браузера</span> <span>в целом</span><span>, а не для конкретной</span> <span>веб-страницы</span><span>.</span> Например<span>, если</span> <span>вы работаете на</span>д <span>самим</span> <span>Firefox</span> <span>или разработкой</span> <span>дополнений.</span> <span>Для</span> <span>этого </span>поставьте галочку <span>"Включить инструменты отладки browser chrome </span><span>и</span> <span>дополнений</span><span>" в настройках "<a href="/ru/docs/Tools/Tools_Toolbox#Settings">Инструментов разработки</a>"</span></span>. После этого в м<span id="result_box" lang="ru"><span>еню</span> <span>"Окружение" (в Редакторе)</span> появится <span>опция</span> "Браузер"<span>;</span> <span>как только это произойдет</span><span>,</span> <span>вашей сферой</span> <span>станет</span> <span>весь браузер</span><span>, а не только</span> <span>содержимое страницы</span><span>. Ниже рассмотрен пример, где объект window доступен в любом режиме Окружения, а объект gBrowser только в режиме "Браузер" (иначе появится сообщение об ошибке):</span></span></p> + +<pre class="brush: js notranslate">window +/* +[object ChromeWindow] +*/ + +gBrowser +/* +[object XULElement] +*/</pre> + +<p><span id="result_box" lang="ru"><span>Контекст выполнения</span> Реактора <span>установлен на "</span><span>Браузер". Если вы открываете файл со скриптом в редакторе, и он первой строкой имеет </span></span><strong>// -sp-context: browser</strong><span lang="ru"><span>, то</span> окружение автоматически переключится в режим "Браузер". Это происходит только при открытии.</span></p> + +<p><span lang="ru"><img alt="" src="https://mdn.mozillademos.org/files/14149/autochange-environment1.png" style="height: 206px; width: 829px;"></span></p> + +<h2 id="Сочетания_клавиш">Сочетания клавиш</h2> + +<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "scratchpad") }}</p> + +<h3 id="Сочетания_клавиш_редактора_исходного_кода">Сочетания клавиш редактора исходного кода</h3> + +<p>{{ Page ("ru/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> |