Fixed 404'ing icons. Added icon to remote debugging.
This commit is contained in:
Родитель
1d091ec7a6
Коммит
9720f3b2cd
|
@ -839,7 +839,7 @@ global.animationData = global.animationData || {};
|
|||
<ul>
|
||||
<li>Right-click any element on the page the page and select <strong>Inspect Element</strong>.</li>
|
||||
<li>Press <span class="kbd">Ctrl</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span> (or <span class="kbd">Cmd</span> + <span class="kbd">Shift</span> + <span class="kbd">C</span> on mac) to open DevTools in Inspect Element mode, then click on an element.</li>
|
||||
<li>Click the <strong>Inspect Element button</strong> <img src="../../images/inspect-icon.png" class="inspect-icon" alt="Inspect icon"> at the top of the DevTools window to go into Inspect Element Mode, then click on an element.</li>
|
||||
<li>Click the <strong>Inspect Element button</strong> <img src="../images/inspect-icon.png" class="inspect-icon" alt="Inspect icon"> at the top of the DevTools window to go into Inspect Element Mode, then click on an element.</li>
|
||||
<li>Use the <code>inspect()</code> method in the console, such as <code>inspect(document.body)</code>. See the <a href="commandline-api.md">Command-Line API</a> for information on using inspect.</li>
|
||||
</ul>
|
||||
<div class="devtools-animation-container">
|
||||
|
@ -1027,7 +1027,7 @@ element.className = 'active';
|
|||
<li>The currently selected element.</li>
|
||||
<li>Ancestors of the currently selected element.</li>
|
||||
</ul>
|
||||
<p>If you find it excessive to view all event handlers, including those registered using event delegation, click <strong>Filter</strong><strong> </strong><img alt="filter" src="../../images/filters.png" /> and select the menu item <strong>Selected Node Only</strong> which limits displayed event listeners to only those registered directly on the element.</p>
|
||||
<p>If you find it excessive to view all event handlers, including those registered using event delegation, click <strong>Filter</strong><strong> </strong><img alt="filter" src="../images/filters.png" /> and select the menu item <strong>Selected Node Only</strong> which limits displayed event listeners to only those registered directly on the element.</p>
|
||||
<p><img alt="" src="dom-and-styles-files/images/image_17.png" /></p>
|
||||
<p class="note"><strong>Note:</strong> Many Chrome extensions add their own event listeners onto the DOM.</p>
|
||||
|
||||
|
@ -1103,7 +1103,7 @@ video, audio, div, .message, body *, time {
|
|||
<p>After you have selected a valid CSS property, bring up suggestions for applicable CSS values by moving focus to the CSS property value field. For example, the property <code>display</code> suggests values such as <code>block, flex, none,</code> and others.</p>
|
||||
<p>Paste CSS into the Styles pane using <span class="kbd">Ctrl</span> + <span class="kbd">V</span> (or <span class="kbd">Cmd</span> + <span class="kbd">V</span> on Mac). Properties and their values are parsed and entered into the correct fields.</p>
|
||||
<h4 id="add-a-style-rule">Add a style rule</h4>
|
||||
<p>You may find it preferable to add styles along with a <strong>new selector</strong>. Click <strong>New Style Rule</strong> <img alt="plus" src="../../images/plus.png" /> within the styles pane header bar to generate a new CSS rule.</p>
|
||||
<p>You may find it preferable to add styles along with a <strong>new selector</strong>. Click <strong>New Style Rule</strong> <img alt="plus" src="../images/plus.png" /> within the styles pane header bar to generate a new CSS rule.</p>
|
||||
<div class="devtools-animation-container">
|
||||
<animation class="devtools-animation" src="new-style-rule" speed="2000" repeatdelay="2"></animation>
|
||||
</div>
|
||||
|
@ -1124,7 +1124,7 @@ video, audio, div, .message, body *, time {
|
|||
</ul>
|
||||
<p>To set an element's state:</p>
|
||||
<ul>
|
||||
<li>Click <strong>Toggle Element State</strong><img alt="" src="../../images/attributes-icon.png" /> next to <strong>New Style Rule</strong> within the styles pane header.</li>
|
||||
<li>Click <strong>Toggle Element State</strong><img alt="" src="../images/attributes-icon.png" /> next to <strong>New Style Rule</strong> <img alt="plus" src="../images/plus.png" /> within the styles pane header.</li>
|
||||
<li>Right-click a DOM node in the Elements panel and select <strong>Force Element State.</strong></li>
|
||||
</ul>
|
||||
<h3 id="change-history-local-modifications">Change history (Local modifications)</h3>
|
||||
|
@ -1143,7 +1143,7 @@ video, audio, div, .message, body *, time {
|
|||
</p>
|
||||
|
||||
<p>Make a modification to a CSS rule which originates from an external style sheet and notice the change shows in the local modifications pane.</p>
|
||||
<p><strong>Note</strong>: When you create a new rule using New Style Rule <img alt="plus" src="../../images/plus.png" />, the new rule doesn't belong to an existing stylesheet. DevTools adds it to a special inspector stylesheet. The inspector stylesheet can be edited in the Sources panel, like other files.</p>
|
||||
<p><strong>Note</strong>: When you create a new rule using <b>New Style Rule</b> <img alt="plus" src="../images/plus.png" />, the new rule doesn't belong to an existing stylesheet. DevTools adds it to a special inspector stylesheet. The inspector stylesheet can be edited in the Sources panel, like other files.</p>
|
||||
<p>Explore the local modifications pane:</p>
|
||||
<ul>
|
||||
<li>Expand top-level file names to view the time <img alt="" src="dom-and-styles-files/images/image_25.png" /> a modification occurred.</li>
|
||||
|
|
|
@ -101,7 +101,7 @@ development.</figcaption>
|
|||
<section class="collapsible">
|
||||
<h2 id="debug-your-app">Debug browser tabs</h2>
|
||||
|
||||
<p>When inspecting a remote browser tab in Chrome for Android, the element you are mousing over in the DevTools window will highlight the element on your device in real time. In fact, turn on inspect mode by clicking the icon, and then tap on your device screen.</p>
|
||||
<p>When inspecting a remote browser tab in Chrome for Android, the element you are mousing over in the DevTools window will highlight the element on your device in real time. In fact, turn on inspect mode by clicking the <img src="../images/inspect-icon.png" class="inspect-icon" alt="Inspect icon"> icon, and then tap on your device screen.</p>
|
||||
|
||||
<figure>
|
||||
<img alt="Debugging Chrome for Android using the Chrome Developer Tools" src="remote-debugging/remote-debug-overview.jpg"/>
|
||||
|
|
Загрузка…
Ссылка в новой задаче