From 1109132f09d75da9a28b649c7677bb6ce07c40c0 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:41:45 -0500 Subject: initial commit --- files/es/tools/3d_view/index.html | 83 ++ files/es/tools/about_colon_debugging/index.html | 255 ++++ files/es/tools/accesos_directos/index.html | 1266 ++++++++++++++++++++ files/es/tools/add-ons/index.html | 17 + files/es/tools/browser_console/index.html | 177 +++ files/es/tools/browser_toolbox/index.html | 64 + .../debugger/how_to/disable_breakpoints/index.html | 13 + files/es/tools/debugger/how_to/index.html | 11 + .../debugger/how_to/set_a_breakpoint/index.html | 44 + .../how_to/uso_de_un_mapa_fuente/index.html | 36 + files/es/tools/debugger/index.html | 214 ++++ .../es/tools/debugger/source_map_errors/index.html | 70 ++ "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/index.html | 211 ++++ files/es/tools/monitor_de_red/index.html | 189 +++ .../tools/page_inspector/3er-panel_modo/index.html | 69 ++ .../how_to/abrir_el_inspector/index.html | 22 + .../index.html | 47 + .../how_to/examinar_y_editar_html/index.html | 364 ++++++ .../how_to/examine_and_edit_css/index.html | 228 ++++ .../how_to/examine_grid_layouts/index.html | 131 ++ files/es/tools/page_inspector/how_to/index.html | 13 + .../inspeccionar_y_seleccionar_colores/index.html | 26 + .../index.html | 22 + .../how_to/select_an_element/index.html | 36 + .../how_to/work_with_animations/index.html | 112 ++ files/es/tools/page_inspector/index.html | 348 ++++++ files/es/tools/page_inspector/ui_tour/index.html | 98 ++ files/es/tools/profiler/index.html | 104 ++ .../debugging_over_a_network/index.html | 10 + .../firefox_para_android/index.html | 132 ++ files/es/tools/remote_debugging/index.html | 147 +++ files/es/tools/responsive_design_view/index.html | 18 + files/es/tools/settings/index.html | 206 ++++ .../es/tools/storage_inspector/cookies/index.html | 51 + files/es/tools/storage_inspector/index.html | 124 ++ .../es/tools/tomar_capturas_de_pantalla/index.html | 42 + files/es/tools/tools_toolbox/index.html | 105 ++ files/es/tools/view_source/index.html | 83 ++ .../tools/web_console/console_messages/index.html | 391 ++++++ files/es/tools/web_console/index.html | 349 ++++++ .../iniciando_la_consola_web/index.html | 23 + .../index.html" | 188 +++ files/es/tools/webide/index.html | 298 +++++ files/es/tools/webide/monitor/index.html | 158 +++ files/es/tools/webide/troubleshooting/index.html | 50 + files/es/tools/working_with_iframes/index.html | 28 + 50 files changed, 7030 insertions(+) create mode 100644 files/es/tools/3d_view/index.html create mode 100644 files/es/tools/about_colon_debugging/index.html create mode 100644 files/es/tools/accesos_directos/index.html create mode 100644 files/es/tools/add-ons/index.html create mode 100644 files/es/tools/browser_console/index.html create mode 100644 files/es/tools/browser_toolbox/index.html create mode 100644 files/es/tools/debugger/how_to/disable_breakpoints/index.html create mode 100644 files/es/tools/debugger/how_to/index.html create mode 100644 files/es/tools/debugger/how_to/set_a_breakpoint/index.html create mode 100644 files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/index.html create mode 100644 files/es/tools/debugger/index.html create mode 100644 files/es/tools/debugger/source_map_errors/index.html create mode 100644 "files/es/tools/desempe\303\261o/index.html" create mode 100644 "files/es/tools/desempe\303\261o/ui_tour/index.html" create mode 100644 files/es/tools/editor_audio_web/index.html create mode 100644 files/es/tools/editor_estilo/index.html create mode 100644 files/es/tools/index.html create mode 100644 files/es/tools/monitor_de_red/index.html create mode 100644 files/es/tools/page_inspector/3er-panel_modo/index.html create mode 100644 files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html create mode 100644 files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html create mode 100644 files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html create mode 100644 files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html create mode 100644 files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html create mode 100644 files/es/tools/page_inspector/how_to/index.html create mode 100644 files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html create mode 100644 files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html create mode 100644 files/es/tools/page_inspector/how_to/select_an_element/index.html create mode 100644 files/es/tools/page_inspector/how_to/work_with_animations/index.html create mode 100644 files/es/tools/page_inspector/index.html create mode 100644 files/es/tools/page_inspector/ui_tour/index.html create mode 100644 files/es/tools/profiler/index.html create mode 100644 files/es/tools/remote_debugging/debugging_over_a_network/index.html create mode 100644 files/es/tools/remote_debugging/firefox_para_android/index.html create mode 100644 files/es/tools/remote_debugging/index.html create mode 100644 files/es/tools/responsive_design_view/index.html create mode 100644 files/es/tools/settings/index.html create mode 100644 files/es/tools/storage_inspector/cookies/index.html create mode 100644 files/es/tools/storage_inspector/index.html create mode 100644 files/es/tools/tomar_capturas_de_pantalla/index.html create mode 100644 files/es/tools/tools_toolbox/index.html create mode 100644 files/es/tools/view_source/index.html create mode 100644 files/es/tools/web_console/console_messages/index.html create mode 100644 files/es/tools/web_console/index.html create mode 100644 files/es/tools/web_console/iniciando_la_consola_web/index.html create 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/webide/index.html create mode 100644 files/es/tools/webide/monitor/index.html create mode 100644 files/es/tools/webide/troubleshooting/index.html create mode 100644 files/es/tools/working_with_iframes/index.html (limited to 'files/es/tools') diff --git a/files/es/tools/3d_view/index.html b/files/es/tools/3d_view/index.html new file mode 100644 index 0000000000..973f780ee7 --- /dev/null +++ b/files/es/tools/3d_view/index.html @@ -0,0 +1,83 @@ +--- +title: 3D view +slug: Tools/3D_View +translation_of: Tools/3D_View +--- +

{{ fx_minversion_header("11") }}

+

Cuando das click sobre el botón ver 3D view, la página entra en modo de vista 3D; en este modo, usted puede ver su página en vista 3D en la cual se anidan bloques de HTML que van sobreponiendose, se proyecta desde la parte inferior de la página. Esta vista hace fácil de visualizar como se anida su contenido.

+

+

By clicking and dragging the view, you can rotate and re-orient the 3D presentation of the DOM hierarchy of your page to see it from different angles, to better examine its structure. Off-screen elements become visible, so that you can see where your elements are located in relation to the visible content. You can click on elements to see their HTML in the HTML panel or or Style panel. Conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3D view.

+

If you do not see the 3D button in the page inspector, it is possible that your graphics driver needs to be updated. See the blocklisted drivers page for more information.

+

Controlling the 3D view

+

There are keyboard shortcuts and mouse controls available for the 3D view.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
FunctionKeyboardMouse
Zoom in/out+ / -Scroll wheel up/down
Rotate left/righta / dMouse left/right
Rotate up/downw / sMouse up/down
Pan left/right← / →Mouse left/right
Pan up/down↑ / ↓Mouse up/down
Reset zoom level0Resets the zoom level to the default
Focus on selected nodefMakes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}
Reset viewrResets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}
Hide current nodexMakes the currently selected node invisible; this can be helpful if you need to get at a node that's obscured {{ fx_minversion_inline("12.0") }}
+

Use cases for the 3D view

+

There are a variety of ways the 3D view is useful:

+ +

See also

+ +

{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}

diff --git a/files/es/tools/about_colon_debugging/index.html b/files/es/tools/about_colon_debugging/index.html new file mode 100644 index 0000000000..d79402d197 --- /dev/null +++ b/files/es/tools/about_colon_debugging/index.html @@ -0,0 +1,255 @@ +--- +title: 'acerca:depurado' +slug: 'Tools/about:debugging' +tags: + - Debugger + - Depurado + - Depurado remoto + - Remote debugging + - 'about:debugging' +translation_of: 'Tools/about:debugging' +--- +

{{ToolsSidebar}}

+ +

La página about:debugging proporciona un lugar desde el que puede adjuntar las herramientas de desarrollador de Firefox a varios objetivos de depuración. Por el momento, admite tres tipos principales de objetivos: complementos que no requieren reinicio (restartless add-ons), pestañas y trabajadores.

+ +

Abrir la página about:debugging

+ +

Hay dos formas de abrir el about:debugging:

+ + + +

Cuando about:debugging se abre, en el lado izquierdo verá una barra lateral con dos opciones e información sobre su configuración de depuración remota:

+ +
+
Configuración
+
+

Use la pestaña Configuración para configurar la conexión a su dispositivo remoto.

+
+
+ +
+
Este Firefox
+
Proporciona información sobre las extensiones temporales que ha cargado para la depuración, las extensiones que están instaladas en Firefox, las pestañas que tiene abiertas actualmente y los trabajadores de servicios que se ejecutan en Firefox.
+
+ +

+ +

Si su página about:debugging es diferente de la que se muestra aquí, vaya a about:config, busque y establezca la opción devtools.aboutdebugging.new-enabled en true.

+ +

Pestaña Configuración

+ +

Conectarse a un dispositivo remoto

+ +

Firefox admite la depuración a través de USB con dispositivos Android, utilizando la página about:debugging.

+ +

Antes de conectarte:

+ +
    +
  1. Habilite la configuración de desarrollador en su dispositivo Android.
    2. +
  2. Habilite la depuración de USB en la configuración del desarrollador de Android.
    3. +
  3. Habilite la depuración remota a través de USB en la Configuración avanzada en Firefox en el dispositivo Android.
    4. +
  4. Conecte el dispositivo Android a su computadora con un cable USB.
    5. +
+ +

Si su dispositivo no aparece en el lado izquierdo de la página about:debugging, intente hacer clic en el botón Actualizar dispositivos.

+ +

Si aún no aparece, puede deberse a que el enlace entre su dispositivo Android y su computadora aún no está autorizado. Primero asegúrese de haber instalado Android Debug Bridge de Android Tools en su computadora para que pueda conectarse a su dispositivo. A continuación, deshabilite todas las configuraciones de depuración ya activadas y repita los pasos descritos anteriormente. Su dispositivo debe mostrar una ventana emergente para autorizar a su computadora a conectarse a él; acepte esto y luego haga clic en el botón Actualizar dispositivos nuevamente. El dispositivo debería aparecer.

+ +
+

Nota: No necesita instalar el SDK completo de Android Studio. Solo se necesita adb.

+
+ +

Para comenzar una sesión de depuración, primero abra la página que desea depurar y luego haga clic en Conectar al lado del nombre del dispositivo para abrir una conexión. Si la conexión fue exitosa, ahora puede hacer clic en el nombre del dispositivo para cambiar a una pestaña con información sobre el dispositivo.

+ +

Screenshot of the debugging page for an Android device

+ +

La información en esta página es la misma que la información en la pestaña Este Firefox, pero en lugar de mostrar información para su computadora, muestra la información para el dispositivo remoto con la adición de una sección de Pestañas con una entrada para cada una de las pestañas abiertas en el dispositivo remoto.

+ +

Nota: Si la versión de Firefox en su dispositivo es una versión anterior (o más) a la versión de su computadora, es posible que vea un mensaje como el siguiente:

+ +

The connected browser has an old version (68.2.0). The minimum supported version (69.0a1). This is an unsupported setup and may cause DevTools to fail. Please update the connected browser.

+ +

En Firefox 76 y superior, el mensaje puede tener el siguiente aspecto:This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details

+ +

En la imagen de abajo, hay tres pestañas abiertas: Network or cache Recipe, Nightly Home, y About Nightly. Para depurar el contenido de una de estas pestañas, haga clic en el botón Inspeccionar junto a su título. Cuando lo haga, las Herramientas para desarrolladores se abrirán en una nueva pestaña.

+ +

Screenshot showing the remote debugging window, with the editable URL bar

+ +

Ademas de la lista habitual de herramientas, tambien puede ver información sobre el dispositivo al que está conectado, incluido que está conectado (en este ejemplo) a través de USB, a Firefox Preview, en un Pixel 2, así como el título del página que está depurando y la dirección de la página.

+ +

A partir de Firefox 78, la barra de URL es editable, por lo que puede cambiar la URL utilizada por el navegador en el dispositivo remoto. También puede volver a cargar la página haciendo clic en el botón Reload junto a la barra de URL (a partir de 79), navegar hacia atrás o hacia adelante en el historial de navegación con los botones Atrás y Adelante.

+ +

Conectando a través de la red

+ +

Puede conectarse a un servidor de depuración de Firefox en su red o en su máquina de depuración utilizando la configuración de Ubicación de red de la página about:debugging.

+ +

Ingrese la ubicación y el puerto en el que se ejecuta el servidor del depurador. Cuando lo haga, se agregará a la lista de ubicaciones de red junto con los dispositivos, como se muestra a continuación:

+ +

+ +

Este Firefox

+ +

La pestaña Este Firefox combina las características de Extensiones, Pestañas y Trabajadores en una sola pestaña con las siguientes secciones:

+ +
+
Extensiones Temporales
+
Muestra una lista de las extensiones que ha cargado utilizando el botón Cargar complemento temporal.
+
Extensiones
+
Esta sección enumera información sobre las extensiones que ha instalado en su sistema.
+
Trabajadores de servicios, trabajadores compartidos y otros trabajadores
+
Hay tres secciones en esta página que tratan sobre los trabajadores de servicios, trabajadores compartidos y otros trabajadores.
+
+ +

+ +

Si las extensiones internas aparecen en la lista de esta página depende de la configuración de la preferencia devtools.aboutdebugging.showHiddenAddons. Si necesita ver estas extensiones, navegue hasta about:config y asegúrese de que la preferencia esté establecida en true.

+ +

Extensiones

+ +

Cargando una extensión temporal

+ +

Con el botón Cargar complemento temporalmente puede cargar temporalmente una extensión web desde un directorio en el disco. Haga clic en el botón, navegue hasta el directorio que contiene el complemento y seleccione su archivo de manifiesto. La extensión temporal se muestra debajo del encabezado Extensiones temporales.

+ +

No tiene que empaquetar o firmar la extensión antes de cargarlas. La extensión permanecerá instalada hasta que reinicie Firefox.

+ +

Las principales ventajas de este método, en comparación con la instalación de un complemento desde un XPI, son:

+ + + +

Una vez que haya cargado una extensión temporal, puede ver información sobre ella y realizar operaciones.

+ +

Screenshot of the debugging information panel for a temporary extension

+ +

Puede usar los siguientes botones:

+ +
+
Inspeccionar
+
Carga la extensión en el depurador.
+
Reload
+
Vuelve a cargar la extensión temporal. Esto es útil cuando ha realizado cambios en la extensión.
+
Eliminar
+
Retira la extensión temporal.
+
+ +

Se muestra otra información sobre la extensión:

+ +
+
Ubicación
+
La ubicación del código fuente de la extensión en su sistema local.
+
ID de extensión
+
La ID temporal asignada a la extensión.
+
UUID interno
+
El UUID interno asignado a la extensión.
+
Manifiesto de la URL
+
Si hace clic en el enlace, el manifiesto de esta extensión se carga en una nueva pestaña.
+
+ +

Actualización de una extensión temporal

+ +

Si instala una extensión de esta manera, ¿qué sucede cuando actualiza la extensión?

+ + + +

Extensiones instaladas

+ +

Las extensiones instaladas permanentemente se enumeran en la sección Extensiones. Para cada extensión Ud. verá algo como lo siguiente:

+ +

Screenshot of the debugging information panel for an installed extension

+ +

El botón Inspeccionar y los campos ID de extensión y UUID interno son los mismos que para las extensiones temporales.

+ +

Al igual que sucede con las extensiones cargadas temporalmente, el enlace junto a la URL del manifiesto abre el manifiesto cargado en una nueva pestaña.

+ +
+

Nota: Se recomienda que use la caja de herramientas del navegador, no el depurador de complementos, para depurar extensiones web. Vea Depuración de WebExtensions para todos los detalles.

+
+ +

La sección Complementos en about:debugging enumera todas las extensiones web que están instaladas actualmente. Al lado de cada entrada hay un botón etiquetado Inspeccionar.

+ +
+

Nota: esta lista puede incluir complementos que vienen preinstalados con Firefox.

+
+ +

Si hace clic en Inspeccionar, el depurador de complementos comenzará en una nueva pestaña.

+ +

Consulte la página del depurador de complementos para ver todas las cosas que puede hacer con esta herramienta.

+ +

Workers

+ +

Esta sección muestra todos los Workers que tienes registrados en tu Firefox, clasificados de la siguiente manera:

+ + + +

Puede conectar las herramientas de desarrollador a cada trabajador y enviar notificaciones push a los trabajadores del servicio.

+ +

+ +

Estado trabajador de servicio

+ +

La lista de trabajadores de servicio muestra el estado del trabajador de servicio en su ciclo de vida. Son posibles tres estados:

+ + + +

Screenshot of the debugging panel for a service worker that is in the Running state

+ +

Esta sección utiliza una demostración simple de ServiceWorker, alojada en https://serviceworke.rs/push-simple/.

+ +
+

Nota: Desde Firefox 79 en adelante, puede acceder a información similar sobre los Service Workers registrados en un dominio en particular yendo al panel de Aplicación de Firefox DevTools.

+
+ +

Dar de baja a los trabajadores del servicio

+ +

Haga clic en el botón Cancelar registro para cancelar el registro del trabajador de servicio.

+ +

Envío de eventos push a service workers

+ +

Para depurar notificaciones push, puede establecer un punto de interrupción en el detector de eventos push. Sin embargo, también puede depurar notificaciones push localmente, sin necesidad del servidor. Haga clic en el botón Push para enviar un evento push al trabajador del servicio.

+ +

Trabajadores de servicio no compatibles

+ +
+

Se muestra un mensaje de advertencia en la parte superior de la pestaña Este Firefox si los trabajadores del servicio son incompatibles con la configuración actual del navegador y, por lo tanto, no se pueden usar ni depurar.

+ +

+
+ +

Los trabajadores de servicio pueden no estar disponibles si la preferencia dom.serviceWorkers.enable está configurada como false en about:config.

+ +

Conexión a Firefox para Android 68

+ +

Las versiones de Firefox para Android que se basan en la versión 68 no se pueden depurar desde las versiones de escritorio de Firefox 69 o posteriores, debido a la diferencia en las versiones de lanzamiento. Hasta el momento en que Firefox para Android se actualice a una versión principal más reciente, en sincronización con Firefox de escritorio, debe usar una de las siguientes versiones de Firefox para Android:

+ + + +

Si prefiere realizar la prueba con la versión principal de Firefox para Android (es decir, según la versión 68), puede hacerlo con la versión de soporte extendido (ESR) de Firefox para escritorio, que también se basa en la versión 68.

+ +

Tenga en cuenta queen about:debugging la depuración no está habilitada de forma predeterminada en Firefox ESR. Para habilitarlo, abra el Editor de configuración (about:config) y establezca devtools.aboutdebugging.new-enabled en true.

+ +

Si utilizó una versión superior de Firefox antes de instalar Firefox ESR, se le pedirá que cree un nuevo perfil de usuario para proteger sus datos de usuario. Para obtener más información, consulte ¿Qué sucede con mi perfil si cambio a una versión anterior de Firefox?

diff --git a/files/es/tools/accesos_directos/index.html b/files/es/tools/accesos_directos/index.html new file mode 100644 index 0000000000..9372393011 --- /dev/null +++ b/files/es/tools/accesos_directos/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/add-ons/index.html b/files/es/tools/add-ons/index.html new file mode 100644 index 0000000000..53b7924169 --- /dev/null +++ b/files/es/tools/add-ons/index.html @@ -0,0 +1,17 @@ +--- +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/browser_console/index.html b/files/es/tools/browser_console/index.html new file mode 100644 index 0000000000..a33fe72f99 --- /dev/null +++ b/files/es/tools/browser_console/index.html @@ -0,0 +1,177 @@ +--- +title: Consola del Navegador +slug: Tools/Browser_Console +tags: + - Depuración + - Desarrollo web + - 'DesarrolloWeb:Herramientas' + - Herramientas + - Navegador +translation_of: Tools/Browser_Console +--- +

La Consola del Navegador es como la Consola Web, pero se aplica a todo el navegador en lugar de a una sola pestaña de contenido.

+ +

Por lo tanto, registra el mismo tipo de información que la Consola Web: solicitudes de red, JavaScript, CSS, errores y advertencias de seguridad y mensajes registrados explícitamente por código JavaScript. Sin embargo, en lugar de registrar esta información para una sola pestaña de contenido, registra información para todas las pestañas de contenido, complementos y código propio del navegador.

+ +

Si también desea utilizar las otras herramientas de desarrollador web en la caja de herramientas (Toolbox) Web estándar con código de complemento o explorador, considere la posibilidad de utilizar el cuadro de herramientas del navegador (Browser Toolbox).

+ +

Del mismo modo, puede ejecutar expresiones JavaScript utilizando la consola del explorador. Sin embargo, mientras la Consola Web ejecuta el código en el ámbito de la ventana de la página, la consola del explorador los ejecuta en el ámbito de la ventana chrome del navegador. Esto significa que puedes interactuar con todas las pestañas del navegador usando el gBrowser global e incluso con el XUL utilizado para especificar la interfaz de usuario del navegador.

+ +
+

Nota: La línea de comandos de la consola del navegador (para ejecutar expresiones JavaScript) está desactivada de forma predeterminada. Para habilitarla, establezca la preferencia devtools.chrome.enabled a true en about: config o configure la opción "Habilitar explorador {{Glossary ("chrome")}} y add-on debugging toolboxes" (Firefox 40 y posterior) en la opción Configuración de la herramienta de desarrollador (developer tool settings).

+
+ +

Abrir la Consola del Navegador

+ +

Puede abrir la consola del navegador de dos formas:

+ +
    +
  1. Desde el menú: seleccione "Consola del navegador" en el submenú "Desarrollador web" en el menú de Firefox (o en el menú Herramientas si muestra la barra de menús o está en OS X)
    2. +
  2. Desde el teclado: pulse Ctrl+Shift+J (o Cmd+Shift+J en un Mac).
    3. +
+ +

También puedes iniciar la consola del navegador lanzando Firefox desde la línea de comandos y pasando el argumento -jsconsole:

+ +
/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole
+ +

La consola del navegador se ve así:

+ +

+ +

Puede ver que la consola del navegador se ve y se comporta de forma muy similar a la Consola Web:

+ + + +

Registro de Consola del Navegador

+ +

El registro de consola del Navegador registra el mismo tipo de mensajes que la consola Web:

+ + + +

Sin embargo, tambien muestra mensajes provenientes de:

+ + + +

Mensajes provenientes de complementos

+ +

La consola del navegador muestra mensajes registrados por todos los complementos de Firefox.

+ +

Console.jsm

+ +

Para utilizar la API de consola de un complemento tradicional o bootstrapped, obtenlo desde el modulo de consola.

+ +

Un simbolo exportado por Console.jsm es "console". a continuación se muestra un ejemplo de como accesarlo. lo que añade un mensaje a la Consola del Navegador.

+ +
Components.utils.import("resource://gre/modules/Console.jsm");
+console.log("Hello from Firefox code"); //output messages to the console
+ +

Aprenda mas:

+ + + +

HUDService

+ +

Tambien existe el HUDService el cual permite el acceso a la Consola de Navegador. El modulo está disponible en Mozilla DXR. Así vemos que no solo podemos acceder a la consola del Navegador sino tambien a la consola web.

+ +

Aqui hay un ejemplo de como limpiar el contenido de la consola del navegador:

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+hud.jsterm.clearOutput(true);
+ +

Si usted quisiera accesar al documento contenido del la consola del navegador, esto puede hacerce mediante el HUDService. Este ejemplo a continuación  hace que cuando usted sobrepase el boton  "Clear" limpiará la Consola del navegador:

+ +
Components.utils.import("resource://devtools/shared/Loader.jsm");
+var HUDService = devtools.require("devtools/client/webconsole/hudservice");
+
+var hud = HUDService.getBrowserConsole();
+
+var clearBtn = hud.chromeWindow.document.querySelector('.webconsole-clear-console-button');
+clearBtn.addEventListener('mouseover', function() {
+  hud.jsterm.clearOutput(true);
+}, false);
+ +

Caracteristicas Adicionales Disponibles

+ +

Para los Complementos SDK, la consola API está disponible automaticamente. A continuación se muestra un ejemplo de complemento que registra un error cuando el usuario hace click en un widget:

+ +
widget = require("sdk/widget").Widget({
+  id: "an-error-happened",
+  label: "Error!",
+  width: 40,
+  content: "Error!",
+  onClick: logError
+});
+
+function logError() {
+  console.error("something went wrong!");
+}
+ +

Si uested construye este como un archivo XPI, entonces abra la consola del navegador, y entonces abra el archivo XPI en Firefox e instalelo, verá una etiqueta widget con el mensaje "Error!" en la barra del complemento:

+ +

Haga click en el icono. verá un mensaje como este aparecer en la consola del navegador:

+ +

+ +

Para complementos basados unicamente en SDK, al mensaje se le antepone el nombre del complemento ("log-error"), haciendolo mas facil de encontrar todos los mensajes de este complemento utilizando la caja de busqueda del "Filtro de salida". Por default, solo los mensajes de error son registrados en la consola, aunque usted puede cambiar este comportamiento en preferencias del navegador.

+ +

Consola de línea de comandos del Navegador

+ +
+

La Consola de linea de comandos del navegador esta deshabilitada de manera predeterminada. Para habilitarla cambie la preferencia de devtools.chrome.enabled hacia true en about:config, o establezca la opción "Enable chrome debugging" dentro de developer tool settings.

+
+ +

Al igual que la consola Web, el interprete de linea de comando le permite evaluar expresiones JavaScript en tiempo real:Tambien como el interprete de linea de comando de la consola Web, esta linea de comando soporta autocompletar, historial, y varios atajos de teclado así como comandos de ayuda. si el resultado de un comando  es un objeto, usted puede hacer click sobre el objeto para ver sus detalles.

+ +

Pero mientras la consola Web ejecuta codigo en el ambito (scope) de la ventana que lo contiene, la consola del navegador ejecuta codigo en el ámbito (scope) de la ventana metálica del navegador. Usted puede confirmar este comportamiento evaluendo window:

+ +

+ +

Esto significa que usted puede controlar en el navegador: abrir, cerrar pestañas y ventanas y cambiar el contenido que ellas alojan, y modificar el UI del navegador al crear, cambiar y remover elementos XUL.

+ +

Controlando el navegador

+ +

El interprete de linea de comando obtiene acceso al objeto tabbrowser, a traves de el gBrowser global, y ello le permite a usted controlar el navegador a traves de la linea de comando. Pruebe correr el siguente codigo en la linea de comando en la consola del navegador (recuerde que para enviar multiples lineas de comando a la consola de navegador, utilice Shift+Enter):

+ +
var newTabBrowser = gBrowser.getBrowserForTab(gBrowser.selectedTab);
+newTabBrowser.addEventListener("load", function() {
+  newTabBrowser.contentDocument.body.innerHTML = "<h1>this page has been eaten</h1>";
+}, true);
+newTabBrowser.contentDocument.location.href = "https://mozilla.org/";
+ +

Añadirá un listener en el (load event) de la pestaña que este actualmente seleccionada, el cual  terminará la pagina, para posteriormente cargar una nueva pagina.

+ +

Modificando el UI del navegador

+ +

Debido a que el  global window object es la ventana metalica del navegador, usted tambien puede modificar la Inteface de Usuario del navegador. En Windows, el siguente codigo añadira un nuevo ITEM al menu principal del navegador:

+ +
var parent = window.document.getElementById("appmenuPrimaryPane");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

En OS X, este codigo similar añadirá un nuevo item al menu "Herramientas":

+ +
var parent = window.document.getElementById("menu_ToolsPopup");
+var makeTheTea = gBrowser.ownerDocument.defaultView.document.createElementNS("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul", "menuitem");
+makeTheTea.setAttribute("label", "A nice cup of tea?");
+parent.appendChild(makeTheTea);
+ +

diff --git a/files/es/tools/browser_toolbox/index.html b/files/es/tools/browser_toolbox/index.html new file mode 100644 index 0000000000..d702370f0d --- /dev/null +++ b/files/es/tools/browser_toolbox/index.html @@ -0,0 +1,64 @@ +--- +title: Caja de Herramienta del Navegador +slug: Tools/Browser_Toolbox +tags: + - Depurador + - Firefox + - JavaScript +translation_of: Tools/Browser_Toolbox +--- +

La Caja de Herramientas del Navegador habilita la depuración de extensiones (add-ons) y del código JavaScript propio del navegador mas que simplemente páginas web como  la Caja de Herramienta normal. El contexto de la Caja de Herramientas del Navegador es el navegador completo en lugar de simplemente una única página en una única pestaña.

+ +
+

Nota: Si usted quiere depurar una extensión especifica que no es reiniciable o basado en SDK entonces pruebe el "Depurador de Extensiones".  Para extensiones que no son ninguna de las dos, use la Caja de Herramientas del Navegador.

+
+ +

Habilitando la Caja de Herramientas del Navegador

+ +
+

La Caja de Herramientas del Navegador no esta habilitada por defecto. Para habilitarla necesita marcar las casillas de configuración "Habilitar depuración  chrome y de extensiones" y "habilitar depuración remota".

+ +

Para hacer esto, abra la Configuración de Caja de Herramientas en Herramientas del Desarrollador, vaya a la sección "Configuración Avanzada", y marque en las opciones "Habilitar navegador chrome y caja de herramientas de depuración de extensiones" y "Habilitar depuración remota".

+ +

Developer Tools Settings

+
+ +

Abriendo la Caja de Herramienta del Navegador

+ +

Abra la caja de Herramientas del navegador a través del botón menú new fx menu y los ítems del menú "Desarrollador" y "Caja de Herramientas del Navegador". 

+ +

A partir de Firefox 39, puede abrirlo con la combinación de teclas  Ctrl + Alt +Shift + I .   ( Cmd + Opt +Shift + I en una Mac).

+ +

Se le presentará una caja de dialogo como esta (la cual puede ser removida configurando la propiedad "devtools.debugger.prompt-connection" a falso):

+ +

Clíque OK, y la Caja de Herramientas del Navegador abrirá en su propia ventana:

+ +

Estará habilitado para inspeccionar la ventana XUL del navegador y ver y depurar, todos los archivos JavaScript cargados por el propio navegador  y por las extensiones que están corriendo. En conjunto tendrá acceso a las siguientes herramientas del desarrollador:

+ + + +

Depurando chrome: y a cerca de: páginas

+ +

A partir de Firefox 37 en adelante, usted puede depurar chrome: y a cerca de: páginas usando el Depurador normal, justo como si fueran páginas con contenido ordinario.

+ +

Seleccionando un documento

+ +

En la Caja de Herramienta normal, hay un botón en la barra de herramienta habilitándolo a usted para seleccionar "iframes" específicos en el documento. A partir de Firefox 40 en adelante el mismo botón aparece en la caja de herramientas del navegador también, pero éste lista todas las ventanas de contenido y de nivel mas alto de chrome como así también cualquier "iframes" que contengan. Esto lo habilita a usted a inspeccionar documentos en ventanas individuales de chrome y ventanas emergentes, como así también en pestañas de contenido.

+ +

Por ejemplo, aquí se tiene lo que la ventana emergente de selección de marco lista cuando hay dos  ventanas de navegador abiertas, una con una pestaña de contenido, y otra con dos:

+ +

+ +

 

+ +

 

+ +

 

diff --git a/files/es/tools/debugger/how_to/disable_breakpoints/index.html b/files/es/tools/debugger/how_to/disable_breakpoints/index.html new file mode 100644 index 0000000000..44e2669bd0 --- /dev/null +++ b/files/es/tools/debugger/how_to/disable_breakpoints/index.html @@ -0,0 +1,13 @@ +--- +title: Disable breakpoints +slug: Tools/Debugger/How_to/Disable_breakpoints +translation_of: Tools/Debugger/How_to/Disable_breakpoints +--- +

Para desactivar un punto de interrupción, desactive la casilla de verificación junto a la entrada del punto de interrupción en el panel de lista de Fuente:

+ +

Alternativamente, activar el menú contextual, mientras que el puntero del ratón está sobre la entrada del punto de interrupción en el panel de lista de fuentes y seleccione "breakpoint Desactivar"
+ También es posible eliminar un punto de interrupción con sólo hacer clic en el círculo azul que representa la misma.

+ +

Para activar / desactivar todos los puntos de interrupción, utilice el "Cambia todos los puntos de ruptura" botón en el panel de lista de Fuente:

+ +

diff --git a/files/es/tools/debugger/how_to/index.html b/files/es/tools/debugger/how_to/index.html new file mode 100644 index 0000000000..d77ec65938 --- /dev/null +++ b/files/es/tools/debugger/how_to/index.html @@ -0,0 +1,11 @@ +--- +title: How to +slug: Tools/Debugger/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Debugger/How_to +--- +

These articles describe how to use the debugger.

+ +

{{ ListSubpages () }}

diff --git a/files/es/tools/debugger/how_to/set_a_breakpoint/index.html b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html new file mode 100644 index 0000000000..49376ffc9e --- /dev/null +++ b/files/es/tools/debugger/how_to/set_a_breakpoint/index.html @@ -0,0 +1,44 @@ +--- +title: Set a breakpoint +slug: Tools/Debugger/How_to/Set_a_breakpoint +translation_of: Tools/Debugger/How_to/Set_a_breakpoint +--- +
{{ToolsSidebar}}
+ +

Puedes establecer una interrupción incondicional en una de las siguientes maneras:

+ + + +

When you display the context menu, you have a choice of setting either a breakpoint that will pause code execution when it reaches that line, an unconditional breakpoint, or a conditional breakpoint that will only pause the code if the conditions you define are met:

+ +

+ +

If you choose to set a conditional breakpoint, you will be able to add the condition:

+ +

+ +

Each breakpoint is shown in two places in the debugger:

+ + + +

Starting in Firefox 67, you can set a column breakpoint on a complex line of code, such as one that makes multiple function calls. For example, if you try to set a breakpoint on the following line, you will have three possible locations for a breakpoint: at the point where the variable value is set, at the call to parse, or at the call to getItem.

+ +
tasks = JSON.parse(localStorage.getItem('todoList'));
+ +

Possible breakpoints are shown with indicators. The following image shows the line in the debugger. As soon as you click on the line, the three indicators show the possible breakpoints. The default breakpoint is set to the first column. In the image, the second column breakpoint was chosen which you can confirm in the Breakpoints section on the right where it shows that the breakpoint is on the call to parse.

+ +

+ +

Column breakpoints allow you to break at multiple points on the same line. In the previous example, you could have selected both the call to parse and the call to getItem, or even all three columns to break at each of the possible locations.

+ +

In cases where you set breakpoints on multiple columns, the currently active columns breakpoint will be highlighted in the Breakpoints side panel.

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 new file mode 100644 index 0000000000..30e60902cd --- /dev/null +++ b/files/es/tools/debugger/how_to/uso_de_un_mapa_fuente/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/index.html b/files/es/tools/debugger/index.html new file mode 100644 index 0000000000..7d869dccf3 --- /dev/null +++ b/files/es/tools/debugger/index.html @@ -0,0 +1,214 @@ +--- +title: Depurador +slug: Tools/Debugger +translation_of: Tools/Debugger +--- +

{{ToolsSidebar}}

+ +
+

Esta página describe el depurador de JavaScript como se muestra en Firefox 52 y superiores, en Firefox Nightly y Firefox Developer Edition.

+ +

Para ver como luce en versiones anteriores de firefox ó en Firefox Beta y Release, ver Depurador (anterior a Firefox 52).

+ +

Si obtienes esta version del Depurador y requires cambiar a la version anterior, lo puedes hacer visitando about:config y cambiando la preferencia de "devtools.debugger.new-debugger-frontend" a false .

+
+ +

{{EmbedYouTube("sK8KU8oiF8s")}}

+ +

El depurador te permite inspeccionar paso a paso el código de JavaScript y examinar o modificar su estado ayudando a eliminar errores.

+ +

Puedes usarlo para depurar código local o remoto, por ejemplo en un dispositivo Android ejecutando Firefox para Android.  Ver acerca del depurador remoto para aprender como depurar un objetivo remoto.j

+ +

{{ fx_minversion_header("15.0") }}

+ +

El depurador JavaScript está disponible en dos variedades: una para depurar contenido que se ejecuta directamente en Firefox, y otra que te permite depurar contenido que se está ejecutando en un dispositivo con Firefox OS , o en Firefox en un dispositivo Android. La principal diferencia entre los dos es que el Depurador Remoto se ejecuta en su propia ventana, mientras que el depurador de contenido web se ejecuta en la misma pestaña de la  Web que se está depurando.

+ +

Iniciar el depurador

+ +

Depurando contenido web

+ +

Para ejecutar contenido Web ejecutado directamente en Firefox (no importa si está guardado localmente en tu equipo o en un servidor), seleccione la opción Depurador del Menú Desarrollador Web en Herramientas.

+ +

Una vez que ha configurado Firefox y Firefox OS para soportar depuración, puede usar el Depurador Remoto para depurar su código ejecutado en  un dispositivo Firefox OS o en el simulador de Firefox OS.

+ +

A fin de depurar código  JavaScript ejecutado en un dispositivo  Firefox OS o Android, debe verificar que el dispositivo este conectado al puerto USB y que ese lsusb y adb pueden verlo. Entonces deberá re-enviar el puerto  TCP apropiado al dispositivo abriendo una ventana de  terminal y digitando el siguiente comando:

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

Recuerda: Deberás re-enviar el puerto cada vez que reinicies el dispositivo.

+
+ +

Ahora puede abrir el depurador del menú de desarrolladores. Le pedirá especificar la dirección IP y el puerto al que se quiere conectar. Dé click en "ok" y puede iniciar la depuración.

+ +

Un vistazo rápido a cómo se ve el depurador remoto

+ +

Llegado a este punto, el depurador no está ejecutandose todavía, debido a que no se han puesto puntos de ruptura o breakpoints. El dispositivo solo permanece a la espera. De hecho, en las siguientes secciones se explica como usar el depurador.  

+ +

La Barra del Depurador

+ +

La barra de herramientas tiene diversos controles:

+ +

PNG del diagrama de barra de herramientas etiquetado

+ +
+
Pause/Resume (F6)
+
Pausa o reanuda la ejecución de un script que estas depurando.
+
Step Over (F7)
+
Pausa la linea en curso de codigo JavaScript.
+
Step Into (F8)
+
Pausa la llamada a la función de la linea en curso del código JavaScript.
+
Step Out (Shift-F8)
+
Ejecuta el script hasta que termina la ejecución de la función.
+
Script Chooser (Ctrl-P or Cmd-P)
+
Este pop-up menu te deja seleccionar uno de los scripts en ejecución para leer su código, colocar puntos de ruptura, y continuar.
+
Script Filter
+
Este filtro de script (que también funciona como caja de busquedas) nos deja introducir una cadena para filtrar que scripts deben aparecer en el Buscador de Script. Consulte {{anch("Using the script filter")}}  a continuación.
+
Expandir Paneles
+
Expande o contrae la ventana para mostar u ocultar los paneles laterales.
+
Debugger Options
+
Aparece un menu en una ventana emergente dejandote configurar el depurador. Consulte {{anch("Opciones de depuración")}} a continuación.
+
+ +
+

Nota: El depurador de contenido Web tiene un icono de Cierre al principio de la barra de tareas; puedes usarlo para cerrar el depurador.

+
+ +

Usando el filtro de Scripts

+ +

Cuando haces clic en el filtro de script de la barra de herramientas, puedes introducir una cadena para filtrar el menú de selección de script para que solo muestre los scripts seleccionados. Además, como puede ver al hacer clic en esta caja, hay operadores especiales que puedes usar para utilizar el cuadro como ventana de busqueda, así como para otras utilidades. Cada uno de estos operadores especiales tiene un atajo de teclado que automáticamente te lleva a la ventana de filtros e insertará el operador en el cuadro por usted, para que pueda comenzar a escribir.

+ +

Captura de pantalla del panel emergente del operador del cuadro de búsqueda.

+ +
+
Search in all files - ! (Cmd-Opt-F)
+
Busca el texto que ingresa en todos los scripts en ejecución. Esto agrega un panel justo debajo de la barra de herramientas que muestra todos los archivos coincidentes, cada uno con un cuadro de divulgación que le permite ver las coincidencias encontradas dentro de él.
+
Find in this file - # (Cmd-F)
+
Busca el texto que ingresas en el archivo que estás viendo actualmente.
+
Jump to line - : (Cmd-J)
+
Salta al numero de línea que has introducido en la ventana.
+
Filter variables - * (Cmd-Opt-V)
+
Filtra las variables mostradas para incluir solo aquellas que coinciden con la cadena especificada.
+
+ +

Opciones del depurador

+ +

El icono de Opciones del depurador, cuando cliqueas, presenta un menu de opciones emergente que te deja ajustar el comportamiento del depurador.

+ +
+
Pausa en excepciones
+
Cuando esta opción esta marcada, la ejecución del script se pausará automáticamente cada vez que se produzca una excepción de JavaScript.
+
Mostrar paneles al inicio
+
Cuando esta opción esta marcada, los dos paneles de la barra lateral del depurador son visibles cuando se inicia el depurador por primera vez; por defecto, no se ven.
+
Mostrar propiedades ocultas
+
Si no marcas esta opción, las propiedades de JavaScript ocultas (es decir, aquellas que son no-enumerables) no se muestran.
+
Mostrar cuadro de busqueda de variables
+
Habilitar esta opción agrega un cuadro de búsqueda "Filtrar variables" al panel de variables, que pueda filtrar la lista de variables que se muestra.
+
+ +

Uso del depurador

+ +

El depurador de JavaScript tiene la mayoría de las características estándar que espera en un depurador moderno.

+ +

Breakpoints

+ +

Puede establecer un punto de interrupción eligiendo el archivo en el que desea establecer un punto de interrupción (si aún no lo está mirando) utilizando el menú desplegable del selector de guiones y luego haciendo clic en la columna del número de línea, a la izquierda del to the left of the line number itself, en la línea de código en la que desea establecer un punto de interrupción.También puede hacer clic con el botón derecho en el código, en la línea en la que desea crear un punto de interrupción, y usar el menú contextual resultante para crear un punto de interrupción (Ctrl + B o Cmd-B) o un punto de interrupción condicional (Ctrl + Shift + B o Cmd-Shift-B)

+ +

Por ejemplo, usemos el depurador remoto para establecer un punto de interrupción que se active siempre que baje la barra de notificaciones. Para hacer eso, elija  "app://system.gaiamobile.org/js/quick_settings.js" (esta es la aplicación de configuración rápida que aparece cuando despliega la barra de notificaciones). Vaya al método handleEvent() y haga clic a la izquierda de la primera línea de código. Esto agregará un indicador de punto de interrupción azul al lado de esa línea, como este:

+ +

Imagen que muestra cómo se ve un punto de interrupción establecido

+ +

Puede volver a desactivar el punto de interrupción, por supuesto, haciendo clic en ese indicador de punto de interrupción nuevamente. La parte inferior del panel de la pila también muestra una lista de todos los puntos de interrupción establecidos actualmente. Consulte {{anch ("Gestión de puntos de interrupción")}} para obtener detalles sobre las cosas que puede hacer con esta lista.

+ +

Ahora, despliegue la barra de notificaciones en su dispositivo. La barra se desplegará y luego se encenderá el punto de interrupción cuando la aplicación reciba su primer evento. Si no tiene los paneles mostrados, se abrirán en este momento (para mostrarle el marco de la pila, la visualización de variables, etc.). El depurador, en este punto, se verá así:

+ +

Una imagen que muestra cómo se ve cuando se alcanza un punto de interrupción.

+ +

Mientras tanto, su dispositivo se verá así:

+ +

Imagen que muestra cómo se ve el dispositivo cuando se activa el punto de interrupción de muestra.

+ +

Puede hacer clic hacia adelante y hacia atrás en el marco de la pila para ver el historial de llamadas. Al hacer clic en "ut_onTouchEnd" en el panel del marco de la pila, se mostrará el código app://system.gaiamobile.org/js/utility_tray.jsque manejó el evento que ocurrió cuando quitó el dedo de la pantalla después de bajar la bandeja de notificaciones, por ejemplo.

+ +

Puede usar los botones de reanudar, pasar, entrar y salir de la barra de herramientas como en cualquier depurador típico, para recorrer el código. La siguiente línea de código para ejecutar tiene una flecha verde a su izquierda. Por supuesto, puede establecer y eliminar puntos de interrupción, examinar variables, etc. mientras lo hace.

+ +

El canalón a la derecha del código fuente tiene indicadores azules en los que puede hacer clic para desplazarse rápidamente hasta el punto de interrupción correspondiente.

+ +

Puntos de interrupción condicionales

+ +

Los puntos de interrupción condicionales son un tipo especial de punto de interrupción que se activa solo cuando una expresión de JavaScript determinada es verdadera. Para establecer un punto de interrupción condicional, haga clic derecho en una línea de código y elija "Agregar punto de interrupción condicional" (o presione Ctrl + Shift + B / Cmd-Shift-B). También puede crear un punto de interrupción regular y luego agregar una condición haciendo clic con el botón derecho en la lista de puntos de interrupción en la esquina inferior izquierda de la ventana del depurador.

+ +

Luego puede ingresar una condición que debe ser verdadera para que se active el punto de interrupción:

+ +

El cuadro para configurar un punto de interrupción condicional

+ +

Ahora, cuando se alcanza la línea de código correspondiente, solo se detendrá la ejecución de la expresión si evt.type == 'click'es verdadera.

+ +

Gestionar puntos de interrupción

+ +

Puede administrar los puntos de interrupción que ha establecido utilizando la lista de puntos de interrupción en el lado inferior izquierdo de la ventana del depurador. Activar y desactivar la casilla de verificación en cualquier punto de interrupción activa y desactiva el punto de interrupción. Al hacer clic en cualquier punto de interrupción condicional, aparecerá el panel de edición de puntos de interrupción condicional, como se ve en {{anch ("Puntos de interrupción condicionales")}}.

+ +

Puede obtener opciones adicionales haciendo clic derecho en cualquier punto de interrupción:

+ +
+
Eliminar todos los puntos de interrupción
+
Elimina todos los puntos de interrupción actuales.
+
Habilitar todos los puntos de interrupción
+
Habilita todos los puntos de interrupción actuales. Este es un atajo para alternar en las casillas de verificación junto a todos los puntos de interrupción.
+
Deshabilitar todos los puntos de interrupción
+
Desactiva (sin eliminar) todos los puntos de interrupción. Este es un atajo para desactivar las casillas de verificación junto a todos los puntos de interrupción.
+
Habilitar a otros
+
Habilita todos los puntos de interrupción excepto el que hizo clic con el botón derecho.
+
Deshabilitar a otros
+
Disables all breakpoints except the one you right-clicked.
+
Remove others
+
Removes all breakpoints except the one you right-clicked.
+
Configure conditional breakpoint
+
Configures the conditional breakpoint on which you right-clicked. If the breakpoint isn't a conditional one, you can add a condition and turn it into a conditional breakpoint.
+
Disable breakpoint
+
Disables the breakpoint you right-clicked.
+
Enable breakpoint
+
Enables the breakpoint you right-clicked.
+
+ +

The variable panel

+ +

Primera toma del panel variableMost of the right-hand pane in the debugger is occupied by the variables available in the scope you're currently viewing. As seen here, it shows the variables for the local scope of the currently executing function (in this case, qs_handleEvent()), the calling function (here it's ut_show()), and the global scope (the {{domxref("Window")}} object, in this case).

+ +

Each object can be expanded using a disclosure triangle to show its members, thereby revealing its contents. You can change a variable's value by clicking on its current value and entering a new one; for example, if you click on the "true" next to geolocationEnabled, you can type "false" to set the value to false. Variables whose values you've edited are highlighted in yellow, like this:

+ +

Ejemplo de cómo se ve una variable modificada.

+ +

Pointing your cursor at a variable provides a tooltip that provides additional information about the variable; for example, pointing at the evt object says "configurable enumerable writable". This tells you that the evt object is not configurable, but is enumerable and writable. See Object.defineProperty() for details on what these property descriptors mean.

+ +

If you've enabled the filter variables box, as shown in the screenshot, you can reduce clutter in this list to limit the list to showing only the things you really want to see. This search is even recursive; it will search through sub-objects. Typing "blue", for example, restricts the list to the this.bluetooth object in the qs_handleEvent() function's scope, and the Bluetooth and BluetoothTransfer objects in the global scope.

+ +

Watch expressions

+ +

Watch expressions are expressions that are evaluated each time execution pauses. You can then examine the results of these expressions. These are useful in that they let you inspect invariants in your code that you know are there but aren't necessarily in the code ready for inspection. To add a watch expression, click in the box that says "Add watch expression" and enter a JavaScript expression whose output you'd like to monitor as you step through code.

+ +

Then start running your code. The watch expression does nothing until you begin to step through your code, so nothing happens until you reach a breakpoint. At that point, a box showing your active watch expressions and their current values will appear.

+ +

For example, let's say we're stepping through some code and we want to quickly know what the value of a variable a multiplied by two is, without having to be bothered with any tedious "thinking". We can enter the expression a*2 into the "Add a watch expression box" and hit enter, set an appropriate breakpoint, and run our code.

+ +

When our breakpoint is reached, let's say the value of a is 1. The resulting display looks like this:

+ +

Cómo se ve una expresión de reloj despedido

+ +

You can step through your code, watching the value of the expression as it changes; each time it does, the box will flash briefly yellow. You can remove a watch expression by clicking the "x" icon next to it, and, of course, you can have more than one watch expression at a time.

+ +

Stopping the debugger

+ +

Cuando haya terminado de depurar, si lo desea, puede desactivar la depuración remota en el dispositivo abriendo la aplicación Configuración y luego eligiendo Información del dispositivo. En esa página, verá un botón Más información. Toque eso, luego en la página siguiente, desplácese hacia abajo hasta "Desarrollador" y toque eso. Eso presenta una lista de opciones para desarrolladores. Desactive la depuración remota allí. Sin embargo, no tienes que hacer esto si no quieres.

+ +
+

Nota: No es necesario reiniciar solo para activar y desactivar el soporte de depuración remota en el dispositivo, a partir de las compilaciones nocturnas del 29 de noviembre de 2012 o posteriores.]

+
+ +

Vea también:

+ + diff --git a/files/es/tools/debugger/source_map_errors/index.html b/files/es/tools/debugger/source_map_errors/index.html new file mode 100644 index 0000000000..ff12850c79 --- /dev/null +++ b/files/es/tools/debugger/source_map_errors/index.html @@ -0,0 +1,70 @@ +--- +title: Source map errors +slug: Tools/Debugger/Source_map_errors +tags: + - Consola + - Debugger + - Depurador + - Herramientas + - Source maps + - mapas fuente +translation_of: Tools/Debugger/Source_map_errors +--- +
{{ToolsSidebar}}
+ +

Los mapas fuente son ficheros JSON que proporcionan una forma de asociar las fuentes transformadas, tal como las ven los navegadores, con su fuente original, tal como fue escrita por el desarrollador. A veces puedes encontrar problemas trabajando con los mapas fuente.  Esta página explica los problemas más comunes y como resolverlos.

+ +
+

Nota: Si no conoces los mapas fuente, puedes aprender más sobre ellos en  Como usar un mapa fuente.

+
+ +

Informe de errores general de mapas fuente

+ +

Si ves un problema, aparecerá un mensaje en la consola web. Este mensaje mostrará un mensaje de error, la dirección URL del recurso, y la URL del mapa fuente:

+ +

Error from invalid JSON

+ +

Aquí, la URL del recurso nos dice que bundle.js hace mención a un mapa fuente, y la URL del mapa fuente nos dice dónde encontrar los datos del mapa fuente (en este caso, relativo al recurso).  El error nos dice que el mapa fuente no son datos en formato JSON — por tanto estamos proporcionando el archivo erroneo.

+ +

Hay unas cuantas formas en las que los mapas fuente pueden ir mal; Estas se detallan en las siguientes secciones.

+ +

Mapa fuente no encontrado o inaccesible

+ +

El mapa fuente puede estar desaparecido o inaccesible.

+ +

Source map file is missing

+ +

Para arreglarlo debemos asegurarnos que el fichero existe y esta siendo servido y es accesible por el navegador.

+ +

Mapa fuente invalido

+ +

El mapa fuente puede ser inválido — bien porque no es un fichero en formato JSON o porque tiene una estructura incorrecta. Los típicos mensajes de error son:

+ + + +

Error: "version" is a required argument

+ +

Fuente original no encontrada

+ +

La fuente original podría estar desaparecida. Este mensaje puede encontrarse cuando se intenta abrir una de las fuentes originales en el debugger. El mensaje parece un poco diferente en este caso:

+ +

Debugger source tab showing the error

+ +

En este caso, el error tambien se mostrará en el debugger en la pestaña de la fuente:

+ +

Debugger source tab showing the error

+ +

Error de red intentando acceder al recurso. (NetworkError when attempting to fetch resource)

+ +

Un bug de Firefox evita que los mapas fuente se descarguen para las extensiones y complementos.

+ +

Visita Bug 1437937: WebExtensions Doesn't Find Source Maps para más detalles.

+ +
Source-Map-Fehler: TypeError: NetworkError when attempting to fetch resource.
+ Ressourcen-Adresse: moz-extension://c7f0f003-4fcf-49fd-8ec0-c49361266581/background.js
+ Source-Map-Adresse: background.js.map
+ +

La única forma de corregir este error es cambiando manualmente la URL del mapa a una pública (http://localhost:1234/file.map.js) y arrancar un servidor web local en el puerto establecido.

diff --git "a/files/es/tools/desempe\303\261o/index.html" "b/files/es/tools/desempe\303\261o/index.html" new file mode 100644 index 0000000000..9dbf8e643d --- /dev/null +++ "b/files/es/tools/desempe\303\261o/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/desempe\303\261o/ui_tour/index.html" "b/files/es/tools/desempe\303\261o/ui_tour/index.html" new file mode 100644 index 0000000000..8898abae03 --- /dev/null +++ "b/files/es/tools/desempe\303\261o/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/editor_audio_web/index.html b/files/es/tools/editor_audio_web/index.html new file mode 100644 index 0000000000..2db0cdbe58 --- /dev/null +++ b/files/es/tools/editor_audio_web/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/editor_estilo/index.html b/files/es/tools/editor_estilo/index.html new file mode 100644 index 0000000000..cdfc54bebf --- /dev/null +++ b/files/es/tools/editor_estilo/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/index.html b/files/es/tools/index.html new file mode 100644 index 0000000000..1edcffcd61 --- /dev/null +++ b/files/es/tools/index.html @@ -0,0 +1,211 @@ +--- +title: Herramientas +slug: Tools +tags: + - Desarrollando Mozilla + - 'Desarrollo Web: Herramientas' + - Desarrollo web + - Herramientas + - Necesita Revisión Técnica + - Necesita traducción + - NeedsMarkupWork + - TopicStub +translation_of: Tools +--- +
{{ToolsSidebar}}
+
Examina, edita y depura HTML, CSS y  JavaScript en el ordenador y en el móvil
+ +
Instala Firefox Developer Edition + +

¿Qué hay de nuevo en Firefox Developer Edition?

+ +

Firefox Developer Edition es una versión de Firefox adaptada para desarrolladores, ofreciendo las últimas características y herramientas de desarrollo experimental. La actual edición de desarrollo (Firefox Developer Edition) incluye estos cambios en las herramientas de desarrollador:

+ + +
+ +
Comparte tus ideas + +

Comparte tus ideas

+ +

Pregunte por las nuevas propiedades en las herramientas de desarrollador o vote por las ideas que otros desarrolladores están solicitando.

+
+ +

+ +
+
+

Creando

+ +

Herramientas de autorización para sitios web y aplicaciones web.

+ +
+
Scratchpad
+
Un editor construido dentro de Firefox que te permite escribir y ejecutar JavaScript.
+
Editor de estilos
+
Revisa y edita estilos CSS para la página actual.
+
Editor de sombras
+
Revisa y edita los vertex y fragmentos de sombras usado por WebGL.
+
Editor de audio web
+
Examina el gráfico de los nodos de audio en un contexto de audio y modifica sus parámetros.
+
+
+ +
+

Explorando y depurando

+ +

Examina, explora y depura sitios web y aplicaciones web.

+ +
+
Consola Web
+
Mira mensajes de registro (logs) en una página web e interactua con la página usando JavaScript.
+
Inspector de página
+
Revisa y modifica el HTML y CSS de la página.
+
Depurador JavaScript
+
Deten, ve paso a paso, examina y modifica el JavaScript que está ejecuntandose in una página.
+
Monitor de red
+
Mira las solicitudes de red hechas cuando una página está cargada.
+
Inspector de almacenamiento
+
Inspecciona cookies, almacenamiento local, Inspect cookies, local storage, indexedDB y almacenamiento de session presente en una página.
+
Barra de desarrollador
+
Una interface de linea de comandos para el desarrollador.
+
Vista 3D
+
Visualization 3D de la página.
+
Eyedropper
+
Selecciona un color de la página.
+
Trabajando con iframes
+
Como seleccionar un iframe en particular.
+
+
+
+ +
+
+
+

Móvil

+ +

Herramientas para desarrollo móvil.

+ +
+
Administrador de aplicaciones
+
El administrador de aplicaciones ha sido reemplazado por WebIDE.
+
WebIDE
+
El reemplazo para el App Manager, disponible desde Firefox 33 en adelante.
+
Simulador de Firefox OS
+
Corre y depura tu aplicación de Firefox OS en el escritorio, sin necesidad de un dispositivo Firefox OS real.
+
Responsive Design View
+
Mira como tu sitio o aplicación se verá en diferentes pantallas sin cambiar el tamaño de la ventana del navegador.
+
Depurando Firefox para Android
+
Conecta las herramientas de desarrollador a Firefox para Android.
+
Depurando Firefox para Android con WebIDE
+
Para Desktop Firefox 36+ / Android Firefox 35+, existe un proceso más sencillo.
+
Valence
+
Conecta las herramientas de desarrollo de Chrome con Android y Safari en iOS
+
+
+ +
+

Rendimiento

+ +

Diagnostica y arregla problemas de rendimiento.

+ +
+
Performance tool
+
Analiza la capacidad de respuesta de tu sitio web, del JavaScript y el rendimiento del diseño.
+
Frame rate graph
+
Revisa la velocidad de frames de tu sitio web.
+
Waterfall
+
Averigua como esta funcionando tu sito web en el navegador.
+
Call Tree
+
Averigua donde está el codigo JavaScript perdiendo el tiempo.
+
+ +
+
Flame Chart
+
Muestra las funciones que están en la cola de  trabajo a lo largo de un perfil.
+
Paint Flashing Tool
+
Resalta las partes de la página que son repintadas en respuesta a eventos.
+
Reflow Event Logging
+
Ver eventos en la consola web de reflujo.
+
Network Performance
+
Muestra cuanto tardan en cargar las partes de tu sitio web.
+
+
+
+ +
+ + + + +
+
+

Depuración del navegador

+ +

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

+ +
+
Browser Console
+
See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.
+
Browser Toolbox
+
Attach the Developer Tools to the browser itself.
+
+
+ +
+

Extending the devtools

+ +

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

+ +
+
Add a new panel to the devtools
+
Write an add-on that adds a new panel to the Toolbox.
+
Remote Debugging Protocol
+
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
+
Source Editor
+
A code editor built into Firefox that can be embedded in your add-on.
+
The Debugger Interface
+
An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.
+
Web Console custom output
+
How to extend and customize the output of the Web Console and the Browser Console.
+
Example devtools add-ons
+
Use these examples to understand how to implement a devtools add-on.
+
+
+
+ +
+

Más recursos

+ +

Esta sección muestra una lista de recursos que no están mantenidos por el equipo de desarrolladores de herramientas de Firefox, pero que son ampliamente usados por los desarrolladores web. Hemos incluido algunos complementos para Firefox en esta lista, pero para un listado completo vea la categoria  "Desarrollo web" en addons.mozilla.org.

+ +
+
+
+
Firebug
+
Una potente y popular herramienta de desarrollo web, que incluye un depurador para JavaScript, visor y editor de CSS y HTML, y un monitor de red.
+
DOM Inspector
+
Inspecciona, busca y edita los DOM de las páginas web o las ventanas XUL.
+
Web Developer
+
Añade un menú y una barra de herramientas al navegador con varias utilidades para el desarrollo web.
+
+
+ +
+
+
Webmaker Tools
+
Un conjunto de utilidades creadas por Mozilla, enfocadas para la gente que empieza con el desarrollo Web.
+
W3C Validators
+
La web del W3C alberga herramientas para comprobar y validar su sitio web, incluyendo su HTML y CSS.
+
JSHint
+
Herramienta para el análisis del código JavaScript.
+
+
+
diff --git a/files/es/tools/monitor_de_red/index.html b/files/es/tools/monitor_de_red/index.html new file mode 100644 index 0000000000..f50f1ee0fc --- /dev/null +++ b/files/es/tools/monitor_de_red/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/3er-panel_modo/index.html b/files/es/tools/page_inspector/3er-panel_modo/index.html new file mode 100644 index 0000000000..7165d90a4d --- /dev/null +++ b/files/es/tools/page_inspector/3er-panel_modo/index.html @@ -0,0 +1,69 @@ +--- +title: El 3er panel del modo inspector +slug: Tools/Page_Inspector/3er-panel_modo +tags: + - 3 paneles + - CSS + - Guía + - Herramientas + - Inspectord +translation_of: Tools/Page_Inspector/3-pane_mode +--- +
{{ToolsSidebar}}
+ +

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

+ +

Feature summary

+ +

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

+ + + +

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

+ +
+

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

+
+ +

Tener las reglas de CCS en su propio panel es muy util ya que no solo te permite revisar el HTML y editar el CSS que esta aplicado a este, si no que tambien puedes ver en tiempo real como afectan tus caracteristicas CSS afectan a los estilos computados. solo necesitas tener la pestaña abierta para ver el efecto.

+ +

A brief walkthrough

+ +

El inspector de 3 paneles esta desactivado por defecto. este se activa con el  toggle que se encuentra el parte superior izquierda de la pestaña.

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Con el modo de 3 paneles activado, podras ver los cambios en vivo realizados a las reglas de CSS en tu página. Por ejemplo, puedes editar las propiedades de una Rejilla CSS y ver inmediatamente los cambios en el Inspector de rejilla.

+ +

{{EmbedYouTube("ELS2OOUvxIw")}}

+ +

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

+ +

en anteriores versiones de Firefox (desde Firefox 59/60), puedes activar el modo de 3 paneles en su version Beta para esto vas a about:config y pasando las siguientes  true:

+ +

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

+ +

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

+ +

en Firefox 61, estas preferencias se renombran como:

+ + + +

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

+ +
+

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

+
diff --git a/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html b/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html new file mode 100644 index 0000000000..e45754096e --- /dev/null +++ b/files/es/tools/page_inspector/how_to/abrir_el_inspector/index.html @@ -0,0 +1,22 @@ +--- +title: Abrir el Inspector +slug: Tools/Page_Inspector/How_to/Abrir_el_Inspector +tags: + - Guía + - Herramientas + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Open_the_Inspector +--- +

Hay dos maneras básicas para abrir el Inspector:

+ + + +

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

+ +

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

diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html new file mode 100644 index 0000000000..992a5b8326 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examinar_y_editar_el_modelo_de_cajasmodel/index.html @@ -0,0 +1,47 @@ +--- +title: Examinar y editar el modelo de cajas +slug: Tools/Page_Inspector/How_to/Examinar_y_editar_el_modelo_de_cajasmodel +tags: + - Guía + - Herramientas + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model +--- +

Visualización del modelo de caja

+ +

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

+ +

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

+ +

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

+ +

{{EmbedYouTube("xA4IxTttNLk")}}

+ +

Si se trata de un elemento en línea que está dividido en varias filas, se destaca cada una de las líneas individuales que componen el elemento:

+ +

+ +

Vista Modelo de Caja

+ +

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

+ + + +

+ +

Si ponemos el cursor sobre un valor en la vista modelo de caja al lado aparece un tooltip que nos indica de qué regla procede el valor:

+ +

+ +

Si desplazamos el cursor sobre una parte del modelo de caja en la vista Modelo de caja, se resalta la parte correspondiente de la página y aparece otro tooltip con información indicando el elemento, su clase y/o ID y sus dimensiones (ancho x alto):

+ +

{{EmbedYouTube("H3ZxRbbyfwI")}}

+ +

Edición del modelo de caja

+ +

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

+ +

{{EmbedYouTube("gHjDjM8GJ9I")}}

diff --git a/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html b/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html new file mode 100644 index 0000000000..2a361a1d90 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examinar_y_editar_html/index.html @@ -0,0 +1,364 @@ +--- +title: Examinar y editar HTML +slug: Tools/Page_Inspector/How_to/Examinar_y_editar_HTML +tags: + - Guía + - Herramientas + - Inspector + - Tools +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_HTML +--- +

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

+ + + +

HTML breadcrumbs (migas de pan)

+ +

En la parte inferior del panel HTML hay una barra de navegación de migas de pan. Muestra la jerarquía completa en el documento para la rama que contiene el elemento seleccionado:

+ +

+ +

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

+ +

La barra breadcrumbs tiene sus propios atajos de teclado.

+ +
+

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

+
+ +

Buscar

+ +

A partir de Firefox 45, el campo de búsqueda del Inspector de páginas busca coincidencias en todo el marcado del documento actual y en cualquier frame.

+ +

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

+ +

A medida que escribes, en la ventana emergente se autocompletarán sugerencias con los atributos de clase o de ID que coincidan con el término de búsqueda actual:

+ +

+ +

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

+ +

Si sólo introduces el término de búsqueda sin seleccionar un valor entre las sugerencias, el término de búsqueda se aplicará al texto completo del documento, incluyendo todos los nombres y valores de atributos y el contenido de texto de los nodos.

+ +

{{EmbedYouTube("AKBhnfp1Opo")}}

+ +

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

+ +

Árbol HTML

+ +

El resto del panel muestra el HTML de la página como un árbol (esta interfaz de usuario también se llama Vista de marcado). Justo a la izquierda de cada nodo hay una flecha: haz clic en la flecha para desplegar el nodo. Si mantienes pulsada la tecla Alt mientras haces clic en la flecha, se desplegará el nodo y todos los nodos situados debajo de él.

+ +

The new Firefox 57 inspector HTML tree.

+ +

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

+ +

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

+ +

A partir de Firefox 53 se muestra una elipsis entre la etiqueta de apertura y cierre de un elemento si el nodo está colapsado y contiene más contenido. Antes de Firefox 53, era imposible determinar si un nodo colapsado tenía hijos. Ahora los hijos se indican en el árbol con este icono:

+ +
+

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

+
+ +

::before y ::after

+ +

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

+ +

{{EmbedYouTube("ecfqTGvzsNc")}}

+ +

Whitespace-only text nodes

+ +
Nuevo en Firefox 52
+ +

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

+ +

Normalmente este espacio en blanco parece no tener efecto ni salida visual, pero de hecho, cuando un navegador analiza HTML genera automáticamente nodos de texto anónimos para elementos que no están contenidos en un nodo. Esto incluye los espacios en blanco que hay después de cualquier tipo de texto.

+ +

Si estos nodos de texto generados automáticamente están inline level, los navegadores les asignarán una anchura y altura distinta de cero. Así puede que encuentres espacios extraños entre los elementos, incluso si no has puesto ningún margen o relleno en ellos.

+ +

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

+ +

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

+ +

+ +

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

+ +

Elemento: menú contextual emergente

+ +

Puedes realizar ciertas tareas comunes en un elemento utilizando su menú contextual emergente. Para activar este menú, haz clic derecho en el elemento. El menú contiene los siguientes elementos - haz clic en los enlaces para encontrar la descripción de cada comando en {{anch("Context menu reference")}}:

+ + + +

* Estas opciones sólo aparecen en determinados contextos, por ejemplo, la opción "Abrir archivo en el editor de estilo" sólo aparece cuando haces clic con el botón contextual sobre el enlace a un archivo CSS.

+ +

Context menu reference

+ +
+

Nota: A partir de Firefox 49 el menú contextual se reorganizó significativamente para hacerlo más compacto. No te preocupes si la estructura de tu menú es ligeramente diferente de la que se muestra arriba: estarán disponibles las mismas opciones

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

Editar el HTML del elemento

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

Copiar el HTML externo para el elemento.

+ +

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

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

Copiar el atributo del elemento.

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

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

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

Nuevo en Firefox 44

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

Nuevo en Firefox 44

+
+ En la vista de árbol, contrae el elemento actual. Esto equivale a hacer clic en la flecha de acceso situada junto al elemento que se ha expandido.
(Paste) Inner HTMLPegar el contenido del portapapeles en el nodo como su HTML interno.
(Paste) Outer HTMLPegar el contenido del portapapeles en el nodo como su HTML externo.
(Paste) BeforePegar el contenido del portapapeles en el documento inmediatamente antes de este nodo
(Paste) AfterPegar el contenido del portapapeles en el documento inmediatamente después de este nodo
(Paste) As First ChildPegar el contenido del portapapeles en el documento como primerdescendiente de este nodo
(Paste) As Last ChildPegar el contenido del portapapeles en el documento como último descendiente de este nodo
Scroll Into View +

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

+ +

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

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

Nuevo en Firefox 44

+
+ +

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

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

Nuevo en Firefox 44

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

Nuevo en Firefox 44

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

Nuevo en Firefox 44

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

Editar HTML

+ +

 

+ +

Puedes editar el HTML - etiquetas, atributos y contenido - directamente en el panel HTML: haz doble clic en el texto que quieras editar, modifícalo y pulsa Enter para ver los cambios reflejados inmediatamente.

+ +

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

+ +

Edit HTML directly in the Inspector panel in Firefox 57

+ +

Aquí puedes añadir cualquier HTML: cambiar la etiqueta del elemento, cambiar elementos existentes o añadir otros nuevos. Una vez que hagas clic fuera del cuadro, los cambios se aplican a la página.

+ +

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

+ +

+ +

Copiar y pegar

+ +

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

+ +

Arrastrar y Soltar (Drag and drop)

+ +

Puedes editar HTML moviendo nodos en el árbol HTML. Simplemente haz clic manteniendo presionado sobre cualquier elemento y arrástralo hacia arriba o hacia abajo en el árbol. Cuando sueltes el botón del ratón, el elemento se insertará en la posición correspondiente:

+ +

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

+ +

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

+ +

Insertar nuevos nodos

+ +
Nuevo en Firefox 48
+ +

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

+ +

+ +

Haz clic en este icono para insertar un <div> vacío en el documento como el último hijo del elemento seleccionado actualmente. A continuación, puedes editar el contenido y el estilo del nuevo nodo tal como lo harías con cualquier otro nodo del documento.

+ +

{{EmbedYouTube("NG5daffvVZM")}}

+ +

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

+ +

Ten en cuenta que este botón está desactivado si el tipo de elemento seleccionado es tal que añadir un último hijo no produciría ningún efecto (por ejemplo, si es un elemento <html> o <iframe>). Sin embargo, está habilitado en lugares donde no es válido insertar <div>, como <style> o <link>. En estos casos, el elemento se añade como texto.

diff --git a/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html b/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html new file mode 100644 index 0000000000..430c2e32dd --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examine_and_edit_css/index.html @@ -0,0 +1,228 @@ +--- +title: Examinar y editar CSS +slug: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +tags: + - Guía + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/How_to/Examine_and_edit_CSS +--- +

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

+ +

Examinar reglas CSS

+ +

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

+ +

+ +

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

+ +

La vista Reglas muestra todos los estilos creados, incluidos los estilos que no se admiten o que no son válidos. Esto puede ayudarte a entender por qué ciertos estilos no se están aplicando:

+ +

+ +

Visualización de Reglas

+ +

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

+ +

+ + + +

Desde Firefox 52, si el elemento tiene una declaración display: grid, entonces aparece a su lado un icono grid así: . Haz clic en ese icono para mostrar la cuadrícula superpuesta en la página, incluidas las líneas de cuadrícula y las pistas. Consulta Examinar grid layouts para obtener más información al respecto.

+ +

Los estilos del agente de usuario se muestran con un fondo diferente, e indican el enlace al nombre de archivo y número de línea contiene el prefijo (agente de usuario):

+ +

+ +

Regla element {}

+ +

La regla element {} que hay al principio de la lista de reglas no es en realidad una regla CSS. Representa las propiedades CSS asignadas al elemento a través de su atributo {{htmlattrxref("style")}}.

+ +

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

+ +

{{EmbedYouTube("bQzOAFvEDco")}}

+ +

Reglas de filtrado

+ +

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

+ +

A medida que escribes:

+ + + +

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

+ +
+

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

+
+ +

{{EmbedYouTube("9w8vDIWqnAE")}}

+ +

Búsqueda estricta

+ +

De forma predeterminada, el cuadro de búsqueda resalta todas las declaraciones que contienen cualquier parte de la cadena. Por ejemplo, la búsqueda "color" resaltará declaraciones que contengan border-bottom-color y background-color así como color.:

+ +

+ +

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

+ +

+ +

Expandir las propiedades shorthand

+ +

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

+ +

Mostrar pseudo-elementos

+ +

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

+ +

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

+ +

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

+ +

+ +

Haciendo clic en el triángulo se muestran:

+ +

+ +

Setting :hover, :active, :focus

+ +

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

+ +

Haz clic en el botón y verás tres casillas de verificación que puedes utilizar para establecer las pseudo-clases {{cssxref(":hover")}}, {{cssxref(":active")}} y {{cssxref(":focus")}} para el elemento seleccionado:

+ +

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

+ +

Si fijas una de estas pseudoclases para un nodo, aparece un punto naranja en la vista HTML junto a todos los nodos a los que se ha aplicado la pseudoclase:

+ +

+ +

Enlazar al archivo CSS

+ +

En la parte superior derecha de cada regla, el nombre del archivo fuente y el número de línea se muestran como enlace: al hacer clic en él, se abre el archivo en el Editor de estilos.

+ +

Puedes copiar la ubicación del archivo fuente: haz clic con el botón derecho del ratón en el enlace y selecciona "Copiar dirección".

+ +

El Inspector entiende los mapas de código fuente de CSS. Esto significa que si estás usando un preprocesador CSS que tiene soporte para mapas de código fuente, y has habilitado Activar mapas de código fuente" en Ajustes avanzados de la Configuración del editor de estilos, entonces el enlace te llevará a la fuente original, no al CSS generado. Lee más sobre el soporte de mapas de código fuente CSS en la Documentación del editor de estilos.

+ +

Declaraciones anuladas

+ +

Si una declaración CSS es anulada por alguna otra regla CSS con mayor peso, entonces la declaración se muestra con una línea a través de ella.

+ +

Las declaraciones anuladas tienen una lupa al lado. Haz clic en la lupa para filtrar la vista de reglas: mostrará sólo las reglas que se aplican al nodo actual intentando establecer la misma propiedad: es decir, la cascada completa para la propiedad dada.

+ +

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

+ +

{{EmbedYouTube("i9mDVjJAGwQ")}}

+ +

Examinar CSS calculado

+ +

Para ver todas las reglas CSS que se calculan para el elemento seleccionado cambia a la Vista calculado.Esta vista organiza el estilo del elemento por propiedades: se enumeran por orden alfabético todas las propiedades CSS que se han aplicado a este elemento para mostrar el resultado o valor calculado de cada una de las propiedadades CSS para el elemento seleccionado :

+ +

+ +

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

+ +

Haciendo clic en la flecha situada junto al nombre de la propiedad (o pulsando Enter o Space mientras está seleccionado) se muestra la regla que establece este valor, un enlace al nombre del archivo fuente y el número de línea:

+ +

+ +

De forma predeterminada, esta vista sólo muestra los valores que la página ha definido explícitamente: para ver todos los valores, haz clic en la casilla "Estilos de navegador". Puedes pulsar Tab para moverte a través de los nombres de archivo/números de línea; y pulsando Enter/Return Enter/Return se abrirá el archivo en ese punto en el Editor de estilos.

+ +

Al escribir en el cuadro de búsqueda se realiza un filtrado activo de la lista, por lo que, por ejemplo, si sólo quieres ver opciones relacionadas con las fuentes, puedes escribir "font" en el cuadro de búsqueda, y sólo aparecerán las propiedades que contengan "font" en el nombre. También puedes buscar por el valor de las propiedades: para encontrar la regla responsable de seleccionar la fuente "Lucida Grande" , escribe "Lucida Grande" en el cuadro de búsqueda.

+ +
+

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

+
+ +

Editar reglas

+ +

Si haces clic en una declaración o en un selector en la vista Reglas, puedes editarla y ver los resultados inmediatamente. También puedes pulsar Tab para desplazarte por las diferentes propiedades y valores existentes, y empezar a editarlos pulsando Enter o Space. Para añadir una nueva declaración a una regla, haz clic en la última línea de la regla (la línea ocupada por la llave de cierre).

+ +

A medida que comiences a escribir un nombre de propiedad, verás una lista de sugerencias autocompletadas. Presiona Tab para aceptar la sugerencia actual o Up y Down para desplazarte por la lista. La opción predeterminada es la propiedad más común que comienza con las letras que has escrito. Por ejemplo, aquí el usuario ha escrito "c" y la opción por defecto es "color":

+ +

+ +

Si al editar una propiedad introduces un valor no válido o escribes un nombre de propiedad desconocido, aparece un icono de alerta amarillo junto a la declaración.

+ +
+

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

+
+ +

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

+ +

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

+ + + +

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

+ +

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

+ +

+ +

Añadir reglas

+ +

Puedes añadir nuevas reglas en la vista reglas. Simplemente haz clic derecho para que se muestre el menú contextual y selecciona "Añadir regla nueva": esto añadirá una regla cuyo selector coincide con el nodo actualmente seleccionado.

+ +

+ +

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

+ +

+ +

Copiar reglas

+ +

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

+ + + +

+ +

Ver también

+ + diff --git a/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html b/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html new file mode 100644 index 0000000000..c312f24c21 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/examine_grid_layouts/index.html @@ -0,0 +1,131 @@ +--- +title: 'Inspector de CSS Grid: examina la rejilla del layout' +slug: Tools/Page_Inspector/How_to/Examine_grid_layouts +translation_of: Tools/Page_Inspector/How_to/Examine_grid_layouts +--- +
{{ToolsSidebar}}
+ +

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

+ +
+

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

+
+ +

Descubriendo CSS grids

+ +

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

+ +

En el panel HTML

+ +

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

+ +

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

+ +

En el panel CSS

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

La vista de rejilla en la seccion disposición

+ +

Cuando grid esta incluido en la pagina, el panel CSS en la seccion disposición incluye una vista de "Rejilla" esta sección incluye algunas opciones para ver las rejillas. Encontraras mas información acontinuación.

+ +
+

Nota: la seccion disposición se encuentra abajo en el panel derecho del inspector de elementos. Con lo anterior y con los siguientes screenshots deberias hacerte una idea de donde encontrarlo.

+
+ +

Opciones de Rejilla

+ +

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

+ +

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

+ +

Encontraras algunas opciones dentro de este:

+ + + +
+

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

+
+ +

Examinemos estas carácteristicas más a detalle.

+ +

Superponer Rejilla

+ +

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

+ +

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

+ +

Cada entrada consiste en (de izquierda a derecha):

+ + + +

Mostrar números de línea

+ +

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

+ +

A CSS grid overlay with grid line numbers displayed

+ +

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

+ +

A CSS grid overlay with grid line numbers not displayed

+ +

Mostrar nombres de áreas

+ +

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

+ +

A CSS grid overlay with named area names displayed

+ +

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

+ +

A CSS grid overlay with named area names not displayed

+ +

Extender líneas infinitamente

+ +

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

+ +

A CSS grid overlay with grid lines not extended infinitely

+ +

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

+ +

A CSS grid overlay with grid lines extended infinitely

+ +

Mini vista de Rejilla

+ +

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

+ +

A mini CSS grid view from the Firefox DevTools

+ +

posicionandote sobre cada una de las diferentes areas de la mini rejilla lograras que su equivalente en la rejilla superpuesta sea iluminada tambien, asi como mostrara tambien un tooltip con informacion como el número de colomna, fila y las dimenciones del area.

+ +

A firefox screenshot showing an area of a mini CSS grid being highlighted in the DevTools, and the corresponding area in the real grid being highlighted on the web page.

+ +

Mira tambien

+ + diff --git a/files/es/tools/page_inspector/how_to/index.html b/files/es/tools/page_inspector/how_to/index.html new file mode 100644 index 0000000000..f35f9aec5c --- /dev/null +++ b/files/es/tools/page_inspector/how_to/index.html @@ -0,0 +1,13 @@ +--- +title: How to +slug: Tools/Page_Inspector/How_to +tags: + - NeedsTranslation + - TopicStub +translation_of: Tools/Page_Inspector/How_to +--- +

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

+ +

{{ ListSubpages () }}

+ +

 

diff --git a/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html new file mode 100644 index 0000000000..f4ab42dabe --- /dev/null +++ b/files/es/tools/page_inspector/how_to/inspeccionar_y_seleccionar_colores/index.html @@ -0,0 +1,26 @@ +--- +title: Inspeccionar y seleccionar colores +slug: Tools/Page_Inspector/How_to/Inspeccionar_y_seleccionar_colores +tags: + - Guía + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/How_to/Inspect_and_select_colors +--- +

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

+ +

+ +

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

+ +

+ +

El selector de color incluye un icono de cuentagotas: al hacer clic en este icono, podrás utilizar el cuentagotas para seleccionar un nuevo color para el elemento:

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

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

+ +

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

+ +

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

diff --git a/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html new file mode 100644 index 0000000000..bd926e4bed --- /dev/null +++ b/files/es/tools/page_inspector/how_to/reposicionando_elementos_en_la_pagina/index.html @@ -0,0 +1,22 @@ +--- +title: Reposicionando elementos en la página +slug: Tools/Page_Inspector/How_to/Reposicionando_elementos_en_la_pagina +translation_of: Tools/Page_Inspector/How_to/Reposition_elements_in_the_page +--- +
Novedades en Firefox 48
+ +

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

+ +

{{EmbedYouTube("Or5HM1FFhvE")}}

+ +

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

+ +

+ +

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

+ +

Example for changing the position of an element within the content

+ +

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

+ +

Si el elemento está posicionado de forma absoluta, se muestran líneas discontinuas que representan el origen de desplazamiento. Para los elementos relativamente posicionados, las líneas discontinuas indican la posición original del nodo. Los desplazamientos están indicados por una línea y una descripción de herramientas para cada lado.

diff --git a/files/es/tools/page_inspector/how_to/select_an_element/index.html b/files/es/tools/page_inspector/how_to/select_an_element/index.html new file mode 100644 index 0000000000..617fb05afd --- /dev/null +++ b/files/es/tools/page_inspector/how_to/select_an_element/index.html @@ -0,0 +1,36 @@ +--- +title: Seleccionar un elemento +slug: Tools/Page_Inspector/How_to/Select_an_element +tags: + - Guía + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/How_to/Select_an_element +--- +

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

+ +

Un elemento destacado es el elemento que se dibuja sobre la página con una representación gráfica del modelo de caja, y un tooltip que contiene su etiqueta y tamaño:

+ +

+ +

Con el menú contextual

+ +

Para abrir el Inspector Selecciona un elemento en la página,y haz clic derecho para que el menú contextual aparezca sobre el elemento de la página. Selecciona "Inspeccionar elemento" y Se abrirá el Inspector inmediatamente.

+ +

{{EmbedYouTube("db83PCnPiNM")}}

+ +

Con el panel HTML

+ +

Si tienes el inspector abierto, al mover el ratón sobre de los elementos listados en el panel HTML, verás que en la página se destacan los elementos correspondientes. Haz clic en un elemento del panel HTML para seleccionarlo:/p> + +

{{EmbedYouTube("EojH_vCMesI")}}

+ +

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

+ +

Con el boton seccionar elemento

+ +

Para seleccionar un elemento en la propia página, activa el "selector de elementos" haciendo clic en su icono (también llamado Selector de nodos o Node picker). Entonces segun muevas el ratón en la página, se destacará el elemento que esté bajo ratón. Haz clic en el elemento para seleccionarlo:

+ +

{{EmbedYouTube("Ss_fJz0zaxA")}}

+ +

A partir de Firefox 52, si pulsas Shift + Click en un elemento seleccionas el elemento permitiendo que el selector de elementos permanezca activo. Así es posible ver las reglas del elemento en el panel CSS y al mismo tiempo no impide que puedas seleccionar otro elemento en la página .

diff --git a/files/es/tools/page_inspector/how_to/work_with_animations/index.html b/files/es/tools/page_inspector/how_to/work_with_animations/index.html new file mode 100644 index 0000000000..2ad2d5afa1 --- /dev/null +++ b/files/es/tools/page_inspector/how_to/work_with_animations/index.html @@ -0,0 +1,112 @@ +--- +title: Trabajar con animaciones +slug: Tools/Page_Inspector/How_to/Work_with_animations +tags: + - Guia(2) + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/How_to/Work_with_animations +--- +

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

+ + + +

Inspector de Animación

+ +
+

Aunque esta herramienta se introdujo en Forefox 41, el interface de usuario se rediseñó en Forefox 43. This article describes the animation inspector as it appears in Firefox 43 and subsequent releases. If you want to see what the animation inspector looks like in Firefox 41 and 42, see this separate page.

+
+ +

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

+ +

Esta vista muestra las transiciones CSS y las animaciones CSS sincronizadas en la linea de tiempo, puede usar el widget dragueable para moverse a cualquier punto en la linea de tiempo y ver la página en ese punto.

+ +

To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different Firefox channel. If you click an icon, the icon enlarges and changes to color, and the name of the channel appears. Click the icon again to reverse the effect. These animations are made by applying transitions to several CSS properties.

+ +

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

+ +

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

+ + + +

{{EmbedYouTube("U2eJYacf5XY")}}

+ +

Now play the animation:

+ +

{{EmbedYouTube("CwXXXEllB3o")}}

+ +

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

+ +

+ +

It shows a synchronized timeline for every CSS property transition involved in the animation. The timeline starts at the start of the first transition, and ends at the end of the last transition, and is labeled with markers every 100 milliseconds (this depends on the time scale of the animations currently displayed). You can see that the example above takes 735 milliseconds to run.

+ +

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

+ + + +

To the left of each bar is a selector for the node that the animation applies to. If you hover over this selector, the node is highlighted in the page. Click the selector to select the node in the inspector.

+ +

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

+ +

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

+ + + +

Animation playback

+ +

At the top of the animation inspector:

+ + + +

Finally, if you click inside the bar at the top of the timeline, you get a scrubber that you can drag left and right to move backwards and forwards through the animation, and pinpoint exactly what's happening when:

+ +

{{EmbedYouTube("1hqNaMsB48g")}}

+ +

Edit @keyframes

+ +

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

+ +

{{EmbedYouTube("mDHtLK88ZW4")}}

+ +

Edit timing functions

+ +

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

+ +

Timing functions defined as cubic Bézier curves get an icon in the Rules view. If you click the icon you get a visual editor for the curve, enabling you to drag P1 and P2, and see the results in the page:

+ +

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

+ +

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

+ +

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

+ +

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

diff --git a/files/es/tools/page_inspector/index.html b/files/es/tools/page_inspector/index.html new file mode 100644 index 0000000000..4ffddc225d --- /dev/null +++ b/files/es/tools/page_inspector/index.html @@ -0,0 +1,348 @@ +--- +title: Inspector de Página +slug: Tools/Page_Inspector +tags: + - CSS + - DOM + - Desarrollo web + - Dispositivos + - HTML + - Herramientas + - Herramientas de desarrollo + - Hojas de estilo + - 'Web Development:Tools' +translation_of: Tools/Page_Inspector +--- +

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

+ +

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

+ +
+

Tour por la UI

+ +

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

+ +
+

How to

+ +

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

+ +
+ +
+ +
+

Referencia

+ +
+ +
+ +
+

Abriendo el Inspector

+ +

Hay varias formas de abrir el Inspector:

+ + + +

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

+ +

Si ha invocado el Inspector, haga clic en "Inspeccionar elemento", entonces ya estará seleccionado el elemento y el Inspector se mostrará y funcionará como lo hace en la "Selección de elementos" abajo.

+ +

De lo contrario, al mover el ratón por la página, el elemento bajo el puntero del ratón se resalta con un borde punteado y una anotación muestra su etiqueta HTML y cualquier atributo de clase o ID. Al mismo tiempo, se muestra la definición de HTML, en el contexto, en el panel de la izquierda del Inspector. Desde Firefox 30, también se muestran las líneas de cuadrícula para el elemento y su modelo de caja:

+ +

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

+ +

Al hacer clic en el elemento lo selecciona: Después de que hayas seleccionado un elemento, el Inspector se mostrará y funcionará como lo hace en la "Selección de elementos" abajo.

+ +

Selección de elementos

+ +

Cuando se selecciona un elemento, su marcado se resalta en el panel HTML a la izquierda del Inspector, y el panel de CSS a la derecha del Inspector muestra su información de estilo:

+ +

+ +

La linea de puntos alrededor del elemento de la página, y la anotación para ello, ya no se muestra una vez que un elemento ha sido seleccionado. Asimismo, el Inspector no está bloqueado en el elemento seleccionado: cuando se mueve el ratón alrededor de la marcación en el panel HTML, la linea punteada se muestra alrededor del elemento correspondiente. Para seleccionar un elemento diferente en la página web, haz clic en el botón "Seleccionar elemento", que aparece en la Caja de herramientas.

+ +

{{EmbedYouTube("zBYEg40ByCM")}}

+ +

Firefox 30 en adelante

+ +

De Firefox 30, el comportamiento de la selección es el mismo que en Firefox 29, pero el inspector también muestra el modelo de caja y  rejilla de líneas para los elementos en la página:

+ +

{{EmbedYouTube("y2LcsxE2pR0")}}

+ +

Firefox 32 en adelante

+ +

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

+ +

+ +

Menú emergente del elemento

+ +

Puedes llevar a cabo ciertas tareas comunes en un nodo específico mediante un menú emergente. Para activar este menú contextual haz clic en el elemento, en el panel HTML:

+ +

El menú ofrece opciones para:

+ + + +

Copiar imagen como URL datos

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

+ +

Edición de HTML

+ +

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

+ +

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

+ +

Panel de HTML

+ +

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

+ +

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

+ +

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

+ +

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

+ +

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

+ +

Barra de herramientas del panel HTML

+ +

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

+ + + +

Panel CSS

+ +

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

+ +

VISTA DE REGLAS

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

 

+ +

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

+ +

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

+ +

Muestra de reglas

+ +

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

+ +

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

+ +

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

+ +

Vínculo al archivo CSS

+ +

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

+ +

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

+ +

+ +

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

+ +

Muestras de color

+ +

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

+ +

+ +

Selector de color

+ +

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

+ +

+ +

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

+ +

{{EmbedYouTube("0Zx1TN21QOo")}}

+ +

 

+ +

Previsualización de la imagen de fondo

+ +

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

+ +

Transformar la visualización

+ +

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

+ +

+ +

Herramienta informativa fuente-familia

+ +
+

Esto es nuevo en Firefox 30.

+
+ +

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

+ +

+ +

Edición de Reglas

+ +

Si haces click en una declaración,puedes modificar esa propiedad o valor, y ves el resultado inmediatamente. Para añadir una nueva declaración a una regla, haces click sobre la última linea de la regla (la linea ocupada por la llave de cierre). Si introduces un valor no válido para una propiedad mientras lo estás editando, o el nombre de una propiedad desconocida, un icono de alerta amarillo aparece bajo  la declaración.

+ +

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

+ +

Consejo: Puedes utilizar las teclas de flecha para aumentar/disminuir reglas numéricas mientras realizas la edición. La flecha hacia arriba cambiará  "1px" a  2px,  y Shift+up/down la aumentará o disminuira en 10. Alt+up/down cambiará los valores en  0.1, y shift+Page up/down  sumará o restará  100 al valor.

+ +

Vista computada

+ +

Esta vista organiza el estilo del elemento por propiedades. En  esta lista se enumeran todas las propiedades CSS que se han aplicado a este elemento en orden alfabétiico: Muestra el valor calculado que cada propiedad CSS tiene para el elemento seleccionado :

+ +

Al hacer click en la flecha junto al nombre de la propiedad ,muestra la regla que establece ese valor , junto a un enlace al nombre del archivo de origen y el número de linea :

+ +

Por defecto, solo muestra los valores que han sido explicitamente establecidos para esa página: Para ver todos los valores haz click en el cuadro de "Estilos del navegador" .

+ +

Escribir en el buscador realiza un filtrado directo de la lista , por lo que, por ejemplo,si lo que deseas es ver los ajustes relacionados con la fuente, puedes escribir "fuente" en el buscador, y unicamente las propiedades con "fuente" en el nombre seran listadas. Tambien puedes buscar por los valores de las propiedades: Para encontrar la regla responsable de establecer la fuente "Lucida Grande", escribe eso en el buscador.

+ +

Vista de fuentes

+ +

Esta muestra todas las fuentes utilizadas por el elemento seleccionado. Tenga en cuenta que muestra el tipo de letra utilizado en su sistema, que puede ser diferente a las especificadas en el css:

+ +

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

+ +

Vista modelo de caja

+ +

Esta muestra una representación gráfica de como el  modelo de caja se aplica a este elemento. A partir de  Firefox 30, mientras el ratón está en vista del modelo de caja, las lineas de cuadrícula y el modelo de caja para el elemento de la página son mostradas:

+ +

Vista detallada del modelo de caja

+ +

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

+ +

+ + + +

A partir de Firefox 30, se ha simplificado:

+ + + +

A partir de Firefox 31, si haces click sobre uno de los números  en la vista modelo de caja, puedes modificar el valor y ver el resultado en la página inmediatamente.

+ +

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

+ +

El elemento seleccionado en ese momento en el  inspector de página , en su caso, puede ser referenciado en  JavaScript en la Cónsola web utilizando la variable $0.

+ +

+ +

Además, a partir de  Firefox 30, si pasas sobre el elemento en la salida de la Cónsola Web ,este es resaltado en la pantalla:

+ +

+ +

 API para desarrolladores

+ +

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

+ +

ventana.inspector

+ +

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

+ + + +

Capacidad de enlazar eventos en:

+ +

  Markup cargado

+ +

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

+ +

Listo

+ +

LLamado cuando se ha cargado el primer markup.

+ +

Seudoclase

+ +

LLamado despues comando de seudoclase.

+ +

Cambio de diseño

+ +

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

+ +

Atajos de teclado

+ +

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

+ +

Atajos globales

+ +

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

+ +

 

+ +

 

+ +

 

diff --git a/files/es/tools/page_inspector/ui_tour/index.html b/files/es/tools/page_inspector/ui_tour/index.html new file mode 100644 index 0000000000..a72918603a --- /dev/null +++ b/files/es/tools/page_inspector/ui_tour/index.html @@ -0,0 +1,98 @@ +--- +title: Tour por la UI +slug: Tools/Page_Inspector/UI_Tour +tags: + - Guía + - Herramientas + - Inspector +translation_of: Tools/Page_Inspector/UI_Tour +--- +

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

+ +

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

+ + + +

The all-new Inspector panel in Firefox 57.

+ +

Esta guía pretende mantenerse tan breve como sea posible, y lo hace enlazando a otras guías más específicas para profundizar en el trabajo con el Inspector.

+ +

Botón seleccionar elemento

+ +

El Inspector ofrece información detallada sobre el elemento actualmente seleccionado. El botón Seleccionar Elemento es una de las maneras para seleccionar el elemento que queremos inspeccionar:

+ +

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

+ +

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

+ +

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

+ +

Panel HTML

+ +

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

+ +

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

+ +

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

+ +

Panel CSS

+ +

La mitad derecha del Inspector la ocupa el panel CSS:

+ +

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

+ +

El panel CSS está dividido en 5 vistas:

+ + + +

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

+ +

Vista reglas

+ +

La vista Reglas muestra la lista de todas las reglas que se aplican al elemento seleccionado ordenadas desde la más específica a la menos específica

+ +

Ver Examinar y editar CSS para más detalles.

+ +

Vista calculado

+ +

La vista Calculada muestra el cálculo completo de CSS para el elemento seleccionado, y una representación visual editable del modelo de caja para el elemento:

+ +

The Computed view within the Inspector.

+ +

Para aprender más sobre la vista modelo de cajas ver Examinar y editar el modelo de caja. Ten en cuenta que antes de Firefox 50, la vista modelo de caja no estaba en la pestaña "Vista calculada", sino que tenía su propia pestaña.

+ +

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

+ +

Vista tipografía

+ +
+

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

+ +

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

+
+ +

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

+ +

The all-new Inspector panel in Firefox 57.

+ +

Ver Vista tipografía para más detalles.

+ +

Vista animaciones

+ +

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

+ +

 

+ +

This is the Animations pane in the Firefox 57 Inspector.

+ +

Ver Trabajar con animaciones para más detalles.

diff --git a/files/es/tools/profiler/index.html b/files/es/tools/profiler/index.html new file mode 100644 index 0000000000..86caf8465c --- /dev/null +++ b/files/es/tools/profiler/index.html @@ -0,0 +1,104 @@ +--- +title: JavaScript Profiler +slug: Tools/Profiler +translation_of: Tools/Performance +--- +
+ 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 new file mode 100644 index 0000000000..3eae277997 --- /dev/null +++ b/files/es/tools/remote_debugging/debugging_over_a_network/index.html @@ -0,0 +1,10 @@ +--- +title: Debugging over a network +slug: Tools/Remote_Debugging/Debugging_over_a_network +translation_of: 'Tools/about:debugging#Connecting_over_the_Network' +--- +
+

{{draft}}

+
+ +

Coming soon...

diff --git a/files/es/tools/remote_debugging/firefox_para_android/index.html b/files/es/tools/remote_debugging/firefox_para_android/index.html new file mode 100644 index 0000000000..497d026a34 --- /dev/null +++ b/files/es/tools/remote_debugging/firefox_para_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/index.html b/files/es/tools/remote_debugging/index.html new file mode 100644 index 0000000000..4164a78241 --- /dev/null +++ b/files/es/tools/remote_debugging/index.html @@ -0,0 +1,147 @@ +--- +title: Depurado Remoto +slug: Tools/Remote_Debugging +translation_of: Tools/Remote_Debugging +--- +

You can use the Firefox developer tools on your desktop to debug code running remotely: in a different process on the same device or on a completely different device. To do this you use Firefox to attach the Toolbox to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:

+ + + +

This guide explains how to get set up to debug code running in Firefox for Android over USB. The other main application for remote debugging is to debug code running in the Firefox OS Simulator, but that's covered separately, in the Firefox OS Simulator documentation.

+ +

+ +

This guide's split into two parts: the first part, "Prerequisites" covers stuff you only need to do once, while the second part, "Connecting", covers stuff you need to do each time you connect the device. 

+ +

Prerequisites

+ +

First, you'll need:

+ + + +

ADB setup

+ +

Next, you'll need to get the desktop and the Android device talking to each other using the adb command-line tool.

+ +

On the Android device

+ + + +

On the desktop

+ + + +

To check it worked, open up a command shell on the desktop and type:

+ +
adb devices
+ +

You should see some output like:

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

(The long hex string will be different.)

+ +

If you do, then adb has found your device and you've successfully set up ADB.

+ +

Enable remote debugging

+ +

Next, you need to enable remote debugging on both the Android device and the desktop.

+ +

Firefox for Android 24 and earlier

+ +

To enable remote debugging on the device, you need to set the devtools.debugger.remote-enabled preference to true.

+ +

Go to about:config in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the devtools.debugger.remote-enabled preference, and press "Toggle".

+ +

+ +

Firefox for Android 25 and later

+ +

On Firefox for Android 25 and later, there's a menu item to enable remote debugging. Open the menu, select "Settings", then "Developer tools" (on some Android devices you may need to select "More" to see the "Settings" option). Check the "Remote debugging" box:

+ +

+ +

The browser will display a notification reminding you to set up port forwarding, which we'll do later on.

+ +

On the desktop

+ +

On the desktop, remote debugging is enabled by a setting in the Toolbox. Open the Toolbox, click the "Settings" button in the toolbar, and check "Enable remote debugging" in the Settings tab:

+ +

Restart the browser, and you'll see a new option in the Web Developer menu labeled "Connect...":

+ +

+ +

Connecting

+ +

Now you can connect the remote debugging tools to the device. First, attach the device to the desktop with a USB cable, if you haven't already.

+ +
+
On the desktop
+ +

Go to a command prompt, and type:

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

(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)

+ +

For Firefox OS, type:

+ +
adb forward tcp:6000 localfilesystem:/data/local/debugger-socket
+ +

You'll need to reissue this command each time you physically attach desktop and device with the USB cable.

+ +

Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:

+ +

Unless you've changed the port numbers, choose 6000 and press the "Connect" button.

+
+ +
+
On the Android device
+ +

Next you'll see a dialog on the Android device asking you to confirm the connection:

+ +

Press "OK". The desktop waits for a few seconds to give you time to acknowledge this dialog: if it times out, just press "Connect" in the desktop dialog again.

+
+ +
+
On the desktop
+ +

Next, the desktop shows you a dialog that looks something like this:

+ +

This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.

+ + + +

Let's choose to attach to the mozilla.org website. The Toolbox will open in its own window, attached to the Firefox for Android tab that's currently hosting mozilla.org:

+ +

+ +

The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.

+
+ +

 

+ +

 

diff --git a/files/es/tools/responsive_design_view/index.html b/files/es/tools/responsive_design_view/index.html new file mode 100644 index 0000000000..2571bc5aa4 --- /dev/null +++ b/files/es/tools/responsive_design_view/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/settings/index.html b/files/es/tools/settings/index.html new file mode 100644 index 0000000000..e502957541 --- /dev/null +++ b/files/es/tools/settings/index.html @@ -0,0 +1,206 @@ +--- +title: Configuración +slug: Tools/Settings +translation_of: Tools/Settings +--- +

Configuraciones

+ +

Al hacer clic en el botón "Configuraciones" le permite acceder a la configuración de la propia caja de herramientas y de las herramientas que alberga:

+ +

+ +

Por defecto Firefox Herramientas de Desarrollo

+ +

Este grupo de casillas de verificación determina qué herramientas están habilitadas en la caja de herramientas. Las nuevas herramientas se incluyen con frecuencia en Firefox, pero no está activado de forma predeterminada.

+ +

Elija DevTools tema

+ +

Esto le permite cambiar entre tema claro u oscuro:

+ +

+ +

+ +

Inspector

+ +
+

Este ajuste está disponible en Firefox 27 en adelante

+
+ +

Unidad de color por defecto: un valor para controlar cómo se representan los colores de la inspección: Hex, HSL(A), RGB(A), y por su nombre.

+ +

Consola Web

+ +

Habilitar registros persistentes: una configuración para controlar si la consola borra la salida cuando se navega a una página nueva..

+ +

Analizador JavaScript

+ +

Mostrar datos de la plataforma Gecko: una opción para controlar si los perfiles deben incluir Gecko símbolos de plataforma.

+ +

Configuraciones avanzadas

+ + + + + + +

Opening Settings

+ +

To see the Developer Tools Settings pane, open any of the Developer Tools, and then:

+ + + +

The Settings pane looks something like this:

+ +

Depicts the Toolbox options

+ +

Categories

+ +

Default Firefox Developer Tools

+ +

This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.

+ +

Available Toolbox Buttons

+ +

This group of checkboxes determines which tools get an icon in the Toolbox's toolbar.

+ +

Note that in Firefox 52 we removed the checkbox to toggle the "Select element" button. The "Select element" button is now always shown.

+ +

Themes

+ +

This enables you to choose one of three different themes.

+ +

There's a light theme, which is the default:

+ +

Light theme for DevTools

+ +

A dark theme (the default on Firefox Developer Edition):

+ +

Dark theme for DevTools

+ +

There's also a Firebug theme that looks like the Firebug extension, letting you feel at home if you're used to Firebug:

+ +

Firebug theme for DevTools

+ +

Common preferences

+ +

Settings that apply to more than one tool. There's just one of these:

+ +
+
Enable persistent logs
+
A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.
+
+ +

Inspector

+ +
+
Show browser styles
+
A setting to control whether styles applied by the browser (user-agent styles) should be displayed in the Inspector's Rules view. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's Computed view.
+
Truncate DOM attributes
+
By default, the Inspector truncates DOM attributes that are more than 120 characters long. Uncheck this box to prevent this behavior. This setting works by toggling the about:config preference "devtools.markup.collapseAttributes". To change the threshold at which attributes are truncated, you can edit the about:config preference "devtools.markup.collapseAttributeLength".
+
Default color unit
+
A setting to control how colors are represented in the inspector: +
    +
  • Hex
    • +
  • HSL(A)
    • +
  • RGB(A)
    • +
  • color name
    • +
  • As authored.
    • +
+
+
Enable layout panel
+
Enable the experimental layout panel. This setting only exists in Firefox Nightly.
+
+ +

Web Console

+ +
+
Enable timestamps
+
Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.
+
Enable new console frontend
+
Switch to the experimental new console. This setting only exists in Firefox Nightly.
+
+ +

Debugger

+ +
+
Enable Source Maps
+
Enable source map support in the debugger.
+
Enable new debugger frontend
+
Enable the new debugger. This setting only exists in Firefox Nightly.
+
+ +

Style Editor

+ +
+
Show original sources
+
When a CSS preprocessor supporting source maps is used, this enables the Style Editor to display the original, preprocessor, sources rather than the generated CSS. Learn more about Style Editor support for CSS source maps. With this setting checked, the Page Inspector Rules view will also provide links to the original sources.
+
Autocomplete CSS
+
Enable the Style Editor to offer autocomplete suggestions.
+
+ +

Screenshot Behavior

+ +
+
Screenshot to clipboard
+
When you click the icon for the Screenshot tool, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.
+
Play camera shutter sound
+
When you click the icon for the Screenshot tool, play a shutter sound. New in Firefox 53.
+
+ +

Editor Preferences

+ +

Preferences for the CodeMirror source editor, which is included in Firefox and used by several developer tools, including Scratchpad and the Style Editor.

+ +
+
Detect indentation
+
Auto-indent new lines based on the current indentation.
+
Autoclose brackets
+
 
+
Indent using spaces
+
 
+
Tab size
+
 
+
Keybindings
+
Choose the default CodeMirror keybindings or keybindings from one of several popular editors: +
    +
  • Vim
    • +
  • Emacs
    • +
  • Sublime Text
    • +
+
+
+ +

Advanced settings

+ +
+
Show Gecko platform data
+
A setting to control whether or not profiles should include Gecko platform symbols.
+
+ +
+
Disable HTTP Cache
+
Disable the browser HTTP cache to simulate first-load performance in all tabs that have the Toolbox open. This setting persists, meaning that if it is set, caching will be disabled whenever you reopen the devtools. Caching is re-enabled when the devtools are closed. Note that service workers are not affected by this option. +
Note that this option was called "Disable Cache" in Firefox versions previous to 49, but it was renamed to make it clearer that this affects the HTTP cache, and not Service Workers/the Cache API.
+
+
Disable JavaScript
+
Reload the current tab with JavaScript disabled.
+
Enable Service Workers over HTTP
+
Enable Service Worker registrations from insecure websites.
+
Enable browser chrome and add-on debugging toolboxes
+
Enable you to use developer tools in the context of the browser itself, and not only web content.
+
Enable remote debugging
+
Enable the developer tools to debug remote Firefox instances.
+
Enable worker debugging
+
Enable a panel within the debugger to debug workers. +

Note: This option got removed from the UI in Firefox 56, because this version ships with a new Debugger UI, but it can still be enabled for the old UI by setting the preference devtools.debugger.workers to true.

+
+
diff --git a/files/es/tools/storage_inspector/cookies/index.html b/files/es/tools/storage_inspector/cookies/index.html new file mode 100644 index 0000000000..a62f7c2dd3 --- /dev/null +++ b/files/es/tools/storage_inspector/cookies/index.html @@ -0,0 +1,51 @@ +--- +title: Cookies +slug: Tools/Storage_Inspector/Cookies +tags: + - Almacenamiento + - Cookies + - Firefox + - Guía + - Herramientas + - Herramientas de desarrollo + - Inspector de almacenamiento +translation_of: Tools/Storage_Inspector/Cookies +--- +
{{ToolsSidebar}}
+ +

Cuando seleccionas un origen dentro del tipo de almacenamiento de Cookies del árbol de almacenamiento, todas las cookies existentes para ese origen aparecerán listadas en una tabla. La tabla de cookies tiene las siguientes columnas:

+ + + +
+

Note: Some of the columns are not shown by default — to change the column display, right-click on the existing table headings and use the resulting context menu to show/hide the columns.

+
+ +

You can edit cookies by double-clicking inside cells in the Table Widget and editing the values they contain, and add new cookies by clicking the "Plus" (+) button and then editing the resulting new row to the value you want.

+ +

Context menu

+ +

The context menu for each cookie includes the following commands:

+ + + +

diff --git a/files/es/tools/storage_inspector/index.html b/files/es/tools/storage_inspector/index.html new file mode 100644 index 0000000000..ae4fc8d026 --- /dev/null +++ b/files/es/tools/storage_inspector/index.html @@ -0,0 +1,124 @@ +--- +title: Storage Inspector +slug: Tools/Storage_Inspector +tags: + - Cookies + - Dev Tools + - Firefox + - Guide + - IndexedDB + - Local Storage + - NeedsTranslation + - Session Storage + - Storage + - Tools + - TopicStub +translation_of: Tools/Storage_Inspector +--- +
{{ToolsSidebar}}
+ +

The Storage Inspector enables you to inspect various types of storage that a web page can use. Currently it can be used to inspect the following storage types:

+ + + +

For the time being, the Storage Inspector only gives you a read-only view of storage. But we're working to let you edit storage contents in future releases.

+ +

Opening the Storage Inspector

+ +

You can open the Storage Inspector by selecting "Storage Inspector" from the Web Developer submenu in the Firefox Menu Panel (or Tools menu if you display the menu bar or are on macOS), or by pressing its Shift + F9 keyboard shortcut.

+ +

The Toolbox will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.

+ +

+ +

Storage Inspector User Interface

+ +

The Storage Inspector UI is split into three main components:

+ + + +

+ +

Storage tree

+ +

The storage tree lists all the storage types that the Storage Inspector can inspect:

+ +

+ +

Under each type, objects are organized by origin. For cookies, the protocol does not differentiate the origin. For Indexed DB or local storage an origin is a combination of protocol + hostname. For example, "http://mozilla.org" and "https://mozilla.org" are two different origins so local storage items cannot be shared between them.

+ +

Under "Cache Storage", objects are organized by origin and then by the name of the cache:

+ +

+ +

IndexedDB objects are organized by origin, then by database name, then by object store name:

+ +

+ +

With the Cookies, Local Storage, and Session Storage types, there's only one level in the hierarchy, so stored items are listed directly under each origin:

+ +

+ +

You can click on each item in the tree to expand or collapse its children. The tree is live, so if a new origin gets added (by adding an iframe, for example), it will be added to each storage type automatically.

+ +

Clicking on a tree item will display detailed information about that item in the Table Widget on the right. For example, clicking on an origin which is a child of the Cookies storage type will show all the cookies belonging to that domain.

+ +

Table Widget

+ +

The table widget displays a list of all the items corresponding to the selected tree item (be it an origin, or database) are listed. Depending on the storage type and tree item, the number of columns in the table might differ.

+ +

All the columns in a Table Widget are resizable. You can hide and show columns by context-clicking on the table header and selecting the columns you want to see:

+ +

+ + + +

There's a search box at the top of the Table Widget:

+ +

+ +

This filters the table to show only items which match the search term. Items match the search term if any of their fields (including fields whose columns you have hidden) contain the search term.

+ +

You can use Ctrl + F (Cmd + F on a Mac) to focus the search box.

+ +

Add and refresh storage

+ +

You'll also have buttons available to add a new storage entry or refresh the view of the currently viewed storage type where applicable (you can't add new entries to IndexedDB or Cache):

+ +

+ + + +

When you select any row in the Storage table widget, the sidebar is shown with details about that row. If a cookie is selected, it will list all the details about that cookie.

+ +

The sidebar can parse the value of the cookie or local storage item or an IndexedDB item and convert it into a meaningful object instead of just a string. For example:

+ + + +

The shown values can also be filtered using the search box at the top of the sidebar.

+ +

Working with the Storage Inspector

+ +

The following articles cover different aspects of using the network monitor:

+ + diff --git a/files/es/tools/tomar_capturas_de_pantalla/index.html b/files/es/tools/tomar_capturas_de_pantalla/index.html new file mode 100644 index 0000000000..d842153d65 --- /dev/null +++ b/files/es/tools/tomar_capturas_de_pantalla/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/tools_toolbox/index.html b/files/es/tools/tools_toolbox/index.html new file mode 100644 index 0000000000..ff2f3c4481 --- /dev/null +++ b/files/es/tools/tools_toolbox/index.html @@ -0,0 +1,105 @@ +--- +title: Caja de herramientas +slug: Tools/Tools_Toolbox +tags: + - Guía + - Herramientas +translation_of: Tools/Tools_Toolbox +--- +

La Caja de herramientas proporciona un único lugar para todas las herramientas de desarrollo que están incorporadas en Firefox.

+ +

Puedes abrirla de varias maneras:

+ + + +

Por defecto, la ventana aparece acoplada en la parte inferior de la ventana de Firefox, pero se puede desprender si así lo deseas. Esto es lo que parece cuando está acoplado:

+ +

+ +

La ventana está dividida en dos partes: una barra de herramientas en la parte superior y un panel principal inferior:

+ +

+ +

Modo de Docking

+ +

Por defecto, la ventana está en la parte inferior de la ventana del navegador, pero puedes fijarla al lateral, o mostrarla en una ventana separada usando los botones de la barra de herramientas.

+ +

A partir de Firefox 41 puedes alternar entre los dos últimos que has utilizado pulsando Ctrl + Shift + D en Windows y Linux, o Cmd + Shift + D en OS X.

+ +

Barra de herramientas

+ +

La barra de herramientas contiene los controles para activar una herramienta en particular, para fijar / flotar la ventana, y para cerrar la ventana:

+ +

+ +

Selector de Elementos

+ +

Empezando por la izquierda, primero hay un botón para activar el selector de elementos (también llamado Selector de nodos o Node picker) que sirve para elegir el elemento de la página que vamos a inspeccionar. Ver Seleccionar un elemento.

+ +

Herramientas alojadas en barra de herramientas

+ +

Después hay una serie de botones con etiquetas que te permiten cambiar entre las diferentes herramientas alojadas en la barra. La matriz puede incluir las siguientes herramientas:

+ + + +

Ten en cuenta que no siempre se enumeran todas las herramientas alojadas aquí: sólo se muestran las herramientas realmente disponibles en este contexto (por ejemplo, no todas las herramientas soportan la depuración remota, por tanto si el objetivo de la depuración no es la instancia de Firefox que puso en marcha la ventana, no se mostrarán todas las herramientas alojadas).

+ +

Herramientas Extra

+ +

A continuación están los botones que pueden ponerse o quitarse desde la configuración de la propia barra. Por defecto se incluyen:

+ + + +

Las siguientes herramientas no están incluídas por defecto, pero puedes incluirlas desde el botón de configuración de la barra de herramientas:

+ + + +

Controles de la barra de herramientas

+ +

Próximos a la esquina derecha los últimos botones son para:

+ + + +

Settings

+ +

Ver la página de configuración de las herramientas de desarrollador.

+ + +

Panel principal

+ +

El contenido de la ventana del panel principal está totalmente controlado por, y es específico de la herramienta alojada actualmente seleccionada.

+ +

Atajos de teclado

+ +

{{ Page ("es/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}

+ +

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

diff --git a/files/es/tools/view_source/index.html b/files/es/tools/view_source/index.html new file mode 100644 index 0000000000..732a6e3fb8 --- /dev/null +++ b/files/es/tools/view_source/index.html @@ -0,0 +1,83 @@ +--- +title: Ver código fuente +slug: Tools/View_source +translation_of: Tools/View_source +--- +

Ver código fuente permite ver el código fuente HTML o XML de la página que estás visitando. Para activar Ver código fuente:

+ + + +

Antes de Firefox 42, se abría una ventana nueva con el código fuente de la página.

+ +

Desde Firefox 42 en adelante, el código fuente se muestra en una pestaña nueva. Si quieres mantener el antiguo comportamiento, dirígete al about:config y cambia la preferencia view_source.tab a false.

+ +

A partir de Firefox 60 en adelante, la preferencia view_source.tab se ha eliminado ({{bug(1418403)}}) y ya no es posible cambiar el modo de comportamiento de Ver código fuente — el código fuentes siempre aparecerá en pestañas nuevas a partir de ahora.

+ +

Características de ver código fuente

+ +

Ver código fuente tiene tres características adicionales, a partir de Firefox 40 se pueden acceder a ellas desde el menú contextual en la pestaña de Ver código fuente:

+ + + +

Cuando el resaltado de sintaxis se encuentra activo, también se destacan los errores de interpretado en rojo. Al pasar el ratón sobre los errores se muestra un texto de ayuda que explica el error.

+ +

Para acceder a Ir a línea usando el teclado, pulsa Control + Option + L en Mac, o Alt + Shift + L en Windows o Linux.

+ +

Enlazar a un número de línea

+ +

Es posible enlazar a un número de línea en particular, añadiendo a la url el ancla #lineNNN el navegador saltará a la línea NNN.

+ +

Por ejemplo view-source:https://www.mozilla.org/#line100

+ +

 

+ +

Ver código fuente seleccionado

+ +

Si seleccionas parte de una página web y haces clic con el botón contextual, verás que aparece un item de menú etiquetado como "Ver código fuente seleccionado", que se comporta como "Ver código fuente", excepto que sólo se muestra el código fuente de la selección.

+ +

Ver código fuente MathML

+ +

Si haces clic con el botón contextual del ratón sobre algún MathML, verás un item del menú contextual con la etiqueta "Ver código fuente": haz clic en él para ver el código fuente MathML.

+ +

Limitaciones de Ver código fuente

+ +

Existen limitaciones en lo que hace Ver el código fuente algo que deberías tener en cuenta.

+ +

Informador de error ≠ validador

+ +

Ver código fuente sólo reporta errores de procesado, no valida errores en el código HTML. Por ejemplo, insertando un elemento {{ HTMLElement("div") }} como hijo de {{ HTMLElement("ul") }} no aparece como error de procesado, pero no es un HTML válido. Por lo tanto, no se marcará este error en Ver código fuente. Si desea comprobar que el HTML es válido, debe utilizar un validador HTML, como el ofrecido por el W3C.

+ +

No se reportan todos los errores de procesado

+ +

A pesar de que todos los errores reportados son errores de análisis de acuerdo con la especificación de HTML, no todos los errores de procesado son reportados por Ver código fuente. Entre los errores que no se informan:

+ + + +

Resaltado de sintaxis XML

+ +

Ver código fuente utiliza el tokenizer de HTML para resaltar la fuente XML. Mientras que el tokenizer implementa el procesamiento de instrucciones cuando se resalta una fuente XML, esta es la única capacidad de XML prevista. Debido a esto, doctypes que tienen un subconjunto interno no se resaltan correctamente, y referencias de entidad a entidades personalizadas tampoco no se resaltan correctamente.

+ +

Este resaltado defectuoso se puede observar si se ve el código fuente de los archivos chrome de Firefox (como los documentos XUL). 

+ +

Sin embargo, esto no debería ser un problema en la práctica cuando se ven los archivos XML típicos.

+ +

Ver también

+ + + +

{{ languages( { "ja": "ja/View_source"} ) }}

diff --git a/files/es/tools/web_console/console_messages/index.html b/files/es/tools/web_console/console_messages/index.html new file mode 100644 index 0000000000..102a69d2ef --- /dev/null +++ b/files/es/tools/web_console/console_messages/index.html @@ -0,0 +1,391 @@ +--- +title: Consola de mensajes +slug: Tools/Web_Console/Console_messages +tags: + - Consola + - Herramientas + - Herramientas de desarrollo +translation_of: Tools/Web_Console/Console_messages +--- +

La mayor parte de la Consola Web está ocupada por el panel de visualización de mensaje:

+ +

+ +

Cada mensaje se muestra como una fila separada

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + +
TiempoLa hora a la que se registró el mensaje. Esto no se muestra por defecto: Usted puede ver el tiempo marcado usando una configuracion en la barra de herramientas
Categoria +

Categoria: Esta indicacion nos revela de que trata el mensaje:

+ +
    +
  • Negro: Solicitud de red
    • +
  • Azul: CSS advertencia/error/registro
    • +
  • Naranja: JavaScript advertencia/error
    • +
  • Rojo: Advertencia de seguridad/error
    • +
  • Verde: Registro de servidor
    • +
  • Gris claro: Consola API mensajes
    • +
  • Gris oscuro: de entrada/salida desde el intérprete de línea de Comando
    • +
+
TipoPara todos los mensajes excepto solicitud de red y entrada interectiva/salida de un icono de un error(X), una advertencia(!) o un mensaje informativo de registro (i).
MensajeEl cuerpo del mensaje.
Número de aparicionesSi una línea que genera una advertencia o error que ha sido ejecutado por mas de una vez, sólo se registra una vez y este contador parece indicar cuántas veces se encontró.
Nombre y número de línea +

Para JavaScript, CSS y los mensajes de consola de la API el mensaje se puede rastrear a una línea de código específica. La consola proporciona un enlace con el nombre del archivo y el número de línea que generó el mensaje.

+ +

A partir de Firefox 36, esto incluye también el número de columna.

+
+ +

De forma predeterminada, la consola se borra cada vez que navega a una nueva página o vuevle a cargar la página actual. Para cambiar este comportamiento, comprueba "Activar registros persistentes" en la  Configuración.

+ +

Categorías de los mensajes

+ +

Red

+ +
+

Los mensajes de registro de la red no se muestran por defecto. Utiliza la función de filtrar para mostrarlos

+
+ +

Las solicitudes de red están conectadas con una línea que tiene este aspecto:

+ +

+ + + + + + + + + + + + + + + + + + + + + + + + +
TimeLa hora a la que se registró el mensaje.
CategoryIndica que el mensaje es una solicitud HTTP.
Method +

El método específico de la petición HTTP.

+ +

Si la petición se hizo como una XMLHttpRequest, hay una nota adicional que indica ésto:

+ +

+
URIEl URI de destino.
SummaryLa versión de HTTP, código de estado, y el tiempo que tarda en completarse.
+ +

Revisando los detalles de la petición de red

+ +

Si hace clic en el mensaje, se le redirige al Panel de Red donde se selecciona la petición y más detalles de la petición y la respuesta se muestran en el panel lateral en el lado derecho.

+ +

Puedes acceder a este detalla en linea, sin dejar la Consola Web. Las entradas de peticiones de red obtienen una flecha a su lado. Clícala par ver:

+ +

Encabezados: encabezados de petición y respuesta.

+ +

Respuesta: el cuerpo de la respuesta

+ +

Cookies: cualquier cookie que fuera enviada junto con la solicitud.

+ +

JS

+ +

Los mensajes de JavaScript tienen el siguiente aspecto:

+ +

+ +

CSS

+ +
+

CSS warnings and reflow messages are not shown by default. Use the filtering feature to show them.

+
+ +

Los mensajes CSS tienen el siguiente aspecto:

+ +

+ +

Eventos de reflujo (Reflow events)

+ +

La consola Web también registra los eventos de reflujo en la categoría de CSS. Un reflujo es el nombre que se da a la operación en la que el navegador calcula la distribución de la totalidad o parte de la página. Los reflujos se producen cuando ocurre un cambio en una página y el navegador cree que afecta al diseño. Muchos eventos pueden desencadenar reflujos,  incluso: cambiar el tamaño de la ventana del navegador, activar las pseudoclases como: hover, o manipular el DOM en JavaScript.

+ +

Debido a que los reflujos pueden ser computacionalmente costosos y afectar directamente a la interfaz de usuario, pueden tener un gran impacto en la capacidad de respuesta de un sitio web o aplicación web. Mediante el registro de eventos de reflujo la consola Web le puede dar una idea de cuando se activan los eventos de reflujo, el tiempo que tardan en ejecutarse y, si los reflujos son reflujos sínronos activados desde JavaScript, cuyo código les dispara..

+ +

Los eventos de reflujo se registran como mensajes "Reflow", a diferencia de los errores CSS o advertencias. De forma predeterminada, están deshabilitados. Puede activarlos haciendo clic en el botón "CSS" en la barra de herramientasr y seleccionar "Reflows".

+ +

Cada mensaje está marcado como "reflujo" y muestra el tiempo necesario para ejecutarse:

+ +

Si el reflujo es un reflujo síncrono accionado desde JavaScript, también muestra un enlace a la línea de código que lo provocó:

+ +

Haga clic en el enlace para abrir el archivo en el Debugger.

+ +

Reflujos síncronos y asíncronos

+ +

Si se hace un cambio que invalida el diseño actual  - por ejemplo, la ventana del navegador cambia de tamaño o desdea JavaScript se modifica el CSS de un elemento - el diseño no se vuelve a calcular inmediatamente. En cambio, el reflujo ocurre de forma asíncrona, la próxima vez que el navegador decide que hay que hacer (en general, la próxima vez que el navegador vuelve a pintar). De esta manera, el navegador puede ahorrar un conjunto de cambios que invalidan y recalcular su efecto a la vez.

+ +

Sin embargo, si algún código JavaScript lee un estilo que se ha modificado, a continuación, el navegador debe realizar una reflujo sincrónico con el fin de calcular el estilo computarizado a devolver. Por ejemplo, un código como éste provocará de inmediato un reflujo síncrono cuando se llame a window.getComputedStyle(thing).height:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +
+
+
Debido a esto, es una buena idea para evitar la interpolación de la escritura y leer llamadas a los estilos de un elemento al manipular el árbol DOM, porque cada vez que vuelve a leer un estilo que ha sido invalidado por una llamada de escritura anterior, se fuerza un reflujo síncrono.
+ +
+
+
+ +

Security

+ +

Security warnings and errors look like this:

+ +

The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.

+ +

The complete list of security messages is as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocked loading mixed active contentThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See Mixed Content for more details.
Blocked loading mixed display contentThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See Mixed Content for more details.
Loading mixed (insecure) active content on a secure pageThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See Mixed Content for more details.
Loading mixed (insecure) display content on a secure pageThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See Mixed Content for more details.
This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.See Content Security Policy for more details.
The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.Pages containing login forms must be served over HTTPS, not HTTP.
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen.Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header.See HTTP Strict Transport Security for more details.
+

This site makes use of a SHA-1 Certificate; it's recommended you use certificates with signature algorithms that use hash functions stronger than SHA-1.

+ 		+

The site uses a certificate whose signature uses the SHA-1 hash algorithm.

+ +

SHA-1 is still still widely used in certificates, but it is starting to show its age. Web sites and Certification Authorities are encouraged to switch to stronger hash algorithms in future. See the Weak Signature Algorithm article for more details.

+ +

Note that the SHA-1 certificate may not be your site's own certificate, but may be the certificate belonging to a Certification Authority that was used to sign your site's certificate.

+
+ +

Bug 863874 is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.

+ +

Logging

+ +
+

Messages logged from Shared Workers, Service Workers, add-ons, and Chrome Workers are not shown by default. Use the filtering feature to show them.

+
+ +

The Logging category includes messages logged using the Console API.
+

+ +

The Web console supports the following Console messages:

+ + + +

The console prints a stack trace for all error messages, like this:

+ +
function foo() {
+  console.error("it explodes");
+}
+
+function bar() {
+  foo();
+}
+
+function doStuff() {
+ bar();
+}
+
+doStuff();
+ +

+ +

Server

+ +
+

New in Firefox 43

+
+ +
+

Server-side log messages are not shown by default. Use the filtering feature to show them.

+
+ +

From Firefox 43, the Web Console can display messages sent from the server. This enables you to use the Web Console to debug server-side code.

+ +

It uses the Chrome Logger protocol. Briefly, the way it works is:

+ + + +

To find a suitable library for your server code, see the Chrome Logger documentation.

+ +

Command line input/output

+ +

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

+ +

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

+ +

Filtro y búsqueda

+ +

Filtrando por categoría

+ +

You can use the toolbar along the top to constrain the results displayed.

+ +

To see only messages of particular categories, click the button labeled with that category ("Net", "CSS", and so on). Clicking the main part of the button toggles that category on or off, while clicking the arrow on the right gives you more fine-grained filter options within that category:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryOptions
NetErrors
+ Warnings
+ XHR
+ Log
CSSErrors
+ Warnings
+ Reflows
JSErrors
+ Warnings
SecurityErrors
+ Warnings
LoggingErrors
+ Warnings
+ Info
+ Log
+ Shared Worker
+ Service Workers
+ Add-on or Chrome Workers
ServerErrors
+ Warnings
+ Info
+ Log
+ +

Filtering by text

+ +

To see only messages that contain a specific string, type in the text box labeled "Filter output".

+ +

Clearing the log

+ +

Finally, you can use this toolbar to clear the log.

diff --git a/files/es/tools/web_console/index.html b/files/es/tools/web_console/index.html new file mode 100644 index 0000000000..d328e31365 --- /dev/null +++ b/files/es/tools/web_console/index.html @@ -0,0 +1,349 @@ +--- +title: Consola Web +slug: Tools/Web_Console +tags: + - Debugging + - Guide + - NeedsTranslation + - Security + - Tools + - TopicStub + - Web Development + - 'Web Development:Tools' + - web console +translation_of: Tools/Web_Console +--- +

La Consola Web:

+ +
    +
  1. Muestra la informacion asociada con los Logs de la pagina Web: cualquier solicitud de red, JavaScript, CSS, y errores de seguridad y advertencias, asi como tambien, advertencias, mensajes informativos explicitamente generados por Javascripten tiempo de ejecucion dentro del contexto de la pagina.
    2. +
  2. te permite interactuar con la pagina ejecutando expresiones Javascript en el contexto de la página.
    3. +
+ +

It's part of the replacement for the old Error Console built into Firefox: but the Error Console showed errors, warnings, and messages from all web pages, from the browser's own code, and from add-ons. This makes it much more difficult to see which messages are relevant to a specific page. The Web Console is always associated with a specific web page and only shows information associated with that page.

+ +

The other half of the replacement for the Error console is the Browser Console, which shows errors, warnings, and messages from the browser's code and from add-ons.

+ +

{{EmbedYouTube("C6Cyrpkb25k")}}

+ +

Abriendo la Consola WEB

+ +

To open the Web Console select "Web Console" from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on Mac OS X), or by pressing its Control-Shift-K (Command-Option-K on the Mac) keyboard shortcut.

+ +

The Toolbox will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the DevTools toolbar):

+ +

+ +

Underneath the DevTools Window's own toolbar, the Web Console's interface is split into three sections:

+ + + +

Message Display Pane

+ +

Most of the Web Console is occupied by the message display pane:

+ +

+ +

The message display pane displays the following sorts of messages:

+ + + +

Each message is displayed as a single row in the pane.

+ +

HTTP requests

+ +

HTTP requests are logged with a line that looks like this:

+ +

+ + + +

By default, the Web Console does not log request and response bodies: to do this, activate the context menu in the Web Console and select "Log Request and Response Bodies".

+ +

If you click on the message, you'll see a window like this, containing more details about the request and response:

+ +

Scrolling down reveals the response headers. By default, the Web Console does not log request and response bodies: to do this, activate the context menu in the Web Console and select "Log Request and Response Bodies", reload the page, and you'll then see them in the "Inspect Network Request" window.

+ +

Only the first megabyte of data is logged for each request or response body, so very large requests and responses will be truncated.

+ +

Warnings and errors

+ +

Warnings and errors are logged with a line looking something like this:

+ +

+ + + +

Security messages

+ +

The security messages shown in the Web Console help developers find potential or actual vulnerabilities in their sites. Additionally, many of these messages help educate developers because they end with a “Learn More” link that takes you to a page with background information and advice for mitigating the issue.

+ +

The complete list of security messages is as follows:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
MessageDetails
Blocked loading mixed active contentThe page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser blocked this active content. See Mixed Content for more details.
Blocked loading mixed display contentThe page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser blocked this display content. See Mixed Content for more details.
Loading mixed (insecure) active content on a secure page +
+

Introduced in Firefox 26

+
+ 		The page contained mixed active content: that is, the main page was served over HTTPS, but asked the browser to load "active content", such as scripts, over HTTP. The browser loaded this active content. See Mixed Content for more details.
Loading mixed (insecure) display content on a secure page +
+

Introduced in Firefox 26

+
+ 		The page contained mixed display content: that is, the main page was served over HTTPS, but asked the browser to load "display content", such as images, over HTTP. The browser loaded this display content. See Mixed Content for more details.
This site specified both an X-Content-Security-Policy/Report-Only header and a Content-Security-Policy/Report-Only header. The X-Content-Security-Policy/Report-Only header(s) will be ignored.See Content Security Policy for more details.
The X-Content-Security-Policy and X-Content-Security-Report-Only headers will be deprecated in the future. Please use the Content-Security-Policy and Content-Security-Report-Only headers with CSP spec compliant syntax instead.See Content Security Policy for more details.
Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. +
+

Introduced in Firefox 26

+
+ 		Pages containing login forms must be served over HTTPS, not HTTP.
Password fields present in a form with an insecure (http://) form action. This is a security risk that allows user login credentials to be stolen. +
+

Introduced in Firefox 26

+
+ 		Forms containing password fields must submit them over HTTPS, not HTTP.
Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen. +
+

Introduced in Firefox 26

+
+ 		iframes containing login forms must be served over HTTPS, not HTTP.
The site specified an invalid Strict-Transport-Security header.See HTTP Strict Transport Security for more details.
+ +

Bug 863874 is the meta-bug for logging relevant security messages to the Web Console. If you have more ideas for useful features like the ones discussed here, or are interested in contributing, check out the metabug and its dependencies.

+ +

Reflow events

+ +
+

Reflow events are only logged from Firefox Desktop 27+ and Firefox OS 1.3+.

+
+ +

The Web Console also logs reflow events. A reflow is the name given to the operation in which the browser calculates the layout of all or part of the page. Reflows occur when a change has happened to a page that the browser thinks affects the layout. Many events can trigger reflows, including: resizing the browser window, activating pseudoclasses like :hover, or manipulating the DOM in JavaScript.

+ +

Because reflows can be computationally expensive and directly affect the user interface, they can have a big impact on the responsiveness of a website or web app. By logging reflow events the Web Console can give you insight into when reflow events are being triggered, how long they take to execute and, if the reflows are synchronous reflows triggered from JavaScript, which code triggered them.

+ +

Reflow events are logged under the CSS category, as "Log" messages, as distinct from CSS errors or warnings. By default, they are disabled. You can enable them by clicking the "CSS" button in the toolbar and selecting "Log".

+ +

Each message is labeled "reflow" and shows the time taken to execute the reflow:

+ +

If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:

+ +

Click the link to open the file in the Debugger.

+ +

Synchronous and asynchronous reflows

+ +

If a change is made that invalidates the current layout - for example, the browser window is resized or some JavaScript modifies an element's CSS - the layout is not recalculated immediately. Instead, the reflow happens asynchronously, the next time the browser decides it needs to be done (generally, the next time the browser repaints). In this way the browser can save up a collection of invalidating changes and recalculate their effect at once.

+ +

However, if some JavaScript code reads a style that has been modified, then the browser must perform a synchronous reflow in order to calculate the computed style to return. For example, code like this will cause an immediate, synchronous, reflow, when it calls window.getComputedStyle(thing).height:

+ +
var thing = document.getElementById("the-thing");
+thing.style.display = "inline-block";
+var thingHeight = window.getComputedStyle(thing).height;
+ +

Because of this, it's a good idea to avoid interleaving write and read calls to an element's styles when manipulating the DOM, because every time you read back a style that has been invalidated by a previous write call, you force a synchronous reflow.

+ +

Input/output messages

+ +

Commands sent to the browser using the Web Console's command line, and the corresponding responses, are logged using lines like this:

+ +

The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.

+ +

Filtering and searching

+ +

You can use the toolbar along the top to constrain the results displayed.

+ +

You can display only specific types of messages or only message containing specific strings.

+ +

Finally, you can use this toolbar to clear the log.

+ +
+
+ +

The command line interpreter

+ +

You can interpret JavaScript expressions in real time using the command line provided by the Web Console.

+ +

+ +

Basic operation

+ +

Entering expressions

+ +

To enter expressions just type into the command line and press "Enter". To enter multiline expressions, use "Shift+Enter" instead of "Enter".

+ +

The expression you type is echoed in the message display window, followed by the result:

+ +

+ +

Accessing variables

+ +

You can access variables defined in the page, both built-in variables like window and variables added by JavaScript like jQuery:

+ +

+ +

Autocomplete

+ +

The command line has autocomplete: enter the first few letters and a popup appears with possible completions:

+ +

Type "Enter" or "Tab" to accept the suggestion, use the up/down arrows to move to a different suggestion, or just keep typing if you don't like any of the suggestions.

+ +
+

New in Firefox 28

+
+ +

Starting from Firefox 28, the console suggests completions from the scope of the currently executing stack frame. This means that if you've hit a breakpoint in a function you get autocomplete for objects local to the function.

+ +

Inspecting objects

+ +

If the result object is an object it appears in square brackets and is underlined, like this: [object Function]. Click on it, and you'll see a new panel appear containing details of the object:

+ +

To dismiss this panel press "Escape".

+ +

Defining variables

+ +

You can define your own variables, and then access them:

+ +

+ +

Command history

+ +

The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.

+ +

Keyboard shortcuts

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ShortcutDescription
↑Moves to the previous entry in the command history, or, if an autocomplete popup is open, highlights the previous suggestion.
↓Moves to the next entry in the command history, or, if an autocomplete popup is open, highlights the next suggestion.
Ctrl-AMoves the cursor to the beginning of the line. (Note: beginning with Firefox 22, this will select all text on Windows)
Ctrl-EMoves the cursor to the end of the line.
ReturnExecutes the code typed on the command line, or, if an autocomplete popup is open, chooses the current suggestion.
Shift-ReturnExpands the height of the text input box for the command line by a line.
EscapeCancels the autocompletion popup.
TabGenerates an autocomplete suggestion and accepts the first one.
+ +

Helper commands

+ +

{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}

+ +

The split console

+ +
+

The split console is new in Firefox 28.

+
+ +

{{EmbedYouTube("G2hyxhPHyXo")}}

+ +

Starting in Firefox 28, you can use the console alongside other tools. While you're in another tool in the Toolbox, just press "Escape" or press the "Toggle split console" button in the Toolbar. The toolbox will now appear split, with the original tool above and the web console underneath.

+ +

As usual, $0 works as a shorthand for the element currently selected in the Inspector:

+ +

When you use the split console with the debugger, the console's scope is the currently executing stack frame. So if you hit a breakpoint in a function, the scope will be the function's scope. You'll get autocomplete for objects defined in the function, and can easily modify them on the fly:

+ +

+ +

See also

+ + + +

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

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 new file mode 100644 index 0000000000..59b0156a49 --- /dev/null +++ b/files/es/tools/web_console/iniciando_la_consola_web/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:

+ + 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" new file mode 100644 index 0000000000..06e5922248 --- /dev/null +++ "b/files/es/tools/web_console/la_l\303\255nea_de_comandos_del_int\303\251rprete/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/webide/index.html b/files/es/tools/webide/index.html new file mode 100644 index 0000000000..e2a8c54122 --- /dev/null +++ b/files/es/tools/webide/index.html @@ -0,0 +1,298 @@ +--- +title: WebIDE +slug: Tools/WebIDE +translation_of: Archive/WebIDE +--- +
+

WebIDE está disponible desde Firefox 34 en adelante.

+ +

También puede habilitarlo en Firefox 33, modificando una opción: Visite about:config, encuentre la opción llamada devtools.webide.enabled y cambie su valor a true.

+
+ +
+

WebIDE es el sustituto de App Manager. Al igual que App Manager, este permite ejecutar y depurar aplicaciones Firefox OS  utilizando el Firefox OS Simulator o un dispositivo Firefox OS real.

+ +

Además, proporciona un entorno de edición para crear y desarrollar aplicaciones para FireFox OS, incluye una vista de árbol jerárquica de todos los archivos de la aplicación con la posibilidad de editarlos y grabar los cambios realizados, y también dos plantillas de aplicación para ayudar a comenzar a desarrollar.

+ +

Por último, WebIDE le permite conectarse a Firefox Developer Tools (Herramientas de Desarrollo Firefox) a otros navegadores, incluyendo Firefox para Android, Chrome para Android, y Safari para iOS. Vea la página de Remote Debugging (Depuración Remota) para instrucciones de como conectar con un navegador específico.

+
+ +

Con WebIDE, primero configura uno o varios runtimes. Un runtime es un entorno en el que podrás ejecutar y depurar la aplicación. Un runtime podría ser un dispositivo Firefox OS conectado al escritorio a través de USB, o podría ser un Simulador de Firefox OS instalado en el propio escritorio.

+ +

Luego, cree una aplicación, o abra una aplicación existente. Si está creando una nueva aplicación, empiece con una plantilla que incluya la estructura y el contenido mínimo que necesita para empezar, o una plantilla más completa que muestre cómo utilizar una API privilegiada. WebIDE muestra los archivos de su aplicación en un árbol, que se pueden editar y guardar usando su editor de código incorporado. Por supuesto, usted no tiene que utilizar el editor integrado: puede desarrollar su aplicación completamente fuera del WebIDE, y sólo utilizarlo para la depuración.

+ +

Finalmente, puede instalar la aplicción en uno de los runtimes y ejecutarla. Usted puede abrir la suite de herramientas para desarrolladores - el Inspector, la Consola, el JavaScript Debugger (Depurador de JavaScript), etc. - para examinar y modificar la aplicación en ejecución.

+ +

Requisitos del Sistema

+ +

Para desarrollar y depurar aplicaciones utilizando la WebIDE, todo lo que necesita es Firefox versión 33 o posterior. Para hacer pruebas en un dispositivo de Firefox OS real, necesita un dispositivo que ejecute Firefox OS 1.2 o posterior, y un cable USB.
+
+ Sólo se puede utilizar el WebIDE si usted está pensando en Firefox OS 1.2 o posterior.

+ +

Ejecutando WebIDE

+ +

Hay tres maneras de abrir WebIDE:

+ + + +

+ +

Así es como luce WebIDE:El menú desplegable de la izquierda con la etiqueta "Abrir aplicación" (Open App) le permite abrir aplicaciones existentes o crear otras nuevas. El menú desplegable de la derecha con la etiqueta "Seleccionar Runtime" (Select Runtime) le permite seleccionar un runtime o configurar uno nuevo.
+
+ Los botones en el medio ejecutan, detienen, y depuran la aplicación: sólo se activan cuando se ha abierto una aplicación y se selecciona un runtime.

+ +

Desde Firefox versión 36, puede cambiar el tamaño de la fuente de todo el WebIDE usando los atajos de teclado estándares (Use Command en vez de Control en OS X):

+ + + +

Configurando runtimes

+ +

En el el menú desplegable "Seleccione Runtime", los rumtimes se agrupan en tres tipos:

+ + + +

La primera vez que hace clic en el menú desplegable, es posible que no vea los runtimes aquí:

+ +

El resto de esta sección describe cómo se pueden agregar algunos runtimes.

+ +

Conectando un dispositivo Firefox OS

+ +

Antes de conectar un dispositivo Firefox OS, algunas configuraciones que debes revisar:

+ + + +
+

Solo Linux :

+ + +
+ +
+

Solo Windows:

+ + +
+ +

Si existe otro dispositivo Android conectado a tu ordenador, desconectelo(s). Ahora conecta el dispositivo al ordenador mediante el USB. Tu podrás ver que tu dispositivo aparecer bajo "USB DEVICES":

+ +

+ +

Si no visualizas el dispositivo, dirigete a la página Solucionador de problemas.

+ +

Añadiendo un Simulador

+ +

Firefox OS Simulator es una versión de altas capas de Firefox OS que simula un dispositivo Firefox OS, pero se ejecuta runs en el escritorio. Corre en una ventana del mismo tamaño de un dispositivo Firefox OS, incluye la interface de usuario Firefox OS, una terminal de construcción built-in apps, y simula varios APIs para dispositivos Firefox OS.

+ +

Esto significa que en muchos casos, no necesitas un dispositivo real para probar y depurar su app.

+ +

El Simulator es grande, tanto que no se desplaza al interior de Firefox sino como un Firefox add-on. Si oprime "Install Simulator" en el menú Runtimes dropdown, irá a la página desde la cual puede instalar Simuladores para varias versiones de Firefox OS.

+ +

Lo puede instalar tantas veces como quieras. Sea paciente: el Simulador es grande y puede llevar unos minutos para descargarlo. Una vez ha instalado algunos Simuladores, puede cerrar la ventana de "Componentes Extra", y los simuladores que ha instalado aparecerán como opciones en el menú desplegable del runtime.

+ +

Para aprender más sobre el Simulador, mire su página de documentación.

+ +

Runtimes personalizados

+ +

Con un runtime personalizado puede usar on nombre de host un un puerto arbitrario para conectarte a un dispositivo remoto.

+ +

Bajo el capó, los dispositivos con el SO Firefox y Android se conectan al escritorio llamado Android Debug Bridge (Puente de Depuración Android), o ADB. Por defecto, el WebIDE usa un complemento llamado ADB Helper: esto simplifica el proceso para usted, puesto que instala el ADB y configura un puerto para que el escritorio de herramientas de Firefox pueda intercambiar mensajes con el dispositivo.

+ +

Esto es conveniente en la mayoría de casos, pero a veces querrá usar el ADB fuera del WebIDE: por ejemplo, podría estar usando el ADB directamente desde línea de comandos. En ese caso, se conectará al dispositivo especificando un host y puerto, usando el  comando adb forward.

+ +

Si, entonces, quiere conectar el WebIDE también, debería desactivar el complemento ADB Helper y conectar el WebIDE usando la opción de Runtime personalizado, introduciendo el host y puerto que has pasqdo a adb forward.

+ +

Tampoco, ADB Helper permite aún conectar a Firefox para Android, así si quiere conectar WebIDE a Firefox para Android, necesitará establecer su propio puerto forwarding y usar la custom runtime. Ver más sobre conexión a Firefox para Android usando ADB.

+ +

Seleccionando un runtime

+ +

Una vez haya configurado un runtime, puede seleccionarlo usando el menú "Select Runtime" (Seleccionar runtime).

+ + + +

Ahora el botón "play" en el centro de la barra de herramientas del WebIDE está habilitado: clícalo para instalar y ejecutar la app en el runtime seleccionado.

+ +

Acciones de los runtime

+ +

Cuando un runtime es seleccionado, el menú desplegable de Runtimes tendrá tres objetos extras:

+ + + +

+ +

+ +

Creando y abriendo apps

+ +

En el menú "Open App" (Abrir App) tiene tres opciones: crear una nueva app, abrir una app empaquetada y abrir una app como anfitrión.

+ +

+ +

Crear una nueva app

+ +

Seleccione "New App..." (Nueva App...) para crear una nueva app. Verá una ventana ofreciéndole dos opciones de plantillas, "App Privilegiada y vacía" y "App Privilegiada".

+ +

+ +

Ambas plantillas son de la colección de plantillas para apps de Mozilla, y le proporcionan la estructura básica que necesita para empezar. La "App Privilegiada" muestra cómo una app puede usar permisos para cargar contenido cross-origin.

+ +

Una vez haya seleccionado una plantilla, deberá poner un nombre a la app y seleccionar un directorio para guardar los archivos, y luego la app será abierta en el editor de proyectos.

+ +

Abrir una app empaquetada

+ +

Seleccione "Open a Packaged App..." (Abrir una app empaquetada) para abrir una app empaquetada. Deberá seleccionar un directorio que contenga el  manifiesto de la app, y esta se abrirá en el editor de proyecto.

+ +

Abrir una app alojada

+ +

Seleccione "Open Hosted App..." (Abrir una app alojada) para abrir una app alojada. Deberá introdducir la URL apuntando al manifiesto de la app, y esta se abrirá en el editor de proyecto

+ +

Editando apps

+ +

El editor de proyecto proporciona un entorno para edición de apps. Hay una visión en arbol a la izquierda con todos los archivos en la app: puedes añadir y borrar archivos usando un menú contextual. Hay un panel de editor a la derecha.

+ +

La página sumario de la app

+ +

Cuando por primera vez abra una app, el panel del editor estará ocupado por la página sumario de la app, mostrada debajo:

+ +

+ +

Puede volver siempre a la página de sumario de la app clicando en la raíz del árbol en la izquierda.

+ +

Validación del manifiesto

+ +

WebIDE automáticamente comprueba el manifiesto por algunos problemas comunes. Si encuentra algún problema, indicará que la app es inválida, y describirá el problema en el sumario de la app.

+ +

+ +

Por supuesto, puede editar el archivo manifest.webapp directamente en el editor de proyecto.

+ +

El editor fuente

+ +

WebIDE usa el editor fuente CodeMirror.

+ +

Atajos de teclado del editor fuente

+ +

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

+ +

Autocompletado de código

+ +

Cuando se edite CSS y JavaScript, el editor proporciona sugerencias de autocompletado. El autocompletado en CSS está siempre habilitado:

+ +

Para mostrar las sugerencias de autocompletado en JavaScript, pulse Control + Espacio:

+ +

+ +

Documentación en línea

+ +

El editor también muestra documentación en línea para JavaScript. Pulsa Shift + Espacio para ver un popup con el contenido de la documentación para el símbolo en el que su cursor está sobrevolando:

+ +

+ +

Clicando el link [docs] en el popup le llevará a la página MDN para el símbolo.

+ +

Guardando archivos

+ +

Para que los cambios en sus archivos tengan efecto necesitas guardarlos. Los archivos no guardaddos tendrán un asterisco junto a su nombre en la vista de árbol, y podrá guardarlos usando el menú o con Control+S (Command+S en Mac OS X).

+ +

Borrando proyectos

+ +

Para borrar una app del WebIDE, vaya a la págnia de sumario de la app y clique "Remove Project" (Borrar Proyecto).

+ +

Ejecutando y depurando apps

+ +

Cuando esté preparado para ejecutar la app, necesitará seleccionar un runtime del menú desplegable "Select Runtime". Si no tiene ningún runtime disponible, compruebe cómo se añaden algunos runtimes en Configurando runtimes.

+ +

El botón "play" en el centro de la bara de herramientas de WebIDE está habilitado ahora: clique para instalar y ejecutar la app en el runtime seleccionado:

+ +

Para depurar la app, da click en el botón de Pausa y las herramientas de la Toolbox de Desarrollador aparecerá, conectada a su app:

+ +

Exactamente, cuáles tools herramientas tiene disponibles depende del runtime, pero tendrá al menos las básicas:  Inspector, Console, JavaScript Debugger, Style Editor, Profiler y Scratchpad. Tal como en una página web, algunos cambios que haga con las herramientas son visibles inmediatamente en la app, pero no son permanentes. Al contrario, algunos cambios que haga en el panel de editor pane pueden ser grabados como respaldo definitivo del disco, pero no son visibles sin reiniciar la app.

+ +

Depurando apps certificadas

+ +

Con el Simulador, si le das click en el menu desplegable de la aplicación mientras el tiempo de ejecucion esta seleccionado , puedes ver y depurar no solo tu aplicacion, sino todas las que esten corriendo en tiempo de ejecucion, incluidas las apps certificadas:

+ +

+ +


+ Pero, para depurar certified apps en un dispositivo real:

+ + + +

Para habilitar la depuración certified app, conéctese al proceso runtime, y entonces, en el menú, vaya a Runtime > Runtime Info. Desde allí, si ve "DevTools restricted privileges: yes", esto significa que las certified apps no pueden ser depuradas. La ruta entonces difiere dependiendo de que depuración usted enfreta:

+ + + +

Ahora (o después del reinicio de B2G desktop client) en WebIDE podrá ver todas las certified apps del dispositivo.

+ +

Monitoriando desempeño

+ +

Si le intereza la ejecución de sus apps, hay maneras de medir su impacto en la ejecución runtime en WebIDE:

+ + + +

Corrección de problemas

+ +

Si tiene algunos problemas trabajando con WebIDE, vea la página Troubleshooting.

+ +

 

+ +

 

diff --git a/files/es/tools/webide/monitor/index.html b/files/es/tools/webide/monitor/index.html new file mode 100644 index 0000000000..c48c5a8d06 --- /dev/null +++ b/files/es/tools/webide/monitor/index.html @@ -0,0 +1,158 @@ +--- +title: Monitor +slug: Tools/WebIDE/Monitor +translation_of: Archive/WebIDE/Monitor +--- +
+

El WebIDE Monitor es una herramienta de datos de propósito general diseñada para ayudar a controlar el desempeño de las aplicaciones y dispositivos Firefox OS.

+
+ +

The WebIDE Monitor

+ +

El Monitor es capaz de mostrar gráficos interactivos en tiempo real para visualizar series de tiempo.

+ +

Gráficos disponibles

+ +

El Monitor viene con algunos gráficos diferentes. Ellos se muestran usualmente una vez que el WebIDE es conectado a un Firefox OS runtime.

+ +

Selección de medida única

+ +

Unique Set Size

+ +

Este gráfico muestra el footprint de la memoria de todos los procesos de Firefox OS a través del tiempo. Si quieres saber el consumo de memoria de una app de Firefox OS, lanzalo y podrás ver la memoria privada usada por el proceso.

+ +

Mostrando tus propios datos

+ +

Es relativamente fácil mostrar cualquier tipo de dato en el Monitor, porque acepta actualizaciones de forma-libre desde muchos orígenes diferentes.

+ +

Desde un dispositivo Firefox OS

+ +

Es posible enviar datos desde un dispositivo conectado enviando notificaciones de observación.

+ +

Nota: Si quieres hacer esto en una  aplicación certificada, por favor sigue las siguientes instrucciones.

+ +

JavaScript

+ +

Services.obs.notifyObservers(null, 'devtools-monitor-update', data);

+ +

Puedes enviar datos desde cualquier código Javascript con privilegios de chrome. Aqui hay un ejemplo completo midiendo el run time de un codigo en Javascript:

+ +

const Services = require('Services');
+
+ var start = Date.now();
+ // code to benchmark
+ var stop = Date.now();
+
+ var data = { graph: 'Performance', myFeature: stop-start, time: stop };
+ Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));

+ +

C++

+ +

observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);

+ +

Puedes enviar datos desde cualquier parte en Gecko. Aqui hay un ejemplo completo midiendo el run time de un codigo:

+ +

#include <time.h>
+ #include "nsPrintfCString.h"
+ #include "nsIObserverService.h"
+
+ clock_t start = clock();
+ // code to benchmark
+ clock_t stop = clock();
+ double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);
+
+ nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();
+ if (observerService) {
+   nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);
+   nsAutoString data = NS_ConvertUTF8toUTF16(str);
+   observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());
+ }

+ +

Desde el computador

+ +

Puedes facilmente enviar datos al Monitor sobre un servidor WebSocket. Esto puede ser útil si estás escribiendo una extensión para Firefox, una herramienta de línea de comandos o un servicio web..

+ +

Por defecto, el Monitor busca un servidor corriendo en el puerto 9000 de tu computador. Puedes cambiar esto actualizando las preferencias en devtools.webide.monitorWebSocketURL.

+ +

Incluso puedes hacer que acepte datos desde tu red local, o desde cualquier parte de Internet.

+ +

Node.js

+ +

TODO

+ +

Python

+ +

TODO

+ +

Formatos soportados

+ +

El Monitor acepta datos en formato de objetos JSON que generalmente lucen similares a esto:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "value": 42,
+   "time": 1234567890
+ }

+ +

Ese formato está destinado a ser muy flexible. Si no existe un gráfico o curva especificada , se creará automáticamente.

+ +

Nombres arbitrarios

+ +

Las entradas no reconocidas serán consideradas como curvas de nombre y valor.

+ +

El paquete de datos más pequeño que puedes enviar es algo como:

+ +

{ "myCurve": 42 }

+ +

Esto añadirá un punto de datos para "myCurve" en un gráfico sin nombre. El tiempo faltante será por defecto cuando el monitor recibe el paquete .

+ +

Para mayor precisión, es probablemente mejor especificar un timestamp para tus datos:

+ +

{
+   "current": 60,
+   "voltage": 500,
+   "time": 1234567890
+ }

+ +

Multiples variables

+ +

En una simple actualización, puedes enviar datos para multiples curvas:

+ +

{
+   "graph": "myGraph",
+   "myCurve1": 50,
+   "myCurve2": 300,
+   "myCurve3": 9000,
+   "time": 1234567890
+ }

+ +

O varios puntos de datos para una sola curva:

+ +

{
+   "graph": "myGraph",
+   "curve": "myCurve",
+   "values": [
+     { "time": 1234567890, "value": 42 },
+     { "time": 1234567981, "value": 51 }
+   ]
+ }

+ +

Múltiples actualizaciones

+ +

Y también puedes enviar multiples actualizaciones de datos en forma de un Array:

+ +

[
+   { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },
+   { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }
+ ]

+ +

Eventos puntuales

+ +

Para marcar eventos especiales en un gráfico con una barra vertical, agrega una clave event a tu actualización:

+ +

{
+   "graph": "myGraph",
+   "event": "myEvent",
+   "time": 1234567980
+ }

diff --git a/files/es/tools/webide/troubleshooting/index.html b/files/es/tools/webide/troubleshooting/index.html new file mode 100644 index 0000000000..73d94afd9a --- /dev/null +++ b/files/es/tools/webide/troubleshooting/index.html @@ -0,0 +1,50 @@ +--- +title: Resolución de problemas con WebIDE +slug: Tools/WebIDE/Troubleshooting +translation_of: Archive/WebIDE/Troubleshooting +--- +

Conectando un dispositivo Firefox OS

+

Si estas intentando conectar un dispositivo Firefox OS a WebIDE y no aparece, aquí hay una serie de cosas que puedes probar

+ +

Desarrollo limitado (incluyendo aplicaciones certificadas, aplicaciones incorporadas, aplicaciones ya instaladas en un dispositivo)

+

Si no puedes desarrollar aplicaciones certificadas, aplicaciones incorporadas, o aplicaciones instaladas en un dispositivo real, entonces puede que estés siendo restringido sobre la política de seguridad de privilegios de WebIDE's . Para mas información, acceda a la sección Desarrolo no restringido de aplicaciones (incluyendo aplicaciones certificadas, procesos principales, etc.).

+

Conectando a otros navegadores (Chrome, Safari)

+

WebIDE hace el uso de Valence (Adaptador Formal de Herramientas de Firefox ) para comunicarse con otros navegadores, como Chrome and Safari. 

+

Si esta teniendo problemas al conectarse a estos otros navegadores, revisa los pasos de configuración y otras anotaciones para estos navegadores en la página Valence.

+

Activando el log

+

También puedes activar el logging para recompilar información de diagnostico:

+
    +
  1. accede a about:config, y añade una nueva preferencia llamada .console.logLevel, con el valor de String all, y establece extensions.adbhelper@mozilla.org.debug a true
    2. +
  2. En el Add-ons Manager, desactiva y reactiva el add-on ADB Helper.
    3. +
  3. Abre la Consola del navegador y veras mensajes de consola con el prefijo adb. Si el mensaje no te dice nada, busca ayuda.
    4. +
+

Obtén ayuda

+

Accede a #devtools cuarto en IRC y nosotros te ayudaremos.

diff --git a/files/es/tools/working_with_iframes/index.html b/files/es/tools/working_with_iframes/index.html new file mode 100644 index 0000000000..5d88245288 --- /dev/null +++ b/files/es/tools/working_with_iframes/index.html @@ -0,0 +1,28 @@ +--- +title: Working with iframes +slug: Tools/Working_with_iframes +tags: + - Debuggear devtools herramientas +translation_of: Tools/Working_with_iframes +--- +
+

Esta funcionalidad es nueva en Firefox 34.

+
+ +

A partir de Firefox 34 en adelante, puedes apuntar las developer tools a un iframe específico dentro de un documento.

+ +

{{EmbedYouTube("Me9hjqd74m8")}}

+ +

Esta funcionalidad está desabilitada por defecto: para habilitarla, abre las developer tool settings y selectiona "Select an iframe as the currently targeted document":

+ +

Podrás ver un nuevo botón en la barra de herramientas:

+ +

Haz click en el y verás un popup con una lista de todos los iframes en el documento, además del documento principal.

+ +

+ +
+

Por el momento necesitarás recargar la página o cerrar y reabrir las developer tools para poder ver el popup. Este problema esta siendo sequido como bug 1062233.

+
+ +

Si selecionas una entrada en la lista, todas las herramientas en la barra de herramientas - el Inspector, la Console, el Debugger demás - apuntaran ahora al iframe selecionado y se comportaran como si el resto de la pagina no existiese.

-- cgit v1.2.3-54-g00ecf