path: root/files/es/tools/page_inspector/index.html

---
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>