Exportar (0) Imprimir
Expandir todo

Introducción a las herramientas de desarrollo F12

Este contenido hace referencia a una versión anterior de las herramientas de desarrollo F12. Visita nuestra documentación más actualizada sobre las herramientas F12.

Si no eres un desarrollador de páginas web que buscar comprobar o depurar su propio contenido, aquí tienes algunos vínculos de utilidad.

Estos vínculos son válidos para cualquier versión de Windows Internet Explorer.

Para cerrar las herramientas de desarrollo F12, presiona F12 de nuevo o haz clic en la X de la esquina superior derecha de las herramientas F12.

Para hacer que la barra de herramientas de Internet Explorer permanezca visible, haz clic en Alt, haz clic en Ver, escoge Barras de herramientas, selecciona Barra de menús y, por último, haz clic en Bloquear las barras de herramientas. Encontrarás más información en el artículo de Knowledge Base Faltan la barra de menús y la barra de herramientas en Internet Explorer.

Los menús y los botones de las herramientas F12 proporcionan herramientas de página y visuales que te ayudan a navegar por el conjunto de herramientas. Con ellas puedes crear listas de informes de todos los vínculos del documento, cambiar los modos del documento o esquematizar visualmente un elemento específico de la página. En este tema, se incluyen las siguientes secciones.

Nota  Las herramientas F12 comparten algunas teclas de método abreviado con Internet Explorer. Por lo tanto, asegúrate de que el foco está en las herramientas F12 cuando quieras usar un método abreviado relativo a esas herramientas. Dicho de otro modo, haz clic dentro de las herramientas de desarrollo F12 y después usa la tecla de método abreviado.

Herramientas de la página web

Los menús principales proporcionan varias herramientas y opciones. Muchas de las herramientas dentro del conjunto de herramientas F12 funcionan en la página web o el explorador en sí, o proporcionan maneras para ir a las opciones y características de las distintas vistas de códigos. En la siguiente tabla, se muestran los menús y las opciones que proporcionan las herramientas.

Menú Archivo

Elemento de menúDescripción
Deshacer todoRestablece todos los cambios (como los valores de atributos) realizados en la instancia actual de Internet Explorer y actualiza la página web.
Personalizar Ver código fuente de Internet Explorer Proporciona un menú que tiene las siguientes opciones para establecer el visor Código fuente:
  • Visor predeterminado: usa el visor integrado con formato de código.
  • Bloc de notas: usa el bloc de notas de Windows para mostrar el código fuente.
  • Otros: permite examinar y especificar otra aplicación Editor o Visor instalada en el equipo.
Ayuda en pantalla (F1)Proporciona un vínculo a esta documentación.
Salir (F12)Cierra las herramientas F12.

 

Menú Buscar

El menú Buscar tiene solamente un elemento, Seleccionar elemento con un clic. Puedes habilitar esta característica desde el elemento del menú, si haces clic en el botón Seleccionar elemento con un clicImagen del botón Seleccionar elemento con un clic o si presionas Ctrl+B. Si habilitas esta característica, es posible seleccionar un elemento en una página web al hacer clic en el elemento de la página. Después de hacer clic en el elemento de la página, se dibuja un borde alrededor del elemento. Si la pestaña HTML está abierta, el panel izquierdo se desplazará para resaltar el elemento seleccionado. El panel de propiedades (panel derecho) muestra las propiedades del elemento seleccionado, en función del tipo de propiedad actual que has seleccionado (estilo, rastrear estilos, diseño o atributos). Si la pestaña HTML no está abierta en el momento, con Seleccionar elemento con un clic se selecciona el elemento y, automáticamente, cambia el foco nuevamente a la pestaña HTML. Seleccionar elemento con un clic solamente se habilita al hacer clic en un elemento.

Nota  Para usar Ctrl+B, el foco debe estar en las herramientas F12. Si el foco está en la página web, verás el cuadro de diálogo Organizar Favoritos.

Imagen de un elemento seleccionado con un clic

Menú Deshabilitar

Este menú te ayuda a probar cómo los usuarios experimentan su sitio si deshabilitan ciertas características en su explorador. Mediante este menú, se activan o se desactivan estas características.

Elemento de menúDescripción
ScriptDeshabilita todos los scripts en una página web. Cuando se selecciona, se establece el comando y se actualiza la página. Este comando no está disponible si se establece el Modo protegido en "activado" en Seguridad de Internet. Para usar este comando, desactive Habilitar Modo protegido en la pestaña Seguridad en Opciones de Internet.
Bloqueador de ventanas emergentesDeshabilita todos los bloqueadores de elementos emergentes para habilitar los objetos emergentes en esta página web.
CSSDeshabilita todas las Hojas de estilo CSS en la página web. Cuando se selecciona, se establece el comando y se actualiza la página web con las CSS inactivas. Si actualizas la página web o comienzas a depurar el script (que es lo que actualiza la página web), las CSS se volverán a habilitar.

 

Menú Ver

Este menú te permite ver la información sobre los elementos en la página sin ubicar, en primer lugar, el elemento en el árbol o el código fuente HTML.

Elemento de menúDescripción
Información de Id. y clase (Ctrl+I)Muestra los valores de Id. y de clase de todos los elementos HTML de la página web. Dentro de los elementos correspondientes, se muestra la información a medida que se superpone en la página web. Haz doble clic en la superposición para resaltar la información. Presiona Ctrl+C para copiar.
Rutas de acceso al vínculoMuestra las rutas de acceso al vínculo de todos los vínculos en una página web. La información se muestra cuando el texto se superpone en los elementos de la página web. Haz doble clic en la superposición para resaltar la información. Presiona Ctrl+C para copiar.
Informe de vínculosGenera una lista de todos los vínculos encontrados en esta página web y notifica esta lista en una nueva instancia de Internet Explorer. Esto hace que resulte fácil y conveniente inspeccionar todos los vínculos sin tener que examinar todo el código fuente HTML.
Índices de pestañasMuestra los índices de pestañas como números superpuestos en la página web para los elementos cuyo atributo tabindex está definido.
Teclas de accesoMuestra las teclas de acceso como superposiciones para los elementos en una página web cuyo atributo accesskey está definido.
Código fuente Un submenú del menú Vista; las descripciones se detallan en la siguiente tabla.

 

Elemento del submenú Código fuenteDescripción
Código fuente del elemento con estiloMuestra solo el elemento seleccionado del código fuente HTML y su contenido, junto con las CSS que se aplican a él en una nueva ventana. Esto ayuda a centrar la atención solamente en los códigos fuente del elemento seleccionado. Debes seleccionar un elemento HTML dentro del cuerpo del árbol HTML con la vista de pestaña HTML antes de ejecutar este comando. Para seleccionar un elemento, haz clic en el botón Seleccionar elemento con un clic o haz clic en un elemento del árbol HTML.
DOM (elemento)Muestra solamente el código fuente HTML del elemento seleccionado y su contenido en una nueva ventana. Debes seleccionar un elemento HTML con la vista de pestaña HTML antes de que se pueda ejecutar este comando. Para seleccionar un elemento, usa el comando. Seleccionar elemento con un clic.
DOM (página)Muestra el código fuente HTML completo en una nueva ventana y el anidamiento del elemento. Esta vista de código fuente muestra la estructura del modelo de objetos de documento (DOM) de la página, incluidos los códigos fuente que se escriben dinámicamente en el DOM mediante scripts representados por Internet Explorer.
OriginalMuestra el código fuente HTML original en una nueva ventana.

 

Menú Imágenes

Este menú proporciona comandos que pueden ayudarlo a comprender y depurar el diseño de página gracias a que le permiten identificar el tamaño y la posición de los elementos. Además, lo ayuda a identificar, de manera visual, todos los elementos de un determinado tipo mediante la codificación de colores, según el tipo de elemento.

Elemento de menúDescripción
Deshabilitar imágenesDesactiva la representación de todas las imágenes de una página web. Este comando hace que la página web se actualice sin mostrar las imágenes y, también, deshabilitará el comando Mostrar tamaños de archivo de imágenes.
Mostrar dimensiones de imágenesMuestra la dimensión de una imagen como texto superpuesto de todas las imágenes que se encuentran en una página web.
Mostrar tamaños de archivo de imágenesMuestra el tamaño de archivo de una imagen como texto superpuesto de todas las imágenes que se encuentran en una página web. El tamaño de archivo se informa en bytes. Si se usa el comando Deshabilitar imágenes, este comando está deshabilitado.
Mostrar rutas de acceso de imágenesMuestra la ruta completa de una imagen como superposiciones de todas las imágenes que se encuentran en una página web.
Ver texto altMuestra el texto alternativo de todas las imágenes cuyo atributo alt está definido. Para las imágenes cuyo atributo alt no está definido, no hay superposición.
Ver informe de imágenesGenera una lista de todas las imágenes definidas en el código del cuerpo de la página web actual y la muestra en una nueva pestaña de Internet Explorer. En esta lista, no se incluyen imágenes cargadas con CSS (como "background-image:url()").

 

Menú Caché

Elemento de menúDescripción
Siempre actualizar desde el servidor Fuerza a Internet Explorer a adquirir siempre contenido de la página web desde el servidor, en lugar de usar el contenido de caché. Este comando persiste hasta que se desactive o hasta que se cierre la instancia de Internet Explorer.
Borrar caché de exploración... (Ctrl+R)Elimina la memoria caché de exploración y todos los archivos temporales.
Borrar caché de exploración para este dominio... (Ctrl+B)Elimina solamente la caché de exploración y todos los archivos temporales que pertenecen al dominio actual.
Deshabilitar cookiesDeshabilita el uso de todas las cookies desde esta instancia de Internet Explorer. Este comando persiste hasta que se desactive o hasta que se cierre la instancia de Internet Explorer.
Borrar cookies de la sesiónElimina todas las cookies adquiridas durante esta sesión de exploración.
Borrar cookies para el dominioElimina todas las cookies desde el dominio actual.
Ver información de cookiesGenera una lista de todas las cookies almacenadas en Internet Explorer y la notifica en una nueva instancia de Internet Explorer. Consulta la referencia sobre cookie property para saber cómo trabajar con estas cookies.

 

Menú Herramientas

Este menú proporciona varias herramientas que lo ayudan en tareas comunes, como probar un sitio en diferentes resoluciones, cambiar la cadena de agente de usuario, medir las áreas de las páginas y capturar el color específico de un punto de la página.

Elemento de menúDescripción
Cambiar tamañoProporciona un submenú que ofrece algunos tamaños de pantalla predefinidos y una opción para personalizar un tamaño de pantalla. Después de seleccionar un tamaño de pantalla predefinido, la ventana Internet Explorer cambia el tamaño inmediatamente a la dimensión seleccionada. El submenú ofrece cuatro tamaños preestablecidos (con accesos directos) y una configuración personalizada.
800x600Ctrl+Shift+1
1024x768Ctrl+Shift+2
1280x768Ctrl+Shift+3
1280x1024Ctrl+Shift+4
Personalizado(sin acceso directo)

 

En la configuración personalizada, aparece un cuadro de diálogo donde puedes introducir tus propios tamaños de pantalla para probar. Dado que las entradas personalizadas no se modifican después de cerrar el explorador, puedes volver a usarlas en futuras sesiones de prueba.

Imagen del cuadro de diálogo Cambiar tamaño personalizado de la pantalla
Cambiar cadena del agente de usuario

Permite cambiar la cadena de agente de usuario que se envía a un sitio web cuando se solicita una página web. Existe un conjunto de cadenas de agentes de usuarios preestablecidas y una opción personalizada. En la opción personalizada, se observa un cuadro de diálogo para introducir tu propia cadena. Después de guardar los elementos personalizados, aparecen en el submenú Cambiar cadena del agente de usuario. Actualiza la página para que aparezcan los cambios. Ten en cuenta que cambiar el docmode invalidará la configuración personalizada de agente de usuario.

Imagen del cuadro de diálogo Cadenas personalizadas de agente de usuario
Borrar entradas en la navegación

Permite borrar o mantener los mensajes de la consola y el registro de la pestaña red cuando navegas por una nueva página web en una sesión de depuración. De manera predeterminada, Internet Explorer borra todos los mensajes de la consola y se registra la captura de la pestaña red cuando dejas una página.

Mostrar la regla (Ctrl+L)

Permite medir los objetos arbitrarios que se encuentran en la pantalla. El cuadro de diálogo Regla se abre con opciones y sugerencias sobre el uso de la herramienta. Se admiten varios colores y reglas. Para lograr más precisión, se encuentra disponible una lupa. Presione CTRL+M para activar o desactivar la lupa. Las reglas muestran las coordenadas ("x,y") de cada extremo de la regla en función del lugar donde se encuentren los puntos en la pantalla, y la longitud se muestra en píxeles en el centro de la regla. Las mediciones aparecen también en la parte inferior del cuadro de diálogo Regla cuando mueves el mouse sobre una regla. Es posible mover y cambiar el tamaño y el ángulo de una regla. Para quitar una regla, selecciónala y, a continuación, presiona la tecla Eliminar. Después haz clic en el botón X en la esquina superior derecha para cerrar el cuadro de diálogo. Cierra el cuadro de diálogo para ocultar todas las reglas. Abre el cuadro de diálogo Regla para mostrarlas.

Mostrar selector de colores (Ctrl+K)

Muestra una herramienta Selector de colores para probar los colores de cualquier objeto que se encuentra en la página. El cuadro de diálogo Selector de colores muestra el ejemplo de color en el que se encuentra el selector. El selector de colores también muestra los valores RGB y HEX del color. Para ver el valor de color que se usa en una página web, haz clic en el color que te interese, con el cursor de cuentagotas. Haz clic en Copiar y cerrar para copiar el valor en el portapapeles y poder usarlo en tu página web. Haz clic en el botón X o en el botón Ocultar selector de colores de este menú para cerrar el cuadro de diálogo.

Imagen del cuadro de diálogo Selector de colores F12
Elementos de contorno

Ayuda a entender y depurar la distribución de la página al facilitar la identificación del tamaño y la posición de los elementos. Puedes establecer un color para identificar todos los elementos de un determinado tipo de elemento. Usa la sintaxis de selector de CSS para especificar los elementos en una página web. Por ejemplo, para resaltar todos los párrafos, usa p en el campo de selector y establece un color. Para obtener más información sobre el uso de selectores, consulta el tema de información sobre los selectores CSS.

Imagen del cuadro de diálogo Elementos de contorno

 

Menú Validar

Permite validar la página web actual o un archivo en el equipo mediante los servicios de validación en la web. Un cuadro de diálogo confirma que quieres tomar tal medida; de lo contrario, se cancela la solicitud.

Elemento de menúDescripción
HTMLValida el formato HTML de la página web actual. El informe validado aparece en una nueva ventana.
CSSValida el formato CSS de la página web actual. El informe validado aparece en una nueva ventana.
FuenteValida las fuentes Really Simple Syndication (RSS) de una página web. El informe validado aparece en una nueva ventana.
VínculosValida todos los vínculos de la página web actual. El informe validado aparece en una nueva ventana.
HTML local...Abre una nueva ventana con la opción de elegir un archivo HTML en el equipo para validarlo.
CSS local...Abre una nueva ventana con la opción de elegir un archivo CSS en el equipo para validarlo.
Accesibilidad

Proporciona acceso a los siguientes validadores de accesibilidad:

Lista de comprobación WCAGLas Pautas de Accesibilidad al Contenido en la Web (WCAG) de W3C. Define las pautas para crear páginas web accesibles.
Lista de comprobación de la Sección 508 Las pautas de accesibilidad del Gobierno de los Estados Unidos para crear páginas web accesibles.

 

Varias validaciones

Permite ejecutar una o más validaciones en una sola solicitud. Selecciona la validación que quieras y haz clic en Aceptar para iniciar la solicitud. Obtendrás solamente un cuadro de diálogo que confirmará que quieres enviar esta página a otro sitio para llevar a cabo la validación. Cada selección se abre en una nueva pestaña y contiene la validación obtenida.

Imagen del cuadro de diálogo Varias validaciones

 

Menú Modo de explorador

Este comando te permite probar cómo funciona tu página web con usuarios que ejecutan otras versiones de Internet Explorer. Por ejemplo, si eliges el modo de explorador de Windows Internet Explorer 7, tus páginas web se representarán en función de ese explorador y no podrán obtener acceso a los docmodes que solo están disponibles en versiones posteriores de Internet Explorer.

Elemento de menúDescripción
Internet Explorer 7Modo de explorador de Internet Explorer 7.
Windows Internet Explorer 8Modo de explorador de Internet Explorer 8.
Windows Internet Explorer 9Modo de explorador de Internet Explorer 9. Esto habilita HTML5, CSS3 y otros estándares que son compatibles con Internet Explorer 9.
Vista de compatibilidad de Internet Explorer 9 Prueba cómo los usuarios de Internet Explorer 9 experimentan su página web si eligen la opción Vista de compatibilidad.

 

Menú Modo de documento

Este comando te permite probar cómo se interpreta tu página web en otras versiones de Internet Explorer. Los cambios que se realizan en las páginas web afectan a todos los documentos de la página, incluidos los elementos iframes.

Elemento de menúDescripción
Modo no estándar (Alt+Q)Este comportamiento coincide con el de Internet Explorer cuando se representa un documento sin un tipo de documento o un tipo de documento no estándar. Actúa igual que el modo no estándar de Windows Internet Explorer 7 o Internet Explorer 8.
Estándar Internet Explorer 7 (Alt+7) Este comportamiento coincide con el de Windows Internet Explorer 7, que representa un documento que tiene un tipo de documento estricto o desconocido.
Estándar Internet Explorer 8 (Alt+8) Este es el comportamiento más conforme a los estándares disponibles en Internet Explorer 8 cuando se representa un documento que tiene un tipo de documento estricto o desconocido.
Estándar Internet Explorer 9 (Alt+9) Este es el comportamiento más conforme a los estándares disponibles en Internet Explorer 9.

 

Temas relacionados

Cómo usar las herramientas de desarrollo F12 para depurar las páginas web

 

 

Mostrar:
© 2014 Microsoft