initial commit

13 files changed, 1516 insertions, 0 deletions

diff --git a/files/es/tools/page_inspector/3er-panel_modo/index.html b/files/es/tools/page_inspector/3er-panel_modo/index.html
new file mode 100644
index 0000000000..7165d90a4d
--- /dev/null
+++ b/files/es/tools/page_inspector/3er-panel_modo/index.html
@@ -0,0 +1,69 @@
+---
+title: El 3er panel del modo inspector
+slug: Tools/Page_Inspector/3er-panel_modo
+tags:
+  - 3 paneles
+  - CSS
+  - Guía
+  - Herramientas
+  - Inspectord
+translation_of: Tools/Page_Inspector/3-pane_mode
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">Este articulo explica como usar el 3er panel del modo inspector.</p>
+
+<h2 id="Feature_summary">Feature summary</h2>
+
+<p>Desde Firefox 62 en adelante, el <a href="/en-US/docs/Tools/Page_Inspector">Inspector de página</a> tieen un nuevo modo disponible— <strong>modo 3er-Panel</strong>. cuando este es activado, te permitira ver en simultaneo lo siguiente:</p>
+
+<ul>
+ <li>El <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">panel HTML</a> al costado izquierdo, como es usual.</li>
+ <li>Las <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">reglas CSS</a> en un panel diferente en la partecentral, es mas como una pestaña.</li>
+ <li>Las otras caracteristicas relacionadas a CSS — como la <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">vista de estilos computados</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">vista de animaciones</a>, y <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">vista de fuentes</a> — en la pstaña derecha, como es usual.</li>
+</ul>
+
+<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: En tamaños de pantalla mas reducidos, las pestañas apareceran bajo el panel de Reglas CSS.</p>
+</div>
+
+<p>Tener las reglas de CCS en su propio panel es muy util ya que no solo te permite revisar el HTML y editar el CSS que esta aplicado a este, si no que tambien puedes ver en tiempo real como afectan tus caracteristicas CSS afectan a los estilos computados. solo necesitas tener la pestaña abierta para ver el efecto.</p>
+
+<h2 id="A_brief_walkthrough">A brief walkthrough</h2>
+
+<p>El inspector de 3 paneles esta desactivado por defecto. este se activa con el  toggle que se encuentra el parte superior izquierda de la pestaña.</p>
+
+<p><img alt="a view of the tabs panel, showing the 2 to 3 pane toggle icon" src="https://mdn.mozillademos.org/files/15937/toggle-icon-final.png" style="display: block; height: 241px; margin: 0px auto; width: 410px;"></p>
+
+<p>presionando el toggle podras cambiar de la vista de  2 a 3 paneles.</p>
+
+<p><img alt="The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15936/2-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 1195px;"></p>
+
+<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p>
+
+<p>Con el modo de 3 paneles activado, podras ver los cambios en vivo realizados a las reglas de CSS en tu página. Por ejemplo, puedes editar las propiedades de una <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Rejilla CSS </a>y ver inmediatamente los cambios en el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspector de rejilla</a>.</p>
+
+<p>{{EmbedYouTube("ELS2OOUvxIw")}}</p>
+
+<h2 id="Habilitando_el_inspector_de_3_paneles_en_versiones_anteriores_a_Firefox_62">Habilitando el  inspector de 3 paneles en versiones anteriores a Firefox 62</h2>
+
+<p>en anteriores versiones de Firefox (desde Firefox 59/60), puedes activar el modo de 3 paneles en su version Beta para esto vas a about:config y pasando las siguientes  <code>true</code>:</p>
+
+<p><code>devtools.inspector.split-rule-enabled</code> — esto cambia el modo de 3 paneles de on a off.</p>
+
+<p><code>devtools.inspector.split-sidebar-toggle</code> — esto añade el boton a la UI.</p>
+
+<p>en Firefox 61, estas preferencias se renombran como:</p>
+
+<ul>
+ <li><code>devtools.inspector.three-pane-enabled</code></li>
+ <li><code>devtools.inspector.three-pane-toggle</code></li>
+</ul>
+
+<p>debes pasar estas dos a <code>true</code> en el Beta para probar las caracteristicas enFirefox 61.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: El inspector de 3 paneles esta disponible en la edicion Nightly/Developer desde Firefox 62.</p>
+</div>
diff --git a/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html b/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html
new file mode 100644
index 0000000000..e45754096e
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html
@@ -0,0 +1,22 @@
+---
+title: Abrir el Inspector
+slug: Tools/Page_Inspector/How_to/Abrir_el_Inspector
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+  - Tools
+translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector
+---
+<p>Hay dos maneras básicas para abrir el Inspector:</p>
+
+<ul>
+ <li><em>Si no tenemos seleccionado ningun elemento:</em> desde la barra de menú "Herramientas -&gt; Desarrollador Web -&gt; Inspector" ; o utilizando un <a href="https://developer.mozilla.org/es/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">atajo de teclado</a> equivalente</li>
+ <li>
+  <p><em>Si tenemos seleccionado un elemento: haz click derecho en un elemento de la página web y selecciona </em> "Inspeccionar elemento"</p>
+ </li>
+</ul>
+
+<p>El Inspector aparecerá en la parte inferior de la ventana del navegador:</p>
+
+<p><img alt="The all-new Inspector in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15493/57-inspector-starfish.png" style="display: block; height: 647px; margin-left: auto; margin-right: auto; width: 845px;">Para empezar a aprender sobre el Inspector ve al <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/UI_Tour"> Tour por la UI</a>.</p>
diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html
new file mode 100644
index 0000000000..992a5b8326
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html
@@ -0,0 +1,47 @@
+---
+title: Examinar y editar el modelo de cajas
+slug: Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel
+tags:
+  - Guía
+  - Herramientas
+  - Tools
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model
+---
+<h2 id="Visualización_del_modelo_de_caja">Visualización del modelo de caja</h2>
+
+<p>Con el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">botón Seleccionar elemento</a> pulsado, si se pasa el ratón por encima de un elemento en la página, el <a href="/es/docs/Web/CSS/box_model">modelo de caja</a> para ese elemento se muestra superpuesto en la página:</p>
+
+<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p>
+
+<p>También se muestra superpuesto en la página si en el panel HTML ponemos el cursor sobre la marca de un elemento :</p>
+
+<p>{{EmbedYouTube("xA4IxTttNLk")}}</p>
+
+<p>Si se trata de un elemento en línea que está dividido en varias filas, se destaca cada una de las líneas individuales que componen el elemento:</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="Vista_Modelo_de_Caja">Vista Modelo de Caja</h3>
+
+<p>Cuando se selecciona un elemento, podemos obtener una vista detallada del modelo de caja en dos de las vistas del panel CCS: <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Calculado</a> y Disposición:</p>
+
+<ul>
+ <li>en la vista Calculado aparece en primer término, seguido de la sección con el listado de reglas que se aplican al elemento;</li>
+ <li>en la vista Disposición está en segundo término, detrás de la sección 'Rejilla' y seguido de la sección Propiedades del modelo de caja (box-sizing, display, float, line-height, position y z-index) indicando sus valores</li>
+</ul>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14241/box-model.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 610px;"></p>
+
+<p>Si ponemos el cursor sobre un valor en la vista modelo de caja al lado aparece un tooltip que nos indica de qué regla procede el valor:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14243/box-model-tooltip.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 620px;"></p>
+
+<p>Si desplazamos el cursor sobre una parte del modelo de caja en la vista Modelo de caja, se resalta la parte correspondiente de la página y aparece otro tooltip con información indicando el elemento, su clase y/o ID y sus dimensiones (ancho x alto):</p>
+
+<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p>
+
+<h2 id="Edición_del_modelo_de_caja">Edición del modelo de caja</h2>
+
+<p>También podemos editar los valores en la <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">Vista Modelo de Caja</a>: hacer clic sobre un valor permite editarlo y ver los resultados inmediatamente en la página:</p>
+
+<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p>
diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html
new file mode 100644
index 0000000000..2a361a1d90
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html
@@ -0,0 +1,364 @@
+---
+title: Examinar y editar HTML
+slug: Tools/Page_Inspector/How_to/Examinar_y_editar_HTML
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+  - Tools
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML
+---
+<p>Puedes examinar y editar el HTML de la página en el <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a>.</p>
+
+<h2 id="Navegar_en_HTML">Navegar en HTML</h2>
+
+<h3 id="HTML_breadcrumbs_(migas_de_pan)">HTML breadcrumbs (migas de pan)</h3>
+
+<p>En la parte inferior del panel HTML hay una barra de navegación de migas de pan. Muestra la jerarquía completa en el documento para la rama que contiene el elemento seleccionado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15499/57-html-panel.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 633px;"></p>
+
+<p>Pasar el ratón sobre cada miguita de pan destaca ese elemento de la página.</p>
+
+<p>La barra breadcrumbs tiene sus propios <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/Keyboard_shortcuts#Breadcrumbs_bar">atajos de teclado</a>.</p>
+
+<div class="note">
+<p>Ten en cuenta que antes de Firefox 48, esta barra de herramientas estaba en la parte superior del panel HTML.</p>
+</div>
+
+<h3 id="Buscar">Buscar</h3>
+
+<p>A partir de Firefox 45, el campo de búsqueda del Inspector de páginas busca coincidencias en todo el marcado del documento actual y en cualquier frame.</p>
+
+<p>Para empezar a buscar un marcador, haz clic en el cuadro de búsqueda para expandirlo o presiona <kbd>Ctrl</kbd> + <kbd>F</kbd> , o <kbd>Cmd</kbd> + <kbd>F</kbd> en Mac.</p>
+
+<p>A medida que escribes, en la ventana emergente se autocompletarán sugerencias con los atributos de clase o de ID que coincidan con el término de búsqueda actual:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/15495/html-code-search.png" style="display: block; height: 398px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Presiona <kbd>Up</kbd> y <kbd>Down</kbd> para desplazarte por las sugerencias, <kbd>Tab</kbd> para elegir la sugerencia actual y entonces <kbd>Enter</kbd> para seleccionar el primer nodo con ese atributo.</p>
+
+<p>Si sólo introduces el término de búsqueda sin seleccionar un valor entre las sugerencias, el término de búsqueda se aplicará al texto completo del documento, incluyendo todos los nombres y valores de atributos y el contenido de texto de los nodos.</p>
+
+<p>{{EmbedYouTube("AKBhnfp1Opo")}}</p>
+
+<p>Para desplazarte por las sugerencias presiona <kbd>Enter</kbd> . A partir de Firefox 48 es posible el desplazamiento hacia atrás con <kbd>Shift</kbd> + <kbd>Enter</kbd> .</p>
+
+<h3 id="Árbol_HTML">Árbol HTML</h3>
+
+<p>El resto del panel muestra el HTML de la página como un árbol (esta interfaz de usuario también se llama Vista de marcado). Justo a la izquierda de cada nodo hay una flecha: haz clic en la flecha para desplegar el nodo. Si mantienes pulsada la tecla <kbd>Alt</kbd> mientras haces clic en la flecha, se desplegará el nodo y todos los nodos situados debajo de él.</p>
+
+<p><img alt="The new Firefox 57 inspector HTML tree." src="https://mdn.mozillademos.org/files/15503/57-html-tree.png" style="display: block; height: 433px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>Mover el ratón sobre un nodo del árbol destaca el elemento en la página.</p>
+
+<p>Los nodos no-visibles se representan descoloridos o desaturados. La invisibilidad puede deberse a razones diversas, entre ellas el uso de <code><a href="/es/docs/Web/CSS/display">display: none</a></code>, o que el elemento no tenga ninguna dimensión.</p>
+
+<p>A partir de Firefox 53 se muestra una elipsis entre la etiqueta de apertura y cierre de un elemento si el nodo está colapsado y contiene más contenido. Antes de Firefox 53, era imposible determinar si un nodo colapsado tenía hijos. Ahora los hijos se indican en el árbol con este icono: <img alt="" src="https://mdn.mozillademos.org/files/14925/child-node-indicator.png" style="height: 24px; width: 32px;"></p>
+
+<div class="note">
+<p><strong>Nota</strong>: Hay atajos de teclado útiles para usar en el árbol HTML — ve a la <a href="/es/docs/Tools/Keyboard_shortcuts#HTML_pane">lista de atajos de teclado del panel HTML</a>.</p>
+</div>
+
+<h3 id="before_y_after">::before y ::after</h3>
+
+<p>Desde Firefox 35 en adelante, puede inspeccionar los pseudoelementos añadidos usando {{cssxref("::before")}} y {{cssxref("::after")}}:</p>
+
+<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p>
+
+<h3 id="Whitespace-only_text_nodes">Whitespace-only text nodes</h3>
+
+<div class="geckoVersionNote">Nuevo en Firefox 52</div>
+
+<p>Los desarrolladores web no escriben todo su código en una sola línea de texto. Introducen espacios en blanco con <kbd>Space</kbd> , <kbd>Return</kbd> , y <kbd>Tab</kbd> entre sus elementos HTML para que el marcado sea más legible.</p>
+
+<p>Normalmente este espacio en blanco parece no tener efecto ni salida visual, pero de hecho, cuando un navegador analiza HTML genera automáticamente nodos de texto anónimos para elementos que no están contenidos en un nodo. Esto incluye los espacios en blanco que hay después de cualquier tipo de texto.</p>
+
+<p>Si estos nodos de texto generados automáticamente están <a href="https://developer.mozilla.org/es/docs/Web/Guide/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">inline level</a>, los navegadores les asignarán una anchura y altura distinta de cero. Así puede que encuentres espacios extraños entre los elementos, incluso si no has puesto ningún margen o relleno en ellos.</p>
+
+<p>Desde Firefox 52, el Inspector muestra los nodos whitespace para que puedas saber de dónde vienen los huecos en su marcado.</p>
+
+<p>Los nodos Whitespace se representan con un punto: <img alt="" src="https://mdn.mozillademos.org/files/14931/new-whitespace-text-indicator.png" style="height: 23px; width: 30px;"> y cuando pasas el ratón sobre ellos muestra un tooltip explicativo</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14929/whitespace-text-nodes-2.png" style="display: block; height: 1010px; margin-left: auto; margin-right: auto; width: 912px;"></p>
+
+<p>Para ver esto en la práctica ve a la demo en <a href="https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html">https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html</a>.</p>
+
+<h2 id="Elemento_menú_contextual_emergente">Elemento: menú contextual emergente</h2>
+
+<p>Puedes realizar ciertas tareas comunes en un elemento utilizando su menú contextual emergente. Para activar este menú, haz clic derecho en el elemento. El menú contiene los siguientes elementos - haz clic en los enlaces para encontrar la descripción de cada comando en {{anch("Context menu reference")}}:</p>
+
+<ul>
+ <li><a href="#Edit as HTML">Editar como HTML</a></li>
+ <li><a href="#Create New Node">Crear nodo nuevo</a></li>
+ <li><a href="#Duplicate Node">Duplicar nodo</a></li>
+ <li><a href="#Delete Node">Eliminar nodo</a></li>
+ <li>Atributos
+  <ul>
+   <li><a href="#Attribute/Add Attribute">Añadir atributo</a></li>
+   <li><a href="#Attribute/Copy Attribute">Copiar valor del atributo</a></li>
+   <li><a href="#Attribute/Edit Attribute">Editar atributo</a></li>
+   <li><a href="#Attribute/Remove Attribute">Eliminar atributo</a></li>
+  </ul>
+ </li>
+ <li><a href="#:hover">:hover</a></li>
+ <li><a href="#:active">:active</a></li>
+ <li><a href="#:focus">:focus</a></li>
+ <li>Copiar
+  <ul>
+   <li><a href="#Copy Inner HTML">HTML interno</a></li>
+   <li><a href="#Copy Outer HTML">HTML externo</a></li>
+   <li><a href="#Copy Unique Selector">Selector CSS</a></li>
+   <li><a href="#Copy CSS Path">Ruta CSS</a></li>
+   <li><a href="#Copy XPath">XPath</a></li>
+   <li><a href="#Copy Image Data-URL">Data-URL de imagen</a></li>
+  </ul>
+ </li>
+ <li>Pegar
+  <ul>
+   <li><a href="#Paste Inner HTML">HTML interno</a></li>
+   <li><a href="#Paste Outer HTML">HTML externo</a></li>
+   <li><a href="#Paste/Before">Antes</a></li>
+   <li><a href="#Paste/After">Detrás</a></li>
+   <li><a href="#Paste/As First Child">Como primer hijo</a></li>
+   <li><a href="#Paste/As Last Child">Como último hijo</a></li>
+  </ul>
+ </li>
+ <li><a href="#Expand All">Expandir todo</a></li>
+ <li><a href="#Collapse">Contraer todo</a></li>
+ <li><a href="#Scroll Into View">Desplazarse a la vista</a></li>
+ <li><a href="#Screenshot Node">Obtener instantanea del nodo</a></li>
+ <li><a href="#Use in Console">Usar en consola</a></li>
+ <li><a href="#Show DOM Properties">Mostrar propiedades del DOM</a></li>
+ <li><a href="#Open Link in New Tab">Abrir enlace en una pestaña nueva</a> *</li>
+ <li><a href="#Open File in Debugger">Abrir archivo en depurador</a> *</li>
+ <li><a href="#Open File in Style-Editor">Abrir archivo en editor de estilos</a> *</li>
+ <li><a href="#Copy Link Address">Copiar la ruta del enlace</a> *</li>
+</ul>
+
+<p>* Estas opciones sólo aparecen en determinados contextos, por ejemplo, la opción "Abrir archivo en el editor de estilo" sólo aparece cuando haces clic con el botón contextual sobre el enlace a un archivo CSS.</p>
+
+<h3 id="Context_menu_reference">Context menu reference</h3>
+
+<div class="note">
+<p><strong>Nota</strong>: A partir de Firefox 49 el menú contextual se reorganizó significativamente para hacerlo más compacto. No te preocupes si la estructura de tu menú es ligeramente diferente de la que se muestra arriba: estarán disponibles las mismas opciones</p>
+</div>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <td style="width: 30%;"><a id="Edit as HTML">Edit as /en-US/docs/HTML</a></td>
+   <td>
+    <p><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Editing_HTML">Editar el HTML del elemento</a></p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Copy Inner HTML">(Copy) Inner HTML</a></td>
+   <td>Copiar el HTML interno para el elemento.</td>
+  </tr>
+  <tr>
+   <td><a id="Copy Outer HTML">(Copy) Outer HTML</a></td>
+   <td>
+    <p>Copiar el HTML externo para el elemento.</p>
+
+    <p>Presione <kbd>Ctrl</kbd> + <kbd>C</kbd> (o <kbd>Cmd</kbd> + <kbd>C</kbd> en Mac) realiza la misma acción.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Copy Unique Selector">(Copy) Unique Selector/CSS Selector</a></td>
+   <td>Copiar el selector CSS que selecciona únicamente el elemento</td>
+  </tr>
+  <tr>
+   <td><a id="Copy CSS Path">(Copy) CSS Path</a></td>
+   <td>Copiar el selector CSS que representa la ruta completa al elemento.</td>
+  </tr>
+  <tr>
+   <td><a id="Copy Image Data-URL">(Copy) Image Data-URL</a></td>
+   <td>Copiar imagen como data:// URL, l elemento selecionado es una imagen</td>
+  </tr>
+  <tr>
+   <td><a id="Copy Attribute">(Copy) Attribute</a></td>
+   <td>
+    <p>Copiar el atributo del elemento.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Show DOM Properties">Show DOM P/en-US/docs/roperties</a></td>
+   <td>Abrir la <a href="/es/docs/Tools/Web_Console#The_split_console">split console</a> e introducir el comando "<code>inspect($0)</code>" para <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects">inspect</a> el elemento actualmente selecionado.</td>
+  </tr>
+  <tr>
+   <td><a id="Use in Console">Use in Console</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 43<a href="/en-US/docs/">(Copy) Image Data-URL (Copy) Attribute </a></p>
+    </div>
+    Asigna el nodo actualmente seleccionado a una variable llamada <code>temp0</code> (o <code>temp1</code> si <code>temp0</code> esta ya asignado, y así sucesivamente), entonces abre la <a href="/es/docs/Tools/Web_Console#The_split_console">split console</a>,que le permite interactuar con ese nodo utilizando la línea de comandos de la consola.</td>
+  </tr>
+  <tr>
+   <td><a id="Expand All">Expand All</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    En la vista de árbol, expande el elemento actual y todos los elementos debajo de él. Esto equivale a mantener presionada la tecla <kbd>Alt</kbd> y hacer clic en el triángulo antes del elemento.</td>
+  </tr>
+  <tr>
+   <td><a id="Collapse">Collapse</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    En la vista de árbol, contrae el elemento actual. Esto equivale a hacer clic en la flecha de acceso situada junto al elemento que se ha expandido.</td>
+  </tr>
+  <tr>
+   <td><a id="Paste Inner HTML">(Paste) Inner HTML</a></td>
+   <td>Pegar el contenido del portapapeles en el nodo como su <a href="/es/docs/Web/API/element.innerHTML">HTML interno</a>.</td>
+  </tr>
+  <tr>
+   <td><a id="Paste Outer HTML">(Paste) Outer HTML</a></td>
+   <td>Pegar el contenido del portapapeles en el nodo como su <a href="/es/docs/Web/API/element.outerHTML">HTML externo</a>.</td>
+  </tr>
+  <tr>
+   <td><a id="Paste/Before">(Paste) Before</a></td>
+   <td>Pegar el contenido del portapapeles en el documento inmediatamente antes de este nodo</td>
+  </tr>
+  <tr>
+   <td><a id="Paste/After">(Paste) After</a></td>
+   <td>Pegar el contenido del portapapeles en el documento inmediatamente después de este nodo</td>
+  </tr>
+  <tr>
+   <td><a id="Paste/As First Child">(Paste) As First Child</a></td>
+   <td>Pegar el contenido del portapapeles en el documento como primerdescendiente de este nodo</td>
+  </tr>
+  <tr>
+   <td><a id="Paste/As Last Child">(Paste) As Last Child</a></td>
+   <td>Pegar el contenido del portapapeles en el documento como último descendiente de este nodo</td>
+  </tr>
+  <tr>
+   <td><a id="Scroll Into View">Scroll Into View</a></td>
+   <td>
+    <p>Desplazamiento en la página web para que el nodo seleccionado sea visible.</p>
+
+    <p>Desde Firefox 44, pulsando el atajo de teclado <kbd>S</kbd> también sirve para desplazarse en la página hasta que el nodo seleccionado está a la vista.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Screenshot Node">Screenshot Node</a></td>
+   <td>Hace una captura del nodo seleccionado y la guarda en tu directorio de Descargas. Ver <a href="/es/docs/Tools/Taking_screenshots">Taking screenshots</a>.</td>
+  </tr>
+  <tr>
+   <td><a id="Create New Node">Create New Node</a></td>
+   <td>Crea un nuevo elemento &lt;div&gt; como último descendiente del elemento actualmente seleccionado. Ver <a href="#Inserting_new_nodes">Inserting new nodes</a>.</td>
+  </tr>
+  <tr>
+   <td><a id="Duplicate Node">Duplicate Node</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+
+    <p>Crear una copia de este elemento e insertarla inmediatamente antes de este elemento.</p>
+   </td>
+  </tr>
+  <tr>
+   <td><a id="Delete Node">Delete Node</a></td>
+   <td>Elimina el elemento del DOM.</td>
+  </tr>
+  <tr>
+   <td><a id="Attribute/Add Attribute">Attribute/Add Attribute</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    Añade un atributo al elemento.</td>
+  </tr>
+  <tr>
+   <td><a id="Attribute/Edit Attribute">Attribute/Edit Attribute</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    (solo cuando se invoca en un atributo) Editar el atributo.</td>
+  </tr>
+  <tr>
+   <td><a id="Attribute/Remove Attribute">Attribute/Remove Attribute</a></td>
+   <td>
+    <div class="geckoVersionNote">
+    <p>Nuevo en Firefox 44</p>
+    </div>
+    (solo cuando se invoca en un atributo) Suprimir el atributo.</td>
+  </tr>
+  <tr>
+   <td><a id="Open Link in New Tab">Open Link in New Tab</a></td>
+   <td>(solo cuando se invoca sobre un enlace como atributo href) Abrir el item enlazado en una nueva pestaña.</td>
+  </tr>
+  <tr>
+   <td><a id="Open File in Debugger">Open File in Debugger</a></td>
+   <td>(solo cuando se invoca sobre un enlace a un archivo de código JS) Abrir el archivo enlazado en el depurador.</td>
+  </tr>
+  <tr>
+   <td><a id="Open File in Style-Editor">Open File in Style-Editor</a></td>
+   <td>(solo cuando se invoca sobre un enlace a un archivo de código CSS) Abrir el archivo CSS enlazado en un editor de estilos</td>
+  </tr>
+  <tr>
+   <td><a id="Copy Link Address">Copy Link Address</a></td>
+   <td>(solo cuando se invoca en una URL) Copiar la URL.</td>
+  </tr>
+  <tr>
+   <td><a id=":hover">:hover</a></td>
+   <td>Selecciona la pseudoclase CSS <a href="/en-US/docs/Web/CSS/:hover" title="/es/docs/Web/CSS/:hover">:hover</a></td>
+  </tr>
+  <tr>
+   <td><a id=":active">:active</a></td>
+   <td>Selecciona la pseudoclase CSS <a href="/en-US/docs/Web/CSS/:active" title="/es/docs/Web/CSS/:active">:active</a></td>
+  </tr>
+  <tr>
+   <td><a id=":focus">:focus</a></td>
+   <td>Selecciona la pseudoclase CSS <a href="/en-US/docs/Web/CSS/:focus" title="/es/docs/Web/CSS/:focus">:focus</a> CSS</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Editar_HTML">Editar HTML</h2>
+
+<p> </p>
+
+<p>Puedes editar el HTML - etiquetas, atributos y contenido - directamente en el panel HTML: haz doble clic en el texto que quieras editar, modifícalo y pulsa <kbd>Enter</kbd> para ver los cambios reflejados inmediatamente.</p>
+
+<p>Para editar el HTML externo de un elemento (<a href="/es/docs/Web/API/Element.outerHTML">HTML externo</a>), activa el menú emergente del elemento y selecciona "Editar como HTML". Verás un cuadro de texto en el panel HTML:</p>
+
+<p><img alt="Edit HTML directly in the Inspector panel in Firefox 57" src="https://mdn.mozillademos.org/files/15505/57-edit-as-html.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 600px;"></p>
+
+<p>Aquí puedes añadir cualquier HTML: cambiar la etiqueta del elemento, cambiar elementos existentes o añadir otros nuevos. Una vez que hagas clic fuera del cuadro, los cambios se aplican a la página.</p>
+
+<p>A partir de Firefox 52, si estás editando HTML, el menú contextual que verás es el habitual al trabajar con texto editable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p>
+
+<h3 id="Copiar_y_pegar">Copiar y pegar</h3>
+
+<p>Puedes usar el <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menú emergente</a> desplegable para copiar nodos en el árbol HTML y pegarlos en la ubicación deseada.</p>
+
+<h3 id="Arrastrar_y_Soltar_(Drag_and_drop)">Arrastrar y Soltar (Drag and drop)</h3>
+
+<p>Puedes editar HTML moviendo nodos en el árbol HTML. Simplemente haz clic manteniendo presionado sobre cualquier elemento y arrástralo hacia arriba o hacia abajo en el árbol. Cuando sueltes el botón del ratón, el elemento se insertará en la posición correspondiente:</p>
+
+<p>{{EmbedYouTube("oI-a035nfWk")}}</p>
+
+<p>A partir de Firefox 44, puedes cancelar el arrastrar y soltar pulsando la tecla <kbd>Esc</kbd> .</p>
+
+<h3 id="Insertar_nuevos_nodos">Insertar nuevos nodos</h3>
+
+<div class="geckoVersionNote">Nuevo en Firefox 48</div>
+
+<p>A partir de Firefox 48, hay un icono "+" en la parte superior de la vista de marcado:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13082/inspector-insert-node.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 547px;"></p>
+
+<p>Haz clic en este icono para insertar un <code><a href="/es/docs/Web/HTML/Element/div">&lt;div&gt;</a></code> vacío en el documento como el último hijo del elemento seleccionado actualmente. A continuación, puedes editar el contenido y el estilo del nuevo nodo tal como lo harías con cualquier otro nodo del documento.</p>
+
+<p>{{EmbedYouTube("NG5daffvVZM")}}</p>
+
+<p>Puedes acceder a la misma funcionalidad utilizando el menú desplegable "Crear nuevo nodo".</p>
+
+<p>Ten en cuenta que este botón está desactivado si el tipo de elemento seleccionado es tal que añadir un último hijo no produciría ningún efecto (por ejemplo, si es un elemento <code><a href="/es/docs/Web/HTML/Element/html">&lt;html&gt;</a></code> o <code><a href="/es/docs/Web/HTML/Element/iframe">&lt;iframe&gt;</a></code>). Sin embargo, está habilitado en lugares donde no es válido insertar <code>&lt;div&gt;</code>, como <code><a href="/es/docs/Web/HTML/Element/style">&lt;style&gt;</a></code> o <code><a href="/es/docs/Web/HTML/Element/link">&lt;link&gt;</a></code>. En estos casos, el elemento se añade como texto.</p>
diff --git a/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html
new file mode 100644
index 0000000000..430c2e32dd
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html
@@ -0,0 +1,228 @@
+---
+title: Examinar y editar CSS
+slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS
+---
+<p>Puedes examinar y editar CSS en el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a> del Inspector.</p>
+
+<h2 id="Examinar_reglas_CSS">Examinar reglas CSS</h2>
+
+<p>La <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Vista reglas</a> muestra la lista de todas las reglas que se aplican al elemento seleccionado, ordenadas de más específicas a menos específicas:</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>La vista Reglas muestra la lista de estilos aplicados por el navegador o <a href="/es/docs/Web/CSS/Cascade">estilos de agente de usuario</a> si la opción para hacerlo está seleccionada en la <a href="/es/docs/Tools/Tools_Toolbox#Settings_2">configuración de las herramienta del desarrollador</a>. Ten en cuenta que esta configuración es independiente de la casilla de verificación "Estilos de navegador" de la <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Vista calculado</a>.</p>
+
+<p>La vista Reglas muestra todos los estilos creados, incluidos los estilos que no se admiten o que no son válidos. Esto puede ayudarte a entender por qué ciertos estilos no se están aplicando:</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="Visualización_de_Reglas">Visualización de Reglas</h3>
+
+<p>Muestra cada regla como en una hoja de estilo, con una lista de selectores seguida de una lista de declaraciones con forma <code>property:value;</code>.</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>Resaltar elementos coincidentes: </em>: al lado del selector hay un icono de target: haz clic en él para resaltar todos los nodos de la página que coincidan con este selector.</li>
+ <li><em>Declaración anulada:</em>: las declaraciones anuladas por normas posteriores se tachan. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">declaraciones anuladas</a>.</li>
+ <li><em>Mostrar cascada:</em>: junto a las declaraciones anuladas hay una lupa: haz clic aquí para ver la cascada de reglas que contienen la propiedad anulada. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">declaraciones anuladas</a>.</li>
+ <li><em>Activar/desactivar:</em>: si pasas el cursor sobre una declaración, aparece una casilla de selección junto a ella: se puede utilizar para activar o desactivar la declaración.</li>
+ <li><em>Nombre de archivo y número de línea:</em>: en el lado derecho hay un enlace a la regla. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">enlace al archivo CSS</a>.</li>
+</ul>
+
+<p>Desde Firefox 52, si el elemento tiene una declaración <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/display">display: grid</a></code>, entonces aparece a su lado un icono grid así: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">. Haz clic en ese icono para mostrar la cuadrícula superpuesta en la página, incluidas las líneas de cuadrícula y las pistas. Consulta <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examinar grid layouts</a> para obtener más información al respecto.</p>
+
+<p>Los estilos del agente de usuario se muestran con un fondo diferente, e indican el enlace al nombre de archivo y número de línea contiene el prefijo <code>(agente de usuario)</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="Regla_element">Regla element {}</h3>
+
+<p>La regla <code>element {}</code> que hay al principio de la lista de reglas no es en realidad una regla CSS. Representa las propiedades CSS asignadas al elemento a través de su atributo {{htmlattrxref("style")}}.</p>
+
+<p>A partir de Firefox 52, también se muestra el icono de target:: <img alt="" src="https://mdn.mozillademos.org/files/14520/target-icon.png" style="height: 22px; margin-bottom: -5px; width: 22px;">, que ofrece una forma cómoda de resaltar el elemento seleccionado en la página.</p>
+
+<p>{{EmbedYouTube("bQzOAFvEDco")}}</p>
+
+<h3 id="Reglas_de_filtrado">Reglas de filtrado</h3>
+
+<p>Hay un campo en la parte superior de la vista Reglas, llamado "Filtrar Estilos":</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;"> A medida que escribes:</p>
+
+<ul>
+ <li>Cualquier regla que no contenga la cadena mecanografiada queda oculta.</li>
+ <li>Se resaltan las declaraciones que contengan la cadena mecanografiada.</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;">Para eliminar el filtro haz clic en la "X" al final del cuadro de búsqueda.</p>
+
+<div class="note">
+<p>En la vista Reglas, presionar <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> focaliza el campo de búsqueda. Una vez que has escrito un filtro, puedes presionar <kbd>Esc</kbd> para quitarlo de nuevo.</p>
+</div>
+
+<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p>
+
+<h4 id="Búsqueda_estricta">Búsqueda estricta</h4>
+
+<p>De forma predeterminada, el cuadro de búsqueda resalta todas las declaraciones que contienen cualquier parte de la cadena. Por ejemplo, la búsqueda "color" resaltará declaraciones que contengan <code><a href="/es/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> y <code><a href="/es/docs/Web/CSS/background-color">background-color</a></code> así como <code><a href="/es/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>Si la consulta de búsqueda se encierra entre comillas de este modo: `color` se limita la búsqueda a las coincidencias exactas:</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="Expandir_las_propiedades_shorthand">Expandir las propiedades shorthand</h3>
+
+<p>Las <a href="/es/docs/Web/CSS/Shorthand_properties">propiedades Shorthand</a> (abreviadas) se pueden expandir para mostrar las características correspondientes en forma larga haciendo click en la flecha junto a ellas.</p>
+
+<h3 id="Mostrar_pseudo-elementos">Mostrar pseudo-elementos</h3>
+
+<p>La vista Regla muestra los siguientes <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>, en caso de que se apliquen al elemento seleccionado</p>
+
+<p><code>::after<br>
+ ::backdrop</code><br>
+ <code>::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>Si el elemento seleccionado tiene pseudo-elementos aplicados, se muestran delante del elemento seleccionado pero ocultos por un triángulo:</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>Haciendo clic en el triángulo se muestran:</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>A la derecha del campo Filtrar hay un botón:</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;">Haz clic en el botón y verás tres casillas de verificación que puedes utilizar para establecer las pseudo-clases {{cssxref(":hover")}}, {{cssxref(":active")}} y {{cssxref(":focus")}} para el elemento seleccionado:</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;">También puedes acceder a esta función desde el <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menú contextual emergente</a> de la vista HTML.</p>
+
+<p>Si fijas una de estas pseudoclases para un nodo, aparece un punto naranja en la vista HTML junto a todos los nodos a los que se ha aplicado la pseudoclase:</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="Enlazar_al_archivo_CSS">Enlazar al archivo CSS</h3>
+
+<p>En la parte superior derecha de cada regla, el nombre del archivo fuente y el número de línea se muestran como enlace: al hacer clic en él, se abre el archivo en el <a href="/es/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Editor de estilos</a>.</p>
+
+<p>Puedes copiar la ubicación del archivo fuente: haz clic con el botón derecho del ratón en el enlace y selecciona "Copiar dirección".</p>
+
+<p>El Inspector entiende los mapas de código fuente de CSS. Esto significa que si estás usando un preprocesador CSS que tiene soporte para mapas de código fuente, y has habilitado Activar mapas de código fuente" en Ajustes avanzados de la <a href="/es/docs/Tools_Toolbox#Style_Editor">Configuración del editor de estilos</a>, entonces el enlace te llevará a la fuente original, no al CSS generado. Lee más sobre el soporte de mapas de código fuente CSS en la <a href="/es/docs/Tools/Style_Editor#Source_map_support">Documentación del editor de estilos</a>.</p>
+
+<h3 id="Declaraciones_anuladas">Declaraciones anuladas</h3>
+
+<p>Si una declaración CSS es anulada por alguna otra regla CSS con mayor peso, entonces la declaración se muestra con una línea a través de ella.</p>
+
+<p>Las declaraciones anuladas tienen una lupa al lado. Haz clic en la lupa para filtrar la vista de reglas: mostrará sólo las reglas que se aplican al nodo actual intentando establecer la misma propiedad: es decir, la cascada completa para la propiedad dada.</p>
+
+<p>Esto facilita ver qué regla prevalece sobre la declaración</p>
+
+<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p>
+
+<h2 id="Examinar_CSS_calculado">Examinar CSS calculado</h2>
+
+<p>Para ver todas las reglas CSS que se calculan para el elemento seleccionado cambia a la <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Vista calculado</a>.Esta vista organiza el estilo del elemento por propiedades: se enumeran por orden alfabético todas las propiedades CSS que se han aplicado a este elemento para mostrar el resultado o valor calculado de cada una de las propiedadades CSS para el elemento seleccionado :</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>Puedes usar la tecla <kbd>Tab</kbd> para seleccionarlos moviéndote través de ellos. Desde Firefox 49 en adelante, puedes encontrar más información sobre estas propiedades: si pulsas <kbd>F1</kbd> en una propiedad seleccionada se abrirá su página de referencia MDN</p>
+
+<p>Haciendo clic en la flecha situada junto al nombre de la propiedad (o pulsando <kbd>Enter</kbd> o <kbd>Space</kbd> mientras está seleccionado) se muestra la regla que establece este valor, un enlace al nombre del archivo fuente y el número de línea:</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>De forma predeterminada, esta vista sólo muestra los valores que la página ha definido explícitamente: para ver todos los valores, haz clic en la casilla "Estilos de navegador". Puedes pulsar <kbd>Tab</kbd> para moverte a través de los nombres de archivo/números de línea; y pulsando <kbd>Enter</kbd>/<kbd>Return</kbd> Enter/Return se abrirá el archivo en ese punto en el <a href="/es/docs/Tools/Style_Editor">Editor de estilos</a>.</p>
+
+<p>Al escribir en el cuadro de búsqueda se realiza un filtrado activo de la lista, por lo que, por ejemplo, si sólo quieres ver opciones relacionadas con las fuentes, puedes escribir "font" en el cuadro de búsqueda, y sólo aparecerán las propiedades que contengan "font" en el nombre. También puedes buscar por el valor de las propiedades: para encontrar la regla responsable de seleccionar la fuente "Lucida Grande" , escribe "Lucida Grande" en el cuadro de búsqueda.</p>
+
+<div class="note">
+<p>En la vista calculado, puedes presionar <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> para enfocar el campo de búsqueda. Una vez que hayas escrito un filtro, presiona <kbd>Esc</kbd> para quitarlo.</p>
+</div>
+
+<h2 id="Editar_reglas">Editar reglas</h2>
+
+<p>Si haces clic en una declaración o en un selector en la vista Reglas, puedes editarla y ver los resultados inmediatamente. También puedes pulsar <kbd>Tab</kbd> para desplazarte por las diferentes propiedades y valores existentes, y empezar a editarlos pulsando <kbd>Enter</kbd> o <kbd>Space</kbd>. Para añadir una nueva declaración a una regla, haz clic en la última línea de la regla (la línea ocupada por la llave de cierre).</p>
+
+<p>A medida que comiences a escribir un nombre de propiedad, verás una lista de sugerencias autocompletadas. Presiona <kbd>Tab</kbd> para aceptar la sugerencia actual o <kbd>Up</kbd> y <kbd>Down</kbd> para desplazarte por la lista. La opción predeterminada es la propiedad más común que comienza con las letras que has escrito. Por ejemplo, aquí el usuario ha escrito "c" y la opción por defecto es "color":</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p>
+
+<p>Si al editar una propiedad introduces un valor no válido o escribes un nombre de propiedad desconocido, aparece un icono de alerta amarillo junto a la declaración.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Desde Firefox 60 en adelante, los <a href="https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_variables"> nombres de variables CSS</a> también se completarán automáticamente (ver {{bug(1422635)}}). Si escribes <code>var(-</code> var(- seguido de un guión (<code>-</code>) como valor de una propiedad, cualquier variable que hayas declarado en tu CSS aparecerá en la lista de autocompletado.<br>
+ <br>
+ <img alt="" src="https://mdn.mozillademos.org/files/15813/css-variable-autocomplete.png" style="display: block; margin: 0 auto;"></p>
+</div>
+
+<p>Cualquier cambio que hagas es temporal: recargar la página restaurará el estilo original.</p>
+
+<p>Puedes utilizar las teclas <kbd>Up</kbd> , <kbd>Down</kbd> y <kbd>Page up</kbd> , <kbd>Page down</kbd> (junto con otras) para aumentar/disminuir las reglas numéricas durante la edición:</p>
+
+<ul>
+ <li>La flecha <kbd>Up</kbd> incrementa los valores por 1 — "1px" pasará a "2px", por ejemplo.</li>
+ <li><kbd>Shift</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> incrementa los valores por 10.</li>
+ <li><kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> incrementa los valores por 0.1. Ten en cuenta que en Firefox 60 esta combinación cambia a <kbd>Ctrl</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> en Linux y Windows para evitar conflictos con los atajos predeterminados del Sistema Operativo (ver {{bug("1413314")}}). En Mac se mantiene— <kbd>Ctrl</kbd> + <kbd>Up</kbd> ya que en macOS es el atajo predeterminado para mostrar el Control de Misión.</li>
+ <li><kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> incrementa los valores por 100.</li>
+</ul>
+
+<p>Los cambios que realices en la vista Reglas se reflejan en el <a href="/es/docs/Tools/Style_Editor">Editor de estilos</a>, y viceversa</p>
+
+<p>A partir de Firefox 52, si estás editando CSS, el menú contextual que verás es el normal para trabajar con texto editable:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p>
+
+<h2 id="Añadir_reglas">Añadir reglas</h2>
+
+<p>Puedes añadir nuevas reglas en la vista reglas. Simplemente haz clic derecho para que se muestre el menú contextual y selecciona "Añadir regla nueva": esto añadirá una regla cuyo selector coincide con el nodo actualmente seleccionado.</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>También hay un botón que te posibilita hacer lo mismo:</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="Copiar_reglas">Copiar reglas</h2>
+
+<p>Para copiar reglas o partes de ellas usa uno de los items del siguiente menú contextual en la vista reglas</p>
+
+<ul>
+ <li>Copiar regla</li>
+ <li>Copiar selector</li>
+ <li>Copiar declaración de propiedad</li>
+ <li>Copiar nombre de la propiedad</li>
+ <li>Copiar valor de la propiedad</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="Ver_también">Ver también</h2>
+
+<ul>
+ <li>Lista completa de los <a href="/es/docs/Tools/Page_Inspector/Keyboard_shortcuts">Atajos de teclado</a>.</li>
+ <li>El Inspector también tiene herramientas especializadas para trabajar con algunas características CSS como colores, fuentes y animaciones. Para leer más <a href="/es/docs/Tools/Page_Inspector">Guías how to</a>.</li>
+</ul>
diff --git a/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html
new file mode 100644
index 0000000000..c312f24c21
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html
@@ -0,0 +1,131 @@
+---
+title: 'Inspector de CSS Grid: examina la rejilla del layout'
+slug: Tools/Page_Inspector/How_to/Examine_grid_layouts
+translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts
+---
+<div>{{ToolsSidebar}}</div>
+
+<p class="summary">El <strong>Grid Inspector</strong> te permite examinar los <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layouts</a> usando las Firefox DevTools, descubrir las rejillas presentes en una página, examinarlas y modificarlas, depurando los problemas de layout, y más.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: Los ejemplos mostrados en los screenshots aparecen el los articulos de Jen Simmons  <a href="http://labs.jensimmons.com/2016/examples/futurismo-1.html">Futurismo</a> y <a href="http://labs.jensimmons.com/2017/01-003.html">Variations on a grid</a>, y un <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Naming_a_grid_area">live llamado grid area example</a> de Rachel Andrew.</p>
+</div>
+
+<h2 id="Descubriendo_CSS_grids">Descubriendo CSS grids</h2>
+
+<p>Cuando un elemento HTML de tu página tiene <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> aplicado, un numero de nuevas opciones estan disponibles en las DevTools para proveer un acceso sencillo a las caracteristicas de la rejilla.</p>
+
+<h3 id="En_el_panel_HTML">En el panel HTML</h3>
+
+<p>En el <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a>, los elementos pertenecientes a la rejilla tienen un marker "grid" junto a ellos.</p>
+
+<p><img alt="The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it" src="https://mdn.mozillademos.org/files/15977/html-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 400px;"></p>
+
+<h3 id="En_el_panel_CSS">En el panel CSS</h3>
+
+<p>En el <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a> veremos las reglas, cualquier instancia con <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> declarado tendra un icono de rejilla como este: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">.</p>
+
+<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/15978/css-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 399px; margin: 0px auto; width: 1146px;"></p>
+
+<p>Al dar click en el icono la rejilla sera visible, y aparecera sobre los elemento, mostrando la posicion, lineas y tracks:</p>
+
+<p><img alt="A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid " src="https://mdn.mozillademos.org/files/15979/grid-overlay.png" style="border-style: solid; border-width: 1px; display: block; height: 1383px; margin: 0px auto; width: 1842px;"></p>
+
+<p>La rejilla permanecera aun cuando selecciones otro elemento, puedes editar las propiedades CSS relacionadas y ver como esta es afectada.</p>
+
+<h3 id="La_vista_de_rejilla_en_la_seccion_disposición">La vista de rejilla en la seccion disposición</h3>
+
+<p>Cuando grid esta incluido en la pagina, el panel CSS en la seccion disposición incluye una vista de "Rejilla" esta sección incluye algunas opciones para ver las rejillas. Encontraras mas información acontinuación.</p>
+
+<div class="note">
+<p><strong>Nota</strong>: la seccion disposición se encuentra abajo en el panel derecho del inspector de elementos. Con lo anterior y con los siguientes screenshots deberias hacerte una idea de donde encontrarlo.</p>
+</div>
+
+<h2 id="Opciones_de_Rejilla">Opciones de Rejilla</h2>
+
+<p>La seccion Rejilla de la vista de disposicion; luce algo así:</p>
+
+<p><img alt="The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed" src="https://mdn.mozillademos.org/files/15980/grid-options.png" style="border-style: solid; border-width: 1px; display: block; height: 408px; margin: 0px auto; width: 500px;"></p>
+
+<p>Encontraras algunas opciones dentro de este:</p>
+
+<ul>
+ <li>Superponer Rejilla: cuenta con un checkbox para cada una de las rejillas en la pagina, con varias opciones. permitiendo la vista sobrepuesta de estas, asi como activar o desactivar cada una de estas.</li>
+ <li>Configuracion de la rejilla :
+  <ul>
+   <li>Mostrar números de línea: marca cada linea mostrada en la parte superior e inferior.</li>
+   <li>Mostrar nombres de áreas: mostrara los nombres de las areas, en el caso de que la rejilla cuente con estas (por defecto encima, donde es relevante).</li>
+   <li>Extender líneas infinitamente: por defecto, las lineas de la rejilla/tracks son visibles solamente dentro del elemento con la propiedad <code>display: grid</code> en él; cuando activamos esta opción, las lineas de la rejilla se extenderan hasta el limite del viewport en ambos ejes</li>
+  </ul>
+ </li>
+ <li>Mini vista de Rejilla: Una vista miniatura de la rejilla activa.</li>
+</ul>
+
+<div class="note">
+<p><strong>Nota</strong>: Tus preferencias de rejilla asi como al sobreposicion, color y configuracion de pantalla persistiran atravez de las paginas cargadas por separado.</p>
+</div>
+
+<p>Examinemos estas carácteristicas más a detalle.</p>
+
+<h3 id="Superponer_Rejilla">Superponer Rejilla</h3>
+
+<p>Cada rejilla presente en tu pagina tiene su propia entrada en la sección "Superponer Rejilla":</p>
+
+<p><img alt="An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more." src="https://mdn.mozillademos.org/files/15981/overlay-grid-entry.png" style="border-style: solid; border-width: 1px; display: block; height: 37px; margin: 0px auto; width: 300px;"></p>
+
+<p>Cada entrada consiste en (de izquierda a derecha):</p>
+
+<ul>
+ <li>Un checkbox que te permite activar y desactivar la sobreposicion de la rejilla. ten en cuenta que solo puedes ver una rejilla a la vez.</li>
+ <li>Una etiqueta que representa la rejilla, constando de un selector de un elemento HTML al cual le fue aplicada la propiedad rejilla. al dar click sobre esta tambien puedes activar o desactivar la superposición.</li>
+ <li>Un icono de objetivo que al momendo de dar click sobre él seleccionaras el elemento al que la rejilla esta asociada, dentro del panel HTML.</li>
+ <li>Un icono selector de color que te permitira cambiar el color primario de la rejilla superpuesta. Esto es sumamente util para seleccionar colores  asi podras ver facilmente las secciones de tu rejilla.</li>
+</ul>
+
+<h3 id="Mostrar_números_de_línea">Mostrar números de línea</h3>
+
+<p>Por defecto, los números de linea se muestran sobre la rejilla superpuesta.</p>
+
+<p><img alt="A CSS grid overlay with grid line numbers displayed" src="https://mdn.mozillademos.org/files/15982/line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 582px; margin: 0px auto; width: 600px;"></p>
+
+<p>Al desactivarla opcion "Mostrar números de línea" lucira así.</p>
+
+<p><img alt="A CSS grid overlay with grid line numbers not displayed" src="https://mdn.mozillademos.org/files/15983/no-line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 600px;"></p>
+
+<h3 id="Mostrar_nombres_de_áreas">Mostrar nombres de áreas</h3>
+
+<p>En una rejilla con areas nombradas, los nombres de area se mostraran superpuestos sobre la rejilla.</p>
+
+<p><img alt="A CSS grid overlay with named area names displayed" src="https://mdn.mozillademos.org/files/15984/grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 777px; margin: 0px auto; width: 1396px;"></p>
+
+<p>Al desactivar la opción "Mostrar nombres de áreas" lucira así.</p>
+
+<p><img alt="A CSS grid overlay with named area names not displayed" src="https://mdn.mozillademos.org/files/15990/no-grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 788px; margin: 0px auto; width: 1400px;"></p>
+
+<h3 id="Extender_líneas_infinitamente">Extender líneas infinitamente</h3>
+
+<p>Por defecto, las lineas de rejilla/tracks se muestran solomente sobre el elemento con <code>display: grid</code>.</p>
+
+<p><img alt="A CSS grid overlay with grid lines not extended infinitely" src="https://mdn.mozillademos.org/files/15987/no-extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 499px; margin: 0px auto; width: 1000px;"></p>
+
+<p>Cuando activas la opcion "Extender líneas infinitamente", las lineas de la rejilla se extienden hasta el limite del viewport en ambos ejes.</p>
+
+<p><img alt="A CSS grid overlay with grid lines extended infinitely" src="https://mdn.mozillademos.org/files/15986/extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 501px; margin: 0px auto; width: 1000px;"></p>
+
+<h3 id="Mini_vista_de_Rejilla">Mini vista de Rejilla</h3>
+
+<p>Muestra una version miniatura de la rejilla activa, con la misma proporcion que la real.</p>
+
+<p><img alt="A mini CSS grid view from the Firefox DevTools" src="https://mdn.mozillademos.org/files/15988/mini-grid-view.png" style="border-style: solid; border-width: 1px; display: block; height: 246px; margin: 0px auto; width: 600px;"></p>
+
+<p>posicionandote sobre cada una de las diferentes areas de la mini rejilla lograras que su equivalente en la rejilla superpuesta sea iluminada tambien, asi como mostrara tambien un tooltip con informacion como el número de colomna, fila y las dimenciones del area.</p>
+
+<p><img alt="A firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page." src="https://mdn.mozillademos.org/files/15989/mini-grid-highlight.png" style="border-style: solid; border-width: 1px; display: block; height: 793px; margin: 0px auto; width: 1200px;"></p>
+
+<h2 id="Mira_tambien">Mira tambien</h2>
+
+<ul>
+ <li><a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> — algunos ejercicios interesantes de rejillas.</li>
+ <li><a href="https://gridbyexample.com/">Grid by Example</a> — estudiando los recursos de CSS Grid de Rachel Andrew.</li>
+ <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> — MDN CSS Grid Layout rreferencias y tutoriales.</li>
+</ul>
diff --git a/files/es/tools/page_inspector/how_to/index.html b/files/es/tools/page_inspector/how_to/index.html
new file mode 100644
index 0000000000..f35f9aec5c
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/index.html
@@ -0,0 +1,13 @@
+---
+title: How to
+slug: Tools/Page_Inspector/How_to
+tags:
+  - NeedsTranslation
+  - TopicStub
+translation_of: Tools/Page_Inspector/How_to
+---
+<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>
+
+<p> </p>
diff --git a/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html
new file mode 100644
index 0000000000..f4ab42dabe
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html
@@ -0,0 +1,26 @@
+---
+title: Inspeccionar y seleccionar colores
+slug: Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors
+---
+<p>En la <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Vista reglas</a> del panel CSS, si una regla contiene un valor de color, verás una muestra del color junto al valor:</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>Si haces clic en la muestra de color, verás una ventana emergente que te permite cambiar el color:</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>El selector de color incluye un icono de cuentagotas: al hacer clic en este icono, podrás utilizar el cuentagotas para seleccionar un nuevo color para el elemento:</p>
+
+<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p>
+
+<p>A partir de Firefox 40, al hacer clic en la muestra de color mientras mantienes pulsada la tecla <kbd>Shift</kbd>, cambiará el formato de color: hexadecimal, HSL y RGB</p>
+
+<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p>
+
+<p>Firefox 53 y versiones más recientes son compatibles con los valores de <a href="https://drafts.csswg.org/css-color/">CSS color level 4</a>.</p>
diff --git a/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html
new file mode 100644
index 0000000000..bd926e4bed
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html
@@ -0,0 +1,22 @@
+---
+title: Reposicionando elementos en la página
+slug: Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina
+translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page
+---
+<div class="geckoVersionNote">Novedades en Firefox 48</div>
+
+<p>A partir de Firefox 48 puede mover elementos con <code>position: absolute</code> arrastrándolos alrededor de la página.</p>
+
+<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p>
+
+<p>Si un elemento tiene su propiedad  <code>{{cssxref("position")}}</code> seteada en <code>absolute</code>, <code>relative</code> o <code>fixed</code> y una o más de las propiedades {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} , la <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Vista del modelo de caja</a> muestra un botón:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p>
+
+<p>Si hace click en ese botón, aparecen dos identificadores junto al elemento:</p>
+
+<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p>
+
+<p>Puede utilizar estos identificadores para arrastrar el elemento alrededor de la página.</p>
+
+<p>Si el elemento está posicionado de forma absoluta, se muestran líneas discontinuas que representan el origen de desplazamiento. Para los elementos relativamente posicionados, las líneas discontinuas indican la posición original del nodo. Los desplazamientos están indicados por una línea y una descripción de herramientas para cada lado.</p>
diff --git a/files/es/tools/page_inspector/how_to/select_an_element/index.html b/files/es/tools/page_inspector/how_to/select_an_element/index.html
new file mode 100644
index 0000000000..617fb05afd
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/select_an_element/index.html
@@ -0,0 +1,36 @@
+---
+title: Seleccionar un elemento
+slug: Tools/Page_Inspector/How_to/Select_an_element
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/How_to/Select_an_element
+---
+<p>Un <em>elemento seleccionado</em> es el elemento de la página en la que el Inspector está actualmente enfocado. El elemento seleccionado se ve en el  <a href="/es/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a> y su CSS en el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a>.</p>
+
+<p>Un <em>elemento destacado</em> es el elemento que se dibuja sobre la página con una representación gráfica del modelo de caja, y un tooltip que contiene su etiqueta y tamaño: </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p>
+
+<h2 id="Con_el_menú_contextual">Con el menú contextual</h2>
+
+<p>Para abrir el Inspector Selecciona un elemento en la página,y haz clic derecho para que el menú contextual aparezca sobre el elemento de la página. Selecciona "Inspeccionar elemento" y Se abrirá el Inspector inmediatamente.</p>
+
+<p>{{EmbedYouTube("db83PCnPiNM")}}</p>
+
+<h2 id="Con_el_panel_HTML">Con el panel HTML</h2>
+
+<p>Si tienes el inspector abierto, al mover el ratón sobre de los elementos listados en el panel HTML, verás que en la página se destacan los elementos correspondientes. Haz clic en un elemento del panel HTML para seleccionarlo:/p&gt;
+
+</p><p>{{EmbedYouTube("EojH_vCMesI")}}</p>
+
+<p>También puedes utilizar las teclas de flecha para desplazarte por el DOM con el teclado: <kbd>flecha derecha</kbd> para expandir un elemento y acceder a los elementos descendientes;<br> <kbd>flecha izquierda</kbd> para contraer un elemento o subir al elemento ascendente; <br><kbd>flecha arriba</kbd> para recorrer hacia arriba las líneas del panel HTML <br> <kbd>flecha abajo</kbd> para recorrer hacia abajo las líneas del panel HTML.</p>
+
+<h2 id="Con_el_boton_seccionar_elemento">Con el boton seccionar elemento</h2>
+
+<p>Para seleccionar un elemento en la propia página, activa el "selector de elementos" haciendo clic en su icono <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> (también llamado <em>Selector de nodos</em> o <em>Node picker</em>). Entonces segun muevas el ratón en la página, se destacará el elemento que esté bajo ratón. Haz clic en el elemento para seleccionarlo:</p>
+
+<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p>
+
+<p>A partir de Firefox 52, si pulsas <kbd>Shift</kbd> + <kbd>Click</kbd> en un elemento seleccionas el elemento permitiendo que el selector de elementos permanezca activo. Así es posible ver las reglas del elemento en el panel CSS y al mismo tiempo no impide que puedas seleccionar otro elemento en la página .</p>
diff --git a/files/es/tools/page_inspector/how_to/work_with_animations/index.html b/files/es/tools/page_inspector/how_to/work_with_animations/index.html
new file mode 100644
index 0000000000..2ad2d5afa1
--- /dev/null
+++ b/files/es/tools/page_inspector/how_to/work_with_animations/index.html
@@ -0,0 +1,112 @@
+---
+title: Trabajar con animaciones
+slug: Tools/Page_Inspector/How_to/Work_with_animations
+tags:
+  - Guia(2)
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/How_to/Work_with_animations
+---
+<p>Este artículo cubre tres herramientas que puede usar para visualizar y editar animaciones:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">El inspector de animación</a></li>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">Editor de @keyframes</a></li>
+ <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">Editor de funciones de tiempo</a></li>
+</ul>
+
+<h2 id="Inspector_de_Animación">Inspector de Animación</h2>
+
+<div class="note">
+<p>Aunque esta herramienta se introdujo en Forefox 41, el interface de usuario se rediseñó en Forefox 43. This article describes the animation inspector as it appears in Firefox 43 and subsequent releases. If you want to see what the animation inspector looks like in Firefox 41 and 42, see <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>Desde Firefox 41, el Inspector de Página incluye una <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">vista extra etiquetada "Animaciones"</a>.</p>
+
+<p>Esta vista muestra las transiciones CSS y las animaciones CSS sincronizadas en la linea de tiempo, puede usar el widget dragueable para moverse a cualquier punto en la linea de tiempo y ver la página en ese punto.</p>
+
+<p>To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. If you click an icon, the icon enlarges and changes to color, and the name of the channel appears. Click the icon again to reverse the effect. These animations are made by applying transitions to several CSS properties.</p>
+
+<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p>
+
+<p>Let's use the animation inspector to see what's going on in this example.</p>
+
+<ul>
+ <li>Using Firefox 43 or later, right-click one of the icons and select "Inspect Element".</li>
+ <li>You'll probably also want to adjust the selected node up a level, to the <code>&lt;div class="channel"&gt;</code> node.</li>
+ <li>Switch over to the "Animations" tab.</li>
+</ul>
+
+<p>{{EmbedYouTube("U2eJYacf5XY")}}</p>
+
+<p>Now play the animation:</p>
+
+<p>{{EmbedYouTube("CwXXXEllB3o")}}</p>
+
+<p>Let's take a closer look at the contents of the animation inspector here:</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>It shows a synchronized timeline for every CSS property transition involved in the animation. The timeline starts at the start of the first transition, and ends at the end of the last transition, and is labeled with markers every 100 milliseconds (this depends on the time scale of the animations currently displayed). You can see that the example above takes 735 milliseconds to run.</p>
+
+<p>Each animation or transition is shown as a horizontal bar laid across the timeline:</p>
+
+<ul>
+ <li>The bar is blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property, and orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used.</li>
+ <li>From Firefox 44 onwards, the bar contains a lightning bolt icon (<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</li>
+ <li>The bar is labeled with the name of the property being animated or the name of the <code>@keyframes</code> animation.</li>
+ <li>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar.</li>
+ <li>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition.</li>
+</ul>
+
+<p>To the left of each bar is a selector for the node that the animation applies to. If you hover over this selector, the node is highlighted in the page. Click the selector to select the node in the inspector.</p>
+
+<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). From Firefox 44, clicking this icon will lock the highlighter on the element.</p>
+
+<p>Applying all this to our example, we can see that:</p>
+
+<ul>
+ <li>The animation involved two elements, <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the channel name "Firefox Nightly" and the channel icon: {{EmbedYouTube("EOUjHt0V1No")}}</li>
+ <li>Each element had two properties animated:
+  <ul>
+   <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> for the channel name</li>
+   <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> for the icon.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li>
+  </ul>
+ </li>
+ <li>The <code>filter</code> property had a delay of 0.25 seconds applied to it.</li>
+ <li>The <code>transform</code> property transition ends after 0.5 seconds.</li>
+ <li>The <code>transform</code> property was animated on the compositor thread.</li>
+</ul>
+
+<h3 id="Animation_playback">Animation playback</h3>
+
+<p>At the top of the animation inspector:</p>
+
+<ul>
+ <li>there are buttons to play/pause and rewind the animation (new in Firefox 44)</li>
+ <li>the current time in the animation is displayed (new in Firefox 44).</li>
+</ul>
+
+<p>Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:</p>
+
+<p>{{EmbedYouTube("1hqNaMsB48g")}}</p>
+
+<h2 id="Edit_keyframes">Edit @keyframes</h2>
+
+<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p>
+
+<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p>
+
+<h2 id="Edit_timing_functions">Edit timing functions</h2>
+
+<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p>
+
+<p>Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p>
+
+<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p>
+
+<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p>
+
+<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p>
+
+<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p>
diff --git a/files/es/tools/page_inspector/index.html b/files/es/tools/page_inspector/index.html
new file mode 100644
index 0000000000..4ffddc225d
--- /dev/null
+++ b/files/es/tools/page_inspector/index.html
@@ -0,0 +1,348 @@
+---
+title: Inspector de Página
+slug: Tools/Page_Inspector
+tags:
+  - CSS
+  - DOM
+  - Desarrollo web
+  - Dispositivos
+  - HTML
+  - Herramientas
+  - Herramientas de desarrollo
+  - Hojas de estilo
+  - 'Web Development:Tools'
+translation_of: Tools/Page_Inspector
+---
+<p>Utiliza el Inspector para examinar y modificar el HTML y CSS de una página.</p>
+
+<p>Puedes examinar las páginas cargadas en la copia local de Firefox o en un dispositivo remoto como Firefox para Android. Ver <a href="/es/docs/Tools/Remote_Debugging">depuración remota </a> para aprender a conectar las herramientas de desarrollo a un dispositivo remoto.</p>
+
+<hr>
+<h2 id="Tour_por_la_UI">Tour por la UI</h2>
+
+<p>El <a href="/es/docs/Tools/Page_Inspector/UI_Tour">Tour por la UI</a> es un breve recorrido para aprender a usar el Inspector.</p>
+
+<hr>
+<h2 id="How_to">How to</h2>
+
+<p>Para saber más sobre lo que puedes hacer con el Inspector, lee las siguientes guías:</p>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Abrir el Inspector</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examinar y editar HTML</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examinar y editar el modelo de cajas</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspeccionar y seleccionar colores </a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposicionar elementos en la página</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/View_fonts">Vista tipografía</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualizar transformaciones</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Usar la API del Inspector</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Select_an_element">Seleccionar un elemento</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examinar event listeners</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabajar con animaciones</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Editar filtros CSS</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Editar figuras CSS </a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/View_background_images">Ver background images</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Usar el Inspector desde la Web Console</a></li>
+ <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Referencia">Referencia</h2>
+
+<div class="twocolumns">
+<ul>
+ <li><a href="/es/docs/Tools/Page_Inspector/Keyboard_shortcuts">Atajos de teclado </a></li>
+ <li><a href="/es/docs/Tools/Tools_Toolbox#Inspector">Configuración</a></li>
+</ul>
+</div>
+
+<hr>
+<h2 id="Abriendo_el_Inspector">Abriendo el Inspector</h2>
+
+<p>Hay varias formas de abrir el Inspector:</p>
+
+<ul>
+ <li>Elegir la opción de "Inspector" en el menú "Web Developer" (que es un submenú en el menú "Herramientas" en Mac)</li>
+ <li>Pulse Ctrl-Shift-C (Cmd + Opción + C en Mac OS X y Linux)</li>
+ <li>Haz clic derecho en un elemento de una página web y selecciona "Inspeccionar elemento"</li>
+</ul>
+
+<p>La <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Caja de herramientas</a> aparecerá en la parte inferior de la ventana del navegador, con el Inspector activado.</p>
+
+<p>Si ha invocado el Inspector, haga clic en "Inspeccionar elemento", entonces ya estará seleccionado el elemento y el Inspector se mostrará y funcionará como lo hace en la <a href="#Selecting-Elements" title="#Selecting-Elements">"Selección de elementos"</a> abajo.</p>
+
+<p>De lo contrario, al mover el ratón por la página, el elemento bajo el puntero del ratón se resalta con un borde punteado y una anotación muestra su etiqueta HTML y cualquier atributo de clase o ID. Al mismo tiempo, se muestra la definición de HTML, en el contexto, en el panel de la izquierda del Inspector. Desde Firefox 30, también se muestran las líneas de cuadrícula para el elemento y su modelo de caja:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7459/inspector-opening.png" style="display: block; margin-left: auto; margin-right: auto;">Desde Firefox 32 la anotación también incluye el tamaño del elemento:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7901/inspector-annotation.png" style="display: block; margin-left: auto; margin-right: auto;">Al hacer clic en el elemento lo selecciona: Después de que hayas seleccionado un elemento, el Inspector se mostrará y funcionará como lo hace en la <a href="#Selecting-Elements" title="#Selecting-Elements">"Selección de elementos"</a> abajo.</p>
+
+<h2 id="Selección_de_elementos"><a name="Selecting-Elements">Selección de elementos</a></h2>
+
+<p>Cuando se selecciona un elemento, su marcado se resalta en el panel HTML a la izquierda del Inspector, y el panel de CSS a la derecha del Inspector muestra su información de estilo:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7465/inspector-selected-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>La linea de puntos alrededor del elemento de la página, y la anotación para ello, ya no se muestra una vez que un elemento ha sido seleccionado. Asimismo, el Inspector no está bloqueado en el elemento seleccionado: cuando se mueve el ratón alrededor de la marcación en el panel HTML, la linea punteada se muestra alrededor del elemento correspondiente. Para seleccionar un elemento diferente en la página web, haz clic en el botón "Seleccionar elemento", que aparece en la <a href="/en-US/docs/Tools_Toolbox#Toolbar">Caja de herramientas</a>.</p>
+
+<p>{{EmbedYouTube("zBYEg40ByCM")}}</p>
+
+<h3 id="Firefox_30_en_adelante">Firefox 30 en adelante</h3>
+
+<p>De Firefox 30, el comportamiento de la selección es el mismo que en Firefox 29, pero el inspector también muestra el modelo de caja y  rejilla de líneas para los elementos en la página:</p>
+
+<p>{{EmbedYouTube("y2LcsxE2pR0")}}</p>
+
+<h3 id="Firefox_32_en_adelante">Firefox 32 en adelante</h3>
+
+<p>Tenga en cuenta que a partir de Firefox 32, el botón "Seleccionar elemento" está en el extremo izquierdo de la barra de herramientas:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7905/toolbar-fx32-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="Menú_emergente_del_elemento"><a name="Element_popup_menu">Menú emergente del elemento </a></h2>
+
+<p>Puedes llevar a cabo ciertas tareas comunes en un nodo específico mediante un menú emergente. Para activar este menú contextual haz clic en el elemento, en el <a href="#HTML_pane">panel HTML</a>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7911/inspector-popup-menu.png" style="display: block; height: 380px; margin-left: auto; margin-right: auto; width: 605px;">El menú ofrece opciones para:</p>
+
+<ul>
+ <li><a href="#Editing_HTML">Modificar HTML del elemento.</a></li>
+ <li>Copiar el código HTML interno o externo para el elemento.</li>
+ <li>Copiar un selector CSS que selecciona únicamente el elemento.</li>
+ <li><span id="result_box" lang="es"><span class="hps">Pegar el contenido</span> <span class="hps">del portapapeles en</span> <span class="hps">el nodo</span> <span class="hps">como su</span> <span class="hps">outerHTML</span> <span class="atn hps">(</span><span>esto es nuevo</span> <span class="hps">en Firefox</span> <span class="hps">32</span><span>).</span></span></li>
+ <li><span class="short_text" id="result_box" lang="es"><span class="hps">Eliminar</span> <span class="hps">el elemento.</span></span></li>
+ <li>
+  <div class="almost_half_cell" id="gt-res-content">
+  <div dir="ltr" style="zoom: 1;"><span class="short_text" id="result_box" lang="es"><span class="hps">Establecer el</span></span><a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"> :hover</a>, <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a>, y <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS pseudo-classes.</div>
+  </div>
+ </li>
+</ul>
+
+<h3 id="Copiar_imagen_como_URL_datos"><span class="short_text" id="result_box" lang="es"><span class="hps">Copiar imagen</span> <span class="hps">como URL</span> <span class="hps">datos</span></span></h3>
+
+<div class="almost_half_cell" id="gt-res-content">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Desde</span> <span class="hps">Firefox</span> <span class="hps">29</span> <span class="hps">en adelante</span><span>, si el elemento</span> <span class="hps">seleccionado en ese momento</span> <span class="hps">es una imagen,</span> <span class="hps">a continuación,</span> <span class="hps">en el menú emergente</span> <span class="hps">incluye una opción para</span> <span class="hps">copiar la imagen</span> <span class="hps">en el portapapeles</span> <span class="hps">como una URL</span> <span class="hps">de datos</span><span>:</span></span></div>
+</div>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7011/inspector-copyasdatauri.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 529px;"></p>
+
+<h3 id="Edición_de_HTML"><a name="Editing_HTML">Edición de HTML</a></h3>
+
+<p><span class="short_text" id="result_box" lang="es"><span class="hps">Para editar</span> <span class="hps">un elemento</span> <span class="hps">de</span></span> <a href="/en-US/docs/Web/API/Element.outerHTML">outerHTML</a>, <span id="result_box" lang="es"><span class="hps">activar</span> <span class="hps">el menú emergente del</span> <span class="hps">elemento</span> <span class="atn hps">y seleccione "</span><span>Editar como</span> <span class="hps">HTML"</span><span>.</span> <span class="hps">Verá</span> <span class="hps">un cuadro de texto</span> <span class="hps">en el panel</span> <span class="hps">HTML</span></span>:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7451/inspector-editHTML.png" style="display: block; height: 269px; margin-left: auto; margin-right: auto; width: 540px;"><span id="result_box" lang="es"><span class="hps">Puedes agregar cualquier</span> <span class="hps">código HTML</span> <span class="hps">aquí</span><span>: cambiar</span> <span class="hps">la etiqueta del elemento </span><span class="alt-edited">cambiando</span> <span class="hps">los elementos existentes</span><span>,</span> <span class="hps">o añadiendo otros nuevos</span><span>.</span> <span class="hps">Una vez que</span> <span class="hps">se hace clic</span> <span class="hps">fuera de la caja</span><span>, los cambios se</span> <span class="hps">aplican a la página</span></span>.</p>
+
+<h2 id="Panel_de_HTML"><a name="HTML_pane">Panel de HTML</a></h2>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7455/inspector-html-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"><span id="result_box" lang="es"><span class="hps">El panel de</span> <span class="hps">HTML, que</span> <span class="hps">muestra</span> <span class="hps">el HTML de</span> <span class="hps">la página como</span> <span class="hps">un árbol.</span> <span class="hps">Justo a la izquierda</span> <span class="hps">de cada</span> <span class="hps">nodo es</span> <span class="hps">una flecha</span><span>:</span> <span class="hps">Haz clic en la</span> <span class="hps">flecha para expandir</span> <span class="hps">el nodo.</span></span></p>
+
+<p><span id="result_box" lang="es"><span class="hps">Puedes editar el</span> <span class="hps">HTML -</span> <span class="hps">etiquetas</span><span>, atributos y</span> <span class="hps">contenido -</span> <span class="hps">directamente</span> <span class="hps">en este panel</span><span>:</span> <span class="hps">Haz clic en el</span> <span class="hps">elemento</span> <span class="hps">que deseas editar</span><span>,</span> <span class="hps">cambiar,</span> <span class="hps">y pulsa Enter</span> <span class="hps">para ver</span> <span class="hps">los</span> <span class="hps">cambios reflejados</span> <span class="hps">inmediatamente</span></span>.</p>
+
+<p><span id="result_box" lang="es"><span>Haciendo click en el contenido de</span><span> un</span> <span>elemento se muestra</span> <span>un</span></span> <a href="#Element_popup_menu">menu emergente para trabajar con ese elemento..</a><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector#Element_popup_menu">.</a></p>
+
+<p><span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>31</span> <span>en adelante</span><span>,</span> <span>si se</span> <span>mantiene pulsada la tecla</span> <span>Alt</span> <span>mientras se hace clic</span> <span>en la flecha</span><span>, se expande</span> <span>el nodo y</span> <span>todos</span> <span>los</span> <span>nodos</span> <span>por debajo de ella</span><span>.</span></span></p>
+
+<p> <span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>32</span> <span>en adelante</span><span>, los nodos</span> <span>que están</span> <span>ocultos usando  </span></span><a href="/en-US/docs/Web/CSS/display">display:none</a> se muestran descoloridos.</p>
+
+<h3 id="Barra_de_herramientas_del_panel_HTML"><span class="short_text" id="result_box" lang="es"><span>Barra de herramientas</span> <span>del panel</span> <span>HTML</span></span></h3>
+
+<p>Encima del panel , hay una barra de herramientas dedicada, dividida en dos secciones.</p>
+
+<ul>
+ <li><span id="result_box" lang="es"> <span>HTML Breadcrumbs</span><span>:</span> <span>Este muestra la</span> <span>jerarquía completa</span> <span>a través del</span> <span>documento para la</span> <span>rama que contiene</span> <span>el elemento</span> <span>seleccionado.</span> <span>Si se</span> <span>mantiene pulsado el botón</span> sobre <span>uno de</span> <span>los</span> <span>elementos en</span> <span>la barra</span><span>,</span> <span>aparece un menú emergente</span> <span>que le permite seleccionar</span> <span>uno de</span> <span>los hermanos de</span> <span>ese elemento</span><span>.</span> <span>Al hacer clic en</span> <span>los</span> <span>pequeños</span> <span>iconos de flecha</span> <span>de los extremos</span> <span>izquierdo y derecho de</span> <span>la barra</span>, <span>se desplazará</span> <span>la barra</span> <span>si es</span> <span>más ancha que el</span> <span>espacio disponible</span><span>.</span></span></li>
+ <li><span id="result_box" lang="es"><span>Search tags</span><span>:</span> <span>Busca etiquetas para la página que escribes</span><span>.</span> <span>Al pulsar</span> <span>"Enter</span><span>" aparece lo que ha encontrado</span><span> a continuación.</span></span></li>
+</ul>
+
+<h2 id="Panel_CSS">Panel CSS</h2>
+
+<p><span id="result_box" lang="es"><span>El panel de</span> <span>CSS</span> <span>muestra la información</span> <span>acerca de los</span> <span>estilos aplicados</span> <span>al elemento</span> <span>actualmente seleccionado.</span> <span>Hay cuatro</span> <span>puntos de vista</span> <span>diferentes:</span> <span>"</span><span>Reglas</span><span>"</span><span>,</span> <span>"</span><span>computarizada</span><span>"</span><span>,</span> <span>"</span><span>Fuentes</span><span>"</span> <span>y</span> <span>"</span><span>modelo de caja</span><span>"</span><span>.</span> <span>Se puede cambiar entre</span> <span>ellas utilizando</span> <span>la barra de herramientas</span> <span>en la parte superior</span> <span>del</span> <span>panel</span><span>:</span></span></p>
+
+<h3 id="VISTA_DE_REGLAS"><img alt="" src="https://mdn.mozillademos.org/files/7447/inspector-css-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;">VISTA DE REGLAS</h3>
+
+<div class="g-unit" id="gt-src-c">
+<div id="gt-src-p">
+<div id="gt-src-wrap">
+<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>Esta vista</span> <span>muestra todas las reglas</span> <span>que se aplican</span> <span>al elemento seleccionado</span><span>, ordenadas</span> <span>desde la</span> <span>más</span> <span>específica</span><span>, hasta la menos</span> <span>específica</span><span>:</span></span></div>
+</div>
+</div>
+</div>
+
+<p> </p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7453/inspector-HTML-pane.png" style="display: block; margin-left: auto; margin-right: auto;">La vista de reglas muestra la lista de <a href="/en-US/docs/Web/CSS/Pseudo-elements">seudo-elementos</a>, y las reglas que se aplican.</p>
+
+<p><span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>32</span> <span>en adelante</span><span>,el </span><span>listado de vista de reglas,<a href="/en-US/docs/Web/CSS/Cascade"> usuario-agente-estilos</a></span> <span>(estilos</span> <span>aplicados</span> <span>por el navegador</span><span>)</span> <span>si la opción</span> <span>de hacerlo</span> <span>se revisa</span> <span>en</span> <span>los</span> <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">ajustes de herramientas de desarrollador</a><span>.</span> <span>Tenga en cuenta que</span> <span>este ajuste</span> <span>es independiente de</span> <span>la casilla de verificación</span> <span>"</span><span>Estilos</span> <span>de navegador</span><span>"</span> <span>en la <a href="/en-US/docs/Tools/Page_Inspector#Computed_view">vista computarizada</a></span>.</span></p>
+
+<h4 id="Muestra_de_reglas">Muestra de reglas</h4>
+
+<p>Esta muestra cada regla como una hoja de estilos, con una lista de selectores seguida por una lista de  declaraciones.<code> (property:value;)</code></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5659/inspector-css-rules-singlerule-annotated.png" style="display: block; height: 206px; margin-left: auto; margin-right: auto; width: 544px;"><span id="result_box" lang="es"><span>Las reglas que se</span> han <span>invalidado por normas</span> <span>posteriores</span> <span>están tachadas</span><span>.</span> <span>Si se pasa el ratón</span> <span>sobre</span> <span>una declaración</span><span>,</span> <span>una casilla de verificación</span> <span>aparece junto</span> <span>a ella</span><span>: Se puede usar</span> <span>esta opción para alternar</span> <span>el estado</span>  de la regla de<span> encendido a apagado.</span></span></p>
+
+<p>Usuario-agente-estilos se muestra  en un gris oscuro, y el vínculo y el número de linea contiene el prefijo <code>(user agent)</code>:<br>
+ <img alt="" src="https://mdn.mozillademos.org/files/7909/inspector-rules-view-ua-style.png" style="display: block; height: 121px; margin-left: auto; margin-right: auto; width: 342px;"></p>
+
+<h4 id="Vínculo_al_archivo_CSS">Vínculo al archivo CSS</h4>
+
+<p>En la parte superior derecha de cada regla, el <span class="short_text" id="result_box" lang="es"><span>nombre del archivo</span> de procedencia </span> y el numero de linea se muestran como un vínculo: Haciendo click en este ,se abre el archivo en el  <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor"> Editor de estilos</a>.</p>
+
+<p><span id="result_box" lang="es"><span>El Inspector</span> <span>entiende</span> los <span>mapas de procedencia del</span> <span>CSS</span><span>.</span> <span>Eso significa que si</span> <span>usted está usando</span> <span>un preprocesador</span> <span>CSS que</span> <span>tiene soporte para</span> <span>mapas fuente</span><span>,</span> <span>y</span> <span>ha habilitado</span> <span>el apoyo</span> <span>de mapa de origen</span> <span>en los <a href="/en-US/docs/Tools_Toolbox#Style_Editor">ajustes de editor de estilos</a></span><a href="/en-US/docs/Tools_Toolbox#Style_Editor"> </a><span>,</span> <span>a continuación,</span> <span>el enlace</span> <span>le llevará a</span> <span>la fuente</span> <span>original, no al</span> <span>CSS</span> <span>generado</span></span>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/6947/inspector-css-sourcemap-detail.png" style="display: block; height: 133px; margin-left: auto; margin-right: auto; width: 390px;"></p>
+
+<p>Leer más sobre el soporte para  mapas de procedencia de CSS  en la <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">documentación del editor de estilos</a>.</p>
+
+<h4 id="Muestras_de_color">Muestras de color</h4>
+
+<p>Verás que aparece una muestra de color junto a sus valores numéricos:</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>
+
+<h4 id="Selector_de_color">Selector de color</h4>
+
+<p>Si haces click en la muestra de color, verás aparecer un selector de color, que te permite  cambiarlo:</p>
+
+<h4 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; margin-left: auto; margin-right: auto;"></h4>
+
+<p><span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>31</span> <span>en adelante, el</span> <span>selector de color</span> <span>incluye un</span> <span>icono de cuentagotas</span><span>:</span> <span>Al hacer clic</span> <span>en este icono</span> <span>se  permite utilizar</span> <span>el cuentagotas para seleccionar</span> <span>un nuevo color</span> <span>para el elemento</span> <span>de la</span> <span>página:</span></span></p>
+
+<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p>
+
+<p> </p>
+
+<h4 id="Previsualización_de_la_imagen_de_fondo">Previsualización de la imagen de fondo</h4>
+
+<p><span id="result_box" lang="es"><span>Verás</span> <span>una vista previa de</span> <span>imágenes</span> <span>especificas utilizando</span> <a href="/en-US/docs/Web/CSS/background-image">Imagen de fondo</a> <span>si</span> <span>te detienes sobre</span> <span>la regla:</span></span></p>
+
+<h4 id="Transformar_la_visualización"><img alt="" src="https://mdn.mozillademos.org/files/7457/inspector-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"><span class="short_text" id="result_box" lang="es"><span>Transformar</span> <span>la visualización</span></span></h4>
+
+<p><span id="result_box" lang="es"><span>Si</span> <span>se pasa sobre</span> <span>una propiedad de</span> <a href="/en-US/docs/Web/CSS/transform">transformación</a> <span>en la vista de reglas,</span><span> se obtiene</span> <span>una información sobre herramientas</span><span>, que</span> <span>visualiza</span> <span>la transformación</span>  que <span>se</span> <span>lleva a cabo</span><span>:</span></span></p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7133/transform-tooltip.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Herramienta_informativa_fuente-familia">Herramienta informativa fuente-familia</h4>
+
+<div class="geckoVersionNote">
+<p>Esto es nuevo en Firefox 30.</p>
+</div>
+
+<p>A partir de Firefox 30 en adelante,  si pasas sobre una propiedad <a href="/en-US/docs/Web/CSS/font-family"><code>fuente-familia</code></a>  en la Vista de Reglas, consigues una información con una muestra sobre ese tipo de letra :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7385/font-family-tooltip.png" style="display: block; height: 248px; margin-left: auto; margin-right: auto; width: 359px;"></p>
+
+<h4 id="Edición_de_Reglas">Edición de Reglas</h4>
+
+<p>Si haces click en una declaración,puedes modificar esa propiedad o valor, y ves el resultado inmediatamente. Para añadir una nueva declaración a una regla, haces click sobre la última linea de la regla (la linea ocupada por la llave de cierre). Si introduces un valor no válido para una propiedad mientras lo estás editando, o el nombre de una propiedad desconocida, un icono de alerta amarillo aparece bajo  la declaración.</p>
+
+<p>Cualquier cambio que se realice es temporal: Al volver a cargar la página , se restablecerá el estilo original.</p>
+
+<p><strong>Consejo:</strong> Puedes utilizar las teclas de flecha para aumentar/disminuir reglas numéricas mientras realizas la edición. La flecha hacia arriba cambiará  "1px" a  2px,  y Shift+up/down la aumentará o disminuira en 10. Alt+up/down cambiará los valores en  0.1, y shift+Page up/down  sumará o restará  100 al valor.</p>
+
+<h3 id="Vista_computada">Vista computada</h3>
+
+<p>Esta vista organiza el estilo del elemento por propiedades. En  esta lista se enumeran todas las propiedades CSS que se han aplicado a este elemento en orden alfabétiico: Muestra el valor calculado que cada propiedad CSS tiene para el elemento seleccionado :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7443/inspector-computed-view.png" style="display: block; margin-left: auto; margin-right: auto;">Al hacer click en la flecha junto al nombre de la propiedad ,muestra la regla que establece ese valor , junto a un enlace al nombre del archivo de origen y el número de linea :</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7445/inspector-computed-view-open.png" style="display: block; margin-left: auto; margin-right: auto;">Por defecto, solo muestra los valores que han sido explicitamente establecidos para esa página: Para ver todos los valores haz click en el cuadro de "Estilos del navegador" .</p>
+
+<p>Escribir en el buscador realiza un filtrado directo de la lista , por lo que, por ejemplo,si lo que deseas es ver los ajustes relacionados con la fuente, puedes escribir "fuente" en el buscador, y unicamente las propiedades con "fuente" en el nombre seran listadas. Tambien puedes buscar por los valores de las propiedades: Para encontrar la regla responsable de establecer la fuente "Lucida Grande", escribe eso en el buscador.</p>
+
+<h3 id="Vista_de_fuentes">Vista de fuentes</h3>
+
+<p>Esta muestra todas las fuentes utilizadas por el elemento seleccionado. Tenga en cuenta que muestra el tipo de letra utilizado en su sistema, que puede ser diferente a las especificadas en el css:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7449/inspector-fonts-view.png" style="display: block; margin-left: auto; margin-right: auto;">El texto en la vista de fuentes es  "Abc" por defecto,pero  en realidad  es un area de texto y puede ser editado libremente.</p>
+
+<h3 id="Vista_modelo_de_caja">Vista modelo de caja</h3>
+
+<p>Esta muestra una representación gráfica de como el  <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model" title="/en-US/docs/Web/CSS/box_model">modelo de caja</a> se aplica a este elemento. A partir de  Firefox 30, mientras el ratón está en vista del modelo de caja, las lineas de cuadrícula y el modelo de caja para el elemento de la página son mostradas:<img alt="" src="https://mdn.mozillademos.org/files/7439/inspector-box-model-view.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h4 id="Vista_detallada_del_modelo_de_caja">Vista detallada del modelo de caja</h4>
+
+<p> Antes de Firefox 30, la vista del modelo de caja era el siguiente:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5671/inspector-css-box-model-annotated.png" style="display: block; height: 435px; margin-left: auto; margin-right: auto; width: 680px;"></p>
+
+<ul>
+ <li>En la parte superior izquierda  está el espacio total tomado por el elemento en la página.</li>
+ <li>Los números externos  te dicen el tamaño del margen a cada lado del elemento.</li>
+ <li>Los números en los bordes cuadrados  te dicen cual es la anchura del borde de cada lado.</li>
+ <li>La siguiente capa muestra el tamaño del relleno a cada lado del elemento .</li>
+ <li>Finalmente, en el centro, está el tamaño del contenido del elemento.</li>
+</ul>
+
+<p>A partir de Firefox 30, se ha simplificado:<img alt="" src="https://mdn.mozillademos.org/files/7437/inspector-box-model-detail.png" style="display: block; height: 273px; margin-left: auto; margin-right: auto; width: 328px;"></p>
+
+<ul>
+ <li>La parte superior izquierda todavía muestra el tamaño tomado por el elemento en la página (contenido + relleno).</li>
+ <li>El centro todavía muestra el tamaño del contenido.</li>
+ <li>La parte superior derecha muestra el valor de la propiedad <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position_value"><code>posicion.</code></a></li>
+ <li>Los valores individuales para el relleno, borde, y margen están donde podrías esperar.</li>
+</ul>
+
+<p>A partir de Firefox 31, si haces click sobre uno de los números  en la vista modelo de caja, puedes modificar el valor y ver el resultado en la página inmediatamente.</p>
+
+<h2 id="Utilización_del_Inspector_de_Página_en_la_Consola_Web">Utilización del Inspector de Página en la Consola Web</h2>
+
+<p>El elemento seleccionado en ese momento en el  inspector de página , en su caso, puede ser referenciado en  JavaScript en la Cónsola web utilizando la variable <code>$0</code>.</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/5461/inspector-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<p>Además, a partir de  Firefox 30, si pasas sobre el elemento en la salida de la Cónsola Web ,este es resaltado en la pantalla:</p>
+
+<p><img alt="" src="https://mdn.mozillademos.org/files/7469/inspector-web-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
+
+<h2 id="API_para_desarrolladores"> API para desarrolladores</h2>
+
+<p>Firefox complementos puede acceder a los siguientes objetos desde chrome://browser/content/devtools/inspector/inspector.xul context:</p>
+
+<h3 id="ventana.inspector">ventana.inspector</h3>
+
+<p>Definido en <a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a>. Atributos y funciones:</p>
+
+<ul>
+ <li>.selection - información sobre la selección del inspector:
+  <ul>
+   <li>.isNode() - devuelve verdadero si la selección es el nodo.</li>
+   <li>.node - devuelve el elemento actual desde la página.</li>
+   <li>.window - El objeto seleccionado de la estructura está en la ventana.</li>
+  </ul>
+ </li>
+ <li>.markDirty() - marca la página que ha sido cambiada por el inspector - un aviso será mostrado cuando se abandone la página, ya que los cambios realizados  a traves del inspector, serán incorporados al recargar la página.</li>
+</ul>
+
+<p>Capacidad de enlazar eventos en:</p>
+
+<h4 id="Markup_cargado">  Markup cargado</h4>
+
+<p>LLamado cuando el panel izquierdo ha sido renovado, despues del cambio de página.</p>
+
+<h4 id="Listo">Listo</h4>
+
+<p>LLamado cuando se ha cargado el primer markup.</p>
+
+<h4 id="Seudoclase">Seudoclase</h4>
+
+<p>LLamado despues comando de seudoclase.</p>
+
+<h4 id="Cambio_de_diseño">Cambio de diseño</h4>
+
+<p>"Evento de cambio de baja prioridad para cosas como pintar o cambiar el tamaño."</p>
+
+<h2 id="Atajos_de_teclado">Atajos de teclado</h2>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p>
+
+<h3 id="Atajos_globales">Atajos globales</h3>
+
+<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p>
+
+<p> </p>
+
+<p> </p>
+
+<p> </p>
diff --git a/files/es/tools/page_inspector/ui_tour/index.html b/files/es/tools/page_inspector/ui_tour/index.html
new file mode 100644
index 0000000000..a72918603a
--- /dev/null
+++ b/files/es/tools/page_inspector/ui_tour/index.html
@@ -0,0 +1,98 @@
+---
+title: Tour por la UI
+slug: Tools/Page_Inspector/UI_Tour
+tags:
+  - Guía
+  - Herramientas
+  - Inspector
+translation_of: Tools/Page_Inspector/UI_Tour
+---
+<p>Este artículo es un breve recorrido por las principales secciones de la interfaz de usuario del Inspector de páginas.</p>
+
+<p>Recorre los tres componentes de máximo nivel de la interfaz de usuario del Inspector:</p>
+
+<ul>
+ <li>el botón "Seleccionar elemento</li>
+ <li>el panel HTML</li>
+ <li>el panel CSS</li>
+</ul>
+
+<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;"></p>
+
+<p>Esta guía pretende mantenerse tan breve como sea posible, y lo hace enlazando a otras guías más específicas para profundizar en el trabajo con el Inspector.</p>
+
+<h2 id="Botón_seleccionar_elemento">Botón seleccionar elemento</h2>
+
+<p>El Inspector ofrece información detallada sobre el elemento actualmente seleccionado. El botón Seleccionar Elemento es una de las maneras para seleccionar el elemento que queremos inspeccionar:</p>
+
+<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Este botón forma parte de la <a href="/es/docs/Tools/Tools_Toolbox#Toolbar">barra de herramientas principal</a>, por tanto es accesible desde cualquier herramienta, no sólo desde el Inspector.</p>
+
+<p>Para aprender a seleccionar un elemento ver la guía <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">seleccionar un elemento</a>.</p>
+
+<h2 id="Panel_HTML">Panel HTML</h2>
+
+<p>El Inspector está dividido en dos mitades. La mitad izquierda está ocupada por el panel HTML:</p>
+
+<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p>
+
+<p>Para aprender más sobre la estructura del panel HTML, ver a la guía <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examinar y editar HTML</a>.</p>
+
+<h2 id="Panel_CSS">Panel CSS</h2>
+
+<p>La mitad derecha del Inspector la ocupa el panel CSS:</p>
+
+<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;">The CSS pane is divided into 4 views:</p>
+
+<p>El panel CSS está dividido en 5 vistas:</p>
+
+<ul>
+ <li>Vista reglas</li>
+ <li>Vista Calculado</li>
+ <li>Vista Disposición</li>
+ <li>Vista animaciones</li>
+ <li>Vista tipografía</li>
+</ul>
+
+<p>Para cambiar de vista utiliza las pestañas que hay en la parte superior de la página</p>
+
+<h3 id="Vista_reglas">Vista reglas</h3>
+
+<p>La vista Reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado ordenadas desde la más específica a la menos específica</p>
+
+<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a> para más detalles.</p>
+
+<h3 id="Vista_calculado">Vista calculado</h3>
+
+<p>La vista Calculada muestra el cálculo completo de CSS para el elemento seleccionado, y una representación visual editable del modelo de caja para el elemento:</p>
+
+<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Para aprender más sobre la vista modelo de cajas ver <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examinar y editar el modelo de caja</a>. Ten en cuenta que antes de Firefox 50, la vista modelo de caja no estaba en la pestaña "Vista calculada", sino que tenía su propia pestaña.</p>
+
+<p>Para aprender más sobre las declaraciones CSS listadas en esta vista ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Examinar CSS calculado</a>.</p>
+
+<h3 id="Vista_tipografía">Vista tipografía</h3>
+
+<div class="warning">
+<p>En Firefox 47 <strong>únicamente</strong>, la vista Tipografía está desactivada por defecto. Si quieres verla en Firefox 47, visita <code>about:config</code>, busca la opción <code>devtools.fontinspector.enabled</code>, y seleccionala como <code>true</code>.</p>
+
+<p>Antes y después de Firefox 47, la vista Tipografía está habilitada por defecto.</p>
+</div>
+
+<p>La vista Tipografía muestra todas las fuentes de la página con muestras editables.</p>
+
+<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/View_fonts">Vista tipografía</a> para más detalles.</p>
+
+<h3 id="Vista_animaciones">Vista animaciones</h3>
+
+<p>La Vista Animaciones ofrece los detalles de cualquier animación aplicada al elemento seleccionado, y un controlador para pausarlas</p>
+
+<p> </p>
+
+<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p>
+
+<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabajar con animaciones</a> para más detalles.</p>