From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- .../tools/page_inspector/3er-panel_modo/index.html | 69 ++++ .../how_to/abrir_el_inspector/index.html | 22 ++ .../index.html | 47 +++ .../how_to/examinar_y_editar_html/index.html | 364 +++++++++++++++++++++ .../how_to/examine_and_edit_css/index.html | 228 +++++++++++++ .../how_to/examine_grid_layouts/index.html | 131 ++++++++ files/es/tools/page_inspector/how_to/index.html | 13 + .../inspeccionar_y_seleccionar_colores/index.html | 26 ++ .../index.html | 22 ++ .../how_to/select_an_element/index.html | 36 ++ .../how_to/work_with_animations/index.html | 112 +++++++ files/es/tools/page_inspector/index.html | 348 ++++++++++++++++++++ files/es/tools/page_inspector/ui_tour/index.html | 98 ++++++ 13 files changed, 1516 insertions(+) create mode 100644 files/es/tools/page_inspector/3er-panel_modo/index.html create mode 100644 files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html create mode 100644 files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html create mode 100644 files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html create mode 100644 files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/es/tools/page_inspector/how_to/index.html create mode 100644 files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html create mode 100644 files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html create mode 100644 files/es/tools/page_inspector/how_to/select_an_element/index.html create mode 100644 files/es/tools/page_inspector/how_to/work_with_animations/index.html create mode 100644 files/es/tools/page_inspector/index.html create mode 100644 files/es/tools/page_inspector/ui_tour/index.html (limited to 'files/es/tools/page_inspector') 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 +--- +
{{ToolsSidebar}}
+ +

Este articulo explica como usar el 3er panel del modo inspector.

+ +

Feature summary

+ +

Desde Firefox 62 en adelante, el Inspector de página tieen un nuevo modo disponible— modo 3er-Panel. cuando este es activado, te permitira ver en simultaneo lo siguiente:

+ + + +

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +
+

Nota: En tamaños de pantalla mas reducidos, las pestañas apareceran bajo el panel de Reglas CSS.

+
+ +

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.

+ +

A brief walkthrough

+ +

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.

+ +

a view of the tabs panel, showing the 2 to 3 pane toggle icon

+ +

presionando el toggle podras cambiar de la vista de  2 a 3 paneles.

+ +

The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right

+ +

The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right

+ +

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 Rejilla CSS y ver inmediatamente los cambios en el Inspector de rejilla.

+ +

{{EmbedYouTube("ELS2OOUvxIw")}}

+ +

Habilitando el  inspector de 3 paneles en versiones anteriores a Firefox 62

+ +

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

+ +

devtools.inspector.split-rule-enabled — esto cambia el modo de 3 paneles de on a off.

+ +

devtools.inspector.split-sidebar-toggle — esto añade el boton a la UI.

+ +

en Firefox 61, estas preferencias se renombran como:

+ + + +

debes pasar estas dos a true en el Beta para probar las caracteristicas enFirefox 61.

+ +
+

Nota: El inspector de 3 paneles esta disponible en la edicion Nightly/Developer desde Firefox 62.

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

Hay dos maneras básicas para abrir el Inspector:

+ + + +

El Inspector aparecerá en la parte inferior de la ventana del navegador:

+ +

The all-new Inspector in Firefox 57 DevTools.Para empezar a aprender sobre el Inspector ve al Tour por la UI.

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

Visualización del modelo de caja

+ +

Con el botón Seleccionar elemento pulsado, si se pasa el ratón por encima de un elemento en la página, el modelo de caja para ese elemento se muestra superpuesto en la página:

+ +

{{EmbedYouTube("vDRzN-svJHQ")}}

+ +

También se muestra superpuesto en la página si en el panel HTML ponemos el cursor sobre la marca de un elemento :

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

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:

+ +

+ +

Vista Modelo de Caja

+ +

Cuando se selecciona un elemento, podemos obtener una vista detallada del modelo de caja en dos de las vistas del panel CCS: Calculado y Disposición:

+ + + +

+ +

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:

+ +

+ +

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

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

Edición del modelo de caja

+ +

También podemos editar los valores en la Vista Modelo de Caja: hacer clic sobre un valor permite editarlo y ver los resultados inmediatamente en la página:

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

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

Puedes examinar y editar el HTML de la página en el panel HTML.

+ + + +

HTML breadcrumbs (migas de pan)

+ +

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:

+ +

+ +

Pasar el ratón sobre cada miguita de pan destaca ese elemento de la página.

+ +

La barra breadcrumbs tiene sus propios atajos de teclado.

+ +
+

Ten en cuenta que antes de Firefox 48, esta barra de herramientas estaba en la parte superior del panel HTML.

+
+ +

Buscar

+ +

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.

+ +

Para empezar a buscar un marcador, haz clic en el cuadro de búsqueda para expandirlo o presiona Ctrl + F , o Cmd + F en Mac.

+ +

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:

+ +

+ +

Presiona Up y Down para desplazarte por las sugerencias, Tab para elegir la sugerencia actual y entonces Enter para seleccionar el primer nodo con ese atributo.

+ +

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.

+ +

{{EmbedYouTube("AKBhnfp1Opo")}}

+ +

Para desplazarte por las sugerencias presiona Enter . A partir de Firefox 48 es posible el desplazamiento hacia atrás con Shift + Enter .

+ +

Árbol HTML

+ +

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 Alt mientras haces clic en la flecha, se desplegará el nodo y todos los nodos situados debajo de él.

+ +

The new Firefox 57 inspector HTML tree.

+ +

Mover el ratón sobre un nodo del árbol destaca el elemento en la página.

+ +

Los nodos no-visibles se representan descoloridos o desaturados. La invisibilidad puede deberse a razones diversas, entre ellas el uso de display: none, o que el elemento no tenga ninguna dimensión.

+ +

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:

+ +
+

Nota: Hay atajos de teclado útiles para usar en el árbol HTML — ve a la lista de atajos de teclado del panel HTML.

+
+ +

::before y ::after

+ +

Desde Firefox 35 en adelante, puede inspeccionar los pseudoelementos añadidos usando {{cssxref("::before")}} y {{cssxref("::after")}}:

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

Whitespace-only text nodes

+ +
Nuevo en Firefox 52
+ +

Los desarrolladores web no escriben todo su código en una sola línea de texto. Introducen espacios en blanco con Space , Return , y Tab entre sus elementos HTML para que el marcado sea más legible.

+ +

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.

+ +

Si estos nodos de texto generados automáticamente están inline level, 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.

+ +

Desde Firefox 52, el Inspector muestra los nodos whitespace para que puedas saber de dónde vienen los huecos en su marcado.

+ +

Los nodos Whitespace se representan con un punto: y cuando pasas el ratón sobre ellos muestra un tooltip explicativo

+ +

+ +

Para ver esto en la práctica ve a la demo en https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html.

+ +

Elemento: menú contextual emergente

+ +

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")}}:

+ + + +

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

+ +

Context menu reference

+ +
+

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

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Edit as /en-US/docs/HTML +

Editar el HTML del elemento

+
(Copy) Inner HTMLCopiar el HTML interno para el elemento.
(Copy) Outer HTML +

Copiar el HTML externo para el elemento.

+ +

Presione Ctrl + C (o Cmd + C en Mac) realiza la misma acción.

+
(Copy) Unique Selector/CSS SelectorCopiar el selector CSS que selecciona únicamente el elemento
(Copy) CSS PathCopiar el selector CSS que representa la ruta completa al elemento.
(Copy) Image Data-URLCopiar imagen como data:// URL, l elemento selecionado es una imagen
(Copy) Attribute +

Copiar el atributo del elemento.

+
Show DOM P/en-US/docs/ropertiesAbrir la split console e introducir el comando "inspect($0)" para inspect el elemento actualmente selecionado.
Use in Console +
+

Nuevo en Firefox 43(Copy) Image Data-URL (Copy) Attribute

+
+ Asigna el nodo actualmente seleccionado a una variable llamada temp0 (o temp1 si temp0 esta ya asignado, y así sucesivamente), entonces abre la split console,que le permite interactuar con ese nodo utilizando la línea de comandos de la consola.
Expand All +
+

Nuevo en Firefox 44

+
+ En la vista de árbol, expande el elemento actual y todos los elementos debajo de él. Esto equivale a mantener presionada la tecla Alt y hacer clic en el triángulo antes del elemento.
Collapse +
+

Nuevo en Firefox 44

+
+ 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.
(Paste) Inner HTMLPegar el contenido del portapapeles en el nodo como su HTML interno.
(Paste) Outer HTMLPegar el contenido del portapapeles en el nodo como su HTML externo.
(Paste) BeforePegar el contenido del portapapeles en el documento inmediatamente antes de este nodo
(Paste) AfterPegar el contenido del portapapeles en el documento inmediatamente después de este nodo
(Paste) As First ChildPegar el contenido del portapapeles en el documento como primerdescendiente de este nodo
(Paste) As Last ChildPegar el contenido del portapapeles en el documento como último descendiente de este nodo
Scroll Into View +

Desplazamiento en la página web para que el nodo seleccionado sea visible.

+ +

Desde Firefox 44, pulsando el atajo de teclado S también sirve para desplazarse en la página hasta que el nodo seleccionado está a la vista.

+
Screenshot NodeHace una captura del nodo seleccionado y la guarda en tu directorio de Descargas. Ver Taking screenshots.
Create New NodeCrea un nuevo elemento <div> como último descendiente del elemento actualmente seleccionado. Ver Inserting new nodes.
Duplicate Node +
+

Nuevo en Firefox 44

+
+ +

Crear una copia de este elemento e insertarla inmediatamente antes de este elemento.

+
Delete NodeElimina el elemento del DOM.
Attribute/Add Attribute +
+

Nuevo en Firefox 44

+
+ Añade un atributo al elemento.
Attribute/Edit Attribute +
+

Nuevo en Firefox 44

+
+ (solo cuando se invoca en un atributo) Editar el atributo.
Attribute/Remove Attribute +
+

Nuevo en Firefox 44

+
+ (solo cuando se invoca en un atributo) Suprimir el atributo.
Open Link in New Tab(solo cuando se invoca sobre un enlace como atributo href) Abrir el item enlazado en una nueva pestaña.
Open File in Debugger(solo cuando se invoca sobre un enlace a un archivo de código JS) Abrir el archivo enlazado en el depurador.
Open File in Style-Editor(solo cuando se invoca sobre un enlace a un archivo de código CSS) Abrir el archivo CSS enlazado en un editor de estilos
Copy Link Address(solo cuando se invoca en una URL) Copiar la URL.
:hoverSelecciona la pseudoclase CSS :hover
:activeSelecciona la pseudoclase CSS :active
:focusSelecciona la pseudoclase CSS :focus CSS
+ +

Editar HTML

+ +

 

+ +

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 Enter para ver los cambios reflejados inmediatamente.

+ +

Para editar el HTML externo de un elemento (HTML externo), activa el menú emergente del elemento y selecciona "Editar como HTML". Verás un cuadro de texto en el panel HTML:

+ +

Edit HTML directly in the Inspector panel in Firefox 57

+ +

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.

+ +

A partir de Firefox 52, si estás editando HTML, el menú contextual que verás es el habitual al trabajar con texto editable:

+ +

+ +

Copiar y pegar

+ +

Puedes usar el menú emergente desplegable para copiar nodos en el árbol HTML y pegarlos en la ubicación deseada.

+ +

Arrastrar y Soltar (Drag and drop)

+ +

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:

+ +

{{EmbedYouTube("oI-a035nfWk")}}

+ +

A partir de Firefox 44, puedes cancelar el arrastrar y soltar pulsando la tecla Esc .

+ +

Insertar nuevos nodos

+ +
Nuevo en Firefox 48
+ +

A partir de Firefox 48, hay un icono "+" en la parte superior de la vista de marcado:

+ +

+ +

Haz clic en este icono para insertar un <div> 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.

+ +

{{EmbedYouTube("NG5daffvVZM")}}

+ +

Puedes acceder a la misma funcionalidad utilizando el menú desplegable "Crear nuevo nodo".

+ +

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 <html> o <iframe>). Sin embargo, está habilitado en lugares donde no es válido insertar <div>, como <style> o <link>. En estos casos, el elemento se añade como texto.

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

Puedes examinar y editar CSS en el panel CSS del Inspector.

+ +

Examinar reglas CSS

+ +

La Vista reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado, ordenadas de más específicas a menos específicas:

+ +

+ +

La vista Reglas muestra la lista de estilos aplicados por el navegador o estilos de agente de usuario si la opción para hacerlo está seleccionada en la configuración de las herramienta del desarrollador. Ten en cuenta que esta configuración es independiente de la casilla de verificación "Estilos de navegador" de la Vista calculado.

+ +

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:

+ +

+ +

Visualización de Reglas

+ +

Muestra cada regla como en una hoja de estilo, con una lista de selectores seguida de una lista de declaraciones con forma property:value;.

+ +

+ + + +

Desde Firefox 52, si el elemento tiene una declaración display: grid, entonces aparece a su lado un icono grid así: . 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 Examinar grid layouts para obtener más información al respecto.

+ +

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 (agente de usuario):

+ +

+ +

Regla element {}

+ +

La regla element {} 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")}}.

+ +

A partir de Firefox 52, también se muestra el icono de target:: , que ofrece una forma cómoda de resaltar el elemento seleccionado en la página.

+ +

{{EmbedYouTube("bQzOAFvEDco")}}

+ +

Reglas de filtrado

+ +

Hay un campo en la parte superior de la vista Reglas, llamado "Filtrar Estilos":

+ +

A medida que escribes:

+ + + +

Para eliminar el filtro haz clic en la "X" al final del cuadro de búsqueda.

+ +
+

En la vista Reglas, presionar Ctrl / Cmd + F focaliza el campo de búsqueda. Una vez que has escrito un filtro, puedes presionar Esc para quitarlo de nuevo.

+
+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ +

Búsqueda estricta

+ +

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 border-bottom-color y background-color así como color.:

+ +

+ +

Si la consulta de búsqueda se encierra entre comillas de este modo: `color` se limita la búsqueda a las coincidencias exactas:

+ +

+ +

Expandir las propiedades shorthand

+ +

Las propiedades Shorthand (abreviadas) se pueden expandir para mostrar las características correspondientes en forma larga haciendo click en la flecha junto a ellas.

+ +

Mostrar pseudo-elementos

+ +

La vista Regla muestra los siguientes pseudo-elementos, en caso de que se apliquen al elemento seleccionado

+ +

::after
+ ::backdrop
+ ::before
+ ::first-letter
+ ::first-line
+ ::selection
+ :-moz-color-swatch
+ :-moz-number-spin-box
+ :-moz-number-spin-down
+ :-moz-number-spin-up
+ :-moz-number-text
+ :-moz-number-wrapper
+ :-moz-placeholder
+ :-moz-progress-bar
+ :-moz-range-progress
+ :-moz-range-thumb
+ :-moz-range-track
+ :-moz-selection

+ +

Si el elemento seleccionado tiene pseudo-elementos aplicados, se muestran delante del elemento seleccionado pero ocultos por un triángulo:

+ +

+ +

Haciendo clic en el triángulo se muestran:

+ +

+ +

Setting :hover, :active, :focus

+ +

A la derecha del campo Filtrar hay un botón:

+ +

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:

+ +

También puedes acceder a esta función desde el menú contextual emergente de la vista HTML.

+ +

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:

+ +

+ +

Enlazar al archivo CSS

+ +

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 Editor de estilos.

+ +

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

+ +

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 Configuración del editor de estilos, 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 Documentación del editor de estilos.

+ +

Declaraciones anuladas

+ +

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.

+ +

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.

+ +

Esto facilita ver qué regla prevalece sobre la declaración

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examinar CSS calculado

+ +

Para ver todas las reglas CSS que se calculan para el elemento seleccionado cambia a la Vista calculado.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 :

+ +

+ +

Puedes usar la tecla Tab para seleccionarlos moviéndote través de ellos. Desde Firefox 49 en adelante, puedes encontrar más información sobre estas propiedades: si pulsas F1 en una propiedad seleccionada se abrirá su página de referencia MDN

+ +

Haciendo clic en la flecha situada junto al nombre de la propiedad (o pulsando Enter o Space 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:

+ +

+ +

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 Tab para moverte a través de los nombres de archivo/números de línea; y pulsando Enter/Return Enter/Return se abrirá el archivo en ese punto en el Editor de estilos.

+ +

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.

+ +
+

En la vista calculado, puedes presionar Ctrl / Cmd + F para enfocar el campo de búsqueda. Una vez que hayas escrito un filtro, presiona Esc para quitarlo.

+
+ +

Editar reglas

+ +

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 Tab para desplazarte por las diferentes propiedades y valores existentes, y empezar a editarlos pulsando Enter o Space. 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).

+ +

A medida que comiences a escribir un nombre de propiedad, verás una lista de sugerencias autocompletadas. Presiona Tab para aceptar la sugerencia actual o Up y Down 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":

+ +

+ +

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.

+ +
+

Nota: Desde Firefox 60 en adelante, los nombres de variables CSS también se completarán automáticamente (ver {{bug(1422635)}}). Si escribes var(- var(- seguido de un guión (-) como valor de una propiedad, cualquier variable que hayas declarado en tu CSS aparecerá en la lista de autocompletado.
+
+

+
+ +

Cualquier cambio que hagas es temporal: recargar la página restaurará el estilo original.

+ +

Puedes utilizar las teclas Up , Down y Page up , Page down (junto con otras) para aumentar/disminuir las reglas numéricas durante la edición:

+ + + +

Los cambios que realices en la vista Reglas se reflejan en el Editor de estilos, y viceversa

+ +

A partir de Firefox 52, si estás editando CSS, el menú contextual que verás es el normal para trabajar con texto editable:

+ +

+ +

Añadir reglas

+ +

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.

+ +

+ +

También hay un botón que te posibilita hacer lo mismo:

+ +

+ +

Copiar reglas

+ +

Para copiar reglas o partes de ellas usa uno de los items del siguiente menú contextual en la vista reglas

+ + + +

+ +

Ver también

+ + 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 +--- +
{{ToolsSidebar}}
+ +

El Grid Inspector te permite examinar los CSS Grid Layouts usando las Firefox DevTools, descubrir las rejillas presentes en una página, examinarlas y modificarlas, depurando los problemas de layout, y más.

+ +
+

Nota: Los ejemplos mostrados en los screenshots aparecen el los articulos de Jen Simmons  Futurismo y Variations on a grid, y un live llamado grid area example de Rachel Andrew.

+
+ +

Descubriendo CSS grids

+ +

Cuando un elemento HTML de tu página tiene display: grid aplicado, un numero de nuevas opciones estan disponibles en las DevTools para proveer un acceso sencillo a las caracteristicas de la rejilla.

+ +

En el panel HTML

+ +

En el panel HTML, los elementos pertenecientes a la rejilla tienen un marker "grid" junto a ellos.

+ +

The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it

+ +

En el panel CSS

+ +

En el panel CSS veremos las reglas, cualquier instancia con display: grid declarado tendra un icono de rejilla como este: .

+ +

The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid

+ +

Al dar click en el icono la rejilla sera visible, y aparecera sobre los elemento, mostrando la posicion, lineas y tracks:

+ +

A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid

+ +

La rejilla permanecera aun cuando selecciones otro elemento, puedes editar las propiedades CSS relacionadas y ver como esta es afectada.

+ +

La vista de rejilla en la seccion disposición

+ +

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.

+ +
+

Nota: 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.

+
+ +

Opciones de Rejilla

+ +

La seccion Rejilla de la vista de disposicion; luce algo así:

+ +

The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed

+ +

Encontraras algunas opciones dentro de este:

+ + + +
+

Nota: Tus preferencias de rejilla asi como al sobreposicion, color y configuracion de pantalla persistiran atravez de las paginas cargadas por separado.

+
+ +

Examinemos estas carácteristicas más a detalle.

+ +

Superponer Rejilla

+ +

Cada rejilla presente en tu pagina tiene su propia entrada en la sección "Superponer Rejilla":

+ +

An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more.

+ +

Cada entrada consiste en (de izquierda a derecha):

+ + + +

Mostrar números de línea

+ +

Por defecto, los números de linea se muestran sobre la rejilla superpuesta.

+ +

A CSS grid overlay with grid line numbers displayed

+ +

Al desactivarla opcion "Mostrar números de línea" lucira así.

+ +

A CSS grid overlay with grid line numbers not displayed

+ +

Mostrar nombres de áreas

+ +

En una rejilla con areas nombradas, los nombres de area se mostraran superpuestos sobre la rejilla.

+ +

A CSS grid overlay with named area names displayed

+ +

Al desactivar la opción "Mostrar nombres de áreas" lucira así.

+ +

A CSS grid overlay with named area names not displayed

+ +

Extender líneas infinitamente

+ +

Por defecto, las lineas de rejilla/tracks se muestran solomente sobre el elemento con display: grid.

+ +

A CSS grid overlay with grid lines not extended infinitely

+ +

Cuando activas la opcion "Extender líneas infinitamente", las lineas de la rejilla se extienden hasta el limite del viewport en ambos ejes.

+ +

A CSS grid overlay with grid lines extended infinitely

+ +

Mini vista de Rejilla

+ +

Muestra una version miniatura de la rejilla activa, con la misma proporcion que la real.

+ +

A mini CSS grid view from the Firefox DevTools

+ +

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.

+ +

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.

+ +

Mira tambien

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

Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.

+ +

{{ ListSubpages () }}

+ +

 

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

En la Vista reglas del panel CSS, si una regla contiene un valor de color, verás una muestra del color junto al valor:

+ +

+ +

Si haces clic en la muestra de color, verás una ventana emergente que te permite cambiar el color:

+ +

+ +

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:

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

A partir de Firefox 40, al hacer clic en la muestra de color mientras mantienes pulsada la tecla Shift, cambiará el formato de color: hexadecimal, HSL y RGB

+ +

{{EmbedYouTube("gYL8-gxc1MA")}}

+ +

Firefox 53 y versiones más recientes son compatibles con los valores de CSS color level 4.

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 +--- +
Novedades en Firefox 48
+ +

A partir de Firefox 48 puede mover elementos con position: absolute arrastrándolos alrededor de la página.

+ +

{{EmbedYouTube("Or5HM1FFhvE")}}

+ +

Si un elemento tiene su propiedad  {{cssxref("position")}} seteada en absolute, relative o fixed y una o más de las propiedades {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} , la Vista del modelo de caja muestra un botón:

+ +

+ +

Si hace click en ese botón, aparecen dos identificadores junto al elemento:

+ +

Example for changing the position of an element within the content

+ +

Puede utilizar estos identificadores para arrastrar el elemento alrededor de la página.

+ +

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.

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

Un elemento seleccionado es el elemento de la página en la que el Inspector está actualmente enfocado. El elemento seleccionado se ve en el panel HTML y su CSS en el panel CSS.

+ +

Un elemento destacado 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:

+ +

+ +

Con el menú contextual

+ +

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.

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

Con el panel HTML

+ +

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

{{EmbedYouTube("EojH_vCMesI")}}

+ +

También puedes utilizar las teclas de flecha para desplazarte por el DOM con el teclado: flecha derecha para expandir un elemento y acceder a los elementos descendientes;
flecha izquierda para contraer un elemento o subir al elemento ascendente;
flecha arriba para recorrer hacia arriba las líneas del panel HTML
flecha abajo para recorrer hacia abajo las líneas del panel HTML.

+ +

Con el boton seccionar elemento

+ +

Para seleccionar un elemento en la propia página, activa el "selector de elementos" haciendo clic en su icono (también llamado Selector de nodos o Node picker). 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:

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

+ +

A partir de Firefox 52, si pulsas Shift + Click 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 .

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

Este artículo cubre tres herramientas que puede usar para visualizar y editar animaciones:

+ + + +

Inspector de Animación

+ +
+

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 this separate page.

+
+ +

Desde Firefox 41, el Inspector de Página incluye una vista extra etiquetada "Animaciones".

+ +

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.

+ +

To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different Firefox channel. 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.

+ +

{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}

+ +

Let's use the animation inspector to see what's going on in this example.

+ + + +

{{EmbedYouTube("U2eJYacf5XY")}}

+ +

Now play the animation:

+ +

{{EmbedYouTube("CwXXXEllB3o")}}

+ +

Let's take a closer look at the contents of the animation inspector here:

+ +

+ +

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.

+ +

Each animation or transition is shown as a horizontal bar laid across the timeline:

+ + + +

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.

+ +

To the left of the selector is a "target" icon (). From Firefox 44, clicking this icon will lock the highlighter on the element.

+ +

Applying all this to our example, we can see that:

+ + + +

Animation playback

+ +

At the top of the animation inspector:

+ + + +

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:

+ +

{{EmbedYouTube("1hqNaMsB48g")}}

+ +

Edit @keyframes

+ +

Any @keyframes rules associated with the currently selected element are displayed in the Rules view and are editable:

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Edit timing functions

+ +

When you create a CSS animation you can specify a timing function: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.

+ +

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 P1 and P2, and see the results in the page:

+ +

{{EmbedYouTube("GW5-R2ewaqA")}}

+ +

This feature uses open source code from Lea Verou’s cubic-bezier.com.

+ +

The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":

+ +

{{EmbedYouTube("Jx-J2Yy0aSg")}}

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

Utiliza el Inspector para examinar y modificar el HTML y CSS de una página.

+ +

Puedes examinar las páginas cargadas en la copia local de Firefox o en un dispositivo remoto como Firefox para Android. Ver depuración remota para aprender a conectar las herramientas de desarrollo a un dispositivo remoto.

+ +
+

Tour por la UI

+ +

El Tour por la UI es un breve recorrido para aprender a usar el Inspector.

+ +
+

How to

+ +

Para saber más sobre lo que puedes hacer con el Inspector, lee las siguientes guías:

+ +
+ +
+ +
+

Referencia

+ +
+ +
+ +
+

Abriendo el Inspector

+ +

Hay varias formas de abrir el Inspector:

+ + + +

La Caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Inspector activado.

+ +

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 "Selección de elementos" abajo.

+ +

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:

+ +

Desde Firefox 32 la anotación también incluye el tamaño del elemento:

+ +

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 "Selección de elementos" abajo.

+ +

Selección de elementos

+ +

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:

+ +

+ +

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 Caja de herramientas.

+ +

{{EmbedYouTube("zBYEg40ByCM")}}

+ +

Firefox 30 en adelante

+ +

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:

+ +

{{EmbedYouTube("y2LcsxE2pR0")}}

+ +

Firefox 32 en adelante

+ +

Tenga en cuenta que a partir de Firefox 32, el botón "Seleccionar elemento" está en el extremo izquierdo de la barra de herramientas:

+ +

+ +

Menú emergente del elemento

+ +

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 panel HTML:

+ +

El menú ofrece opciones para:

+ + + +

Copiar imagen como URL datos

+ +
+
Desde Firefox 29 en adelante, si el elemento seleccionado en ese momento es una imagen, a continuación, en el menú emergente incluye una opción para copiar la imagen en el portapapeles como una URL de datos:
+
+ +

+ +

Edición de HTML

+ +

Para editar un elemento de outerHTML, activar el menú emergente del elemento y seleccione "Editar como HTML". Verá un cuadro de texto en el panel HTML:

+ +

Puedes agregar cualquier código HTML aquí: cambiar la etiqueta del elemento cambiando los elementos existentes, o añadiendo otros nuevos. Una vez que se hace clic fuera de la caja, los cambios se aplican a la página.

+ +

Panel de HTML

+ +

El panel de HTML, que muestra el HTML de la página como un árbol. Justo a la izquierda de cada nodo es una flecha: Haz clic en la flecha para expandir el nodo.

+ +

Puedes editar el HTML - etiquetas, atributos y contenido - directamente en este panel: Haz clic en el elemento que deseas editar, cambiar, y pulsa Enter para ver los cambios reflejados inmediatamente.

+ +

Haciendo click en el contenido de un elemento se muestra un menu emergente para trabajar con ese elemento...

+ +

A partir de Firefox 31 en adelante, si se mantiene pulsada la tecla Alt mientras se hace clic en la flecha, se expande el nodo y todos los nodos por debajo de ella.

+ +

 A partir de Firefox 32 en adelante, los nodos que están ocultos usando  display:none se muestran descoloridos.

+ +

Barra de herramientas del panel HTML

+ +

Encima del panel , hay una barra de herramientas dedicada, dividida en dos secciones.

+ + + +

Panel CSS

+ +

El panel de CSS muestra la información acerca de los estilos aplicados al elemento actualmente seleccionado. Hay cuatro puntos de vista diferentes: "Reglas", "computarizada", "Fuentes" y "modelo de caja". Se puede cambiar entre ellas utilizando la barra de herramientas en la parte superior del panel:

+ +

VISTA DE REGLAS

+ +
+
+
+
Esta vista muestra todas las reglas que se aplican al elemento seleccionado, ordenadas desde la más específica, hasta la menos específica:
+
+
+
+ +

 

+ +

La vista de reglas muestra la lista de seudo-elementos, y las reglas que se aplican.

+ +

A partir de Firefox 32 en adelante,el listado de vista de reglas, usuario-agente-estilos (estilos aplicados por el navegador) si la opción de hacerlo se revisa en los ajustes de herramientas de desarrollador. Tenga en cuenta que este ajuste es independiente de la casilla de verificación "Estilos de navegador" en la vista computarizada.

+ +

Muestra de reglas

+ +

Esta muestra cada regla como una hoja de estilos, con una lista de selectores seguida por una lista de  declaraciones. (property:value;)

+ +

Las reglas que se han invalidado por normas posteriores están tachadas. Si se pasa el ratón sobre una declaración, una casilla de verificación aparece junto a ella: Se puede usar esta opción para alternar el estado  de la regla de encendido a apagado.

+ +

Usuario-agente-estilos se muestra  en un gris oscuro, y el vínculo y el número de linea contiene el prefijo (user agent):
+

+ +

Vínculo al archivo CSS

+ +

En la parte superior derecha de cada regla, el nombre del archivo de procedencia y el numero de linea se muestran como un vínculo: Haciendo click en este ,se abre el archivo en el   Editor de estilos.

+ +

El Inspector entiende los mapas de procedencia del CSS. Eso significa que si usted está usando un preprocesador CSS que tiene soporte para mapas fuente, y ha habilitado el apoyo de mapa de origen en los ajustes de editor de estilos , a continuación, el enlace le llevará a la fuente original, no al CSS generado.

+ +

+ +

Leer más sobre el soporte para  mapas de procedencia de CSS  en la documentación del editor de estilos.

+ +

Muestras de color

+ +

Verás que aparece una muestra de color junto a sus valores numéricos:

+ +

+ +

Selector de color

+ +

Si haces click en la muestra de color, verás aparecer un selector de color, que te permite  cambiarlo:

+ +

+ +

A partir de Firefox 31 en adelante, el selector de color incluye un icono de cuentagotas: Al hacer clic en este icono se  permite utilizar el cuentagotas para seleccionar un nuevo color para el elemento de la página:

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

 

+ +

Previsualización de la imagen de fondo

+ +

Verás una vista previa de imágenes especificas utilizando Imagen de fondo si te detienes sobre la regla:

+ +

Transformar la visualización

+ +

Si se pasa sobre una propiedad de transformación en la vista de reglas, se obtiene una información sobre herramientas, que visualiza la transformación  que se lleva a cabo:

+ +

+ +

Herramienta informativa fuente-familia

+ +
+

Esto es nuevo en Firefox 30.

+
+ +

A partir de Firefox 30 en adelante,  si pasas sobre una propiedad fuente-familia  en la Vista de Reglas, consigues una información con una muestra sobre ese tipo de letra :

+ +

+ +

Edición de Reglas

+ +

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.

+ +

Cualquier cambio que se realice es temporal: Al volver a cargar la página , se restablecerá el estilo original.

+ +

Consejo: 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.

+ +

Vista computada

+ +

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 :

+ +

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 :

+ +

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

+ +

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.

+ +

Vista de fuentes

+ +

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:

+ +

El texto en la vista de fuentes es  "Abc" por defecto,pero  en realidad  es un area de texto y puede ser editado libremente.

+ +

Vista modelo de caja

+ +

Esta muestra una representación gráfica de como el  modelo de caja 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:

+ +

Vista detallada del modelo de caja

+ +

 Antes de Firefox 30, la vista del modelo de caja era el siguiente:

+ +

+ + + +

A partir de Firefox 30, se ha simplificado:

+ + + +

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.

+ +

Utilización del Inspector de Página en la Consola Web

+ +

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 $0.

+ +

+ +

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:

+ +

+ +

 API para desarrolladores

+ +

Firefox complementos puede acceder a los siguientes objetos desde chrome://browser/content/devtools/inspector/inspector.xul context:

+ +

ventana.inspector

+ +

Definido en inspector-panel.js. Atributos y funciones:

+ + + +

Capacidad de enlazar eventos en:

+ +

  Markup cargado

+ +

LLamado cuando el panel izquierdo ha sido renovado, despues del cambio de página.

+ +

Listo

+ +

LLamado cuando se ha cargado el primer markup.

+ +

Seudoclase

+ +

LLamado despues comando de seudoclase.

+ +

Cambio de diseño

+ +

"Evento de cambio de baja prioridad para cosas como pintar o cambiar el tamaño."

+ +

Atajos de teclado

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}

+ +

Atajos globales

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}

+ +

 

+ +

 

+ +

 

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

Este artículo es un breve recorrido por las principales secciones de la interfaz de usuario del Inspector de páginas.

+ +

Recorre los tres componentes de máximo nivel de la interfaz de usuario del Inspector:

+ + + +

The all-new Inspector panel in Firefox 57.

+ +

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.

+ +

Botón seleccionar elemento

+ +

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:

+ +

This is the button in Firefox 57 Inspector you can use to select elements on a web page.

+ +

Este botón forma parte de la barra de herramientas principal, por tanto es accesible desde cualquier herramienta, no sólo desde el Inspector.

+ +

Para aprender a seleccionar un elemento ver la guía seleccionar un elemento.

+ +

Panel HTML

+ +

El Inspector está dividido en dos mitades. La mitad izquierda está ocupada por el panel HTML:

+ +

These are the tasty new HTML and CSS panes in Firefox 57.

+ +

Para aprender más sobre la estructura del panel HTML, ver a la guía examinar y editar HTML.

+ +

Panel CSS

+ +

La mitad derecha del Inspector la ocupa el panel CSS:

+ +

The rules view within the Inspector.The CSS pane is divided into 4 views:

+ +

El panel CSS está dividido en 5 vistas:

+ + + +

Para cambiar de vista utiliza las pestañas que hay en la parte superior de la página

+ +

Vista reglas

+ +

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

+ +

Ver Examinar y editar CSS para más detalles.

+ +

Vista calculado

+ +

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:

+ +

The Computed view within the Inspector.

+ +

Para aprender más sobre la vista modelo de cajas ver Examinar y editar el modelo de caja. 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.

+ +

Para aprender más sobre las declaraciones CSS listadas en esta vista ver Examinar CSS calculado.

+ +

Vista tipografía

+ +
+

En Firefox 47 únicamente, la vista Tipografía está desactivada por defecto. Si quieres verla en Firefox 47, visita about:config, busca la opción devtools.fontinspector.enabled, y seleccionala como true.

+ +

Antes y después de Firefox 47, la vista Tipografía está habilitada por defecto.

+
+ +

La vista Tipografía muestra todas las fuentes de la página con muestras editables.

+ +

The all-new Inspector panel in Firefox 57.

+ +

Ver Vista tipografía para más detalles.

+ +

Vista animaciones

+ +

La Vista Animaciones ofrece los detalles de cualquier animación aplicada al elemento seleccionado, y un controlador para pausarlas

+ +

 

+ +

This is the Animations pane in the Firefox 57 Inspector.

+ +

Ver Trabajar con animaciones para más detalles.

-- cgit v1.2.3-54-g00ecf