From a55b575e8089ee6cab7c5c262a7e6db55d0e34d6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:46:50 +0100 Subject: unslug es: move --- files/es/tools/accesos_directos/index.html | 1266 -------------------- files/es/tools/add-ons/index.html | 17 - .../debugger/how_to/use_a_source_map/index.html | 36 + .../how_to/uso_de_un_mapa_fuente/index.html | 36 - "files/es/tools/desempe\303\261o/index.html" | 91 -- .../es/tools/desempe\303\261o/ui_tour/index.html" | 134 --- files/es/tools/editor_audio_web/index.html | 31 - files/es/tools/editor_estilo/index.html | 101 -- files/es/tools/keyboard_shortcuts/index.html | 1266 ++++++++++++++++++++ files/es/tools/monitor_de_red/index.html | 189 --- files/es/tools/network_monitor/index.html | 189 +++ .../es/tools/page_inspector/3-pane_mode/index.html | 69 ++ .../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_html/index.html | 364 ++++++ .../examine_and_edit_the_box_model/index.html | 47 + .../inspeccionar_y_seleccionar_colores/index.html | 26 - .../how_to/inspect_and_select_colors/index.html | 26 + .../how_to/open_the_inspector/index.html | 22 + .../index.html | 22 - .../reposition_elements_in_the_page/index.html | 22 + files/es/tools/performance/index.html | 91 ++ files/es/tools/performance/ui_tour/index.html | 134 +++ files/es/tools/profiler/index.html | 105 -- .../debugging_over_a_network/index.html | 11 - .../firefox_for_android/index.html | 132 ++ .../firefox_para_android/index.html | 132 -- files/es/tools/responsive_design_mode/index.html | 18 + files/es/tools/responsive_design_view/index.html | 18 - files/es/tools/style_editor/index.html | 101 ++ files/es/tools/taking_screenshots/index.html | 42 + .../es/tools/tomar_capturas_de_pantalla/index.html | 42 - files/es/tools/web_audio_editor/index.html | 31 + .../iniciando_la_consola_web/index.html | 23 - .../index.html" | 188 --- .../the_command_line_interpreter/index.html | 188 +++ files/es/tools/web_console/ui_tour/index.html | 23 + 39 files changed, 2801 insertions(+), 2934 deletions(-) delete mode 100644 files/es/tools/accesos_directos/index.html delete mode 100644 files/es/tools/add-ons/index.html create mode 100644 files/es/tools/debugger/how_to/use_a_source_map/index.html delete mode 100644 files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html delete mode 100644 "files/es/tools/desempe\303\261o/index.html" delete mode 100644 "files/es/tools/desempe\303\261o/ui_tour/index.html" delete mode 100644 files/es/tools/editor_audio_web/index.html delete mode 100644 files/es/tools/editor_estilo/index.html create mode 100644 files/es/tools/keyboard_shortcuts/index.html delete mode 100644 files/es/tools/monitor_de_red/index.html create mode 100644 files/es/tools/network_monitor/index.html create mode 100644 files/es/tools/page_inspector/3-pane_mode/index.html delete mode 100644 files/es/tools/page_inspector/3er-panel_modo/index.html delete mode 100644 files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html delete mode 100644 files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html delete 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_html/index.html create mode 100644 files/es/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html delete 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/inspect_and_select_colors/index.html create mode 100644 files/es/tools/page_inspector/how_to/open_the_inspector/index.html delete 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/reposition_elements_in_the_page/index.html create mode 100644 files/es/tools/performance/index.html create mode 100644 files/es/tools/performance/ui_tour/index.html delete mode 100644 files/es/tools/profiler/index.html delete mode 100644 files/es/tools/remote_debugging/debugging_over_a_network/index.html create mode 100644 files/es/tools/remote_debugging/firefox_for_android/index.html delete mode 100644 files/es/tools/remote_debugging/firefox_para_android/index.html create mode 100644 files/es/tools/responsive_design_mode/index.html delete mode 100644 files/es/tools/responsive_design_view/index.html create mode 100644 files/es/tools/style_editor/index.html create mode 100644 files/es/tools/taking_screenshots/index.html delete mode 100644 files/es/tools/tomar_capturas_de_pantalla/index.html create mode 100644 files/es/tools/web_audio_editor/index.html delete mode 100644 files/es/tools/web_console/iniciando_la_consola_web/index.html delete mode 100644 "files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" create mode 100644 files/es/tools/web_console/the_command_line_interpreter/index.html create mode 100644 files/es/tools/web_console/ui_tour/index.html (limited to 'files/es/tools') diff --git a/files/es/tools/accesos_directos/index.html b/files/es/tools/accesos_directos/index.html deleted file mode 100644 index 9372393011..0000000000 --- a/files/es/tools/accesos_directos/index.html +++ /dev/null @@ -1,1266 +0,0 @@ ---- -title: Accesos directos -slug: Tools/Accesos_directos -tags: - - Herramientas - - 'l10n:priority' -translation_of: Tools/Keyboard_shortcuts ---- -
{{ToolsSidebar}}
- -

Esta página muestra todos los accesos directos utilizados para las herramientas para desarrolladores de Firefox.

- -

La primera sección muestra el acceso directo para cada herramienta mientras que la segunda sección muestra los accesos directos aplicables sólo a las herramientas de desarrolladores. Por último hay una sección para cada herramienta, que lista todos los accesos directos que puedes usar dentro de la misma.

- -

Debido a que los accesos directos dependen de la ubicación, no están documentados en esta página.

- -

Herramientas de apertura y cierre

- -

Estos accesos directos funcionan en la ventana principal del navegador para abrir la herramienta especificada. Los mismos accesos directos funcionarán para cerrar las herramientas alojadas en la Caja de herramientas si la herramienta está activa. Para herramientas que se abren en una nueva ventana, como la consola del navegador, debe cerrar la ventana para cerrar la herramienta.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Abre la caja de herramientas (con la herramienta más reciente activada)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
Trae la caja de herramientas a primer plano (solo si está en una ventana separada y no en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Cierra la caja de herramientas (si está en una ventana separada y en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Abre la consola web 1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
Abre el inspector de elementosCtrl + Shift + CCmd + Opt + CCtrl + Shift + C
Abre el depurador 2Ctrl + Shift + SCmd + Opt + SCtrl + Shift + S
Abre el editor de estilosShift + F7Shift + F7 1Shift + F7
Abre el perfiladorShift + F5Shift + F5 1Shift + F5
Abre el monitor de red 3Ctrl + Shift + ECmd + Opt + ECtrl + Shift + E
Despliega las herramientas de desarrolladorShift + F2Shift + F2 1Shift + F2
Despliega la vista de diseño adaptableCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
Abre la consola del navegador 4Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
Abre la caja de herramientas del navegadorCtrl + Alt + Shift + ICmd + Opt + Shift + ICtrl + Alt + Shift + I
Abre el bloc de notasShift + F4Shift + F4Shift + F4
Abre el WebIDEShift + F8Shift + F8Shift + F8
Abre el inspector de almacenamiento 5Shift + F9Shift + F9Shift + F9
Abre el depurador 2Ctrl + Shift + ZCmd + Opt + ZCtrl + Shift + Z
- -

1. A diferencia de otras herramientas alojadas en la caja de herramientas, este acceso directo tampoco cierra la Consola Web. En cambio, se centra en la línea de comandos de la consola web. Para cerrar la consola web, use el acceso directo de la caja de herramientas global de Ctrl + Shift + I (Cmd + Opt + I en una Mac).

- -

2. A partir de Firefox 66, este acceso directo ya no estará asociado con el depurador. A partir de Firefox 71, la letra de este acceso directo pasará a ser la Z.

- -

3. Antes de Firefox 55, el atajo de teclaro era Ctrl + Shift + Q (Cmd + Opt + Q en Mac).

- -

4. Hasta Firefox 38, cuando la consola del navegador está oculta por una ventana normal de Firefox, la misma combinación de teclas cierra la consola del navegador. Desde Firefox 38 en adelante, si la consola del navegador está oculta por una ventana normal de Firefox, esta combinación de teclas vuelve a colocar la consola del navegador en la parte superior y se enfoca en ella..

- -

5. La herramienta está deshabilitada de forma predeterminada, por lo que el acceso directo no funcionará hasta que se habilite desde el Panel de configuración.

- -

Caja de Herramientas

- -
-

Estos accesos directos funcionan siempre que la caja de herramientas esté abierta, sin importar qué herramienta esté activa.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Recorre las herramientas de izquierda a derechaCtrl + ]Cmd + ]Ctrl + ]
Recorre las herramientas de derecha a izquierdaCtrl + [Cmd + [Ctrl + [
Alterna entre la herramienta activa y la configuración.F1F1F1
Alterna caja de herramientas entre los 2 últimos modos de acoplamientoCtrl + Shift + DCmd + Shift + DCtrl + Shift + D
Alterna consola dividida (excepto si la consola es la herramienta seleccionada actualmente)EscEscEsc
-
- -
-
-
Estos accesos directos funcionan en todas las herramientas alojadas en la caja de herramientas.
- -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Incrementa el tamaño de la fuenteCtrl + + Cmd + + Ctrl + +
Decrementa el tamaño de la fuenteCtrl + -Cmd + -Ctrl + -
Restaura el tamaño por defecto de la fuenteCtrl + 0Cmd + 0Ctrl + 0
-
- -

Editor de código fuente

- -
-

Esta tabla enumera los accesos directos predeterminados para el editor de código fuente.

- -

En la sección Preferencias del editor de la configuración de las herramientas del desarrollador, es posible optar por utilizar las combinaciones de teclas Vim, Emacs o Sublime Text en su lugar.

- -

Para seleccionarlos, visite about:config, seleccione la configuración devtools.editor.keymap y asigne "vim" o "emacs", o "sublime" a esa configuración. Si hace esto, los enlaces seleccionados se usarán para todas las herramientas de desarrollador que usan el editor de origen. Debe volver a abrir el editor para que el cambio surta efecto.

- -

Desde Firefox 33 en adelante, la preferencia de vinculación de teclas se expone en la sección Preferencias del editor de la configuración de las herramientas del desarrollador, y puede configurarla allí en lugar de en about:config.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Ir a la lineaCtrl + JCmd + JCtrl + J
Buscar en la páginaCtrl + FCmd + FCtrl + F
Volver a buscar en la páginaCtrl + GCmd + GCtrl + G
Seleccionar todoCtrl + ACmd + ACtrl + A
CortarCtrl + XCmd + XCtrl + X
CopiarCtrl + CCmd + CCtrl + C
PegarCtrl + VCmd + VCtrl + V
DesacerCtrl + ZCmd + ZCtrl + Z
RehacerCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
IdentarTabTabTab
Quitar identado o sangríaShift + TabShift + TabShift + Tab
Mover línea(s) hacia arribaAlt + UpAlt + UpAlt + Up
Mover línea (s) hacia abajoAlt + DownAlt + DownAlt + Down
Comentar/Decomentar linea(s)Ctrl + /Cmd + /Ctrl + /
-
- -

Inspector de páginas

- -
- - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Abre el inspectorCtrl + Shift + CCmd + Shift + CCtrl + Shift + C
- -

Selector de nodos

- -

Estos accesos directos funcionan mientras el selector de nodos está activo.

- - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Seleccione el elemento debajo del mouse y cancela el modo selectorClickClickClick
Seleccione el elemento debajo del mouse y permanece en modo selectorShift+ClickShift+ClickShift+Click
- -

Panel HTML

- -

Estos accesos directos funcionan mientras se esté en el panel HTML del Inspector.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Elimina el nodo seleccionadoDeleteDeleteDelete
Deshace el borrado de un nodoCtrl + ZCmd + ZCtrl + Z
Rehace el borrado de un nodoCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
Moverse al siguiente nodo (solo nodos expandidos)Down arrowDown arrowDown arrow
Moverse al nodo anteriorUp arrowUp arrowUp arrow
Moverse al primer nodo del arbolHomeHomeHome
Moverse al últiimo nodo del arbolEndEndEnd
Expandir el nodo seleccionado actualmenteRight arrowRight arrowRight arrow
Contraer el nodo seleccionado actualmenteLeft arrowLeft arrowLeft arrow
(Cuando se selecciona un nodo) moverse dentro del nodo para que pueda comenzar a recorrer los atributos.EnterReturnEnter
Avanza por los atributos de un nodoTabTabTab
Retrocede a través de los atributos de un nodoShift + TabShift + TabShift + Tab
(Cuando se selecciona un atributo) comienza a editar el atributoEnterReturnEnter
Oculta / muestra el nodo seleccionadoHHH
Se centra en el cuadro de búsqueda en el panel HTMLCtrl + FCmd + FCtrl + F
Editar como HTMLF2F2F2
Deja de editar como HTMLF2 / Ctrl +EnterF2 / Cmd + ReturnF2 / Ctrl + Enter
Copia el HTML externo del nodo seleccionadoCtrl + CCmd + CCtrl + C
Desplazar el nodo seleccionado a la vistaSSS
Encuentra la siguiente coincidencia en el marcado, cuando la búsqueda está activaEnterReturnEnter
Encuentra la coincidencia anterior en el marcado, cuando la búsqueda está activaShift + EnterShift + ReturnShift + Enter
- -

Barra de rutas de exploración o migas de pan

- -

Estos atajos funcionan cuando la barra de rutas de exploración está enfocada.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Moverse al elemento anterior en la barraLeft arrowLeft arrowLeft arrow
Moverse al siguiente elemento en la barraRight arrowRight arrowRight arrow
Enfoca el panel HTMLShift + TabShift + TabShift + Tab
Enfoca el panel CSSTabTabTab
- -

Panel CSS

- -

Estos atajos funcionan cuando estás en el Inspector del panel CSS.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Se centra en el cuadro de búsqueda del panel CSSCtrl + FCmd + FCtrl + F
Borrar el contenido del cuadro de búsqueda (solo cuando el cuadro de búsqueda está enfocado y se ha ingresado contenido)EscEscEsc
Avanza a través de propiedades y valores del panelTabTabTab
Retroceda a través de propiedades y valores del panelShift + TabShift + TabShift + Tab
Comienza a editar la propiedad o el valor (Vista de reglas solamente, cuando se selecciona una propiedad o valor, pero aún no se está editando)Enter or SpaceReturn or SpaceEnter or Space
Se desplaza hacia arriba y hacia abajo a través de sugerencias de autocompletar (sólo vista de Reglas, cuando se edita una propiedad o valor)Up arrow , Down arrowUp arrow , Down arrowUp arrow , Down arrow
Elige la sugerencia actual de autocompletar (sólo vista de reglas, cuando se edita una propiedad o valor)Enter or TabReturn or TabEnter or Tab
Incrementar el valor seleccionado en 1Up arrowUp arrowUp arrow
Reducir el valor seleccionado en 1Down arrowDown arrowDown arrow
Incrementar el valor seleccionado en 100Shift + Page UpShift + Page UpShift + Page Up
Decrementar el valor seleccionado en 100Shift + Page DownShift + Page DownShift + Page Down
Incrementar el valor seleccionado en 10Shift + Up arrowShift + Up arrowShift + Up arrow
Reducir el valor seleccionado en 10Shift + Down arrowShift + Down arrowShift + Down arrow
Incrementar el valor seleccionado en 0.1Alt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)Alt + Up arrowAlt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)
Reducir el valor seleccionado en 0.1Alt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).Alt + Down arrowAlt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).
Mostrar / ocultar más información sobre la propiedad actual (sólo vista calculada, cuando se selecciona una propiedad)Enter or SpaceReturn or SpaceEnter or Space
Abrir la página de referencia de MDN sobre la propiedad actual (solo vista calculada, cuando se selecciona una propiedad)F1F1F1
Abra el archivo CSS actual en el Editor de estilos (solo vista calculada, donde se muestra más información para una propiedad y se enfoca una referencia de archivo CSS).EnterReturnEnter
-
- -

Depurador

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Cerrar archivoCtrl + WCmd + WCtrl + W
Buscar texto en el archivo actualCtrl + FCmd + FCtrl + F
Buscar texto en todos los archivosCtrl + Shift + FCmd + Shift + FCtrl + Shift + F
Encuentra el siguiente en el archivo actualCtrl + GCmd + GCtrl + G
Buscar cadenas por nombreCtrl + PCmd + PCtrl + P
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada actualmenteCtrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionada actualmenteCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
- -

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5).

- -
-

Nota: Antes de Firefox 66, la combinación Ctrl + Shift + S en Windows y Linux o Cmd + Opt + S en macOS abriría / cerraría el depurador. Desde Firefox 66 y versiones posteriores, este ya no es el caso.

-
-
- -

Depurador (Antes de Firefox 52)

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CommandWindowsmacOSLinux
Abrir el depuradorCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Buscar una cadena en el archivo actual usando el script filterCtrl + FCmd + FCtrl + F
Encuentra el siguiente en el archivo actualEnter / Up arrowReturn / Up arrowEnter / Up arrow
Encuentra el anterior en el archivo actualShift + Enter / Down arrowShift + Return / Down arrowShift + Enter / Down arrow
Buscar en todas las fuentes usando el script filterCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
Buscar cadenas por nombreCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
Buscar definiciones de funcionesCtrl + DCmd + DCtrl + D
Filtrar variables cuando la ejecución está en pausaCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada Ctrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionadaCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
Agregar texto seleccionado a las expresiones de WatchCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
Ir a la linea usando el script filterCtrl + LCmd + LCtrl + L
Buscar usando el script filterCtrl + OCmd + OCtrl + O
En el panel de código fuente, salta a la definición de la funciónCtrl + clickCmd + clickCtrl + click
- -

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5)

-
- -

Consola web

- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandosWindowsmacOSLinux
Abre la consola webCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Buscar en el panel de visualización de mensajesCtrl + FCmd + FCtrl + F
Abre el panel inspector de objetosCtrl + ClickCtrl + ClickCtrl + Click
Limpia el panel inspector de objetosEscEscEsc
Centrarse en la línea de comandoCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Limpiar salida -

Ctrl + L

- -

From Firefox 44:

- -

Ctrl + Shift + L

- 		Ctrl + L -

Ctrl + L

- -

From Firefox 44:

- -

Ctrl + Shift + L

-
- -

Interprete de línea de comandos

- -

Estos atajos se aplican cuando estás en el Interprete de línea de comandos.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Desplazarse hasta el inicio de la salida de la consola (solo si la línea de comando está vacía)HomeHomeHome
Desplazarse hasta el final de la salida de la consola (solo si la línea de comando está vacía)EndEndEnd
Avanzar página a través de la salida de la consolaPage upPage upPage up
Retroceder una página a través de la salida de la consolaPage downPage downPage down
Ir hacia atrás a través del historial de comandosUp arrowUp arrowUp arrow
Ir hacia delante a través del historial de comandosDown arrowDown arrowDown arrow
Inicie la búsqueda inversa a través del historial de comandos / retroceda a través de comandos coincidentesF9Ctrl + RF9
Avance por el historial de comandos coincidentes (después de iniciar la búsqueda inversa)Shift + F9Ctrl + SShift + F9
Moverse al principio de la líneaHomeCtrl + ACtrl + A
Moverse al final de la líneaEndCtrl + ECtrl + E
Ejecutar la expresión actualEnterReturnEnter
Agregar una nueva línea (para ingresar expresiones de varias líneas)Shift + EnterShift + ReturnShift + Enter
- -

Ventana emergente de autocompletado

- -

Estos atajos se aplican mientras la ventana emergente de autocompletado está desplegada:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Elija la sugerencia actual de autocompletadoTabTabTab
Cancelar la ventana emergente de autocompletadoEscEscEsc
Ir a la sugerencia de autocompletado anteriorUp arrowUp arrowUp arrow
Ir a la siguiente sugerencia de autocompletadoDown arrowDown arrowDown arrow
Página arriba a través de sugerencias de autocompletadoPage upPage upPage up
Página abajo a través de sugerencias de autocompletadoPage downPage downPage down
Desplazarse al principio de  las sugerencias de autocompletadoHomeHomeHome
Desplazarse hasta el final de las sugerencias de autocompletadoEndEndEnd
-
- -

Editor de Estilo

- - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Abrir el editor de estiloShift + F7Shift + F7Shift + F7
Abrir una ventana emergente de autocompletadoCtrl + SpaceCmd + SpaceCtrl + Space
- -
-

Bloc de Notas

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Abrir el bloc de notasShift + F4Shift + F4Shift + F4
Ejecutar el código del bloc de notasCtrl + RCmd + RCtrl + R
Ejecutar el código del bloc de notas y mostrar el resultado en el inspector de objetosCtrl + ICmd + ICtrl + I
Ejecutar el código del bloc de notas e insertar el resultado como un comentarioCtrl + LCmd + LCtrl + L
Reevaluar la función actualCtrl + ECmd + ECtrl + E
Recargar la página actual y ejecutar el código del bloc de notaCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
Guardar el código del bloc de notasCtrl + SCmd + SCtrl + S
Abrir un código existenteCtrl + OCmd + OCtrl + O
Crear una nueva página del bloc de notasCtrl + NCmd + NCtrl + N
Cerrar el bloc de notasCtrl + WCmd + WCtrl + W
Imprimir el código en el bloc de notasCtrl + PCmd + PCtrl + P
Mostrar sugerencias de autocompletadoCtrl + SpaceCtrl + SpaceCtrl + Space
Mostrar documentaciónCtrl + Shift + SpaceCtrl + Shift + SpaceCtrl + Shift + Space
-
- -
-

Selector de color (Gotero)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
ComandoWindowsmacOSLinux
Seleccionar el color actualEnterReturnEnter
Salir del goteroEscEscEsc
Moverse por 1 píxelArrow keysArrow keysArrow keys
Moverse por 10 píxelsShift + arrow keysShift + arrow keysShift + arrow keys
-
diff --git a/files/es/tools/add-ons/index.html b/files/es/tools/add-ons/index.html deleted file mode 100644 index 53b7924169..0000000000 --- a/files/es/tools/add-ons/index.html +++ /dev/null @@ -1,17 +0,0 @@ ---- -title: Add-ons -slug: Tools/Add-ons -tags: - - NeedsTranslation - - TopicStub - - Web Development - - 'Web Development:Tools' -translation_of: Tools/Add-ons ---- -

Developer tools that are not built into Firefox, but ship as separate add-ons.

- -
-
WebSocket Monitor
-
Examine the data exchanged in a WebSocket connection.
-
 
-
diff --git a/files/es/tools/debugger/how_to/use_a_source_map/index.html b/files/es/tools/debugger/how_to/use_a_source_map/index.html new file mode 100644 index 0000000000..30e60902cd --- /dev/null +++ b/files/es/tools/debugger/how_to/use_a_source_map/index.html @@ -0,0 +1,36 @@ +--- +title: Uso de un mapa fuente +slug: Tools/Debugger/How_to/Uso_de_un_mapa_fuente +tags: + - Debug + - mapa fuente + - source map +translation_of: Tools/Debugger/How_to/Use_a_source_map +--- +
{{ToolsSidebar}}
+ +

Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:

+ + + +

En estas situaciones, es mucho más fácil depurar el código fuente en el estado original, que el fuente en el estado transformado que el navegador ha descargado. Un mapa fuente es un fichero que mapea el código transformado hacia el estado original, permitiendo al navegador reconstruir el fuente original y presentar el código original en el debugger.

+ +

Para habilitar al debugger trabajar con un mapa fuente, debes:

+ + + +
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
+ +

{{EmbedYouTube("Fqd15gHC4Pg")}}

+ +

En el video anterior, cargamos https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. Esta página carga un fuente llamado "main.js" que fue originalmente escrito en CoffeeScript y compilado a JavaScript. El fuente compilado contiene un comentario como el siguiente, que apunta al mapa fuente:

+ +
//# sourceMappingURL=main.js.map
+ +

En el panel de fuentes del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.

diff --git a/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html b/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html deleted file mode 100644 index 30e60902cd..0000000000 --- a/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Uso de un mapa fuente -slug: Tools/Debugger/How_to/Uso_de_un_mapa_fuente -tags: - - Debug - - mapa fuente - - source map -translation_of: Tools/Debugger/How_to/Use_a_source_map ---- -
{{ToolsSidebar}}
- -

Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:

- - - -

En estas situaciones, es mucho más fácil depurar el código fuente en el estado original, que el fuente en el estado transformado que el navegador ha descargado. Un mapa fuente es un fichero que mapea el código transformado hacia el estado original, permitiendo al navegador reconstruir el fuente original y presentar el código original en el debugger.

- -

Para habilitar al debugger trabajar con un mapa fuente, debes:

- - - -
//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map
- -

{{EmbedYouTube("Fqd15gHC4Pg")}}

- -

En el video anterior, cargamos https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html. Esta página carga un fuente llamado "main.js" que fue originalmente escrito en CoffeeScript y compilado a JavaScript. El fuente compilado contiene un comentario como el siguiente, que apunta al mapa fuente:

- -
//# sourceMappingURL=main.js.map
- -

En el panel de fuentes del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.

diff --git "a/files/es/tools/desempe\303\261o/index.html" "b/files/es/tools/desempe\303\261o/index.html" deleted file mode 100644 index 9dbf8e643d..0000000000 --- "a/files/es/tools/desempe\303\261o/index.html" +++ /dev/null @@ -1,91 +0,0 @@ ---- -title: Rendimiento -slug: Tools/Desempeño -translation_of: Tools/Performance ---- -

La herramienta de Rendimiento te da una visión general de la capacidad de respuesta del sitio que visitas así como de su JavaScript y el modelo de diseño. Con esta herramienta puedes generar un perfil o registro de un sitio web en un período de tiempo. En dicho perfil la herramienta te ofrece una vista general de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el tiempo de respuesta de dicha pagina.

- -

Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:

- - - -

{{EmbedYouTube("WBmttwfA_k8")}}

- -
-

Preámbulo

- -
-
-
-
UI Tour
-
-

Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.

-
-
-
- -
-
-
How to
-
Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.
-
-
-
- -
-

Componentes de la herramienta de Rendimiento

- -
-
-
-
Frame rate
-
Comprender la capacidad de respuesta general de tu sitio.
-
Call Tree
-
Encontrar cuellos de botella en el JavaScript de tu sitio.
-
-
- -
-
-
Waterfall
-
Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.
-
Flame Chart
-
Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.
-
 
-
-
-
- -
-

Escenarios

- -
-
-
-
Animating CSS properties
-
Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.
-
 
-
-
- -
-
-
Intensive JavaScript
-
Utiliza la velocidad de los fotogramas y la herramienta Waterfall para resaltar los problemas de rendimiento provocados por los JavaScript de larga duración y cómo los workers pueden ayudar en esta situación.
-
-
-
- -

 

- -
-
-
 
-
-
- -

 

diff --git "a/files/es/tools/desempe\303\261o/ui_tour/index.html" "b/files/es/tools/desempe\303\261o/ui_tour/index.html" deleted file mode 100644 index 8898abae03..0000000000 --- "a/files/es/tools/desempe\303\261o/ui_tour/index.html" +++ /dev/null @@ -1,134 +0,0 @@ ---- -title: Paseo por la interfaz de usuario -slug: Tools/Desempeño/UI_Tour -translation_of: Tools/Performance/UI_Tour ---- -

La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:

- -

- - - -

Barra de herramientas (Toolbar)

- -

De izquierde a derecha la barra de herramientas contiene los siguientes botones:

- - - -
-

Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.

-
- - - -

- -

Lista de grabaciones (Recordings pane)

- -

La lista de grabaciones muestra todas las grabaciones activas, incluyendo las realizadas durante la sesion y las que hayas importado.

- -

- -

En el hay una grabación seleccionada en todo momento y esta se mostrara en el resto de la herramienta. Para seleccionar una grabación diferente, presiónala en la lista del panel. Para guardarla como un archivo JSON haz click en "Guardar".

- -

Vista previa de la grabacion (Recording overview)

- -

Muestra un resumen de toda la grabación, donde el eje-x representa el tiempo.

- -

- -

Contiene dos elementos: una vista previa de la vista en cascada y gráfico con el promedio de fotogramas.

- -

Resumen de la vista en cascada

- -

Nos presenta una versión comprimida de la vista en cascada:

- -

- -

Las operaciones grabadas están codificadas con el mismo esquema de colores empleado para la vista en cascada que se muestra en la ventana de detalles.

- -

Gráfico con el promedio de fotogramas

- -

El promedio de fotogramas nos da una idea de como el navegador responde durante la grabación:

- -

- -

Puedes consultar la entrada sobre el promedio de fotogramas.

- -

Relacionando eventos

- -

Como estos eventos están sincronizados, puedes crear una correlación entre ellos.

- -

Por ejemplo en la captura de pantalla inferior, una larga operación de pintado (representada con una barra verde en el resumen de la vista en cascada) corresponde con una caída en el promedio de fotogramas:

- -

- -

Ampliando

- -

Puedes usar la vista previa para seleccionar un trozo de la grabación para examinarlo con mas detalle. Al hacer esto, la ventana de detalles se actualizara con el contenido marcado. En la captura inferior hemos seleccionado la caída en el promedio de fotogramas y así podemos ver la operación de pintado con mas detalle:

- -

- -

Ventana de detalles (Details pane)

- -

La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la barra de herramientas.

- -

Vista en cascada

- -

La vista en cascada da una vision de que esta haciendo el navegador durante la grabación: ejecutar Javascript, actualizar CSS,  actualizar la composición de la pagina y el rendimiento del redibujado. El eje-x representa el tiempo y las operaciones grabadas van apareciendo en forma de cascada, reflejando así la naturaleza que tiene el navegador el ejecutar las tareas en serie.

- -

- -

Para aprender mas sobre la vista en cascada puedes visitar su entrada.

- -

Árbol de llamadas

- -

El árbol de llamadas es una muestra del Javascript que se ejecuta en la pagina. Son una serie de muestras del estado del motor de Javascript y registra el stack de código ejecutado en el momento que se toma la muestra. Estadísticamente, el numero de muestras tomadas al ejecutar una función especifica, corresponde con la cantidad de tiempo que el navegador ha empleado para ejecutarlo, así puedes identificar los cuellos de botella en tu código.

- -


- Para aprender mas sobre el árbol de llamadas puedes visitar su entrada.

- -

Gráfico de llama

- -

Si el árbol de llamadas te muestra estadísticamente que funciones de tu sitio gastan mas tiempo de ejecución durante la grabación, el gráfico de llama nos indica cualquier stack llamado durante la misma:

- -

- -

Para aprender mas sobre el gráfico de llama puedes visitar su entrada.

- -

Asignaciones

- -
-

La vista de Asignaciones es nueva en Firefox 46.

-
- -

La vista de Asignaciones es como el árbol de llamadas, pero para las asignaciones: Nos muestra que funciones en tu pagina tienen mas memoria asignada durante el transacurso de la grabación.

- -

- -

La vista de Asignaciones solo aparece si haz seleccionado "Grabar Asignaciones" en las opciones de las herramientas de rendimiento antes de hacer una nueva grabación.

- -

{{EmbedYouTube("Le9tTo7bqts")}}

- -

Para aprender mas sobre las Asignaciones puedes visitar su entrada.

diff --git a/files/es/tools/editor_audio_web/index.html b/files/es/tools/editor_audio_web/index.html deleted file mode 100644 index 2db0cdbe58..0000000000 --- a/files/es/tools/editor_audio_web/index.html +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Editor de audio web -slug: Tools/Editor_Audio_Web -translation_of: Tools/Web_Audio_Editor ---- -
-

El editor de audio web es nuevo en Firefox 32.

-
-

Con la API de Audio Web, los desarrolladores crean un contexto de audio. Dentro de ese contexto construyen un número de  nodos de audio, incluyendo:

- -

Cada nodo tiene cero o más propiedades AudioParam que configuran su operación. Por ejemplo, GainNode tiene solamente la propiedad gain, mientras que OscillatorNode tiene las propiedades frequency y detune.

-

El desarrollador conecta los nodos en un gráfico y ese gráfico completo define el comportamiento del flujo de audio.

-

El editor de audio web examina un contexto de audio construido en la página y proporciona una visualización de su gráfico. Esto da una vista de alto nivel de su operación y permite asegurar que todos los nodos están conectados de la forma esperada. Entonces se pueden examinar y editar las propiedades AudioParam para cada nodo del gráfico. Algunas propiedades no-AudioParam, como una propiedad OscillatorNode's type son mostradas y también se pueden editar.

-

Esta herramienta todavía es experimental. Si encuentra errores, nos encantaría que los informe en Bugzilla. Si tiene alguna opinión o sugerencias para nuevas funcionalidades, ffdevtools.uservoice.com o Twitter son lugares excelentes para registrarlas.

-

Abriendo el editor de audio web

-

El editor de audio web no está habilitado por defecto en Firefox 32. Para habilitarlo, abra la Configuración de herramientas de desarrollador y marque "Audio web". Ahora debería haber una pestaña extra en la Barra de herramientas llamada "Audio web". Haga clic en esa pestaña y cargue una página que construya un contexto de audio. Dos demos interesantes son:

- -

Visualizando el gráfico

-

El editor de audio web ahora mostrará el gráfico del contexto de audio cargado. Aquí está el gráfico del demo de Violent Theremin:

-

Se puede ver que usa tres nodos: un OscillatorNode como fuente, un GainNode para controlar el volumen y un AudioDestinationNode como destino.

-

Inspeccionando y modificando AudioNodes

-

Si hace clic en un nodo, se restalta y aparece un inspector del nodo en el lado derecho. Ahí se listan los valores de las propiedades del nodo AudioParam. Por ejemplo, así se ve el OscillatorNode:

-

Con el demo de Violent Theremin, el parámetro frecuencia es modificado cuando el usuario mueve el mouse hacia la izquierda o la derecha y eso se puede ver reflejado en el inspector del nodo. Sin embargo, el valor no es actualizado en tiempo real: hay que hacer clic en el nodo nuevamente para ver el valor actualizado.

-

Si se hace clic en el valor en el inspector del nodo se puede modificar: presione Intro o Tab y el nuevo valor tiene efecto inmediatamente.

diff --git a/files/es/tools/editor_estilo/index.html b/files/es/tools/editor_estilo/index.html deleted file mode 100644 index cdfc54bebf..0000000000 --- a/files/es/tools/editor_estilo/index.html +++ /dev/null @@ -1,101 +0,0 @@ ---- -title: Editor de Estilo -slug: Tools/Editor_Estilo -tags: - - CSS - - Desarrollo web - - Herramientas - - Herramientas de desarrollo web - - Hojas de estilo -translation_of: Tools/Style_Editor ---- -

El editor de estilo te permite:

- - - -

{{EmbedYouTube("7839qc55r7o")}}

- -

Para abrir el Editor de Estilo selecciona la opción "Editor de Estilo" desde el menú "Web Developer" (este es un submenu del menú "Tools" o "Herramientas" en una Mac). El Toolbox o caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Editor de Estilo activado:

- -

- -

El Editor de Estilo está divivido en  dos secciones principales: el panel de estilos en la izquierda y el editor en la derecha.

- -
-

From Firefox 33 onwards, there's a third component to the Style Editor: the media sidebar.

-
- -

El panel de hojas de estilo

- -

El panel de hojas de estilo, en la izquierda, muestra todas las hojas de estilos que están siendo utilizadas por el documento actual.  You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. Puede guardar los cambios hechos en la hoja de estilos a su computador, haciendo clic en el botón Guardar en la esquina inferior derecha de cada hoja de estilos de la lista.

- -

El panel de edición

- -

A la derecha está el panel de edición. Aquí está disponible el código fuente de la hoja de estilo seleccionada, lista para ver y editar. Cualquier cambio que realice será aplicada inmediatamente. This makes it easy to experiment with, revise, and test changes. Una vez esté satisfecho con sus cambios, puede guardar una copia localmente, haciendo clic en el botón Guardar.

- -

El editor contiene numeración de líneas y resaltamiento de código, haciendo más fácil la lectura de su CSS. También soporta keyboard shortcuts.

- -

El Editor de Estilos automáticamente des-minimiza las hojas de estilo que detecta, sin afectar el original. Esto facilita mucho el trabajo en páginas que ya han sido optimizadas.

- -

El Editor de Estilos soporta autocompletado. Empiece escribiendo y el sistema le ofrecerá una lista de sugerencias.

- -

Puede deshabilitar el autocompletado en Style Editor settings.

- -

La barra lateral "media"

- -

A partir de Firefox 33 en adelante, el Editor de Estilos muestra una barra lateral a la derecha cuando se encuentra alguna regla @media (@media rules). La barra lateral muestra las reglas y provee un link a la línea donde se define dicha regla. Haga clic en un ítem para ir hacia la definición de esa regla en la hoja de estilo. El texto condicional de la regla estará en gris si el media query no aplica.

- -

La barra lateral de medios funciona especialmente bien con Responsive Design View para crear y depurar diseños móviles :

- -

- -

Creación e importación de hojas de estilo

- -

Se puede crear una nueva hoja de estilos haciendo click en el nuevo botón de la barra de herrramientas. A continuación puedes comenzar a introducir  CSS en el nuevo editor y ver como los nuevos estilos se aplican de forma inmediata ,al igual que los cambios en otras hojas.

- -

Se puede cargar una hoja de estilos desde el disco y aplicarlo a la página haciendo click en el boton de importar.

- -

Soporte de mapa fuente

- -

{{EmbedYouTube("zu2eZbYtEUQ")}}

- -

Los desarrolladores web, con frecuencia crean archivos CSS  utilizando un preprocesador como  Sass, Less, o Stylus. Estas herramientas generan archivos CSS  procedentes de un sintasix mas rico y expresivo. Si haces esto, seras capaz de editar y  ver que el  CSS  generado no es tan util, porque el código que mantienes es el sintaxis preprocesado, no el  CSS generado. Por lo que necesitarás editar el CSS generado, y después manualmente trabajar sobre como reaplicarlo a la fuente original.

- -

Mapas Fuente habilita para regresar desde el CSS generado a la síntasix original, entonces  se puede ver, y te permite editar archivos en la síntasix original. A partir de Firefox 29 en adelante, el editor de estilos puede interpretar mapas fuente de CSS .

- -

Esto significa que si utilizas, por ejemplo, Sass, el Editor de Estilos  mostrará,y permitirá editar,archivos Sass , en lugar del CSS que se ha generado desde ellos:

- -

Para que esto funcione ,es necesario:

- - - -

Visualización de las fuentes originales

- -

Ahora, si compruebas "mostrar fuentes originales" en los ajustes del Editor de estilos, el vínculo junto a las reglas  CSS en la Vista de Reglas ,vincula con las fuentes originales en el Editor de Estilos.

- -

Edición de las fuentes originales

- -

Se pueden editar tambien las fuentes originales en el  Editor de estilos y ver el resultado aplicado a la página de inmediato. Para conseguir que esto funcione hay dos pasos adicionales.

- -

Primero, configura el preprocesador para que muestre la fuente original y automaticamente regenere el CSS cuando cambien las fuentes. Con Sass puedes hacer esto simplemente pasando la opción --watch :

- -
sass index.scss:index.css --sourcemap --watch
- -

A continuación, guarda la fuente original en el editor de estilos haciendo click en el botón   "Guardar" junto al archivo, y este se guardará sobre el archivo original.

- -

Ahora cuando hagas cambios en el archivo original en el  Editor de Estilos , el CSS se regenerará y podrás ver los cambios de forma inmediata.

- -

Atajos de Teclado

- -

Atajos del editor de código fuente

- -

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

- -

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/es/tools/keyboard_shortcuts/index.html b/files/es/tools/keyboard_shortcuts/index.html new file mode 100644 index 0000000000..9372393011 --- /dev/null +++ b/files/es/tools/keyboard_shortcuts/index.html @@ -0,0 +1,1266 @@ +--- +title: Accesos directos +slug: Tools/Accesos_directos +tags: + - Herramientas + - 'l10n:priority' +translation_of: Tools/Keyboard_shortcuts +--- +
{{ToolsSidebar}}
+ +

Esta página muestra todos los accesos directos utilizados para las herramientas para desarrolladores de Firefox.

+ +

La primera sección muestra el acceso directo para cada herramienta mientras que la segunda sección muestra los accesos directos aplicables sólo a las herramientas de desarrolladores. Por último hay una sección para cada herramienta, que lista todos los accesos directos que puedes usar dentro de la misma.

+ +

Debido a que los accesos directos dependen de la ubicación, no están documentados en esta página.

+ +

Herramientas de apertura y cierre

+ +

Estos accesos directos funcionan en la ventana principal del navegador para abrir la herramienta especificada. Los mismos accesos directos funcionarán para cerrar las herramientas alojadas en la Caja de herramientas si la herramienta está activa. Para herramientas que se abren en una nueva ventana, como la consola del navegador, debe cerrar la ventana para cerrar la herramienta.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abre la caja de herramientas (con la herramienta más reciente activada)Ctrl + Shift + ICmd + Opt + ICtrl + Shift + I
Trae la caja de herramientas a primer plano (solo si está en una ventana separada y no en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Cierra la caja de herramientas (si está en una ventana separada y en primer plano)Ctrl + Shift + I o F12Cmd + Opt + I o F12Ctrl + Shift + I o F12
Abre la consola web 1Ctrl + Shift + KCmd + Opt + KCtrl + Shift + K
Abre el inspector de elementosCtrl + Shift + CCmd + Opt + CCtrl + Shift + C
Abre el depurador 2Ctrl + Shift + SCmd + Opt + SCtrl + Shift + S
Abre el editor de estilosShift + F7Shift + F7 1Shift + F7
Abre el perfiladorShift + F5Shift + F5 1Shift + F5
Abre el monitor de red 3Ctrl + Shift + ECmd + Opt + ECtrl + Shift + E
Despliega las herramientas de desarrolladorShift + F2Shift + F2 1Shift + F2
Despliega la vista de diseño adaptableCtrl + Shift + MCmd + Opt + MCtrl + Shift + M
Abre la consola del navegador 4Ctrl + Shift + JCmd + Shift + JCtrl + Shift + J
Abre la caja de herramientas del navegadorCtrl + Alt + Shift + ICmd + Opt + Shift + ICtrl + Alt + Shift + I
Abre el bloc de notasShift + F4Shift + F4Shift + F4
Abre el WebIDEShift + F8Shift + F8Shift + F8
Abre el inspector de almacenamiento 5Shift + F9Shift + F9Shift + F9
Abre el depurador 2Ctrl + Shift + ZCmd + Opt + ZCtrl + Shift + Z
+ +

1. A diferencia de otras herramientas alojadas en la caja de herramientas, este acceso directo tampoco cierra la Consola Web. En cambio, se centra en la línea de comandos de la consola web. Para cerrar la consola web, use el acceso directo de la caja de herramientas global de Ctrl + Shift + I (Cmd + Opt + I en una Mac).

+ +

2. A partir de Firefox 66, este acceso directo ya no estará asociado con el depurador. A partir de Firefox 71, la letra de este acceso directo pasará a ser la Z.

+ +

3. Antes de Firefox 55, el atajo de teclaro era Ctrl + Shift + Q (Cmd + Opt + Q en Mac).

+ +

4. Hasta Firefox 38, cuando la consola del navegador está oculta por una ventana normal de Firefox, la misma combinación de teclas cierra la consola del navegador. Desde Firefox 38 en adelante, si la consola del navegador está oculta por una ventana normal de Firefox, esta combinación de teclas vuelve a colocar la consola del navegador en la parte superior y se enfoca en ella..

+ +

5. La herramienta está deshabilitada de forma predeterminada, por lo que el acceso directo no funcionará hasta que se habilite desde el Panel de configuración.

+ +

Caja de Herramientas

+ +
+

Estos accesos directos funcionan siempre que la caja de herramientas esté abierta, sin importar qué herramienta esté activa.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Recorre las herramientas de izquierda a derechaCtrl + ]Cmd + ]Ctrl + ]
Recorre las herramientas de derecha a izquierdaCtrl + [Cmd + [Ctrl + [
Alterna entre la herramienta activa y la configuración.F1F1F1
Alterna caja de herramientas entre los 2 últimos modos de acoplamientoCtrl + Shift + DCmd + Shift + DCtrl + Shift + D
Alterna consola dividida (excepto si la consola es la herramienta seleccionada actualmente)EscEscEsc
+
+ +
+
+
Estos accesos directos funcionan en todas las herramientas alojadas en la caja de herramientas.
+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Incrementa el tamaño de la fuenteCtrl + + Cmd + + Ctrl + +
Decrementa el tamaño de la fuenteCtrl + -Cmd + -Ctrl + -
Restaura el tamaño por defecto de la fuenteCtrl + 0Cmd + 0Ctrl + 0
+
+ +

Editor de código fuente

+ +
+

Esta tabla enumera los accesos directos predeterminados para el editor de código fuente.

+ +

En la sección Preferencias del editor de la configuración de las herramientas del desarrollador, es posible optar por utilizar las combinaciones de teclas Vim, Emacs o Sublime Text en su lugar.

+ +

Para seleccionarlos, visite about:config, seleccione la configuración devtools.editor.keymap y asigne "vim" o "emacs", o "sublime" a esa configuración. Si hace esto, los enlaces seleccionados se usarán para todas las herramientas de desarrollador que usan el editor de origen. Debe volver a abrir el editor para que el cambio surta efecto.

+ +

Desde Firefox 33 en adelante, la preferencia de vinculación de teclas se expone en la sección Preferencias del editor de la configuración de las herramientas del desarrollador, y puede configurarla allí en lugar de en about:config.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Ir a la lineaCtrl + JCmd + JCtrl + J
Buscar en la páginaCtrl + FCmd + FCtrl + F
Volver a buscar en la páginaCtrl + GCmd + GCtrl + G
Seleccionar todoCtrl + ACmd + ACtrl + A
CortarCtrl + XCmd + XCtrl + X
CopiarCtrl + CCmd + CCtrl + C
PegarCtrl + VCmd + VCtrl + V
DesacerCtrl + ZCmd + ZCtrl + Z
RehacerCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
IdentarTabTabTab
Quitar identado o sangríaShift + TabShift + TabShift + Tab
Mover línea(s) hacia arribaAlt + UpAlt + UpAlt + Up
Mover línea (s) hacia abajoAlt + DownAlt + DownAlt + Down
Comentar/Decomentar linea(s)Ctrl + /Cmd + /Ctrl + /
+
+ +

Inspector de páginas

+ +
+ + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abre el inspectorCtrl + Shift + CCmd + Shift + CCtrl + Shift + C
+ +

Selector de nodos

+ +

Estos accesos directos funcionan mientras el selector de nodos está activo.

+ + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Seleccione el elemento debajo del mouse y cancela el modo selectorClickClickClick
Seleccione el elemento debajo del mouse y permanece en modo selectorShift+ClickShift+ClickShift+Click
+ +

Panel HTML

+ +

Estos accesos directos funcionan mientras se esté en el panel HTML del Inspector.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Elimina el nodo seleccionadoDeleteDeleteDelete
Deshace el borrado de un nodoCtrl + ZCmd + ZCtrl + Z
Rehace el borrado de un nodoCtrl + Shift + Z / Ctrl + YCmd + Shift + Z / Cmd + YCtrl + Shift + Z / Ctrl + Y
Moverse al siguiente nodo (solo nodos expandidos)Down arrowDown arrowDown arrow
Moverse al nodo anteriorUp arrowUp arrowUp arrow
Moverse al primer nodo del arbolHomeHomeHome
Moverse al últiimo nodo del arbolEndEndEnd
Expandir el nodo seleccionado actualmenteRight arrowRight arrowRight arrow
Contraer el nodo seleccionado actualmenteLeft arrowLeft arrowLeft arrow
(Cuando se selecciona un nodo) moverse dentro del nodo para que pueda comenzar a recorrer los atributos.EnterReturnEnter
Avanza por los atributos de un nodoTabTabTab
Retrocede a través de los atributos de un nodoShift + TabShift + TabShift + Tab
(Cuando se selecciona un atributo) comienza a editar el atributoEnterReturnEnter
Oculta / muestra el nodo seleccionadoHHH
Se centra en el cuadro de búsqueda en el panel HTMLCtrl + FCmd + FCtrl + F
Editar como HTMLF2F2F2
Deja de editar como HTMLF2 / Ctrl +EnterF2 / Cmd + ReturnF2 / Ctrl + Enter
Copia el HTML externo del nodo seleccionadoCtrl + CCmd + CCtrl + C
Desplazar el nodo seleccionado a la vistaSSS
Encuentra la siguiente coincidencia en el marcado, cuando la búsqueda está activaEnterReturnEnter
Encuentra la coincidencia anterior en el marcado, cuando la búsqueda está activaShift + EnterShift + ReturnShift + Enter
+ +

Barra de rutas de exploración o migas de pan

+ +

Estos atajos funcionan cuando la barra de rutas de exploración está enfocada.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Moverse al elemento anterior en la barraLeft arrowLeft arrowLeft arrow
Moverse al siguiente elemento en la barraRight arrowRight arrowRight arrow
Enfoca el panel HTMLShift + TabShift + TabShift + Tab
Enfoca el panel CSSTabTabTab
+ +

Panel CSS

+ +

Estos atajos funcionan cuando estás en el Inspector del panel CSS.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Se centra en el cuadro de búsqueda del panel CSSCtrl + FCmd + FCtrl + F
Borrar el contenido del cuadro de búsqueda (solo cuando el cuadro de búsqueda está enfocado y se ha ingresado contenido)EscEscEsc
Avanza a través de propiedades y valores del panelTabTabTab
Retroceda a través de propiedades y valores del panelShift + TabShift + TabShift + Tab
Comienza a editar la propiedad o el valor (Vista de reglas solamente, cuando se selecciona una propiedad o valor, pero aún no se está editando)Enter or SpaceReturn or SpaceEnter or Space
Se desplaza hacia arriba y hacia abajo a través de sugerencias de autocompletar (sólo vista de Reglas, cuando se edita una propiedad o valor)Up arrow , Down arrowUp arrow , Down arrowUp arrow , Down arrow
Elige la sugerencia actual de autocompletar (sólo vista de reglas, cuando se edita una propiedad o valor)Enter or TabReturn or TabEnter or Tab
Incrementar el valor seleccionado en 1Up arrowUp arrowUp arrow
Reducir el valor seleccionado en 1Down arrowDown arrowDown arrow
Incrementar el valor seleccionado en 100Shift + Page UpShift + Page UpShift + Page Up
Decrementar el valor seleccionado en 100Shift + Page DownShift + Page DownShift + Page Down
Incrementar el valor seleccionado en 10Shift + Up arrowShift + Up arrowShift + Up arrow
Reducir el valor seleccionado en 10Shift + Down arrowShift + Down arrowShift + Down arrow
Incrementar el valor seleccionado en 0.1Alt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)Alt + Up arrowAlt + Up arrow (Ctrl + Up arrow from Firefox 60 onwards.)
Reducir el valor seleccionado en 0.1Alt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).Alt + Down arrowAlt + Down arrow (Ctrl + Down arrow from Firefox 60 onwards).
Mostrar / ocultar más información sobre la propiedad actual (sólo vista calculada, cuando se selecciona una propiedad)Enter or SpaceReturn or SpaceEnter or Space
Abrir la página de referencia de MDN sobre la propiedad actual (solo vista calculada, cuando se selecciona una propiedad)F1F1F1
Abra el archivo CSS actual en el Editor de estilos (solo vista calculada, donde se muestra más información para una propiedad y se enfoca una referencia de archivo CSS).EnterReturnEnter
+
+ +

Depurador

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Cerrar archivoCtrl + WCmd + WCtrl + W
Buscar texto en el archivo actualCtrl + FCmd + FCtrl + F
Buscar texto en todos los archivosCtrl + Shift + FCmd + Shift + FCtrl + Shift + F
Encuentra el siguiente en el archivo actualCtrl + GCmd + GCtrl + G
Buscar cadenas por nombreCtrl + PCmd + PCtrl + P
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada actualmenteCtrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionada actualmenteCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
+ +

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5).

+ +
+

Nota: Antes de Firefox 66, la combinación Ctrl + Shift + S en Windows y Linux o Cmd + Opt + S en macOS abriría / cerraría el depurador. Desde Firefox 66 y versiones posteriores, este ya no es el caso.

+
+
+ +

Depurador (Antes de Firefox 52)

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CommandWindowsmacOSLinux
Abrir el depuradorCtrl + Shift + SCmd + Opt + SCtrl + Shift + S
Buscar una cadena en el archivo actual usando el script filterCtrl + FCmd + FCtrl + F
Encuentra el siguiente en el archivo actualEnter / Up arrowReturn / Up arrowEnter / Up arrow
Encuentra el anterior en el archivo actualShift + Enter / Down arrowShift + Return / Down arrowShift + Enter / Down arrow
Buscar en todas las fuentes usando el script filterCtrl + Alt + FCmd + Opt + FCtrl + Alt + F
Buscar cadenas por nombreCtrl + P / Ctrl + OCmd + P / Ctrl + OCtrl + P / Ctrl + O
Buscar definiciones de funcionesCtrl + DCmd + DCtrl + D
Filtrar variables cuando la ejecución está en pausaCtrl + Alt + VCmd + Opt + VCtrl + Alt + V
Reanudar la ejecución en un punto de interrupciónF8F8 1F8
SiguienteF10F10 1F10
AnteriorF11F11 1F11
SalirShift + F11Shift + F11 1Shift + F11
Alternar punto de interrupción en la línea seleccionada Ctrl + BCmd + BCtrl + B
Alternar punto de interrupción condicional en la línea seleccionadaCtrl + Shift + BCmd + Shift + BCtrl + Shift + B
Agregar texto seleccionado a las expresiones de WatchCtrl + Shift + ECmd + Shift + ECtrl + Shift + E
Ir a la linea usando el script filterCtrl + LCmd + LCtrl + L
Buscar usando el script filterCtrl + OCmd + OCtrl + O
En el panel de código fuente, salta a la definición de la funciónCtrl + clickCmd + clickCtrl + click
+ +

1. De manera predeterminada, en algunos Mac, la tecla de función se reasigna para usar una función especial: por ejemplo, para cambiar el brillo de la pantalla o el volumen. Consulte esta guía para usar estas teclas como teclas de función estándar. Para usar una tecla reasignada como una tecla de función estándar, mantenga presionada la tecla Función también (para abrir el Profiler, use Shift + Function + F5)

+
+ +

Consola web

+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandosWindowsmacOSLinux
Abre la consola webCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Buscar en el panel de visualización de mensajesCtrl + FCmd + FCtrl + F
Abre el panel inspector de objetosCtrl + ClickCtrl + ClickCtrl + Click
Limpia el panel inspector de objetosEscEscEsc
Centrarse en la línea de comandoCtrl + Shift + KCmd + Opt + KCtrl + Shift + K
Limpiar salida +

Ctrl + L

+ +

From Firefox 44:

+ +

Ctrl + Shift + L

+ 		Ctrl + L +

Ctrl + L

+ +

From Firefox 44:

+ +

Ctrl + Shift + L

+
+ +

Interprete de línea de comandos

+ +

Estos atajos se aplican cuando estás en el Interprete de línea de comandos.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Desplazarse hasta el inicio de la salida de la consola (solo si la línea de comando está vacía)HomeHomeHome
Desplazarse hasta el final de la salida de la consola (solo si la línea de comando está vacía)EndEndEnd
Avanzar página a través de la salida de la consolaPage upPage upPage up
Retroceder una página a través de la salida de la consolaPage downPage downPage down
Ir hacia atrás a través del historial de comandosUp arrowUp arrowUp arrow
Ir hacia delante a través del historial de comandosDown arrowDown arrowDown arrow
Inicie la búsqueda inversa a través del historial de comandos / retroceda a través de comandos coincidentesF9Ctrl + RF9
Avance por el historial de comandos coincidentes (después de iniciar la búsqueda inversa)Shift + F9Ctrl + SShift + F9
Moverse al principio de la líneaHomeCtrl + ACtrl + A
Moverse al final de la líneaEndCtrl + ECtrl + E
Ejecutar la expresión actualEnterReturnEnter
Agregar una nueva línea (para ingresar expresiones de varias líneas)Shift + EnterShift + ReturnShift + Enter
+ +

Ventana emergente de autocompletado

+ +

Estos atajos se aplican mientras la ventana emergente de autocompletado está desplegada:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Elija la sugerencia actual de autocompletadoTabTabTab
Cancelar la ventana emergente de autocompletadoEscEscEsc
Ir a la sugerencia de autocompletado anteriorUp arrowUp arrowUp arrow
Ir a la siguiente sugerencia de autocompletadoDown arrowDown arrowDown arrow
Página arriba a través de sugerencias de autocompletadoPage upPage upPage up
Página abajo a través de sugerencias de autocompletadoPage downPage downPage down
Desplazarse al principio de  las sugerencias de autocompletadoHomeHomeHome
Desplazarse hasta el final de las sugerencias de autocompletadoEndEndEnd
+
+ +

Editor de Estilo

+ + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abrir el editor de estiloShift + F7Shift + F7Shift + F7
Abrir una ventana emergente de autocompletadoCtrl + SpaceCmd + SpaceCtrl + Space
+ +
+

Bloc de Notas

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Abrir el bloc de notasShift + F4Shift + F4Shift + F4
Ejecutar el código del bloc de notasCtrl + RCmd + RCtrl + R
Ejecutar el código del bloc de notas y mostrar el resultado en el inspector de objetosCtrl + ICmd + ICtrl + I
Ejecutar el código del bloc de notas e insertar el resultado como un comentarioCtrl + LCmd + LCtrl + L
Reevaluar la función actualCtrl + ECmd + ECtrl + E
Recargar la página actual y ejecutar el código del bloc de notaCtrl + Shift + RCmd + Shift + RCtrl + Shift + R
Guardar el código del bloc de notasCtrl + SCmd + SCtrl + S
Abrir un código existenteCtrl + OCmd + OCtrl + O
Crear una nueva página del bloc de notasCtrl + NCmd + NCtrl + N
Cerrar el bloc de notasCtrl + WCmd + WCtrl + W
Imprimir el código en el bloc de notasCtrl + PCmd + PCtrl + P
Mostrar sugerencias de autocompletadoCtrl + SpaceCtrl + SpaceCtrl + Space
Mostrar documentaciónCtrl + Shift + SpaceCtrl + Shift + SpaceCtrl + Shift + Space
+
+ +
+

Selector de color (Gotero)

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ComandoWindowsmacOSLinux
Seleccionar el color actualEnterReturnEnter
Salir del goteroEscEscEsc
Moverse por 1 píxelArrow keysArrow keysArrow keys
Moverse por 10 píxelsShift + arrow keysShift + arrow keysShift + arrow keys
+
diff --git a/files/es/tools/monitor_de_red/index.html b/files/es/tools/monitor_de_red/index.html deleted file mode 100644 index f50f1ee0fc..0000000000 --- a/files/es/tools/monitor_de_red/index.html +++ /dev/null @@ -1,189 +0,0 @@ ---- -title: Monitor de Red -slug: Tools/Monitor_de_Red -tags: - - Debugging - - Firefox - - Guía - - Herramientas - - Herramientas de Desarrollador - - Redes -translation_of: Tools/Network_Monitor ---- -

El monitor de red muestra todas las solicitudes de red que Firefox realiza (por ejemplo, cuando carga una página, o debido a XMLHttpRequests), cuanto tiempo toma cada petición, y los detalles de cada petición. Para abrir el monitor seleccione "Red" del menu "Desarrollador Web"  (el cual es un Submenú del Menú "Herramientas" en Mac), o abra Herramientas de Desarrollador Web y seleccione la solapa "Red".

- -

El monitor de red aparecerá al final de la ventana de navegación. Recargue la página para ver las solicitudes:

- -

- -

Lista de Solicitudes de Red

- -

Por defecto, el Monitor de Red muestra una lista de todas las solicitudes de red hechas durante la carga de una página. Cada solicitud es mostrada en su propia linea:
-

- -

Por defecto, el Monitor de Red se limpia cada vez que ud. navega a una nueva página o recarga la página actual. Desde Firefox 31 en adelante se puede cambiar este comportamiento selecccionando "Habilitar Registros Persistentes" en las Opciones de Herramientas.

- -

Area de Solicitudes de Red

- -

Cada fila muestra:

- - - -

La barra de herramientas en la parte superior etiqueta estas columnas, y hacer click en las etiquetas ordena todas las solicitudes por esa columna.

- -

Desde Firefox 30 en adelante, si el archivo es una imagen, la fila incluye una miniatura de la imagen, y pasar por arriba del nombre del archivo muestra un preview en un tooltip:

- -

- -

Linea de Tiempo

- -

La lista de solicitudes también muestra una linea de tiempo para las diferentes partes de cada solicitud. Cada linea de tiempo es dada en posición horizontal en su fila relativa a las otras solicitudes de red, de manera que ud. pueda ver el tiempo total que tomó cargar la página. Para más detalles sobre los códigos de color usados aqui, vea la sección en la página Tiempos.

- -

Filtrando por tipo de Contenido

- -

Al final de la ventana una fila de botones le permite a ud. filtrar las solicitudes por el tipo de contenido de la respuesta:

- -

En el extremo derecho de esta fila hay un botón llamado "Limpiar": como ud. podrá adivinar, esto le permite limpiar la lista de solicitudes de red.

- - - -

Haciendo click en una fila de la lista muestra un menú contextual con las siguientes opciones:

- - - -

Editar y Reenviar

- -

Esta opción abre un editor que le permite editar el método de Solicitud, URL, parámetros, y cabeceras, y reenviar la solicitud.

- -

Copiar como cURL

- -
-

Esta característica es nueva en Firefox 31.

-
- -

Esta opción copia la solicitud de red al portapapeles como un comando cURL, de manera que ud. pueda ejectutarlo desde una línea de comandos. El comando puede incluir las siguientes opciones:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
-X [METODO]Si el método no es GET o POST
--dataPara parámetros de solicitud URL encodeados
--data-binaryPara parámetros de solicitud multiparte
--http/VERSIONSi la versión de HTTP no es 1.1
-ISi el método no es HEAD
-H -

Uno para cada encabezado de solicitud.

- -

Deesde Firefox 34, si el encabezado "Accept-Encoding" está presente, el comando cURL incluirá --compressed en vez de  -H "Accept-Encoding: gzip, deflate".  Esto significa que la respuesta será automáticamente descomprimida.

-
- -

Detalles de Solicitud de red

- -

Hacer click en una fila muestra en un nuevo panel en la parte derecha del monitor de red, que provee más información detallada sobre la solicitud.

- -

Las pestañas de la parte superior de este panel le permiten cambiar entre 5 diferentes páginas:

- - - -

Desde Firefox 30 en adelante, hay una sexta página que aparece solamente si el tipo de contenido es HTML, la página de Vista Preliminar.

- -

Hacer click en el ícono de la izquierda de las pestañas cierra el panel y vuelve a la vista de lista.

- -

Encabezados

- -

Esta pestaña lista información básica sobre la solicitud incluyendo URL y código de estado, asi como la solicitud HTTP y encabezados de respuesta que fueron enviados:

- -

Ud. puede filtrar las encabezados que se muestran:

- -

Cookies

- -

Esta pestaña lista detalles completos de cualquier cookie que fue enviada con la solicitud o respuesta:

- -

Al igual que con los encabezados, ud. puede filtrar las cookies que se muestran.

- -

Parametros

- -

Esta pestaña muestra los parámetros GET y datos POST de una solicitud:

- -

Respuesta

- -

El contenido completo de la respuesta. Si la respuesta es HTML, JS o CSS, será mostrada como texto:

- -

Si la respuesta es JSON, será mostrada como un objeto inspeccionable:

- -

Si la respuesta es una imagen, la pestaña muestra una vista preliminar:

- -

Tiempos

- -

La pestaña de tiempo muestra una lista más detallada y comentada de la barra de línea de tiempo para esa solicitud, mostrando como el tiempo de espera total es dividido en varias etapas:

- -

- -

Vista Preliminar

- -
-

Esta caracteristica es nueva en  Firefox 30.

-
- -

Desde Firefox 30 en adelante, si el tipo de archivo es HTML una sexta pestaña aparece llamada "Vista Preliminar". Esta hace un render de aquel HTML:

- -

- -

Análisis de Rendimiento

- -
-

La herramienta de análisis de rendimiento es nueva en Firefox 29.

-
- -

Desde Firefox 29 en adelante, el Monitor de Red trae una herramienta de análisis de rendimiento (performance), para ayudarlo a ver cuánto le toma al navegador descargar las diferentes partes de su sitio.
-
- Para correr la herramienta de análisis de performance haga click en el icono de cronómetro en la barra de herramientas en la parte inferior del Monitor de Red:

- -

(Alternativamente, si ud. acaba de abrir el Monitor de Red, por ende no está todavia poblado con la lista de Solicitudes, ud. tendrá el icono de Cronómetro en la ventana principal.)

- -

El Monitor de Red luego carga el sitio dos veces: una vez con un cache de navegador vacio, y una vez con el chaché óptimo. Esto simula la primera vez que un usuario visita su sitio, y visitas siguientes. Muestra los resultados para cada corrida de lado a lado o verticalmente si la ventana de Navegación es angosta:

- -

El resultado de cada recarga es resumido en una tabla y un gráfico sectorial o de torta. La tabla agrupa recursos por tipo, y muestra el tamaño total de cada recurso y el tiempo total que tomó en cargarlos. El gráfico de torta acompañante muestra el tamaño relativo de cada tipo de recurso.

- -

Para volver a la lista de Solicitudes de Red del Monitor de Red haga click en el botón "Volver" en la izquierda.

- -

Hacer click en una porción de la torta lo lleva al Monitor de Red para esa recarga, con un filtro automáticamente aplicado para ver solo este tipo de recurso.

diff --git a/files/es/tools/network_monitor/index.html b/files/es/tools/network_monitor/index.html new file mode 100644 index 0000000000..f50f1ee0fc --- /dev/null +++ b/files/es/tools/network_monitor/index.html @@ -0,0 +1,189 @@ +--- +title: Monitor de Red +slug: Tools/Monitor_de_Red +tags: + - Debugging + - Firefox + - Guía + - Herramientas + - Herramientas de Desarrollador + - Redes +translation_of: Tools/Network_Monitor +--- +

El monitor de red muestra todas las solicitudes de red que Firefox realiza (por ejemplo, cuando carga una página, o debido a XMLHttpRequests), cuanto tiempo toma cada petición, y los detalles de cada petición. Para abrir el monitor seleccione "Red" del menu "Desarrollador Web"  (el cual es un Submenú del Menú "Herramientas" en Mac), o abra Herramientas de Desarrollador Web y seleccione la solapa "Red".

+ +

El monitor de red aparecerá al final de la ventana de navegación. Recargue la página para ver las solicitudes:

+ +

+ +

Lista de Solicitudes de Red

+ +

Por defecto, el Monitor de Red muestra una lista de todas las solicitudes de red hechas durante la carga de una página. Cada solicitud es mostrada en su propia linea:
+

+ +

Por defecto, el Monitor de Red se limpia cada vez que ud. navega a una nueva página o recarga la página actual. Desde Firefox 31 en adelante se puede cambiar este comportamiento selecccionando "Habilitar Registros Persistentes" en las Opciones de Herramientas.

+ +

Area de Solicitudes de Red

+ +

Cada fila muestra:

+ + + +

La barra de herramientas en la parte superior etiqueta estas columnas, y hacer click en las etiquetas ordena todas las solicitudes por esa columna.

+ +

Desde Firefox 30 en adelante, si el archivo es una imagen, la fila incluye una miniatura de la imagen, y pasar por arriba del nombre del archivo muestra un preview en un tooltip:

+ +

+ +

Linea de Tiempo

+ +

La lista de solicitudes también muestra una linea de tiempo para las diferentes partes de cada solicitud. Cada linea de tiempo es dada en posición horizontal en su fila relativa a las otras solicitudes de red, de manera que ud. pueda ver el tiempo total que tomó cargar la página. Para más detalles sobre los códigos de color usados aqui, vea la sección en la página Tiempos.

+ +

Filtrando por tipo de Contenido

+ +

Al final de la ventana una fila de botones le permite a ud. filtrar las solicitudes por el tipo de contenido de la respuesta:

+ +

En el extremo derecho de esta fila hay un botón llamado "Limpiar": como ud. podrá adivinar, esto le permite limpiar la lista de solicitudes de red.

+ + + +

Haciendo click en una fila de la lista muestra un menú contextual con las siguientes opciones:

+ + + +

Editar y Reenviar

+ +

Esta opción abre un editor que le permite editar el método de Solicitud, URL, parámetros, y cabeceras, y reenviar la solicitud.

+ +

Copiar como cURL

+ +
+

Esta característica es nueva en Firefox 31.

+
+ +

Esta opción copia la solicitud de red al portapapeles como un comando cURL, de manera que ud. pueda ejectutarlo desde una línea de comandos. El comando puede incluir las siguientes opciones:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
-X [METODO]Si el método no es GET o POST
--dataPara parámetros de solicitud URL encodeados
--data-binaryPara parámetros de solicitud multiparte
--http/VERSIONSi la versión de HTTP no es 1.1
-ISi el método no es HEAD
-H +

Uno para cada encabezado de solicitud.

+ +

Deesde Firefox 34, si el encabezado "Accept-Encoding" está presente, el comando cURL incluirá --compressed en vez de  -H "Accept-Encoding: gzip, deflate".  Esto significa que la respuesta será automáticamente descomprimida.

+
+ +

Detalles de Solicitud de red

+ +

Hacer click en una fila muestra en un nuevo panel en la parte derecha del monitor de red, que provee más información detallada sobre la solicitud.

+ +

Las pestañas de la parte superior de este panel le permiten cambiar entre 5 diferentes páginas:

+ + + +

Desde Firefox 30 en adelante, hay una sexta página que aparece solamente si el tipo de contenido es HTML, la página de Vista Preliminar.

+ +

Hacer click en el ícono de la izquierda de las pestañas cierra el panel y vuelve a la vista de lista.

+ +

Encabezados

+ +

Esta pestaña lista información básica sobre la solicitud incluyendo URL y código de estado, asi como la solicitud HTTP y encabezados de respuesta que fueron enviados:

+ +

Ud. puede filtrar las encabezados que se muestran:

+ +

Cookies

+ +

Esta pestaña lista detalles completos de cualquier cookie que fue enviada con la solicitud o respuesta:

+ +

Al igual que con los encabezados, ud. puede filtrar las cookies que se muestran.

+ +

Parametros

+ +

Esta pestaña muestra los parámetros GET y datos POST de una solicitud:

+ +

Respuesta

+ +

El contenido completo de la respuesta. Si la respuesta es HTML, JS o CSS, será mostrada como texto:

+ +

Si la respuesta es JSON, será mostrada como un objeto inspeccionable:

+ +

Si la respuesta es una imagen, la pestaña muestra una vista preliminar:

+ +

Tiempos

+ +

La pestaña de tiempo muestra una lista más detallada y comentada de la barra de línea de tiempo para esa solicitud, mostrando como el tiempo de espera total es dividido en varias etapas:

+ +

+ +

Vista Preliminar

+ +
+

Esta caracteristica es nueva en  Firefox 30.

+
+ +

Desde Firefox 30 en adelante, si el tipo de archivo es HTML una sexta pestaña aparece llamada "Vista Preliminar". Esta hace un render de aquel HTML:

+ +

+ +

Análisis de Rendimiento

+ +
+

La herramienta de análisis de rendimiento es nueva en Firefox 29.

+
+ +

Desde Firefox 29 en adelante, el Monitor de Red trae una herramienta de análisis de rendimiento (performance), para ayudarlo a ver cuánto le toma al navegador descargar las diferentes partes de su sitio.
+
+ Para correr la herramienta de análisis de performance haga click en el icono de cronómetro en la barra de herramientas en la parte inferior del Monitor de Red:

+ +

(Alternativamente, si ud. acaba de abrir el Monitor de Red, por ende no está todavia poblado con la lista de Solicitudes, ud. tendrá el icono de Cronómetro en la ventana principal.)

+ +

El Monitor de Red luego carga el sitio dos veces: una vez con un cache de navegador vacio, y una vez con el chaché óptimo. Esto simula la primera vez que un usuario visita su sitio, y visitas siguientes. Muestra los resultados para cada corrida de lado a lado o verticalmente si la ventana de Navegación es angosta:

+ +

El resultado de cada recarga es resumido en una tabla y un gráfico sectorial o de torta. La tabla agrupa recursos por tipo, y muestra el tamaño total de cada recurso y el tiempo total que tomó en cargarlos. El gráfico de torta acompañante muestra el tamaño relativo de cada tipo de recurso.

+ +

Para volver a la lista de Solicitudes de Red del Monitor de Red haga click en el botón "Volver" en la izquierda.

+ +

Hacer click en una porción de la torta lo lleva al Monitor de Red para esa recarga, con un filtro automáticamente aplicado para ver solo este tipo de recurso.

diff --git a/files/es/tools/page_inspector/3-pane_mode/index.html b/files/es/tools/page_inspector/3-pane_mode/index.html new file mode 100644 index 0000000000..7165d90a4d --- /dev/null +++ b/files/es/tools/page_inspector/3-pane_mode/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/3er-panel_modo/index.html b/files/es/tools/page_inspector/3er-panel_modo/index.html deleted file mode 100644 index 7165d90a4d..0000000000 --- a/files/es/tools/page_inspector/3er-panel_modo/index.html +++ /dev/null @@ -1,69 +0,0 @@ ---- -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 deleted file mode 100644 index e45754096e..0000000000 --- a/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -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 deleted file mode 100644 index 992a5b8326..0000000000 --- a/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html +++ /dev/null @@ -1,47 +0,0 @@ ---- -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 deleted file mode 100644 index 2a361a1d90..0000000000 --- a/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html +++ /dev/null @@ -1,364 +0,0 @@ ---- -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_html/index.html b/files/es/tools/page_inspector/how_to/examine_and_edit_html/index.html new file mode 100644 index 0000000000..2a361a1d90 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examine_and_edit_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_the_box_model/index.html b/files/es/tools/page_inspector/how_to/examine_and_edit_the_box_model/index.html new file mode 100644 index 0000000000..992a5b8326 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examine_and_edit_the_box_model/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/inspeccionar_y_seleccionar_colores/index.html b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html deleted file mode 100644 index f4ab42dabe..0000000000 --- a/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html +++ /dev/null @@ -1,26 +0,0 @@ ---- -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/inspect_and_select_colors/index.html b/files/es/tools/page_inspector/how_to/inspect_and_select_colors/index.html new file mode 100644 index 0000000000..f4ab42dabe --- /dev/null +++ b/files/es/tools/page_inspector/how_to/inspect_and_select_colors/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/open_the_inspector/index.html b/files/es/tools/page_inspector/how_to/open_the_inspector/index.html new file mode 100644 index 0000000000..e45754096e --- /dev/null +++ b/files/es/tools/page_inspector/how_to/open_the_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/reposicionando_elementos_en_la_pagina/index.html b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html deleted file mode 100644 index bd926e4bed..0000000000 --- a/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html +++ /dev/null @@ -1,22 +0,0 @@ ---- -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/reposition_elements_in_the_page/index.html b/files/es/tools/page_inspector/how_to/reposition_elements_in_the_page/index.html new file mode 100644 index 0000000000..bd926e4bed --- /dev/null +++ b/files/es/tools/page_inspector/how_to/reposition_elements_in_the_page/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/performance/index.html b/files/es/tools/performance/index.html new file mode 100644 index 0000000000..9dbf8e643d --- /dev/null +++ b/files/es/tools/performance/index.html @@ -0,0 +1,91 @@ +--- +title: Rendimiento +slug: Tools/Desempeño +translation_of: Tools/Performance +--- +

La herramienta de Rendimiento te da una visión general de la capacidad de respuesta del sitio que visitas así como de su JavaScript y el modelo de diseño. Con esta herramienta puedes generar un perfil o registro de un sitio web en un período de tiempo. En dicho perfil la herramienta te ofrece una vista general de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el tiempo de respuesta de dicha pagina.

+ +

Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:

+ + + +

{{EmbedYouTube("WBmttwfA_k8")}}

+ +
+

Preámbulo

+ +
+
+
+
UI Tour
+
+

Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.

+
+
+
+ +
+
+
How to
+
Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.
+
+
+
+ +
+

Componentes de la herramienta de Rendimiento

+ +
+
+
+
Frame rate
+
Comprender la capacidad de respuesta general de tu sitio.
+
Call Tree
+
Encontrar cuellos de botella en el JavaScript de tu sitio.
+
+
+ +
+
+
Waterfall
+
Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.
+
Flame Chart
+
Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.
+
 
+
+
+
+ +
+

Escenarios

+ +
+
+
+
Animating CSS properties
+
Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.
+
 
+
+
+ +
+
+
Intensive JavaScript
+
Utiliza la velocidad de los fotogramas y la herramienta Waterfall para resaltar los problemas de rendimiento provocados por los JavaScript de larga duración y cómo los workers pueden ayudar en esta situación.
+
+
+
+ +

 

+ +
+
+
 
+
+
+ +

 

diff --git a/files/es/tools/performance/ui_tour/index.html b/files/es/tools/performance/ui_tour/index.html new file mode 100644 index 0000000000..8898abae03 --- /dev/null +++ b/files/es/tools/performance/ui_tour/index.html @@ -0,0 +1,134 @@ +--- +title: Paseo por la interfaz de usuario +slug: Tools/Desempeño/UI_Tour +translation_of: Tools/Performance/UI_Tour +--- +

La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:

+ +

+ + + +

Barra de herramientas (Toolbar)

+ +

De izquierde a derecha la barra de herramientas contiene los siguientes botones:

+ + + +
+

Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.

+
+ + + +

+ +

Lista de grabaciones (Recordings pane)

+ +

La lista de grabaciones muestra todas las grabaciones activas, incluyendo las realizadas durante la sesion y las que hayas importado.

+ +

+ +

En el hay una grabación seleccionada en todo momento y esta se mostrara en el resto de la herramienta. Para seleccionar una grabación diferente, presiónala en la lista del panel. Para guardarla como un archivo JSON haz click en "Guardar".

+ +

Vista previa de la grabacion (Recording overview)

+ +

Muestra un resumen de toda la grabación, donde el eje-x representa el tiempo.

+ +

+ +

Contiene dos elementos: una vista previa de la vista en cascada y gráfico con el promedio de fotogramas.

+ +

Resumen de la vista en cascada

+ +

Nos presenta una versión comprimida de la vista en cascada:

+ +

+ +

Las operaciones grabadas están codificadas con el mismo esquema de colores empleado para la vista en cascada que se muestra en la ventana de detalles.

+ +

Gráfico con el promedio de fotogramas

+ +

El promedio de fotogramas nos da una idea de como el navegador responde durante la grabación:

+ +

+ +

Puedes consultar la entrada sobre el promedio de fotogramas.

+ +

Relacionando eventos

+ +

Como estos eventos están sincronizados, puedes crear una correlación entre ellos.

+ +

Por ejemplo en la captura de pantalla inferior, una larga operación de pintado (representada con una barra verde en el resumen de la vista en cascada) corresponde con una caída en el promedio de fotogramas:

+ +

+ +

Ampliando

+ +

Puedes usar la vista previa para seleccionar un trozo de la grabación para examinarlo con mas detalle. Al hacer esto, la ventana de detalles se actualizara con el contenido marcado. En la captura inferior hemos seleccionado la caída en el promedio de fotogramas y así podemos ver la operación de pintado con mas detalle:

+ +

+ +

Ventana de detalles (Details pane)

+ +

La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la barra de herramientas.

+ +

Vista en cascada

+ +

La vista en cascada da una vision de que esta haciendo el navegador durante la grabación: ejecutar Javascript, actualizar CSS,  actualizar la composición de la pagina y el rendimiento del redibujado. El eje-x representa el tiempo y las operaciones grabadas van apareciendo en forma de cascada, reflejando así la naturaleza que tiene el navegador el ejecutar las tareas en serie.

+ +

+ +

Para aprender mas sobre la vista en cascada puedes visitar su entrada.

+ +

Árbol de llamadas

+ +

El árbol de llamadas es una muestra del Javascript que se ejecuta en la pagina. Son una serie de muestras del estado del motor de Javascript y registra el stack de código ejecutado en el momento que se toma la muestra. Estadísticamente, el numero de muestras tomadas al ejecutar una función especifica, corresponde con la cantidad de tiempo que el navegador ha empleado para ejecutarlo, así puedes identificar los cuellos de botella en tu código.

+ +


+ Para aprender mas sobre el árbol de llamadas puedes visitar su entrada.

+ +

Gráfico de llama

+ +

Si el árbol de llamadas te muestra estadísticamente que funciones de tu sitio gastan mas tiempo de ejecución durante la grabación, el gráfico de llama nos indica cualquier stack llamado durante la misma:

+ +

+ +

Para aprender mas sobre el gráfico de llama puedes visitar su entrada.

+ +

Asignaciones

+ +
+

La vista de Asignaciones es nueva en Firefox 46.

+
+ +

La vista de Asignaciones es como el árbol de llamadas, pero para las asignaciones: Nos muestra que funciones en tu pagina tienen mas memoria asignada durante el transacurso de la grabación.

+ +

+ +

La vista de Asignaciones solo aparece si haz seleccionado "Grabar Asignaciones" en las opciones de las herramientas de rendimiento antes de hacer una nueva grabación.

+ +

{{EmbedYouTube("Le9tTo7bqts")}}

+ +

Para aprender mas sobre las Asignaciones puedes visitar su entrada.

diff --git a/files/es/tools/profiler/index.html b/files/es/tools/profiler/index.html deleted file mode 100644 index 23fa9e1e34..0000000000 --- a/files/es/tools/profiler/index.html +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: JavaScript Profiler -slug: Tools/Profiler -translation_of: Tools/Performance -translation_of_original: Tools/Profiler ---- -
- Utilice la herramienta de perfiles para encontrar los cuellos de botella en el código JavaScript. El Profiler muestras periódicamente la pila actual de llamadas JavaScript y compila información sobre las muestras. 
-
-  
-
- Puede iniciar el Analizador seleccionando "Profiler" en el menú "Web Developer". Usted encontrará en el menú "Web Developer" en el menú "Herramientas" en Linux y OS X, y directamente bajo el menú "Firefox" en Windows. 
-
-  
-
- La Caja de herramientas se abrirá, con el Profiler seleccionado.
-
-  
-

Los perfiladores de muestreo

-

El perfilador de JavaScript es un generador de perfiles de muestreo. Esto significa que las muestras periódicamente el estado del motor de JavaScript, y registra la pila para el código que se ejecuta en el momento de tomar la muestra. Estadísticamente, el número de muestras tomadas en la que estábamos ejecutando una función particular, corresponde a la cantidad de tiempo que el navegador está gastando ejecutarlo, para que pueda identificar los cuellos de botella en el código.
-
- Por ejemplo, considere un programa como este:

-
function doSomething() {
-  var x = getTheValue();
-  x = x + 1;                   // -> sample A
-  logTheValue(x);
-}
-
-function getTheValue() {
-  return 5;
-}
-
-function logTheValue(x) {
- console.log(x);               // -> sample B, sample C
-}
-
-doSomething();
-

Supongamos que ejecutar este programa con el perfilador activo, y en el tiempo que se tarda en ejecutar, el perfilador toma de tres muestras, como se indica en los comentarios en línea de arriba. 

-

Todos están tomadas desde el interior doSomething(), pero los otros dos se encuentran dentro de la función logTheValue() llamado por doSomething(). Así que el perfil consistiría en tres seguimientos de pila, como este:

-
Sample A: doSomething()
-Sample B: doSomething() > logTheValue()
-Sample C: doSomething() > logTheValue()
-

Esto, obviamente, no hay suficientes datos para que nos digan nada, pero con mucho más muestras de que podría ser capaz de concluir que logTheValue() es el cuello de botella en nuestro código.

-

Creación de un perfil

-

Haga clic en el botón del cronómetro (stopwatch) en el Profiler para iniciar muestras de grabación. Cuando Profiler está grabando, se resaltará el botón del cronómetro. Haga clic en él de nuevo para detener la grabación y guardar el nuevo perfil:

-

-

Una vez que haya hecho clic en "Stop", el nuevo perfil se abrirá de forma automática:

-

-

Este panel está dividido en dos partes:

- -

Analyzing a profile

-

The profile is split into two parts:

- -

Profile timeline

-

The profile timeline occupies the top part of the profile display:

-

The horizontal axis is time, and the vertical axis is call stack size at that sample. Call stack represents the amount of active functions at the time when the sample was taken.

-

Red samples along the chart indicate the browser was unresponsive during that time, and a user would notice pauses in animations and responsiveness. If a profile has red samples, consider breaking this code up into several events, and look into using requestAnimationFrame and Workers.

-

You can examine a specific range within the profile by clicking and dragging inside the timeline:

-

-

A new button then appears above the timeline labeled "Sample Range [AAA, BBB]". Clicking that button zooms the profile, and the details view underneath it, to that timeslice:

-


-

-

Profile details

-

The profile details occupy the bottom part of the profile display:

-

When you first open a new sample, the sample pane contains a single row labeled "(total)", as in the screenshot above. If you click the arrow next to "(total)", you'll see a list of all the top-level functions which appear in a sample.

-

-

Running time shows the total number of samples in which this function appeared1, followed by the percentage of all samples in the profile in which this function appeared. The first row above shows that there were 2021 samples in the entire profile, and the second row shows that 1914, or 94.7%, of them were inside the detectImage() function.

-

Self shows the number of samples in which the sample was taken while executing this function itself, and not a function it was calling. In the simple example above, doSomething() would have a Running time of 3 (samples A, B, and C), but a Self value of 1 (sample A).

-

The third column gives the name of the function along with the filename and line number (for local functions) or basename and domain name (for remote functions). Functions in gray are built-in browser functions: functions in black represent JavaScript loaded by the page. If you hover the mouse over a row you'll see an arrow to the right of the function's identifier: click the arrow and you'll be taken to the function source.

-

Expanding the call tree

-

In a given row, if there are any samples taken while we were in a function called by this function (that is, if Running Time is greater than Self for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.

-

In the simple example above, the fully-expanded call tree would look like this:

- - - - - - - - - - - - - - - - - - -
Running TimeSelf 
3            100%1doSomething()
2              67%2logTheValue()
-

To take a more realistic example: in the screenshot below, looking at the second row we can see that 1914 samples were taken inside the detectImage() function. But all of them were taken in functions called by detectImage() (the Self cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:

-

-

This tells us that 6 samples were taken when we were actually executing detectAtScale(), 12 when we were executing getRect() and so on.

-

Footnotes

-
    -
  1. If the function is called multiple times from different sources, it will be represented multiple times in the Profiler output. So generic functions like forEach will appear multiple times in the call tree.
    2. -
-

 

diff --git a/files/es/tools/remote_debugging/debugging_over_a_network/index.html b/files/es/tools/remote_debugging/debugging_over_a_network/index.html deleted file mode 100644 index a827b255cb..0000000000 --- a/files/es/tools/remote_debugging/debugging_over_a_network/index.html +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Debugging over a network -slug: Tools/Remote_Debugging/Debugging_over_a_network -translation_of: 'Tools/about:debugging#Connecting_over_the_Network' -translation_of_original: Tools/Remote_Debugging/Debugging_over_a_network ---- -
-

{{draft}}

-
- -

Coming soon...

diff --git a/files/es/tools/remote_debugging/firefox_for_android/index.html b/files/es/tools/remote_debugging/firefox_for_android/index.html new file mode 100644 index 0000000000..497d026a34 --- /dev/null +++ b/files/es/tools/remote_debugging/firefox_for_android/index.html @@ -0,0 +1,132 @@ +--- +title: Depuración remota en Firefox para Android +slug: Tools/Remote_Debugging/Firefox_para_Android +translation_of: Tools/Remote_Debugging/Firefox_for_Android +--- +

Esta guía explica como usar la depuración remota para inspeccionar o depurar código funcionando en Firefox para Android conectado por USB.

+ +

+ +

Esta guía se divide en dos partes: la primera parte, "Requisitos previos" cubre la materia que solo hay que hacer una vez, mientras que la segunda parte, "Conectando", cubre la materia que hay que hacer cada vez que conectas el dispositivo. 

+ +

Requisitos previos

+ +

Primero, lo que necesitará:

+ + + +

Configuración ADB

+ +

A continuación, necesitarás que el ordenador de sobremesa y el dispositivo Android hablen entre si utilizando la herramienta de la línea de comandos del adb.

+ +

En el dispositivo Android

+ + + +

En el ordenador de sobremesa

+ + + +

Para comprobar que funciona, abre en tu ordenador de sobremesa la aplicación que te deja escribir comandos en línea del sistema operativo y teclea:

+ +
adb devices
+ +

Deberías ver una respuesta parecida a esta:

+ +
List of devices attached
+51800F220F01564 device
+
+ +

(La cadena de texto hexadecimal será diferente.)

+ +

Si obtienes ésto, entonces adb ha encontrado tu dispositivo y has configurado correctamente el ADB.

+ +

Habilitar la depuración remota

+ +

A continuación, tienes que activar la depuración remota en el ordenador de sobremesa y en el dispositivo Android.

+ +

Firefox versión 24 y anteriores para Android

+ +

Para habilitar la depuración remota en el dispositivo, tienes que ajustar la preferencia devtools.debugger.remote-enabled al valor true.

+ +

Introduce la dirección about:config en Firefox para Android, escribe "devtools" dentro del cuadro de búsqueda y pulsa la tecla Search. Verás todas las preferencias de DevTools. Busca la preferencia devtools.debugger.remote-enabled preference, y pulsa "Toggle".

+ +

+ +

Firefox versión 25 y posteriores para Android

+ +

En Firefox v.25 y posteriores para Android, hay un elemento de menú para habilitar la depuración remota. Abre el menú, selecciona "Settings", luego "Developer tools" (en algunos dispositivos Android puede que necesites seleccionar "More" para ver la opción "Settings"). Marca la casilla "Remote debugging":

+ +

+ +

El navegador mostrará una notificación para recordarte que debes configurar el redireccionamiento de puertos, lo cuál haremos más adelante.

+ +

En el ordenador de sobremesa

+ +

En el ordenador, la depuración remota se habilita  a través de un ajuste en la caja de herramientas. Abre la caja de herramientas, haz clic en el botón "Settings"  de la barra de herramientas, y marca "Enable remote debugging" en la pestaña de Settings:

+ +

+ +
Si estás utilizando una versión de Firefox anterior a la 27, tendrás que reiniciar el navegador para que se aplique la nueva configuración.
+ +

Verás una nueva opción en el menú "Web Developer" con la etiqueta  "Connect...":

+ +

+ +

Conectarse

+ +

Ahora puedes conectar la herramienta de depuración remota con el dispositivo. En primer lugar, conecta el dispositivo al ordenador con un cable USB, si no lo has hecho todavía.

+ +

En el ordenador de sobremesa

+ +

Ve al símbolo del sistema y teclea:

+ +
adb forward tcp:6000 tcp:6000
+ +

(Si has cambiado el valor que el dispositivo Android usa para el puerto de depuración, deberás modificarlo a este valor.)

+ +

Para Firefox OS, teclea:

+ +
adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
+ +

Tendrás que volver a ejecutar este comando cada vez que conectes físicamente el ordenador de sobremesa y el dispositivo con el cable USB.

+ +

A continuación, ve al menú Web Developer del Firefox, y selecciona  "Connect...". Verás una página parecida a ésta:

+ +

Si no has cambiado los números de puerto, elige 6000 y pulsa el botón 'Connect'.

+ +

En el dispositivo Android

+ +
+
A continuación verás un cuadro de diálogo en el dispositivo Android que pide que  confirmes la conexión:
+
+ +

Haz click en "OK". El ordenador de sobremesa espera unos segundos para darte tiempo para que confirmes en el cuadro de diálogo: si se agota el tiempo de espera, solo tienes que volver a hacer click en "Connect" en el cuadro de diálogo del ordenador de sobremesa.

+ +

En el ordenador de sobremesa

+ +

A continuación, el ordenador te muestra un cuadro de diálogo parecido a este:

+ +

Te pregunta si quieres depurar el contenido de la web que se ejecuta en alguna pestaña del navegador, o depurar el código del propio navegador.

+ + + +

Elegimos conectarnos al sitio web mozilla.org.  Se abrirá una ventana con la Caja de herramientas, vinculada a la pestaña del Firefox para Android que muestra el sito de mozilla.org:

+ +

+ +

La caja de herramientas y las herramientas que contiene, funcionan de la misma manera que lo hacen cuando están conectadas a un contenido local.

diff --git a/files/es/tools/remote_debugging/firefox_para_android/index.html b/files/es/tools/remote_debugging/firefox_para_android/index.html deleted file mode 100644 index 497d026a34..0000000000 --- a/files/es/tools/remote_debugging/firefox_para_android/index.html +++ /dev/null @@ -1,132 +0,0 @@ ---- -title: Depuración remota en Firefox para Android -slug: Tools/Remote_Debugging/Firefox_para_Android -translation_of: Tools/Remote_Debugging/Firefox_for_Android ---- -

Esta guía explica como usar la depuración remota para inspeccionar o depurar código funcionando en Firefox para Android conectado por USB.

- -

- -

Esta guía se divide en dos partes: la primera parte, "Requisitos previos" cubre la materia que solo hay que hacer una vez, mientras que la segunda parte, "Conectando", cubre la materia que hay que hacer cada vez que conectas el dispositivo. 

- -

Requisitos previos

- -

Primero, lo que necesitará:

- - - -

Configuración ADB

- -

A continuación, necesitarás que el ordenador de sobremesa y el dispositivo Android hablen entre si utilizando la herramienta de la línea de comandos del adb.

- -

En el dispositivo Android

- - - -

En el ordenador de sobremesa

- - - -

Para comprobar que funciona, abre en tu ordenador de sobremesa la aplicación que te deja escribir comandos en línea del sistema operativo y teclea:

- -
adb devices
- -

Deberías ver una respuesta parecida a esta:

- -
List of devices attached
-51800F220F01564 device
-
- -

(La cadena de texto hexadecimal será diferente.)

- -

Si obtienes ésto, entonces adb ha encontrado tu dispositivo y has configurado correctamente el ADB.

- -

Habilitar la depuración remota

- -

A continuación, tienes que activar la depuración remota en el ordenador de sobremesa y en el dispositivo Android.

- -

Firefox versión 24 y anteriores para Android

- -

Para habilitar la depuración remota en el dispositivo, tienes que ajustar la preferencia devtools.debugger.remote-enabled al valor true.

- -

Introduce la dirección about:config en Firefox para Android, escribe "devtools" dentro del cuadro de búsqueda y pulsa la tecla Search. Verás todas las preferencias de DevTools. Busca la preferencia devtools.debugger.remote-enabled preference, y pulsa "Toggle".

- -

- -

Firefox versión 25 y posteriores para Android

- -

En Firefox v.25 y posteriores para Android, hay un elemento de menú para habilitar la depuración remota. Abre el menú, selecciona "Settings", luego "Developer tools" (en algunos dispositivos Android puede que necesites seleccionar "More" para ver la opción "Settings"). Marca la casilla "Remote debugging":

- -

- -

El navegador mostrará una notificación para recordarte que debes configurar el redireccionamiento de puertos, lo cuál haremos más adelante.

- -

En el ordenador de sobremesa

- -

En el ordenador, la depuración remota se habilita  a través de un ajuste en la caja de herramientas. Abre la caja de herramientas, haz clic en el botón "Settings"  de la barra de herramientas, y marca "Enable remote debugging" en la pestaña de Settings:

- -

- -
Si estás utilizando una versión de Firefox anterior a la 27, tendrás que reiniciar el navegador para que se aplique la nueva configuración.
- -

Verás una nueva opción en el menú "Web Developer" con la etiqueta  "Connect...":

- -

- -

Conectarse

- -

Ahora puedes conectar la herramienta de depuración remota con el dispositivo. En primer lugar, conecta el dispositivo al ordenador con un cable USB, si no lo has hecho todavía.

- -

En el ordenador de sobremesa

- -

Ve al símbolo del sistema y teclea:

- -
adb forward tcp:6000 tcp:6000
- -

(Si has cambiado el valor que el dispositivo Android usa para el puerto de depuración, deberás modificarlo a este valor.)

- -

Para Firefox OS, teclea:

- -
adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket
- -

Tendrás que volver a ejecutar este comando cada vez que conectes físicamente el ordenador de sobremesa y el dispositivo con el cable USB.

- -

A continuación, ve al menú Web Developer del Firefox, y selecciona  "Connect...". Verás una página parecida a ésta:

- -

Si no has cambiado los números de puerto, elige 6000 y pulsa el botón 'Connect'.

- -

En el dispositivo Android

- -
-
A continuación verás un cuadro de diálogo en el dispositivo Android que pide que  confirmes la conexión:
-
- -

Haz click en "OK". El ordenador de sobremesa espera unos segundos para darte tiempo para que confirmes en el cuadro de diálogo: si se agota el tiempo de espera, solo tienes que volver a hacer click en "Connect" en el cuadro de diálogo del ordenador de sobremesa.

- -

En el ordenador de sobremesa

- -

A continuación, el ordenador te muestra un cuadro de diálogo parecido a este:

- -

Te pregunta si quieres depurar el contenido de la web que se ejecuta en alguna pestaña del navegador, o depurar el código del propio navegador.

- - - -

Elegimos conectarnos al sitio web mozilla.org.  Se abrirá una ventana con la Caja de herramientas, vinculada a la pestaña del Firefox para Android que muestra el sito de mozilla.org:

- -

- -

La caja de herramientas y las herramientas que contiene, funcionan de la misma manera que lo hacen cuando están conectadas a un contenido local.

diff --git a/files/es/tools/responsive_design_mode/index.html b/files/es/tools/responsive_design_mode/index.html new file mode 100644 index 0000000000..2571bc5aa4 --- /dev/null +++ b/files/es/tools/responsive_design_mode/index.html @@ -0,0 +1,18 @@ +--- +title: Responsive Design View +slug: Tools/Responsive_Design_View +translation_of: Tools/Responsive_Design_Mode +--- +

{{ fx_minversion_header("15.0") }}

+ +

La vista de Diseño Adaptable hace que sea fácil ver cómo sus diseños se verán y funcionarán en diferentes tamaños de pantallas. Diseño Adaptable se adapta a diferentes tamaños de pantalla para proporcionar una presentación adecuada para diferentes tipos de dispositivos, principalmente teléfonos móviles. La captura de pantalla siguiente es un ejemplo de la página web mozilla.org vista con un área de contenido 320 por 480.

+ +

La vista de Diseño Adaptable es conveniente porque se puede cambiar rápidamente el tamaño del área de contenido sin cambiar el tamaño de la ventana del navegador. Cambiar el tamaño de la ventana del navegador puede ser molesto porque todos los tamaños de tus pestañas cambian entonces y también hay menos espacio en la ventana de herramientas de desarrollo.

+ +

Tu puedes encontrar la vista de Diseño Adaptable en el menú Desarrollador Web.

+ +

Como alternativa, puede usar el atajo ctrl-shift-M en Windows o Linux y cmd-opt-M en Mac  para iniciar la vista de Diseño adaptable. Presionando la tecla <esc> se cerrará la vista. Mientras que estás en la vista de Diseñó Adaptable, puedes seguir con normalidad en el área de contenido reescalado.

+ +

En la parte superior de la vista de Diseño Adaptable, hay un menú desplegable de tamaños preestablecidos que son convenientes para ver rápidamente su diseño en un número de tamaños de pantallas más comunes. También hay un botón de rotación para cambiar inmediatamente la anchura y altura (similar a la rotación de un teléfono móvil o tableta ).

+ +

Usted puede utilizar el controlador de tamaño en la parte inferior derecha del área de contenido para cambiar el tamaño del área de contenido.

diff --git a/files/es/tools/responsive_design_view/index.html b/files/es/tools/responsive_design_view/index.html deleted file mode 100644 index 2571bc5aa4..0000000000 --- a/files/es/tools/responsive_design_view/index.html +++ /dev/null @@ -1,18 +0,0 @@ ---- -title: Responsive Design View -slug: Tools/Responsive_Design_View -translation_of: Tools/Responsive_Design_Mode ---- -

{{ fx_minversion_header("15.0") }}

- -

La vista de Diseño Adaptable hace que sea fácil ver cómo sus diseños se verán y funcionarán en diferentes tamaños de pantallas. Diseño Adaptable se adapta a diferentes tamaños de pantalla para proporcionar una presentación adecuada para diferentes tipos de dispositivos, principalmente teléfonos móviles. La captura de pantalla siguiente es un ejemplo de la página web mozilla.org vista con un área de contenido 320 por 480.

- -

La vista de Diseño Adaptable es conveniente porque se puede cambiar rápidamente el tamaño del área de contenido sin cambiar el tamaño de la ventana del navegador. Cambiar el tamaño de la ventana del navegador puede ser molesto porque todos los tamaños de tus pestañas cambian entonces y también hay menos espacio en la ventana de herramientas de desarrollo.

- -

Tu puedes encontrar la vista de Diseño Adaptable en el menú Desarrollador Web.

- -

Como alternativa, puede usar el atajo ctrl-shift-M en Windows o Linux y cmd-opt-M en Mac  para iniciar la vista de Diseño adaptable. Presionando la tecla <esc> se cerrará la vista. Mientras que estás en la vista de Diseñó Adaptable, puedes seguir con normalidad en el área de contenido reescalado.

- -

En la parte superior de la vista de Diseño Adaptable, hay un menú desplegable de tamaños preestablecidos que son convenientes para ver rápidamente su diseño en un número de tamaños de pantallas más comunes. También hay un botón de rotación para cambiar inmediatamente la anchura y altura (similar a la rotación de un teléfono móvil o tableta ).

- -

Usted puede utilizar el controlador de tamaño en la parte inferior derecha del área de contenido para cambiar el tamaño del área de contenido.

diff --git a/files/es/tools/style_editor/index.html b/files/es/tools/style_editor/index.html new file mode 100644 index 0000000000..cdfc54bebf --- /dev/null +++ b/files/es/tools/style_editor/index.html @@ -0,0 +1,101 @@ +--- +title: Editor de Estilo +slug: Tools/Editor_Estilo +tags: + - CSS + - Desarrollo web + - Herramientas + - Herramientas de desarrollo web + - Hojas de estilo +translation_of: Tools/Style_Editor +--- +

El editor de estilo te permite:

+ + + +

{{EmbedYouTube("7839qc55r7o")}}

+ +

Para abrir el Editor de Estilo selecciona la opción "Editor de Estilo" desde el menú "Web Developer" (este es un submenu del menú "Tools" o "Herramientas" en una Mac). El Toolbox o caja de herramientas aparecerá en la parte inferior de la ventana del navegador, con el Editor de Estilo activado:

+ +

+ +

El Editor de Estilo está divivido en  dos secciones principales: el panel de estilos en la izquierda y el editor en la derecha.

+ +
+

From Firefox 33 onwards, there's a third component to the Style Editor: the media sidebar.

+
+ +

El panel de hojas de estilo

+ +

El panel de hojas de estilo, en la izquierda, muestra todas las hojas de estilos que están siendo utilizadas por el documento actual.  You can quickly toggle the use of a given sheet on and off by clicking the eyeball icon to the left of the sheet's name. Puede guardar los cambios hechos en la hoja de estilos a su computador, haciendo clic en el botón Guardar en la esquina inferior derecha de cada hoja de estilos de la lista.

+ +

El panel de edición

+ +

A la derecha está el panel de edición. Aquí está disponible el código fuente de la hoja de estilo seleccionada, lista para ver y editar. Cualquier cambio que realice será aplicada inmediatamente. This makes it easy to experiment with, revise, and test changes. Una vez esté satisfecho con sus cambios, puede guardar una copia localmente, haciendo clic en el botón Guardar.

+ +

El editor contiene numeración de líneas y resaltamiento de código, haciendo más fácil la lectura de su CSS. También soporta keyboard shortcuts.

+ +

El Editor de Estilos automáticamente des-minimiza las hojas de estilo que detecta, sin afectar el original. Esto facilita mucho el trabajo en páginas que ya han sido optimizadas.

+ +

El Editor de Estilos soporta autocompletado. Empiece escribiendo y el sistema le ofrecerá una lista de sugerencias.

+ +

Puede deshabilitar el autocompletado en Style Editor settings.

+ +

La barra lateral "media"

+ +

A partir de Firefox 33 en adelante, el Editor de Estilos muestra una barra lateral a la derecha cuando se encuentra alguna regla @media (@media rules). La barra lateral muestra las reglas y provee un link a la línea donde se define dicha regla. Haga clic en un ítem para ir hacia la definición de esa regla en la hoja de estilo. El texto condicional de la regla estará en gris si el media query no aplica.

+ +

La barra lateral de medios funciona especialmente bien con Responsive Design View para crear y depurar diseños móviles :

+ +

+ +

Creación e importación de hojas de estilo

+ +

Se puede crear una nueva hoja de estilos haciendo click en el nuevo botón de la barra de herrramientas. A continuación puedes comenzar a introducir  CSS en el nuevo editor y ver como los nuevos estilos se aplican de forma inmediata ,al igual que los cambios en otras hojas.

+ +

Se puede cargar una hoja de estilos desde el disco y aplicarlo a la página haciendo click en el boton de importar.

+ +

Soporte de mapa fuente

+ +

{{EmbedYouTube("zu2eZbYtEUQ")}}

+ +

Los desarrolladores web, con frecuencia crean archivos CSS  utilizando un preprocesador como  Sass, Less, o Stylus. Estas herramientas generan archivos CSS  procedentes de un sintasix mas rico y expresivo. Si haces esto, seras capaz de editar y  ver que el  CSS  generado no es tan util, porque el código que mantienes es el sintaxis preprocesado, no el  CSS generado. Por lo que necesitarás editar el CSS generado, y después manualmente trabajar sobre como reaplicarlo a la fuente original.

+ +

Mapas Fuente habilita para regresar desde el CSS generado a la síntasix original, entonces  se puede ver, y te permite editar archivos en la síntasix original. A partir de Firefox 29 en adelante, el editor de estilos puede interpretar mapas fuente de CSS .

+ +

Esto significa que si utilizas, por ejemplo, Sass, el Editor de Estilos  mostrará,y permitirá editar,archivos Sass , en lugar del CSS que se ha generado desde ellos:

+ +

Para que esto funcione ,es necesario:

+ + + +

Visualización de las fuentes originales

+ +

Ahora, si compruebas "mostrar fuentes originales" en los ajustes del Editor de estilos, el vínculo junto a las reglas  CSS en la Vista de Reglas ,vincula con las fuentes originales en el Editor de Estilos.

+ +

Edición de las fuentes originales

+ +

Se pueden editar tambien las fuentes originales en el  Editor de estilos y ver el resultado aplicado a la página de inmediato. Para conseguir que esto funcione hay dos pasos adicionales.

+ +

Primero, configura el preprocesador para que muestre la fuente original y automaticamente regenere el CSS cuando cambien las fuentes. Con Sass puedes hacer esto simplemente pasando la opción --watch :

+ +
sass index.scss:index.css --sourcemap --watch
+ +

A continuación, guarda la fuente original en el editor de estilos haciendo click en el botón   "Guardar" junto al archivo, y este se guardará sobre el archivo original.

+ +

Ahora cuando hagas cambios en el archivo original en el  Editor de Estilos , el CSS se regenerará y podrás ver los cambios de forma inmediata.

+ +

Atajos de Teclado

+ +

Atajos del editor de código fuente

+ +

{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}

+ +

{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}

diff --git a/files/es/tools/taking_screenshots/index.html b/files/es/tools/taking_screenshots/index.html new file mode 100644 index 0000000000..d842153d65 --- /dev/null +++ b/files/es/tools/taking_screenshots/index.html @@ -0,0 +1,42 @@ +--- +title: Tomar capturas de pantalla +slug: Tools/Tomar_capturas_de_pantalla +tags: + - Herramientas +translation_of: Tools/Taking_screenshots +--- +

Puedes usar las Herramientas de Desarrollo (Developer Tools) para tomar una captura de pantalla de toda la página, o de un único elemento de la página.

+ +

Tomar una captura de pantalla de la página

+ +

Usa el ícono de captura de pantalla: para tomar una captura completa de la página actual.

+ +

Por defecto, el ícono de captura de pantalla no está habilitado. Para habilitarlo::

+ + + +

Verás el ícono en la barra de herramientas:

+ +

{{EmbedYouTube("KB5V9uJgcS4")}}

+ +

Haz clic en el ícono para tomar una capura de la página actual. La captura se guarda en el directorio de descargas de tu navegador:

+ +

{{EmbedYouTube("HKS6MofdXVE")}}

+ +

Tomar una captura de un elemento

+ +

Para tomar una captura de un único elemento en la página, activa el menú contextual en ese elemento en el panel HTML del Inspector, y selecciona "Screenshot Node". La captura se guarda en el directorio de descargas del navegador:

+ +

{{EmbedYouTube("p2pjF_BrE1o")}}

+ +

Copiar capturas de pantalla al portapapeles

+ +

Desde Firefox 53, también puedes copiar la captura al portapapeles. Sólo marca la caja en Ajustes con la etiqueta "Screenshot to clipboard":

+ +

{{EmbedYouTube("AZedFGh6F78")}}

+ +

Ahora, cuando tomes una captura, la captura también es copiada al portapapeles.

diff --git a/files/es/tools/tomar_capturas_de_pantalla/index.html b/files/es/tools/tomar_capturas_de_pantalla/index.html deleted file mode 100644 index d842153d65..0000000000 --- a/files/es/tools/tomar_capturas_de_pantalla/index.html +++ /dev/null @@ -1,42 +0,0 @@ ---- -title: Tomar capturas de pantalla -slug: Tools/Tomar_capturas_de_pantalla -tags: - - Herramientas -translation_of: Tools/Taking_screenshots ---- -

Puedes usar las Herramientas de Desarrollo (Developer Tools) para tomar una captura de pantalla de toda la página, o de un único elemento de la página.

- -

Tomar una captura de pantalla de la página

- -

Usa el ícono de captura de pantalla: para tomar una captura completa de la página actual.

- -

Por defecto, el ícono de captura de pantalla no está habilitado. Para habilitarlo::

- - - -

Verás el ícono en la barra de herramientas:

- -

{{EmbedYouTube("KB5V9uJgcS4")}}

- -

Haz clic en el ícono para tomar una capura de la página actual. La captura se guarda en el directorio de descargas de tu navegador:

- -

{{EmbedYouTube("HKS6MofdXVE")}}

- -

Tomar una captura de un elemento

- -

Para tomar una captura de un único elemento en la página, activa el menú contextual en ese elemento en el panel HTML del Inspector, y selecciona "Screenshot Node". La captura se guarda en el directorio de descargas del navegador:

- -

{{EmbedYouTube("p2pjF_BrE1o")}}

- -

Copiar capturas de pantalla al portapapeles

- -

Desde Firefox 53, también puedes copiar la captura al portapapeles. Sólo marca la caja en Ajustes con la etiqueta "Screenshot to clipboard":

- -

{{EmbedYouTube("AZedFGh6F78")}}

- -

Ahora, cuando tomes una captura, la captura también es copiada al portapapeles.

diff --git a/files/es/tools/web_audio_editor/index.html b/files/es/tools/web_audio_editor/index.html new file mode 100644 index 0000000000..2db0cdbe58 --- /dev/null +++ b/files/es/tools/web_audio_editor/index.html @@ -0,0 +1,31 @@ +--- +title: Editor de audio web +slug: Tools/Editor_Audio_Web +translation_of: Tools/Web_Audio_Editor +--- +
+

El editor de audio web es nuevo en Firefox 32.

+
+

Con la API de Audio Web, los desarrolladores crean un contexto de audio. Dentro de ese contexto construyen un número de  nodos de audio, incluyendo:

+ +

Cada nodo tiene cero o más propiedades AudioParam que configuran su operación. Por ejemplo, GainNode tiene solamente la propiedad gain, mientras que OscillatorNode tiene las propiedades frequency y detune.

+

El desarrollador conecta los nodos en un gráfico y ese gráfico completo define el comportamiento del flujo de audio.

+

El editor de audio web examina un contexto de audio construido en la página y proporciona una visualización de su gráfico. Esto da una vista de alto nivel de su operación y permite asegurar que todos los nodos están conectados de la forma esperada. Entonces se pueden examinar y editar las propiedades AudioParam para cada nodo del gráfico. Algunas propiedades no-AudioParam, como una propiedad OscillatorNode's type son mostradas y también se pueden editar.

+

Esta herramienta todavía es experimental. Si encuentra errores, nos encantaría que los informe en Bugzilla. Si tiene alguna opinión o sugerencias para nuevas funcionalidades, ffdevtools.uservoice.com o Twitter son lugares excelentes para registrarlas.

+

Abriendo el editor de audio web

+

El editor de audio web no está habilitado por defecto en Firefox 32. Para habilitarlo, abra la Configuración de herramientas de desarrollador y marque "Audio web". Ahora debería haber una pestaña extra en la Barra de herramientas llamada "Audio web". Haga clic en esa pestaña y cargue una página que construya un contexto de audio. Dos demos interesantes son:

+ +

Visualizando el gráfico

+

El editor de audio web ahora mostrará el gráfico del contexto de audio cargado. Aquí está el gráfico del demo de Violent Theremin:

+

Se puede ver que usa tres nodos: un OscillatorNode como fuente, un GainNode para controlar el volumen y un AudioDestinationNode como destino.

+

Inspeccionando y modificando AudioNodes

+

Si hace clic en un nodo, se restalta y aparece un inspector del nodo en el lado derecho. Ahí se listan los valores de las propiedades del nodo AudioParam. Por ejemplo, así se ve el OscillatorNode:

+

Con el demo de Violent Theremin, el parámetro frecuencia es modificado cuando el usuario mueve el mouse hacia la izquierda o la derecha y eso se puede ver reflejado en el inspector del nodo. Sin embargo, el valor no es actualizado en tiempo real: hay que hacer clic en el nodo nuevamente para ver el valor actualizado.

+

Si se hace clic en el valor en el inspector del nodo se puede modificar: presione Intro o Tab y el nuevo valor tiene efecto inmediatamente.

diff --git a/files/es/tools/web_console/iniciando_la_consola_web/index.html b/files/es/tools/web_console/iniciando_la_consola_web/index.html deleted file mode 100644 index 59b0156a49..0000000000 --- a/files/es/tools/web_console/iniciando_la_consola_web/index.html +++ /dev/null @@ -1,23 +0,0 @@ ---- -title: Iniciando la Consola Web -slug: Tools/Web_Console/Iniciando_la_Consola_Web -translation_of: Tools/Web_Console/UI_Tour ---- -

Para abrir la Consola Web:

- - - -

La Caja de herramientas (Toolbox) aparecera en la parte baja de la ventana del navegador, con la Consola Web activada (solamente se le llama "Consola" en la barra de herramientas DevTools (DevTools toolbar)):

- -

- -

La interfaz de la Consola Web esta dividida en tres secciones horizontales que son:

- - diff --git "a/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" "b/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" deleted file mode 100644 index 06e5922248..0000000000 --- "a/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/index.html" +++ /dev/null @@ -1,188 +0,0 @@ ---- -title: La línea de comandos del intérprete de JavaScript -slug: Tools/Web_Console/La_línea_de_comandos_del_intérprete -tags: - - Debugging - - Depuración - - Desarrollo web - - consola web -translation_of: Tools/Web_Console/The_command_line_interpreter ---- -
{{ToolsSidebar}}
- -

Puedes interpretar expresiones JavaScript en tiempo real utilizando el intérprete proporcionado por la Consola web. Tiene dos modos: entrada unilínea y entrada multilínea.

- -

Modo unilínea

- -

Para entrada de una sola línea, puedes escribir expresiones JavaScript en el campo en la parte inferior del registro de la consola, en el indicador >>.

- -

La consola web, mostrando el modo unilínea

- -

Para ingresar expresiones en el modo unilínea, escribe en el indicador y presiona Intro. Para ingresar expresiones de varias líneas, presiona Mayús+Intro después de escribir cada línea, luego Intro para ejecutar todas las líneas ingresadas.

- -

La expresión que escribas se repite debajo de la petición de entrada, seguida del resultado.

- -

Si tu entrada no parece estar completa cuando presiones Intro, la consola lo trata como Mayús+Intro, lo cual te permite finalizar tu entrada.

- -

Por ejemplo, si escribes:

- -
function foo() {
- -

y luego Intro, la consola no ejecuta inmediatamente la entrada, pero se comporta como si hubieras presionado Mayús+Intro, para que puedas terminar de ingresar la definición de la función.

- -

Modo multilínea

- -

Para la entrada multilínea, haz clic en el icono de "panel dividido" en el lado derecho del campo de entrada unilínea, o presiona Ctrl+B (Windows/Linux) o Cmd+B (macOS). El panel de edición multilínea se abre en el lado izquierdo de la Consola web.

- -

Modo multilínea en la consola web

- -

De manera predeterminada, en este modo puedes ingresar múltiples líneas de JavaScript, presionando Intro después de cada una. Para ejecutar el fragmento que se encuentre actualmente en el panel de edición, haz clic en el botón Ejecutar o presiona Ctrl+Intro (o Cmd+Intro en MacOS). El fragmento se repite debajo de la petición de entrada (en el panel del lado derecho), seguido del resultado. También puedes seleccionar un rango de líneas en el panel de edición y ejecutar solo el código en esas líneas.

- -

A partir de Firefox 76, si el fragmento de código tiene más de cinco líneas, solo las primeras cinco líneas se repiten en la consola, precedidas por un triángulo desplegable (o "twistie") y seguidos por puntos suspensivos (…). Haz clic en cualquier parte del área que contiene el código reproducido para mostrar el fragmento completo; haz clic de nuevo en esa área para contraerlo.

- -

Puedes abrir archivos en el modo multilínea y guardar el contenido actual del panel de edición en un archivo.

- - - -

Para volver al modo unilínea, haz clic en el icono X en la parte superior del panel de edición multilínea o presiona Ctrl+B (Windows/Linux) o Cmd+B (MacOS).

- -

Acceder a variables

- -

Puedes acceder a las variables definidas en la página, tanto variables integradas como window como variables agregadas por bibliotecas de JavaScript como jQuery:

- -

Accder a variables

- -

Autocompletado

- -

El editor tiene autocompletado: ingresa las primeras letras y aparecerá una ventana emergente con posibles terminaciones:

- -

Autocompletado

- -

Presiona Intro, Tab o la tecla de flecha derecha para aceptar la sugerencia, usa las flechas arriba/abajo para pasar a una diferente sugerencia, o simplemente sigue escribiendo si no te gusta ninguna de las sugerencias.

- -

Las sugerencias de autocompletado de la consola no distinguen entre mayúsculas y minúsculas.

- -

La consola sugiere terminaciones del ámbito del marco de la pila que se está ejecutando actualmente. Esto significa que si has alcanzado un punto de interrupción en una función, obtienes autocompletado para los objetos locales a la función.

- -

También obtienes sugerencias de autocompletado para elementos de arreglo:

- -

Autocompletado en arreglos

- -

Puedes habilitar o deshabilitar el autocompletado a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento de menú Habilitar autocompletado tiene una marca de verificación junto a él cuando la función está habilitada, que falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

- -

Evaluación instantánea

- -
-

Esta característica está disponible en Firefox Nightly, en las versiones etiquetadas con 74 y posteriores.

-
- -

Cuando la característica de "evaluación instantánea" está habilitada, el intérprete muestra los resultados de las expresiones mientras las escribes en el modo unilínea. Ten en cuenta que el resultado puede ser un mensaje de error. Las expresiones que tienen efectos secundarios no se evalúan.

- -

Puedes habilitar o deshabilitar la evaluación instantánea a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento Evaluación instantánea del menú tiene una marca de verificación junto a él cuando la característica está habilitada, y falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

- -

Contexto de ejecución

- -

El código que has ejecutado se convierte en parte del contexto de ejecución, independientemente del modo de edición en el que te encontrabas cuando lo ejecutaste. Por ejemplo, si escribes una definición de función en el editor multilínea y haces clic en Ejecutar, puedes cambiar al modo unilínea y seguir utilizando tu función.

- -

Resaltado de sintaxis

- -

La salida de la consola mostrando la sintaxis resaltada

- -

El texto que ingreses tiene resaltado de sintaxis tan pronto como hayas escrito lo suficiente para que el resaltador lo analice e infiera el significado de las "palabras".

- -

La salida también se resalta cuando es apropiado.

- -
-

Nota: El resaltado de sintaxis no está visible en tu navegador si se han habilitado las funciones de accesibilidad.

-
- -

Historial de ejecución

- -

El intérprete recuerda las expresiones que has escrito. Para avanzar y retroceder en tu historial:

- - - -

El historial de expresiones se conserva entre sesiones. Para borrar el historial, usa la función auxiliar clearHistory().

- -

Puedes iniciar una búsqueda inversa a través del historial de expresiones, al igual que en bash en Linux y Mac o PowerShell en Windows. En Windows y Linux, presiona F9. En Mac, presiona Ctrl+R (Nota: ¡no Cmd+R!) para iniciar la búsqueda inversa.

- -

Búsqueda inversa

- -

Ingresa el texto que deseas buscar en el cuadro de entrada en la parte inferior de la consola. Empieza a escribir parte de la expresión que estás buscando y la primera coincidencia se mostrará en la consola. Si escribes F9 repetidamente en Windows y Linux (Ctrl+R en Mac), retrocedes por las coincidencias.

- -

Ejemplo de búsqueda inversa

- -

Una vez que hayas iniciado la búsqueda inversa, puedes usar Mayús+F9 en Windows o Linux (Ctrl+S en Mac) para buscar hacia adelante en la lista de coincidencias. También puedes utilizar los iconos ⋀ y ⋁ en la barra de búsqueda de expresiones.

- -

Cuando encuentres la expresión que deseas, presiona Intro (Intro) para ejecutar la instrucción.

- -

Trabajando con iframes

- -

Si una página contiene iframes incrustados, puedes utilizar la función cd() para cambiar el alcance de la consola a un iframe específico, y luego puedes ejecutar funciones definidas en el documento alojado por ese iframe. Hay tres formas de seleccionar un iframe usando cd():

- -

Puedes pasar el elemento iframe del DOM:

- -
var frame = document.getElementById("frame1");
-cd(frame);
- -

Puedes pasar un selector de CSS que coincida con el iframe:

- -
cd("#frame1");
- -

Puedes pasar el objeto window global del iframe:

- -
var frame = document.getElementById("frame1");
-cd(frame.contentWindow);
-
- -

Para volver a cambiar el contexto al objeto window de nivel superior, llama a cd() sin argumentos:

- -
cd();
- -

Por ejemplo, supongamos que tenemos un documento que incluye un iframe:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-  </head>
-  <body>
-    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
-  </body>
-</html>
- -

El iframe define una nueva función:

- -
<!DOCTYPE html>
-<html>
-  <head>
-    <meta charset="UTF-8">
-    <script>
-      function whoAreYou() {
-        return "Yo soy el frame1";
-      }
-   </script>
-  </head>
-  <body>
-  </body>
-</html>
- -

Puedes cambiar el contexto al iframe de esta manera:

- -
cd("#frame1");
- -

Ahora verás que el objeto window global del documento es el iframe:

- -

window global del documentoY puedes llamar a la función definida en el iframe:

- -

función en la consola web

- -

Comandos auxiliares

- -

{{ page("es/docs/Tools/Web_Console/Helpers", "Los comandos") }}

diff --git a/files/es/tools/web_console/the_command_line_interpreter/index.html b/files/es/tools/web_console/the_command_line_interpreter/index.html new file mode 100644 index 0000000000..06e5922248 --- /dev/null +++ b/files/es/tools/web_console/the_command_line_interpreter/index.html @@ -0,0 +1,188 @@ +--- +title: La línea de comandos del intérprete de JavaScript +slug: Tools/Web_Console/La_línea_de_comandos_del_intérprete +tags: + - Debugging + - Depuración + - Desarrollo web + - consola web +translation_of: Tools/Web_Console/The_command_line_interpreter +--- +
{{ToolsSidebar}}
+ +

Puedes interpretar expresiones JavaScript en tiempo real utilizando el intérprete proporcionado por la Consola web. Tiene dos modos: entrada unilínea y entrada multilínea.

+ +

Modo unilínea

+ +

Para entrada de una sola línea, puedes escribir expresiones JavaScript en el campo en la parte inferior del registro de la consola, en el indicador >>.

+ +

La consola web, mostrando el modo unilínea

+ +

Para ingresar expresiones en el modo unilínea, escribe en el indicador y presiona Intro. Para ingresar expresiones de varias líneas, presiona Mayús+Intro después de escribir cada línea, luego Intro para ejecutar todas las líneas ingresadas.

+ +

La expresión que escribas se repite debajo de la petición de entrada, seguida del resultado.

+ +

Si tu entrada no parece estar completa cuando presiones Intro, la consola lo trata como Mayús+Intro, lo cual te permite finalizar tu entrada.

+ +

Por ejemplo, si escribes:

+ +
function foo() {
+ +

y luego Intro, la consola no ejecuta inmediatamente la entrada, pero se comporta como si hubieras presionado Mayús+Intro, para que puedas terminar de ingresar la definición de la función.

+ +

Modo multilínea

+ +

Para la entrada multilínea, haz clic en el icono de "panel dividido" en el lado derecho del campo de entrada unilínea, o presiona Ctrl+B (Windows/Linux) o Cmd+B (macOS). El panel de edición multilínea se abre en el lado izquierdo de la Consola web.

+ +

Modo multilínea en la consola web

+ +

De manera predeterminada, en este modo puedes ingresar múltiples líneas de JavaScript, presionando Intro después de cada una. Para ejecutar el fragmento que se encuentre actualmente en el panel de edición, haz clic en el botón Ejecutar o presiona Ctrl+Intro (o Cmd+Intro en MacOS). El fragmento se repite debajo de la petición de entrada (en el panel del lado derecho), seguido del resultado. También puedes seleccionar un rango de líneas en el panel de edición y ejecutar solo el código en esas líneas.

+ +

A partir de Firefox 76, si el fragmento de código tiene más de cinco líneas, solo las primeras cinco líneas se repiten en la consola, precedidas por un triángulo desplegable (o "twistie") y seguidos por puntos suspensivos (…). Haz clic en cualquier parte del área que contiene el código reproducido para mostrar el fragmento completo; haz clic de nuevo en esa área para contraerlo.

+ +

Puedes abrir archivos en el modo multilínea y guardar el contenido actual del panel de edición en un archivo.

+ + + +

Para volver al modo unilínea, haz clic en el icono X en la parte superior del panel de edición multilínea o presiona Ctrl+B (Windows/Linux) o Cmd+B (MacOS).

+ +

Acceder a variables

+ +

Puedes acceder a las variables definidas en la página, tanto variables integradas como window como variables agregadas por bibliotecas de JavaScript como jQuery:

+ +

Accder a variables

+ +

Autocompletado

+ +

El editor tiene autocompletado: ingresa las primeras letras y aparecerá una ventana emergente con posibles terminaciones:

+ +

Autocompletado

+ +

Presiona Intro, Tab o la tecla de flecha derecha para aceptar la sugerencia, usa las flechas arriba/abajo para pasar a una diferente sugerencia, o simplemente sigue escribiendo si no te gusta ninguna de las sugerencias.

+ +

Las sugerencias de autocompletado de la consola no distinguen entre mayúsculas y minúsculas.

+ +

La consola sugiere terminaciones del ámbito del marco de la pila que se está ejecutando actualmente. Esto significa que si has alcanzado un punto de interrupción en una función, obtienes autocompletado para los objetos locales a la función.

+ +

También obtienes sugerencias de autocompletado para elementos de arreglo:

+ +

Autocompletado en arreglos

+ +

Puedes habilitar o deshabilitar el autocompletado a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento de menú Habilitar autocompletado tiene una marca de verificación junto a él cuando la función está habilitada, que falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

+ +

Evaluación instantánea

+ +
+

Esta característica está disponible en Firefox Nightly, en las versiones etiquetadas con 74 y posteriores.

+
+ +

Cuando la característica de "evaluación instantánea" está habilitada, el intérprete muestra los resultados de las expresiones mientras las escribes en el modo unilínea. Ten en cuenta que el resultado puede ser un mensaje de error. Las expresiones que tienen efectos secundarios no se evalúan.

+ +

Puedes habilitar o deshabilitar la evaluación instantánea a través del menú Configuración ("engrane") en la barra de herramientas de la Consola web. El elemento Evaluación instantánea del menú tiene una marca de verificación junto a él cuando la característica está habilitada, y falta cuando está inhabilitada. Selecciona el elemento del menú para cambiar el estado.

+ +

Contexto de ejecución

+ +

El código que has ejecutado se convierte en parte del contexto de ejecución, independientemente del modo de edición en el que te encontrabas cuando lo ejecutaste. Por ejemplo, si escribes una definición de función en el editor multilínea y haces clic en Ejecutar, puedes cambiar al modo unilínea y seguir utilizando tu función.

+ +

Resaltado de sintaxis

+ +

La salida de la consola mostrando la sintaxis resaltada

+ +

El texto que ingreses tiene resaltado de sintaxis tan pronto como hayas escrito lo suficiente para que el resaltador lo analice e infiera el significado de las "palabras".

+ +

La salida también se resalta cuando es apropiado.

+ +
+

Nota: El resaltado de sintaxis no está visible en tu navegador si se han habilitado las funciones de accesibilidad.

+
+ +

Historial de ejecución

+ +

El intérprete recuerda las expresiones que has escrito. Para avanzar y retroceder en tu historial:

+ + + +

El historial de expresiones se conserva entre sesiones. Para borrar el historial, usa la función auxiliar clearHistory().

+ +

Puedes iniciar una búsqueda inversa a través del historial de expresiones, al igual que en bash en Linux y Mac o PowerShell en Windows. En Windows y Linux, presiona F9. En Mac, presiona Ctrl+R (Nota: ¡no Cmd+R!) para iniciar la búsqueda inversa.

+ +

Búsqueda inversa

+ +

Ingresa el texto que deseas buscar en el cuadro de entrada en la parte inferior de la consola. Empieza a escribir parte de la expresión que estás buscando y la primera coincidencia se mostrará en la consola. Si escribes F9 repetidamente en Windows y Linux (Ctrl+R en Mac), retrocedes por las coincidencias.

+ +

Ejemplo de búsqueda inversa

+ +

Una vez que hayas iniciado la búsqueda inversa, puedes usar Mayús+F9 en Windows o Linux (Ctrl+S en Mac) para buscar hacia adelante en la lista de coincidencias. También puedes utilizar los iconos ⋀ y ⋁ en la barra de búsqueda de expresiones.

+ +

Cuando encuentres la expresión que deseas, presiona Intro (Intro) para ejecutar la instrucción.

+ +

Trabajando con iframes

+ +

Si una página contiene iframes incrustados, puedes utilizar la función cd() para cambiar el alcance de la consola a un iframe específico, y luego puedes ejecutar funciones definidas en el documento alojado por ese iframe. Hay tres formas de seleccionar un iframe usando cd():

+ +

Puedes pasar el elemento iframe del DOM:

+ +
var frame = document.getElementById("frame1");
+cd(frame);
+ +

Puedes pasar un selector de CSS que coincida con el iframe:

+ +
cd("#frame1");
+ +

Puedes pasar el objeto window global del iframe:

+ +
var frame = document.getElementById("frame1");
+cd(frame.contentWindow);
+
+ +

Para volver a cambiar el contexto al objeto window de nivel superior, llama a cd() sin argumentos:

+ +
cd();
+ +

Por ejemplo, supongamos que tenemos un documento que incluye un iframe:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+  </head>
+  <body>
+    <iframe id="frame1" src="static/frame/my-frame1.html"></iframe>
+  </body>
+</html>
+ +

El iframe define una nueva función:

+ +
<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <script>
+      function whoAreYou() {
+        return "Yo soy el frame1";
+      }
+   </script>
+  </head>
+  <body>
+  </body>
+</html>
+ +

Puedes cambiar el contexto al iframe de esta manera:

+ +
cd("#frame1");
+ +

Ahora verás que el objeto window global del documento es el iframe:

+ +

window global del documentoY puedes llamar a la función definida en el iframe:

+ +

función en la consola web

+ +

Comandos auxiliares

+ +

{{ page("es/docs/Tools/Web_Console/Helpers", "Los comandos") }}

diff --git a/files/es/tools/web_console/ui_tour/index.html b/files/es/tools/web_console/ui_tour/index.html new file mode 100644 index 0000000000..59b0156a49 --- /dev/null +++ b/files/es/tools/web_console/ui_tour/index.html @@ -0,0 +1,23 @@ +--- +title: Iniciando la Consola Web +slug: Tools/Web_Console/Iniciando_la_Consola_Web +translation_of: Tools/Web_Console/UI_Tour +--- +

Para abrir la Consola Web:

+ + + +

La Caja de herramientas (Toolbox) aparecera en la parte baja de la ventana del navegador, con la Consola Web activada (solamente se le llama "Consola" en la barra de herramientas DevTools (DevTools toolbar)):

+ +

+ +

La interfaz de la Consola Web esta dividida en tres secciones horizontales que son:

+ + -- cgit v1.2.3-54-g00ecf