diff options
Diffstat (limited to 'files/es/tools')
50 files changed, 7030 insertions, 0 deletions
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 +--- +<p>{{ fx_minversion_header("11") }}</p> +<p>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.</p> +<p><img alt="" class="internal default" src="/files/3625/3dview.png"></p> +<p>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 <a href="/en/Tools/Page_Inspector/Style_panel" title="Style panel">Style panel</a>. Conversely, you can click on elements in the breadcrumb bar to change which element is selected in the 3D view.</p> +<p>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 <a class="link-https" href="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers" title="https://wiki.mozilla.org/Blocklisting/Blocked_Graphics_Drivers">blocklisted drivers page</a> for more information.</p> +<h2 id="Controlling_the_3D_view">Controlling the 3D view</h2> +<p>There are keyboard shortcuts and mouse controls available for the 3D view.</p> +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Function</td> + <td class="header">Keyboard</td> + <td class="header">Mouse</td> + </tr> + <tr> + <td>Zoom in/out</td> + <td>+ / -</td> + <td>Scroll wheel up/down</td> + </tr> + <tr> + <td>Rotate left/right</td> + <td>a / d</td> + <td>Mouse left/right</td> + </tr> + <tr> + <td>Rotate up/down</td> + <td>w / s</td> + <td>Mouse up/down</td> + </tr> + <tr> + <td>Pan left/right</td> + <td>← / →</td> + <td>Mouse left/right</td> + </tr> + <tr> + <td>Pan up/down</td> + <td>↑ / ↓</td> + <td>Mouse up/down</td> + </tr> + <tr> + <td>Reset zoom level</td> + <td>0</td> + <td>Resets the zoom level to the default</td> + </tr> + <tr> + <td>Focus on selected node</td> + <td>f</td> + <td>Makes sure the currently selected node is visible {{ fx_minversion_inline("13.0") }}</td> + </tr> + <tr> + <td>Reset view</td> + <td>r</td> + <td>Resets zoom, rotation, and panning to the default {{ fx_minversion_inline("12.0") }}</td> + </tr> + <tr> + <td>Hide current node</td> + <td>x</td> + <td>Makes 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") }}</td> + </tr> + </tbody> +</table> +<h2 id="Use_cases_for_the_3D_view">Use cases for the 3D view</h2> +<p>There are a variety of ways the 3D view is useful:</p> +<ul> + <li>If you have broken HTML causing layout problems, looking at the 3D view can help find where you've gone wrong. Often, layout problems are caused by improper nesting of content. This can become much more obvious when looking at the 3D view and seeing where your elements are nested wrong.</li> + <li>If content isn't displaying, you may be able to figure out why; since the 3D view lets you zoom out to see elements that are rendering outside the visible area of the page, you can find stray content this way.</li> + <li>You can get a look at how your page is structured to see if there may be ways to optimize your layout.</li> + <li>And, of course, it looks <strong>awesome</strong>.</li> +</ul> +<h2 id="See_also">See also</h2> +<ul> + <li><a href="/en/Tools/Page_Inspector" title="Page Inspector">Page Inspector</a></li> + <li><a href="/en/Tools/Page_Inspector/HTML_panel" title="HTML panel">HTML panel</a></li> + <li><a href="/en/Tools/Page_Inspector/Style_panel" title="en/Tools/Page_Inspector/Style panel">Style panel</a></li> + <li><a href="/en/Tools" title="Tools">Tools</a></li> + <li><a class="external" href="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/" title="http://hacks.mozilla.org/2011/12/new-developer-tools-in-firefox-11-aurora/">New Developer Tools in Firefox 11 Aurora</a> (blog post)</li> +</ul> +<p>{{ languages( { "ja": "ja/Tools/Page_Inspector/3D_view", "zh-cn": "zh-cn/Tools/Page_Inspector/3D_view"} ) }}</p> 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' +--- +<p>{{ToolsSidebar}}</p> + +<p>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 (<em>restartless add-ons</em>), pestañas y trabajadores.</p> + +<h2 id="Abrir_la_página_aboutdebugging">Abrir la página about:debugging</h2> + +<p>Hay dos formas de abrir el <code>about:debugging</code>:</p> + +<ul> + <li>Escriba about:debugging en la barra de URL de Firefox.</li> + <li>En el menú Herramientas> Desarrollador web, haga clic en Depuración remota.</li> +</ul> + +<p>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:</p> + +<dl> + <dt>Configuración</dt> + <dd> + <p>Use la pestaña Configuración para configurar la conexión a su dispositivo remoto.</p> + </dd> +</dl> + +<dl> + <dt>Este Firefox</dt> + <dd>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.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16650/about_debugging_setup.png" style="border: 1px solid black; display: block; height: 751px; margin: 0px auto; width: 918px;"></p> + +<p>Si su página <code>about:debugging</code> es diferente de la que se muestra aquí, vaya a <code>about:config</code>, busque y establezca la opción <code>devtools.aboutdebugging.new-enabled</code> en true.</p> + +<h2 id="Pestaña_Configuración">Pestaña Configuración</h2> + +<h3 id="Conectarse_a_un_dispositivo_remoto">Conectarse a un dispositivo remoto</h3> + +<p>Firefox admite la depuración a través de USB con dispositivos Android, utilizando la página about:debugging.</p> + +<p>Antes de conectarte:</p> + +<ol> + <li>Habilite la configuración de desarrollador en su dispositivo Android.</li> + <li>Habilite la depuración de USB en la configuración del desarrollador de Android.</li> + <li>Habilite la depuración remota a través de USB en la Configuración avanzada en Firefox en el dispositivo Android.</li> + <li>Conecte el dispositivo Android a su computadora con un cable USB.</li> +</ol> + +<p>Si su dispositivo no aparece en el lado izquierdo de la página <code>about:debugging</code>, intente hacer clic en el botón <strong>Actualizar dispositivos</strong>.</p> + +<p><strong>Si aún no aparece,</strong> puede deberse a que el enlace entre su dispositivo Android y su computadora aún no está autorizado. Primero asegúrese de haber instalado <a href="https://developer.android.com/studio/command-line/adb">Android Debug Bridge</a> 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.</p> + +<div class="blockIndicator note"> +<p><strong>Nota: </strong>No necesita instalar el SDK completo de Android Studio. Solo se necesita adb.</p> +</div> + +<p>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.</p> + +<p><img alt="Screenshot of the debugging page for an Android device" src="https://mdn.mozillademos.org/files/16915/device_information.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>La información en esta página es la misma que la información en la pestaña <strong>Este Firefox</strong>, 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 <strong>Pestañas</strong> con una entrada para cada una de las pestañas abiertas en el dispositivo remoto.</p> + +<p>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:</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/16917/version_warning.png" style="display: block; margin: 0 auto;"></p> + +<p>En Firefox 76 y superior, el mensaje puede tener el siguiente aspecto:<img alt="This version of Firefox cannot debug Firefox for Android (68). We recommend installing Firefox for Android Nightly on your phone for testing. More details" src="https://mdn.mozillademos.org/files/17171/fxand-68-error.png" style="height: 64px; width: 675px;"></p> + +<p>En la imagen de abajo, hay tres pestañas abiertas: <strong>Network or cache Recipe</strong>, <strong>Nightly Home</strong>, y <strong>About Nightly</strong>. 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.</p> + +<p><img alt="Screenshot showing the remote debugging window, with the editable URL bar" src="https://mdn.mozillademos.org/files/17317/remote-debugger-w-URL-buttons.png" style="border: 1px solid black; display: block; height: 471px; margin: 0px auto; width: 1014px;"></p> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Conectando_a_través_de_la_red">Conectando a través de la red</h3> + +<p>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.<img alt="" src="https://mdn.mozillademos.org/files/16942/network_location.png" style="display: block; margin: 0px auto;"></p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16943/connect_network_location.png" style="display: block; margin: 0 auto;"></p> + +<h2 id="Este_Firefox">Este Firefox</h2> + +<p>La pestaña <strong>Este Firefox</strong> combina las características de Extensiones, Pestañas y Trabajadores en una sola pestaña con las siguientes secciones:</p> + +<dl> + <dt>Extensiones Temporales</dt> + <dd>Muestra una lista de las extensiones que ha cargado utilizando el botón Cargar complemento temporal.</dd> + <dt>Extensiones</dt> + <dd>Esta sección enumera información sobre las extensiones que ha instalado en su sistema.</dd> + <dt>Trabajadores de servicios, trabajadores compartidos y otros trabajadores</dt> + <dd>Hay tres secciones en esta página que tratan sobre los trabajadores de servicios, trabajadores compartidos y otros trabajadores.</dd> +</dl> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16654/about_debugging_this_firefox.png" style="border: 1px solid black; display: block; height: 867px; margin: 0px auto; width: 1138px;"></p> + +<p>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.</p> + +<h2 id="Extensiones">Extensiones</h2> + +<h3 id="Cargando_una_extensión_temporal">Cargando una extensión temporal</h3> + +<p>Con el botón <strong>Cargar complemento temporalmente</strong> 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 <strong>Extensiones temporales</strong>.</p> + +<p>No tiene que empaquetar o firmar la extensión antes de cargarlas. La extensión permanecerá instalada hasta que reinicie Firefox.</p> + +<p>Las principales ventajas de este método, en comparación con la instalación de un complemento desde un XPI, son:</p> + +<ul> + <li>No tiene que reconstruir un XPI y reinstalarlo cuando cambia el código del complemento;</li> + <li>Puede cargar un complemento sin firmarlo y sin necesidad de deshabilitar signing.</li> +</ul> + +<p>Una vez que haya cargado una extensión temporal, puede ver información sobre ella y realizar operaciones.</p> + +<p><img alt="Screenshot of the debugging information panel for a temporary extension" src="https://mdn.mozillademos.org/files/16652/temporary_extension.png" style="display: block; height: 322px; margin: 0 auto; width: 680px;"></p> + +<p>Puede usar los siguientes botones:</p> + +<dl> + <dt>Inspeccionar</dt> + <dd>Carga la extensión en el depurador.</dd> + <dt>Reload</dt> + <dd>Vuelve a cargar la extensión temporal. Esto es útil cuando ha realizado cambios en la extensión.</dd> + <dt>Eliminar</dt> + <dd>Retira la extensión temporal.</dd> +</dl> + +<p>Se muestra otra información sobre la extensión:</p> + +<dl> + <dt>Ubicación</dt> + <dd>La ubicación del código fuente de la extensión en su sistema local.</dd> + <dt>ID de extensión</dt> + <dd>La ID temporal asignada a la extensión.</dd> + <dt>UUID interno</dt> + <dd>El UUID interno asignado a la extensión.</dd> + <dt>Manifiesto de la URL</dt> + <dd>Si hace clic en el enlace, el manifiesto de esta extensión se carga en una nueva pestaña.</dd> +</dl> + +<h3 id="Actualización_de_una_extensión_temporal">Actualización de una extensión temporal</h3> + +<p>Si instala una extensión de esta manera, ¿qué sucede cuando actualiza la extensión?</p> + +<ul> + <li>Si cambia los archivos que se cargan a pedido, como las <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">secuencias de comandos</a> de contenido o <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Browser_actions_2">ventanas emergentes</a>, los cambios que realice se recogen automáticamente y los verá la próxima vez que se cargue la secuencia de comandos de contenido o se muestre la ventana emergente.</li> + <li>Para otros cambios, haga clic en el botón <strong>Recargar</strong>. Esto hace lo que dice: + <ul> + <li>Recarga las secuencias de comandos persistentes, como los <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#Background_scripts">background scripts</a></li> + <li>Analiza el archivo manifest.json nuevamente, por lo que los cambios a los permisos, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_scripts">content_scripts</a></code>, <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_action">browser_action</a></code> o cualquier otra llave surtirán efecto</li> + </ul> + </li> +</ul> + +<h3 id="Extensiones_instaladas">Extensiones instaladas</h3> + +<p>Las extensiones instaladas permanentemente se enumeran en la sección Extensiones. Para cada extensión Ud. verá algo como lo siguiente:</p> + +<p><img alt="Screenshot of the debugging information panel for an installed extension" src="https://mdn.mozillademos.org/files/16651/installed_extension.png" style="display: block; margin: 0 auto;"></p> + +<p>El botón <strong>Inspeccionar </strong>y los campos <strong>ID de extensión</strong> y <strong>UUID interno</strong> son los mismos que para las extensiones temporales.</p> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota: </strong>Se recomienda que use la caja de herramientas del navegador, no el depurador de complementos, para depurar extensiones web. Vea <a href="https://wiki.developer.mozilla.org/en-US/Add-ons/WebExtensions/Debugging">Depuración de WebExtensions</a> para todos los detalles.</p> +</div> + +<p>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 <strong>Inspeccionar</strong>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> esta lista puede incluir complementos que vienen preinstalados con Firefox.</p> +</div> + +<p>Si hace clic en Inspeccionar, el depurador de complementos comenzará en una nueva pestaña.</p> + +<p>Consulte la página del <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/Add-on_Debugger">depurador de complementos</a> para ver todas las cosas que puede hacer con esta herramienta.</p> + +<h2 id="Workers">Workers</h2> + +<p>Esta sección muestra todos los Workers que tienes registrados en tu Firefox, clasificados de la siguiente manera:</p> + +<ul> + <li>Todos los <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API">Service workers</a> registrados</li> + <li>Todos los <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/SharedWorker">Shared workers</a> registrados</li> + <li>Otros workers, incluidos <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/ChromeWorker">Chrome Workers</a> y Dedicated Workers</li> +</ul> + +<p>Puede conectar las herramientas de desarrollador a cada trabajador y enviar notificaciones push a los trabajadores del servicio.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16657/about_debugging_workers.png" style="border: 1px solid black; display: block; height: 642px; margin-left: auto; margin-right: auto; width: 567px;"></p> + +<h3 id="Estado_trabajador_de_servicio">Estado trabajador de servicio</h3> + +<p>La lista de trabajadores de servicio muestra el estado del trabajador de servicio en su <a href="https://developers.google.com/web/fundamentals/instant-and-offline/service-worker/lifecycle">ciclo de vida</a>. Son posibles tres estados:</p> + +<ul> + <li>Registro: cubre todos los estados entre el registro inicial del trabajador del servicio y su control de las páginas. Es decir, subsume los estados de instalación, activación y espera.</li> + <li>En ejecución: el trabajador de servicio se está ejecutando actualmente. Está instalado y activado, y actualmente maneja eventos.</li> + <li>Detenido: el trabajador de servicio está instalado y activado, pero ha finalizado después de estar inactivo.</li> +</ul> + +<p><img alt="Screenshot of the debugging panel for a service worker that is in the Running state" src="https://mdn.mozillademos.org/files/16659/sample_service_worker.png" style="display: block; height: 237px; margin-left: auto; margin-right: auto; width: 556px;"></p> + +<p>Esta sección utiliza una demostración simple de ServiceWorker, alojada en <a href="https://serviceworke.rs/push-simple/">https://serviceworke.rs/push-simple/</a>.</p> + +<div class="note"> +<p><strong>Nota: </strong>Desde Firefox 79 en adelante, puede acceder a información similar sobre los Service Workers registrados en un dominio en particular yendo al <a href="/es/docs/">panel de Aplicación</a> de Firefox DevTools.</p> +</div> + +<h3 id="Dar_de_baja_a_los_trabajadores_del_servicio">Dar de baja a los trabajadores del servicio</h3> + +<p>Haga clic en el botón Cancelar registro para cancelar el registro del trabajador de servicio.</p> + +<h3 id="Envío_de_eventos_push_a_service_workers">Envío de eventos push a service workers</h3> + +<p>Para depurar notificaciones push, puede establecer un punto de interrupción en el detector de <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/PushEvent">eventos push</a>. 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.</p> + +<h3 id="Trabajadores_de_servicio_no_compatibles">Trabajadores de servicio no compatibles</h3> + +<div> +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16655/worker_warning.png" style="display: block; height: 44px; margin: 0px auto; width: 551px;"></p> +</div> + +<p>Los trabajadores de servicio pueden no estar disponibles si la preferencia <code>dom.serviceWorkers.enable</code> está configurada como false en <code>about:config</code>.</p> + +<h2 id="Conexión_a_Firefox_para_Android_68">Conexión a Firefox para Android 68</h2> + +<p>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:</p> + +<ul> + <li><span style=""><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox preview</a>, si su escritorio Firefox es la versión principal o Developer Edition</span></li> + <li><a href="https://play.google.com/store/apps/details?id=org.mozilla.fenix">Firefox para Android Nightly</a></li> +</ul> + +<p><span style="">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 <a href="https://support.mozilla.org/en-US/kb/switch-to-firefox-extended-support-release-esr">versión de soporte extendido (ESR)</a> de Firefox para escritorio, que también se basa en la versión 68.</span></p> + +<p>Tenga en cuenta queen <code>about:debugging</code> la depuración no está habilitada de forma predeterminada en Firefox ESR. Para habilitarlo, abra el <a href="https://support.mozilla.org/en-US/kb/about-config-editor-firefox">Editor de configuración</a> (<code>about:config</code>) y establezca <code>devtools.aboutdebugging.new-enabled</code> en true.</p> + +<p>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 <a href="https://support.mozilla.org/en-US/kb/dedicated-profiles-firefox-installation#w_what-happens-to-my-profile-if-i-downgrade-to-a-previous-version-of-firefox">¿Qué sucede con mi perfil si cambio a una versión anterior de Firefox?</a></p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p>Esta página muestra todos los accesos directos utilizados para las herramientas para desarrolladores de Firefox.</p> + +<p>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.</p> + +<p>Debido a que los accesos directos dependen de la ubicación, no están documentados en esta página.</p> + +<h2 id="Herramientas_de_apertura_y_cierre"><span class="tlid-translation translation" lang="es"><span title="">Herramientas de apertura y cierre</span></span></h2> + +<p><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan en la ventana principal del navegador para abrir la herramienta especificada.</span> <span title="">Los mismos accesos directos funcionarán para cerrar las herramientas alojadas en la Caja de herramientas si la herramienta está activa.</span> <span title="">Para herramientas que se abren en una nueva ventana, como la consola del navegador, debe cerrar la ventana para cerrar la herramienta.</span></span></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Abre la caja de herramientas (con la herramienta más reciente activada)</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Trae la caja de herramientas a primer plano (solo si está en una ventana separada y no en primer plano)</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Cierra la caja de herramientas (si está en una ventana separada y en primer plano)</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> o <kbd>F12</kbd></td> + </tr> + <tr> + <th scope="row">Abre la consola web <a href="#opening-closing-web-console-note"><strong><sup>1</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Abre el inspector de elementos</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Abre el depurador <strong><sup><a href="#acceso_directo_depurador">2</a></sup></strong></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Abre el editor de estilos</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Abre el perfilador</th> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F5</kbd></td> + </tr> + <tr> + <th scope="row">Abre el monitor de red <a href="#opening-closing-network-monitor-note"><strong><sup>3</sup></strong></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Despliega las herramientas de desarrollador</th> + <td><kbd>Shift</kbd> + <kbd>F2</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F2</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>Shift</kbd> + <kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row">Despliega la vista de diseño adaptable</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>M</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>M</kbd></td> + </tr> + <tr> + <th scope="row">Abre la consola del navegador <a href="#opening-closing-browser-console-note"><sup>4</sup></a></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Abre la caja de herramientas del navegador</th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Abre el bloc de notas</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">Abre el WebIDE</th> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Abre el inspector de almacenamiento <a href="#disabled-tools-shortcut"><sup>5</sup></a></th> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + </tr> + <tr> + <th scope="row">Abre el depurador<strong><sup><a href="#acceso_directo_depurador"> 2</a></sup></strong></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd></td> + </tr> + </tbody> +</table> + +<p><a name="opening-closing-web-console-note">1. </a><span class="tlid-translation translation" lang="es"><span title="">A diferencia de otras herramientas alojadas en la caja de herramientas, este acceso directo tampoco cierra la Consola Web.</span> <span title="">En cambio, se centra en la línea de comandos de la consola web.</span> <span title="">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).</span></span><a name="opening-closing-web-console-note"></a></p> + +<p><a id="acceso_directo_depurador" name="acceso_directo_depurador">2. <span class="tlid-translation translation" lang="es"><span title="">A partir de Firefox 66, este acceso directo ya no estará asociado con el depurador</span></span>. A partir de Firefox 71, la letra de este acceso directo pasará a ser la Z.</a></p> + +<p><a name="opening-closing-network-monitor-note">3. Antes de Firefox 55, el atajo de teclaro era </a><a name="opening-closing-network-monitor-note"><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Q</kbd> (<kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>Q</kbd> en Mac).</a></p> + +<p><a id="opening-closing-browser-console-note" name="opening-closing-browser-console-note">4. </a><span class="tlid-translation translation" lang="es"><span title="">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.</span> <span title="">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.</span></span><a name="opening-closing-browser-console-note">.</a></p> + +<p><a href="/en-US/docs/Tools_Toolbox#Settings" name="disabled-tools-shortcut">5. </a><span class="tlid-translation translation" lang="es"><span title="">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.</span></span></p> + +<h2 id="Caja_de_Herramientas">Caja de Herramientas</h2> + +<div id="toolbox-shortcuts"> +<p><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan siempre que la caja de herramientas esté abierta, sin importar qué herramienta esté activa.</span></span></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Recorre las herramientas de izquierda a derecha</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>]</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>]</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Recorre las herramientas de derecha a izquierda</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>[</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>[</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alterna entre la herramienta activa y la configuración.</span></span></th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alterna caja de herramientas entre los 2 últimos modos de acoplamiento</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alterna consola dividida (excepto si la consola es la herramienta seleccionada actualmente)</span></span></th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="all-toolbox-tools"> +<div class="text-wrap tlid-copy-target"> +<div class="result-shield-container tlid-copy-target"><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan en todas las herramientas alojadas en la caja de herramientas.</span></span></div> + +<div class="result-shield-container tlid-copy-target"></div> +</div> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Incrementa el tamaño de la fuente</th> + <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td> + <td><kbd>Cmd</kbd> + <kbd> + </kbd></td> + <td><kbd>Ctrl</kbd> + <kbd> + </kbd></td> + </tr> + <tr> + <th scope="row">Decrementa el tamaño de la fuente</th> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>-</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>-</kbd></td> + </tr> + <tr> + <th scope="row">Restaura el tamaño por defecto de la fuente</th> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>0</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>0</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Editor_de_código_fuente">Editor de código fuente</h2> + +<div id="source-editor"> +<p><span class="tlid-translation translation" lang="es"><span title="">Esta tabla enumera los accesos directos predeterminados para el editor de código fuente.</span></span></p> + +<p><span class="tlid-translation translation" lang="es"><span title="">En la sección <a href="/en-US/docs/Tools/Settings#Editor_Preferences">Preferencias del editor</a> 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.</span></span></p> + +<p><span class="tlid-translation translation" lang="es"><span title="">Para seleccionarlos, visite </span></span><code>about:config</code><span class="tlid-translation translation" lang="es"><span title="">, seleccione la configuración </span></span><code>devtools.editor.keymap</code><span class="tlid-translation translation" lang="es"><span title=""> y asigne "vim" o "emacs", o "sublime" a esa configuración.</span> <span title="">Si hace esto, los enlaces seleccionados se usarán para todas las herramientas de desarrollador que usan el editor de origen.</span> <span title="">Debe volver a abrir el editor para que el cambio surta efecto.</span></span></p> + +<p><span class="tlid-translation translation" lang="es"><span title="">Desde Firefox 33 en adelante, la preferencia de vinculación de teclas se expone en la sección <a href="/en-US/docs/Tools/Settings#Editor_Preferences">Preferencias del editor</a> de la configuración de las herramientas del desarrollador, y puede configurarla allí en lugar de en </span></span><code>about:config</code><span class="tlid-translation translation" lang="es"><span title="">.</span></span></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Ir a la linea</th> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>J</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>J</kbd></td> + </tr> + <tr> + <th scope="row">Buscar en la página</th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Volver a buscar en la página</th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + </tr> + <tr> + <th scope="row">Seleccionar todo</th> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row">Cortar</th> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>X</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>X</kbd></td> + </tr> + <tr> + <th scope="row">Copiar</th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row">Pegar</th> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row">Desacer</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Rehacer</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row">Identar</th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row">Quitar identado o sangría</th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Mover línea(s) hacia arriba</span></span></th> + <td><kbd>Alt</kbd> + <kbd>Up</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Up</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Up</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Mover línea (s) hacia abajo</span></span></th> + <td><kbd>Alt</kbd> + <kbd>Down</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Down</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Down</kbd></td> + </tr> + <tr> + <th scope="row">Comentar/Decomentar linea(s)</th> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>/</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>/</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Inspector_de_páginas">Inspector de páginas</h2> + +<div id="page-inspector"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Abre el inspector</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>C</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Selector_de_nodos"><span class="tlid-translation translation" lang="es"><span title="">Selector de nodos</span></span></h3> + +<p><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan mientras el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element#With_the_node_picker">selector de nodos</a> está activo.</span></span></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Seleccione el elemento debajo del mouse y cancela el modo selector</span></span></th> + <td><kbd>Click</kbd></td> + <td><kbd>Click</kbd></td> + <td><kbd>Click</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Seleccione el elemento debajo del mouse y permanece en modo selector</span></span></th> + <td><kbd>Shift</kbd>+<kbd>Click</kbd></td> + <td><kbd>Shift</kbd>+<kbd>Click</kbd></td> + <td><kbd>Shift</kbd>+<kbd>Click</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Panel_HTML"><span class="tlid-translation translation" lang="es"><span title="">Panel HTML</span></span></h3> + +<p><span class="tlid-translation translation" lang="es"><span title="">Estos accesos directos funcionan mientras se esté en el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">panel HTML del Inspector</a>.</span></span></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Elimina el nodo seleccionado</th> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + <td><kbd>Delete</kbd></td> + </tr> + <tr> + <th scope="row">Deshace el borrado de un nodo</th> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Z</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Z</kbd></td> + </tr> + <tr> + <th scope="row">Rehace el borrado de un nodo</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Cmd</kbd> + <kbd>Y</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Z</kbd> / <kbd>Ctrl</kbd> + <kbd>Y</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al siguiente nodo (solo nodos expandidos)</span></span></th> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row">Moverse al nodo anterior</th> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row">Moverse al primer nodo del arbol</th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row">Moverse al últiimo nodo del arbol</th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Expandir el nodo seleccionado actualmente</span></span></th> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Contraer el nodo seleccionado actualmente</span></span></th> + <td><kbd>Left arrow</kbd></td> + <td><kbd>Left arrow</kbd></td> + <td><kbd>Left arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">(Cuando se selecciona un nodo) moverse dentro del nodo para que pueda comenzar a recorrer los atributos.</span></span></th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Avanza por los atributos de un nodo</span></span></th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Retrocede a través de los atributos de un nodo</span></span></th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">(Cuando se selecciona un atributo) comienza a editar el atributo</span></span></th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Oculta / muestra el nodo seleccionado</span></span></th> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + <td><kbd>H</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Se centra en el cuadro de búsqueda en el panel HTML</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Editar como HTML</span></span></th> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + <td><kbd>F2</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Deja de editar como HTML</span></span></th> + <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> +<kbd>Enter</kbd></td> + <td><kbd>F2</kbd> / <kbd>Cmd</kbd> + <kbd>Return</kbd></td> + <td><kbd>F2</kbd> / <kbd>Ctrl</kbd> + <kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Copia el HTML externo del nodo seleccionado</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>C</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>C</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazar el nodo seleccionado a la vista</span></span></th> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + <td><kbd>S</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra la siguiente coincidencia en el marcado, cuando la búsqueda está activa</span></span></th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra la coincidencia anterior en el marcado, cuando la búsqueda está activa</span></span></th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Barra_de_rutas_de_exploración_o_migas_de_pan">Barra de rutas de exploración o migas de pan</h3> + +<p><span class="tlid-translation translation" lang="es"><span title="">Estos atajos funcionan cuando la <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#HTML_breadcrumbs">barra de rutas de exploración</a> está enfocada.</span></span></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al elemento anterior en la barra</span></span></th> + <td><kbd>Left arrow</kbd></td> + <td><kbd>Left arrow</kbd></td> + <td><kbd>Left arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al siguiente elemento en la barra</span></span></th> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + <td><kbd>Right arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Enfoca el </span></span> <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a></th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Enfoca el</span></span> <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a></th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Panel_CSS">Panel CSS</h3> + +<p><span class="tlid-translation translation" lang="es"><span title="">Estos atajos funcionan cuando estás en el</span></span> <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS" title="/en-US/docs/Tools/Page_Inspector#CSS_pane">Inspector del panel CSS</a>.</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Se centra en el cuadro de búsqueda del panel CSS</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Borrar el contenido del cuadro de búsqueda (solo cuando el cuadro de búsqueda está enfocado y se ha ingresado contenido)</span></span></th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Avanza a través de propiedades y valores del panel</span></span></th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Retroceda a través de propiedades y valores del panel</span></span></th> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">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)</span></span></th> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + <td><kbd>Return</kbd> or <kbd>Space</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">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)</span></span></th> + <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td> + <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td> + <td><kbd>Up arrow</kbd> , <kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Elige la sugerencia actual de autocompletar (sólo vista de reglas, cuando se edita una propiedad o valor)</span></span></th> + <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td> + <td><kbd>Return</kbd> or <kbd>Tab</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Incrementar el valor seleccionado en 1</span></span></th> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reducir el valor seleccionado en 1</span></span></th> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Incrementar el valor seleccionado en 100</span></span></th> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Up</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Decrementar el valor seleccionado en 100</span></span></th> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Page Down</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Incrementar el valor seleccionado en 10</span></span></th> + <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reducir el valor seleccionado en 10</span></span></th> + <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Incrementar el valor seleccionado en 0.1</span></span></th> + <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd> (<kbd>Ctrl</kbd> + <kbd>Up arrow</kbd> from Firefox 60 onwards.)</td> + <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Up arrow</kbd> (<kbd>Ctrl</kbd> + <kbd>Up arrow</kbd> from Firefox 60 onwards.)</td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reducir el valor seleccionado en 0.1</span></span></th> + <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd> (<kbd>Ctrl</kbd> + <kbd>Down arrow</kbd> from Firefox 60 onwards).</td> + <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd></td> + <td><kbd>Alt</kbd> + <kbd>Down arrow</kbd> (<kbd>Ctrl</kbd> + <kbd>Down arrow</kbd> from Firefox 60 onwards).</td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Mostrar / ocultar más información sobre la propiedad actual (sólo vista calculada, cuando se selecciona una propiedad)</span></span></th> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + <td><kbd>Return</kbd> or <kbd>Space</kbd></td> + <td><kbd>Enter</kbd> or <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Abrir la página de referencia de MDN sobre la propiedad actual (solo vista calculada, cuando se selecciona una propiedad)</span></span></th> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + <td><kbd>F1</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">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).</span></span></th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Depurador">Depurador</h2> + +<div id="debugger"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Cerrar archivo</th> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>W</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar texto en el archivo actual</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar texto en todos los archivos</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra el siguiente en el archivo actual</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>G</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>G</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar cadenas por nombre</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reanudar la ejecución en un punto de interrupción</span></span></th> + <td><kbd>F8</kbd></td> + <td><kbd>F8</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Siguiente</th> + <td><kbd>F10</kbd></td> + <td><kbd>F10</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F10</kbd></td> + </tr> + <tr> + <th scope="row">Anterior</th> + <td><kbd>F11</kbd></td> + <td><kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Salir</span></span></th> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">Alternar punto de interrupción en la línea seleccionada actualmente</th> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row">Alternar punto de interrupción condicional en la línea seleccionada actualmente</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + </tr> + </tbody> +</table> + +<p><a name="mac-function-key-note">1. </a><span class="tlid-translation translation" lang="es"><span title="">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.</span> <span title="">Consulte esta <a href="http://support.apple.com/kb/HT3399">guía para usar estas teclas como teclas de función estándar</a>.</span> <span title="">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 </span></span><kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd><span class="tlid-translation translation" lang="es"><span title="">)</span></span><a name="mac-function-key-note"></a>.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> <span class="tlid-translation translation" lang="es"><span title="">Antes de Firefox 66, la combinación </span></span> <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd> <span class="tlid-translation translation" lang="es"><span title=""> en Windows y Linux o </span></span><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd><span class="tlid-translation translation" lang="es"><span title=""> en macOS abriría / cerraría el depurador.</span> <span title="">Desde Firefox 66 y versiones posteriores, este ya no es el caso</span></span>.</p> +</div> +</div> + +<h2 id="Depurador_Antes_de_Firefox_52">Depurador (Antes de Firefox 52)</h2> + +<div id="old-debugger"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Command</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Abrir el depurador</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar una cadena en el archivo actual</span></span> usando el <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra el siguiente en el archivo actual</span></span></th> + <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td> + <td><kbd>Return</kbd> / <kbd>Up arrow</kbd></td> + <td><kbd>Enter</kbd> / <kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Encuentra el anterior en el archivo actual</span></span></th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd> / <kbd>Down arrow</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd> / <kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar en todas las fuentes usando el </span></span><a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar cadenas por nombre</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd> / <kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar definiciones de funciones</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>D</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>D</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Filtrar variables cuando la ejecución está en pausa</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>V</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Alt</kbd> + <kbd>V</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Reanudar la ejecución en un punto de interrupción</span></span></th> + <td><kbd>F8</kbd></td> + <td><kbd>F8</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F8</kbd></td> + </tr> + <tr> + <th scope="row">Siguiente</th> + <td><kbd>F10</kbd></td> + <td><kbd>F10</kbd> <a href="#mac-function-key-note" title="#mac-function-key-note"><sup>1</sup></a></td> + <td><kbd>F10</kbd></td> + </tr> + <tr> + <th scope="row">Anterior</th> + <td><kbd>F11</kbd></td> + <td><kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row">Salir</th> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd> <sup><a href="#mac-function-key-note" title="#mac-function-key-note">1</a></sup></td> + <td><kbd>Shift</kbd> + <kbd>F11</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alternar punto de interrupción en la línea seleccionada </span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Alternar punto de interrupción condicional en la línea seleccionada</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>B</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Agregar texto seleccionado a las expresiones de Watch</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Ir a la linea usando el <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row">Buscar usando el <a href="/en-US/docs/Tools/Debugger/How_to/Search_and_filter" title="/en-US/docs/Tools/Debugger/How_to/Search_and_filter">script filter</a></th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">En el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">panel de código fuente</a>, salta a la definición de la función</th> + <td><kbd>Ctrl</kbd> + click</td> + <td><kbd>Cmd</kbd> + click</td> + <td><kbd>Ctrl</kbd> + click</td> + </tr> + </tbody> +</table> + +<p><a name="mac-function-key-note">1. </a><span class="tlid-translation translation" lang="es"><span title="">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.</span> <span title="">Consulte esta <a href="http://support.apple.com/kb/HT3399">guía para usar estas teclas como teclas de función estándar</a>.</span> <span title="">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 </span></span><kbd>Shift</kbd> + <kbd>Function</kbd> + <kbd>F5</kbd><span class="tlid-translation translation" lang="es"><span title="">)</span></span><a name="mac-function-key-note"></a></p> +</div> + +<h2 id="Consola_web">Consola web</h2> + +<div id="web-console"> +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comandos</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Abre la consola web</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Buscar en el panel de visualización de mensajes</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>F</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>F</kbd></td> + </tr> + <tr> + <th scope="row">Abre el <a href="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties" title="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties">panel inspector de objetos</a></th> + <td><kbd>Ctrl</kbd> + <kbd>Click</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Click</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Click</kbd></td> + </tr> + <tr> + <th scope="row">Limpia el <a href="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties" title="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties">panel inspector de objetos</a></th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Centrarse en la línea de comando</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>K</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>K</kbd></td> + </tr> + <tr> + <th scope="row">Limpiar salida</th> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>From Firefox 44:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td> + <p><kbd>Ctrl</kbd> + <kbd>L</kbd></p> + + <p>From Firefox 44:</p> + + <p><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd></p> + </td> + </tr> + </tbody> +</table> + +<h3 id="Interprete_de_línea_de_comandos">Interprete de línea de comandos</h3> + +<p><span class="tlid-translation translation" lang="es"><span title="">Estos atajos se aplican cuando estás en el</span></span> <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">Interprete de línea de comandos.</a></p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazarse hasta el inicio de la salida de la consola (solo si la línea de comando está vacía)</span></span></th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazarse hasta el final de la salida de la consola (solo si la línea de comando está vacía)</span></span></th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Avanzar página a través de la salida de la consola</span></span></th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Retroceder una página a través de la salida de la consola</span></span></th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Ir hacia atrás a través del </span></span><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history" title="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history">historial de comandos</a></th> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Ir hacia delante a través del </span></span><a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history" title="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Command_history">historial de comandos</a></th> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Inicie la búsqueda inversa a través del historial de comandos / retroceda a través de comandos coincidentes</span></span></th> + <td><kbd>F9</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + <td><kbd>F9</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Avance por el historial de comandos coincidentes (después de iniciar la búsqueda inversa)</span></span></th> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F9</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al principio de la línea</span></span></th> + <td><kbd>Home</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>A</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse al final de la línea</span></span></th> + <td><kbd>End</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Ejecutar la expresión actual</th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Agregar una nueva línea (para ingresar expresiones de varias líneas)</span></span></th> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Return</kbd></td> + <td><kbd>Shift</kbd> + <kbd>Enter</kbd></td> + </tr> + </tbody> +</table> + +<h3 id="Ventana_emergente_de_autocompletado">Ventana emergente de autocompletado</h3> + +<p><span class="tlid-translation translation" lang="es"><span title="">Estos atajos se aplican mientras</span></span> la <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Autocomplete" title="/en-US/docs/Tools/Web_Console/The_command_line_interpreter#Autocomplete">ventana emergente de autocompletado</a> está desplegada:</p> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Elija la sugerencia actual de autocompletado</span></span></th> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + <td><kbd>Tab</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Cancelar la ventana emergente de autocompletado</span></span></th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Ir a la sugerencia de autocompletado anterior</span></span></th> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + <td><kbd>Up arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Ir a la siguiente sugerencia de autocompletado</span></span></th> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + <td><kbd>Down arrow</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Página arriba a través de sugerencias de autocompletado</span></span></th> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + <td><kbd>Page up</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Página abajo a través de sugerencias de autocompletado</span></span></th> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + <td><kbd>Page down</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazarse al principio de las sugerencias de autocompletado</span></span></th> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + <td><kbd>Home</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Desplazarse hasta el final de las sugerencias de autocompletado</span></span></th> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + <td><kbd>End</kbd></td> + </tr> + </tbody> +</table> +</div> + +<h2 id="Editor_de_Estilo">Editor de Estilo</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Abrir el editor de estilo</th> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F7</kbd></td> + </tr> + <tr> + <th scope="row">Abrir una ventana emergente de autocompletado</th> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + </tr> + </tbody> +</table> + +<div id="scratchpad"> +<h2 id="Bloc_de_Notas">Bloc de Notas</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row">Abrir el bloc de notas</th> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + <td><kbd>Shift</kbd> + <kbd>F4</kbd></td> + </tr> + <tr> + <th scope="row">Ejecutar el código del bloc de notas</th> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Ejecutar el código del bloc de notas y mostrar el resultado en el <a href="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties" title="/en-US/docs/Tools/Web_Console/Rich_output#Examining_object_properties">inspector de objetos</a></th> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>I</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>I</kbd></td> + </tr> + <tr> + <th scope="row">Ejecutar el código del bloc de notas e insertar el resultado como un comentario</th> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>L</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>L</kbd></td> + </tr> + <tr> + <th scope="row">Reevaluar la función actual</th> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>E</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>E</kbd></td> + </tr> + <tr> + <th scope="row">Recargar la página actual y ejecutar el código del bloc de nota</th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>R</kbd></td> + </tr> + <tr> + <th scope="row">Guardar el código del bloc de notas</th> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>S</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>S</kbd></td> + </tr> + <tr> + <th scope="row">Abrir un código existente</th> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>O</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>O</kbd></td> + </tr> + <tr> + <th scope="row">Crear una nueva página del bloc de notas</th> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>N</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>N</kbd></td> + </tr> + <tr> + <th scope="row">Cerrar el bloc de notas</th> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>W</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>W</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Imprimir el código en el bloc de notas</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + <td><kbd>Cmd</kbd> + <kbd>P</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>P</kbd></td> + </tr> + <tr> + <th scope="row">Mostrar sugerencias de autocompletado</th> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Space</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Mostrar documentación</span></span></th> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td> + <td><kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>Space</kbd></td> + </tr> + </tbody> +</table> +</div> + +<div id="eyedropper"> +<h2 id="Selector_de_color_Gotero">Selector de color (Gotero)</h2> + +<table class="fullwidth-table"> + <tbody> + <tr> + <th scope="row" style="width: 40%;">Comando</th> + <th scope="col">Windows</th> + <th scope="col">macOS</th> + <th scope="col">Linux</th> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Seleccionar el color actual</span></span></th> + <td><kbd>Enter</kbd></td> + <td><kbd>Return</kbd></td> + <td><kbd>Enter</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Salir del gotero</span></span></th> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + <td><kbd>Esc</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse por 1 píxel</span></span></th> + <td><kbd>Arrow keys</kbd></td> + <td><kbd>Arrow keys</kbd></td> + <td><kbd>Arrow keys</kbd></td> + </tr> + <tr> + <th scope="row"><span class="tlid-translation translation" lang="es"><span title="">Moverse por 10 píxels</span></span></th> + <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td> + <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td> + <td><kbd>Shift</kbd> + <kbd>arrow keys</kbd></td> + </tr> + </tbody> +</table> +</div> 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 +--- +<p>Developer tools that are not built into Firefox, but ship as separate add-ons.</p> + +<dl> + <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/websocket-monitor/">WebSocket Monitor</a></dt> + <dd>Examine the data exchanged in a WebSocket connection.</dd> + <dd> </dd> +</dl> 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 +--- +<p>La Consola del Navegador es como la <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Consola Web</a>, <span id="result_box" lang="es"><span>pero se aplica a todo el navegador en lugar de a una sola pestaña de contenido</span></span>.</p> + +<p><span id="result_box" lang="es"><span>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.</span> <span>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.</span></span></p> + +<p><span id="result_box" lang="es"><span>Si también desea utilizar las otras herramientas de desarrollador web en la caja </span></span><span lang="es"><span>de herramientas </span></span><a href="/en-US/docs/Tools/Tools_Toolbox">(Toolbox)</a> <span lang="es"><span>Web estándar con código de complemento o explorador, considere la posibilidad de utilizar el cuadro de herramientas del navegador</span></span> <a href="/en-US/docs/Tools/Browser_Toolbox">(Browser Toolbox)</a><span lang="es"><span>.</span></span></p> + +<p><span id="result_box" lang="es"><span>Del mismo modo, puede ejecutar expresiones JavaScript utilizando la consola del explorador.</span> <span>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.</span> <span>Esto significa que puedes interactuar con todas las pestañas del navegador usando el</span></span> <a href="/en-US/docs/Code_snippets/Tabbed_browser" title="/en-US/docs/Code_snippets/Tabbed_browser"><code>gBrowser</code></a> <span lang="es"><span>global e incluso con el XUL utilizado para especificar la interfaz de usuario del navegador.</span></span></p> + +<div class="geckoVersionNote"> +<p><span id="result_box" lang="es"><span>Nota: La línea de comandos de la consola del navegador (para ejecutar expresiones JavaScript) está desactivada de forma predeterminada.</span> <span>Para habilitarla, establezca la preferencia </span></span><code>devtools.chrome.enabled</code><span lang="es"><span> 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</span> <span>Configuración de la herramienta de desarrollador</span></span> <a href="/en-US/docs/Tools/Settings">(developer tool settings)</a><span lang="es"><span>.</span></span></p> +</div> + +<h2 id="Abrir_la_Consola_del_Navegador"><span class="short_text" id="result_box" lang="es"><span>Abrir la Consola del Navegador</span></span></h2> + +<p><span id="result_box" lang="es"><span>Puede abrir la consola del navegador de dos formas:</span></span></p> + +<ol> + <li><span id="result_box" lang="es"><span>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)</span></span></li> + <li><span class="short_text" id="result_box" lang="es"><span>Desde el teclado: pulse</span></span> Ctrl+Shift+J (o Cmd+Shift+J en un Mac).</li> +</ol> + +<p><span id="result_box" lang="es"><span>También puedes iniciar la consola del navegador lanzando Firefox desde la línea de comandos y pasando el argumento </span></span><code>-jsconsole</code>:</p> + +<pre>/Applications/FirefoxAurora.app/Contents/MacOS/firefox-bin -jsconsole</pre> + +<p><span class="short_text" id="result_box" lang="es"><span>La consola del navegador se ve así:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5847/browser-console-window.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p><span id="result_box" lang="es"><span>Puede ver que la consola del navegador se ve y se comporta de forma muy similar a la</span></span> <a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Consola Web</a>:</p> + +<ul> + <li>La mayor parte de la ventana es ocupada por <a href="/en-US/docs/Tools/Web_Console#Message_Display_Pane" title="/en-US/docs/Tools/Web_Console#Message_Display_Pane">el panel que muestra mensajes</a></li> + <li>arriba, la <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/docs/Tools/Web_Console#Filtering_and_searching">barra de herramientas</a> le permite filtrar los mensajes que se muestran</li> + <li>abajo, el <a href="/en-US/docs/Tools/Web_Console#The_command_line_interpreter" title="/en-US/docs/docs/Tools/Web_Console#The_command_line_interpreter">interprete de linea de comandos</a> le permite evaluar la expresión JavaScript.</li> +</ul> + +<h2 id="Registro_de_Consola_del_Navegador">Registro de Consola del Navegador</h2> + +<p>El registro de consola del Navegador registra el mismo tipo de mensajes que la consola Web:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Web_Console#HTTP_requests" title="/en-US/docs/Tools/Web_Console#HTTP_requests">Solicitudes HTTP</a></li> + <li><a href="/en-US/docs/Tools/Web_Console#Warnings_and_errors" title="/en-US/docs/Tools/Web_Console#Warnings_and_errors">Advertencias y errores</a> <span id="result_box" lang="es"><span>(incluidos JavaScript, CSS, advertencias y errores de seguridad y mensajes registrados explícitamente por código JavaScript utilizando la </span></span><a href="https://developer.mozilla.org/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">consola</a> API)</li> + <li><a href="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages" title="/en-US/docs/Tools/Web_Console#Input.2Foutput_messages">Mensajes de entrada / salida</a>: <span id="result_box" lang="es"><span>comandos enviados al navegador a través de la línea de comandos, y el resultado de ejecutarlos.</span></span></li> +</ul> + +<p>Sin embargo, tambien muestra mensajes provenientes de:</p> + +<ul> + <li>contenido web alojado por todas las pestañas del navegador</li> + <li>el propio codigo del navegador</li> + <li>complementos.</li> +</ul> + +<h3 id="Mensajes_provenientes_de_complementos">Mensajes provenientes de complementos</h3> + +<p>La consola del navegador muestra mensajes registrados por todos los complementos de Firefox.</p> + +<h4 id="Console.jsm">Console.jsm</h4> + +<p>Para utilizar la API de consola de un complemento tradicional o bootstrapped, obtenlo desde el modulo de consola.</p> + +<p>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.</p> + +<pre class="brush: js">Components.utils.import("resource://gre/modules/Console.jsm"); +console.log("Hello from Firefox code"); //output messages to the console</pre> + +<p>Aprenda mas:</p> + +<ul> + <li><a href="/en-US/docs/Web/API/console">referencia de la consola API</a></li> + <li><a href="https://dxr.mozilla.org/mozilla-central/source/toolkit/modules/Console.jsm">Console.jsm codigo fuente en Mozilla DXR</a></li> +</ul> + +<h4 id="HUDService">HUDService</h4> + +<p>Tambien existe el HUDService el cual permite el acceso a la Consola de Navegador. El modulo está disponible en <a href="https://dxr.mozilla.org/mozilla-central/source/devtools/client/webconsole/hudservice.js">Mozilla DXR</a>. Así vemos que no solo podemos acceder a la consola del Navegador sino tambien a la consola web.</p> + +<p>Aqui hay un ejemplo de como limpiar el contenido de la consola del navegador:</p> + +<pre class="brush: js">Components.utils.import("resource://devtools/shared/Loader.jsm"); +var HUDService = devtools.require("devtools/client/webconsole/hudservice"); + +var hud = HUDService.getBrowserConsole(); +hud.jsterm.clearOutput(true);</pre> + +<p>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:</p> + +<pre class="brush: js">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);</pre> + +<h4 id="Caracteristicas_Adicionales_Disponibles">Caracteristicas Adicionales Disponibles</h4> + +<p>Para los <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/index.html">Complementos SDK</a>, 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:</p> + +<pre class="brush: js">widget = require("sdk/widget").Widget({ + id: "an-error-happened", + label: "Error!", + width: 40, + content: "Error!", + onClick: logError +}); + +function logError() { + console.error("something went wrong!"); +}</pre> + +<p>Si uested <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/tutorials/installation.html">construye este como un archivo XPI</a>, 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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5937/browser-console-addon.png" style="display: block; margin-left: auto; margin-right: auto;">Haga click en el icono. verá un mensaje como este aparecer en la consola del navegador:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5851/browser-console-addon-output.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>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 <a href="/en-US/docs/Tools/Web_Console#Filtering_and_searching" title="/en-US/docs/Tools/Web_Console#Filtering_and_searching">"Filtro de salida"</a>. Por default, solo los mensajes de error son registrados en la consola, aunque <a href="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels" title="https://addons.mozilla.org/en-US/developers/docs/sdk/latest/dev-guide/console.html#Logging%20Levels">usted puede cambiar este comportamiento en preferencias del navegador</a>.</p> + +<h2 id="Consola_de_línea_de_comandos_del_Navegador">Consola de línea de comandos del Navegador</h2> + +<div class="geckoVersionNote"> +<p>La Consola de linea de comandos del navegador esta deshabilitada de manera predeterminada. Para habilitarla cambie la preferencia de <code>devtools.chrome.enabled</code> hacia <code>true</code> en about:config, o establezca la opción "Enable chrome debugging" dentro de <a href="/en-US/docs/Tools/Settings">developer tool settings</a>.</p> +</div> + +<p>Al igual que la consola Web, el interprete de linea de comando le permite evaluar expresiones JavaScript en tiempo real:<img alt="" src="https://mdn.mozillademos.org/files/5855/browser-console-commandline.png" style="display: block; margin-left: auto; margin-right: auto;">Tambien como el interprete de linea de comando de la consola Web, esta linea de comando soporta <a href="/en-US/docs/Tools/Web_Console#Autocomplete" title="/en-US/docs/Tools/Web_Console#Autocomplete">autocompletar</a>, <a href="/en-US/docs/Tools/Web_Console#Command_history" title="/en-US/docs/Tools/Web_Console#Command_history">historial</a>, y varios <a href="/en-US/docs/Tools/Web_Console#Keyboard_shortcuts" title="/en-US/docs/docs/Tools/Web_Console#Keyboard_shortcuts">atajos de teclado </a>así como <a href="/en-US/docs/Tools/Web_Console#Helper_commands" title="/en-US/docs/Tools/Web_Console#Helper_commands">comandos de ayuda</a>. si el resultado de un comando es un objeto, usted puede hacer <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects" title="/en-US/docs/Tools/Web_Console#Inspecting_objects">click sobre el objeto para ver sus detalles</a>.</p> + +<p>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 <code>window</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5867/browser-console-chromewindow.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>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.</p> + +<h3 id="Controlando_el_navegador">Controlando el navegador</h3> + +<p>El interprete de linea de comando obtiene acceso al objeto <a href="/en-US/docs/XUL/tabbrowser" title="/en-US/docs/XUL/tabbrowser"><code>tabbrowser</code></a>, a traves de el <code>gBrowser</code> 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):</p> + +<pre class="brush: js">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/";</pre> + +<p>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.</p> + +<h3 id="Modificando_el_UI_del_navegador">Modificando el UI del navegador</h3> + +<p>Debido a que el global <code>window</code> 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:</p> + +<pre class="brush: js">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);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5859/browser-console-modify-ui-windows.png" style="display: block; margin-left: auto; margin-right: auto;">En OS X, este codigo similar añadirá un nuevo item al menu "Herramientas":</p> + +<pre class="brush: js">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);</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5861/browser-console-modify-ui-osx.png" style="display: block; margin-left: auto; margin-right: auto;"></p> 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 +--- +<p>La<em> Caja de Herramientas del Navegador</em> habilita la depuración de extensiones (add-ons) y del código JavaScript propio del navegador mas que simplemente páginas web como la <em><a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox">Caja de Herramienta</a></em> normal. El contexto de la <em>Caja de Herramientas del Navegador</em> es el navegador completo en lugar de simplemente una única página en una única pestaña.</p> + +<div class="note"> +<p>Nota: Si usted quiere depurar una extensión especifica que no es reiniciable o basado en SDK entonces pruebe el <em><a href="/en-US/Add-ons/Add-on_Debugger">"Depurador de Extensiones</a></em>". Para extensiones que no son ninguna de las dos, use la Caja de Herramientas del Navegador.</p> +</div> + +<p id="Enabling_the_Browser_Toolbox" style="line-height: 30px; font-size: 2.14286rem;">Habilitando la Caja de Herramientas del Navegador</p> + +<div> +<p>La <em>Caja de Herramientas del Navegador</em> 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".</p> + +<p>Para hacer esto, abra la <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox">Configuración de Caja de Herramientas</a> en <em>Herramientas del Desarrollador</em>, vaya a la sección "<a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Advanced_settings">Configuración Avanzada</a>", y marque en las opciones "Habilitar navegador chrome y caja de herramientas de depuración de extensiones" y "Habilitar depuración remota".</p> + +<p><img alt="Developer Tools Settings" src="https://mdn.mozillademos.org/files/11125/enable-browser-toolbox.png" style="display: block; height: 923px; margin-left: auto; margin-right: auto; width: 900px;"></p> +</div> + +<h2 id="Abriendo_la_Caja_de_Herramienta_del_Navegador"><span style="font-size: 2.14285714285714rem;">Abriendo la Caja de Herramienta del Navegador</span></h2> + +<p><span style="line-height: 1.5;">Abra la caja de Herramientas del navegador a través del botón menú</span><span style="line-height: 1.5;"> </span><img alt="new fx menu" class="frameless wiki-image" src="https://support.cdn.mozilla.net/media/uploads/gallery/images/2014-01-10-13-08-08-f52b8c.png" style="line-height: 1.5;" title=""><span style="line-height: 1.5;"> y los ítems del menú "Desarrollador" y "Caja de Herramientas del Navegador".</span><span style="line-height: 1.5;"> </span></p> + +<p><span style="line-height: 1.5;">A partir de Firefox 39, puede abrirlo con la combinación de teclas </span><kbd>Ctrl</kbd> + <kbd>Alt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd> . ( <kbd>Cmd</kbd> + <kbd>Opt</kbd> +<kbd>Shift</kbd> + <kbd>I</kbd> en una Mac).</p> + +<p><span style="line-height: 1.5;">Se le presentará una caja de dialogo como esta (la cual puede ser removida configurando la propiedad </span><code style="font-style: normal; line-height: 1.5;">"devtools.debugger.prompt-connection</code><span style="line-height: 1.5;">" a falso):</span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11119/browser-toolbox-warning.png" style="display: block; height: 326px; margin-left: auto; margin-right: auto; width: 600px;">Clíque OK, y la <em>Caja de Herramientas del Navegador</em> abrirá en su propia ventana:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11121/browser-toolbox.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;">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:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Debugger">Depurador</a> (<em>Nota: Si quiere depurar una extensión específica que no es reiniciable o basada en SDK entonces pruebe <a href="/en-US/Add-ons/Add-on_Debugger">Depurador de Extensiones</a>.)</em></li> + <li><a href="/en-US/docs/Tools/Browser_Console">Consola</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor">Editor de Estilo</a></li> + <li><a href="/en-US/docs/Tools/Profiler">Rendimiento</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor">Monitor de Red</a></li> + <li><a href="/en-US/docs/Tools/Scratchpad">Borrador</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector">Inspector de Página</a></li> +</ul> + +<h2 id="Depurando_chrome_y_a_cerca_de_páginas">Depurando chrome: y a cerca de: páginas</h2> + +<p>A partir de Firefox 37 en adelante, usted puede depurar chrome: y a cerca de: páginas usando el <a href="/en-US/docs/Tools/Debugger">Depurador </a>normal, justo como si fueran páginas con contenido ordinario.</p> + +<h2 id="Seleccionando_un_documento">Seleccionando un documento</h2> + +<p>En la Caja de Herramienta normal, hay un <a href="/en-US/docs/Tools/Working_with_iframes">botón en la barra de herramienta habilitándolo a usted para seleccionar "iframes" específicos en el documento</a>. 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.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11117/browser-toolbox-iframes.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p> </p> + +<p> </p> + +<p> </p> 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 +--- +<p><font><font>Para desactivar un punto de interrupción, desactive la casilla de verificación junto a la entrada del punto de interrupción en el </font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane" title="# fuente-list-panel"><font><font>panel de lista de </font></font></a><font><font>Fuente:</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9823/debugger-disable-breakpoint.png" style="display: block; margin-left: auto; margin-right: auto;"><font><font>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" </font></font><br> + <font><font>También es posible eliminar un punto de interrupción con sólo hacer clic en el círculo azul que representa la misma.</font></font></p> + +<p><font><font>Para activar / desactivar todos los puntos de interrupción, utilice el "Cambia todos los puntos de ruptura" botón en el </font></font><a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane"><font><font>panel de lista de </font></font></a><font><font>Fuente:</font></font></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9825/debugger-disable-all-breakpoints.png" style="display: block; margin-left: auto; margin-right: auto;"></p> 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 +--- +<p><span class="seoSummary">These articles describe how to use the debugger.</span></p> + +<p>{{ ListSubpages () }}</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p>Puedes establecer una interrupción incondicional en una de las siguientes maneras:</p> + +<ul> + <li>en el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">panel de fuente</a>, haz clic en el número de línea para la línea que deseas la interrupción</li> + <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, activate the context menu while on the line you want to break at, and select "Add breakpoint"</li> + <li>in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a>, highlight the line you want to break at and press <kbd>Ctrl</kbd> + <kbd>B</kbd> (Windows/Linux) or <code>Cmd</code> + <kbd>B</kbd> (macOS)</li> +</ul> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16433/set_breakpoint.png" style="border: 1px solid black; display: block; height: 353px; margin: 0 auto; width: 593px;"></p> + +<p>If you choose to set a conditional breakpoint, you will be able to add the condition:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16436/edit_conditional_breakpoint.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></p> + +<p>Each breakpoint is shown in two places in the debugger:</p> + +<ul> + <li>the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Breakpoints_list">breakpoints list</a> shows the filename and line number for the breakpoint + + <p><img alt="" src="https://mdn.mozillademos.org/files/16434/list_breakpoints.png" style="border: 1px solid black; display: block; height: 325px; margin: 0px auto; width: 313px;"></p> + </li> + <li>the line in the <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_pane">source pane</a> is marked with a blue arrow if you set an unconditional breakpoint, or an orange arrow if the breakpoint is <a href="/en-US/docs/Tools/Debugger/How_to/Set_a_conditional_breakpoint">conditional</a>. <img alt="" src="https://mdn.mozillademos.org/files/16435/breakpoints_in_code.png" style="border: 1px solid black; display: block; height: 324px; margin: 0px auto; width: 525px;"></li> +</ul> + +<p>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 <code>parse</code>, or at the call to <code>getItem</code>.</p> + +<pre class="brush: js">tasks = JSON.parse(localStorage.getItem('todoList'));</pre> + +<p>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 <code>parse</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16576/column_breakpoint.png" style="border: 1px solid black; display: block; margin: 0px auto;"></p> + +<p>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 <code>parse </code>and the call to <code>getItem</code>, or even all three columns to break at each of the possible locations.</p> + +<p>In cases where you set breakpoints on multiple columns, the currently active columns breakpoint will be highlighted in the Breakpoints side panel.</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p>Los fuentes JavaScript ejecutados por el explorador frecuentemente son transformados de alguna manera desde el original creado por el desarrollador. Por ejemplo:</p> + +<ul> + <li>los fuentes a menudo se combinan y minifican para hacer la transferencia desde el servidor más eficiente.</li> + <li>el código JavaScript que se ejecuta en una página a menudo es generado automáticamente. Como el compilado desde los lenguajes <a href="http://coffeescript.org/">CoffeeScript</a> o <a href="http://www.typescriptlang.org/">TypeScript</a>.</li> +</ul> + +<p>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 <a href="http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/">mapa fuente</a> 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.</p> + +<p>Para habilitar al debugger trabajar con un mapa fuente, debes:</p> + +<ul> + <li>generar el mapa fuente</li> + <li>incluir un comentario en el fichero transformado, apuntando al mapa fuente. La sintaxis del comentario es la siguiente:</li> +</ul> + +<pre class="brush: js"><code>//# sourceMappingURL=http://example.com/path/to/your/sourcemap.map</code></pre> + +<p>{{EmbedYouTube("Fqd15gHC4Pg")}}</p> + +<p>En el video anterior, cargamos <a href="https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html">https://mdn.github.io/devtools-examples/sourcemaps-in-console/index.html</a>. 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:</p> + +<pre class="brush: js"><code>//# sourceMappingURL=main.js.map</code></pre> + +<p>En el <a href="/en-US/docs/Tools/Debugger/UI_Tour#Source_list_pane">panel de fuentes</a> del debugger, el fichero fuente original en CoffeeScript aparece ahora como "main.coffee", y podemos depurarlo como cualquier otro fichero fuente.</p> 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 +--- +<p>{{ToolsSidebar}}</p> + +<div class="note"> +<p>Esta página describe el depurador de JavaScript como se muestra en Firefox 52 y superiores, en Firefox Nightly y Firefox Developer Edition.</p> + +<p>Para ver como luce en versiones anteriores de firefox ó en Firefox Beta y Release, ver <a href="https://developer.mozilla.org/en-US/docs/Tools/Debugger_%28before_Firefox_52%29">Depurador (anterior a Firefox 52)</a>.</p> + +<p>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 <code>false</code> .</p> +</div> + +<p>{{EmbedYouTube("sK8KU8oiF8s")}}</p> + +<p>El depurador te permite inspeccionar paso a paso el código de JavaScript y examinar o modificar su estado ayudando a eliminar errores.</p> + +<p>Puedes usarlo para depurar código local o remoto, por ejemplo en un dispositivo Android ejecutando Firefox para Android. Ver acerca del<a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging"> depurador remoto </a>para aprender como depurar un objetivo remoto.j</p> + +<p>{{ fx_minversion_header("15.0") }}</p> + +<p>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.</p> + +<h2 id="Iniciar_el_depurador">Iniciar el depurador</h2> + +<h3 id="Depurando_contenido_web">Depurando contenido web</h3> + +<p>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.</p> + +<p>Una vez que ha <a href="/en-US/docs/Mozilla/Firefox_OS/Debugging/Setting_up" title="/ en-US / docs / Mozilla / Firefox_OS / Debugging / Setting_up">configurado Firefox y Firefox OS para soportar depuración</a>, puede usar el Depurador Remoto para depurar su código ejecutado en un dispositivo Firefox OS o en el simulador de Firefox OS.</p> + +<p>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 <code>lsusb</code> y <code>adb</code> pueden verlo. Entonces deberá re-enviar el puerto TCP apropiado al dispositivo abriendo una ventana de terminal y digitando el siguiente comando:</p> + +<pre class="notranslate">adb forward tcp:6000 tcp:6000</pre> + +<div class="note"> +<p><strong>Recuerda:</strong> D<span class="rangySelectionBoundary" id="selectionBoundary_1428470313580_2070723245854429" style="display: none; line-height: 0;"></span>eberás re-enviar el puerto cada vez que reinicies el dispositivo.</p> +</div> + +<p>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.</p> + +<p><img alt="Un vistazo rápido a cómo se ve el depurador remoto" src="/files/4373/remote-debugger-started.png" style="height: 457px; width: 961px;"></p> + +<p>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. </p> + +<h2 id="La_Barra_del_Depurador">La Barra del Depurador</h2> + +<p>La barra de herramientas tiene diversos controles:</p> + +<p><img alt="PNG del diagrama de barra de herramientas etiquetado" src="/files/4381/Remote%20Debugger%20Toolbar.png" style="height: 157px; width: 868px;"></p> + +<dl> + <dt>Pause/Resume (F6)</dt> + <dd>Pausa o reanuda la ejecución de un script que estas depurando.</dd> + <dt>Step Over (F7)</dt> + <dd>Pausa la linea en curso de codigo JavaScript.</dd> + <dt>Step Into (F8)</dt> + <dd>Pausa la llamada a la función de la linea en curso del código JavaScript.</dd> + <dt>Step Out (Shift-F8)</dt> + <dd>Ejecuta el script hasta que termina la ejecución de la función.</dd> + <dt>Script Chooser (Ctrl-P or Cmd-P)</dt> + <dd>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.</dd> + <dt>Script Filter</dt> + <dd>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.</dd> + <dt>Expandir Paneles</dt> + <dd>Expande o contrae la ventana para mostar u ocultar los paneles laterales.</dd> + <dt>Debugger Options</dt> + <dd>Aparece un menu en una ventana emergente dejandote configurar el depurador. Consulte {{anch("Opciones de depuración")}} a continuación.</dd> +</dl> + +<div class="note"> +<p>Nota: El depurador de contenido Web tiene un icono de Cierre al principio de la barra de tareas; puedes usarlo para cerrar el depurador.</p> +</div> + +<h3 id="Usando_el_filtro_de_Scripts">Usando el filtro de Scripts</h3> + +<p>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.</p> + +<p><img alt="Captura de pantalla del panel emergente del operador del cuadro de búsqueda." src="/files/4393/operator-popup.png" style="height: 146px; width: 199px;"></p> + +<dl> + <dt>Search in all files - ! (Cmd-Opt-F)</dt> + <dd>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.</dd> + <dt>Find in this file - # (Cmd-F)</dt> + <dd>Busca el texto que ingresas en el archivo que estás viendo actualmente.</dd> + <dt>Jump to line - : (Cmd-J)</dt> + <dd>Salta al numero de línea que has introducido en la ventana.</dd> + <dt>Filter variables - * (Cmd-Opt-V)</dt> + <dd>Filtra las variables mostradas para incluir solo aquellas que coinciden con la cadena especificada.</dd> +</dl> + +<h3 id="Opciones_del_depurador">Opciones del depurador</h3> + +<p>El icono de Opciones del depurador, cuando cliqueas, presenta un menu de opciones emergente que te deja ajustar el comportamiento del depurador.</p> + +<dl> + <dt>Pausa en excepciones</dt> + <dd>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.</dd> + <dt>Mostrar paneles al inicio</dt> + <dd>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.</dd> + <dt>Mostrar propiedades ocultas</dt> + <dd>Si no marcas esta opción, las propiedades de JavaScript ocultas (es decir, aquellas que son no-enumerables) no se muestran.</dd> + <dt>Mostrar cuadro de busqueda de variables</dt> + <dd>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.</dd> +</dl> + +<h2 id="Uso_del_depurador">Uso del depurador</h2> + +<p>El depurador de JavaScript tiene la mayoría de las características estándar que espera en un depurador moderno.</p> + +<h3 id="Breakpoints">Breakpoints</h3> + +<p>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)</p> + +<p>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 <code>handleEvent()</code> 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:</p> + +<p><img alt="Imagen que muestra cómo se ve un punto de interrupción establecido" src="/files/4395/set-breakpoint.png" style="border-style: solid; border-width: 1px; height: 45px; width: 404px;"></p> + +<p>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.</p> + +<p>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í:</p> + +<p><img alt="Una imagen que muestra cómo se ve cuando se alcanza un punto de interrupción." src="/files/4397/breakpoint-reached.png"></p> + +<p>Mientras tanto, su dispositivo se verá así:</p> + +<p><img alt="Imagen que muestra cómo se ve el dispositivo cuando se activa el punto de interrupción de muestra." src="/files/4399/breakpoint-device.png" style="height: 480px; width: 320px;"></p> + +<p><font><font>Puede hacer clic hacia adelante y hacia atrás en el marco de la pila para ver el historial de llamadas. </font><font>Al hacer clic en "ut_onTouchEnd" en el panel del marco de la pila, se mostrará el código </font></font><code>app://system.gaiamobile.org/js/utility_tray.js</code><font><font>que manejó el evento que ocurrió cuando quitó el dedo de la pantalla después de bajar la bandeja de notificaciones, por ejemplo.</font></font></p> + +<p><font><font>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. </font><font>La siguiente línea de código para ejecutar tiene una flecha verde a su izquierda. </font><font>Por supuesto, puede establecer y eliminar puntos de interrupción, examinar variables, etc. mientras lo hace.</font></font></p> + +<p><font><font>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.</font></font></p> + +<h4 id="Puntos_de_interrupción_condicionales"><font><font>Puntos de interrupción condicionales</font></font></h4> + +<p><font><font>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. </font><font>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). </font><font>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.</font></font></p> + +<p><font><font>Luego puede ingresar una condición que debe ser verdadera para que se active el punto de interrupción:</font></font></p> + +<p><img alt="El cuadro para configurar un punto de interrupción condicional" src="/files/4431/cond-breakpoint-box.png" style="height: 115px; width: 458px;"></p> + +<p><font><font>Ahora, cuando se alcanza la línea de código correspondiente, solo se detendrá la ejecución de la expresión si </font></font><code>evt.type == 'click'</code><font><font>es verdadera.</font></font></p> + +<h4 id="Gestionar_puntos_de_interrupción"><font><font>Gestionar puntos de interrupción</font></font></h4> + +<p><font><font>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. </font><font>Activar y desactivar la casilla de verificación en cualquier punto de interrupción activa y desactiva el punto de interrupción. </font><font>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")}}.</font></font></p> + +<p><font><font>Puede obtener opciones adicionales haciendo clic derecho en cualquier punto de interrupción:</font></font></p> + +<dl> + <dt><font><font>Eliminar todos los puntos de interrupción</font></font></dt> + <dd><font><font>Elimina todos los puntos de interrupción actuales.</font></font></dd> + <dt><font><font>Habilitar todos los puntos de interrupción</font></font></dt> + <dd><font><font>Habilita todos los puntos de interrupción actuales. </font><font>Este es un atajo para alternar en las casillas de verificación junto a todos los puntos de interrupción.</font></font></dd> + <dt><font><font>Deshabilitar todos los puntos de interrupción</font></font></dt> + <dd><font><font>Desactiva (sin eliminar) todos los puntos de interrupción. </font><font>Este es un atajo para desactivar las casillas de verificación junto a todos los puntos de interrupción.</font></font></dd> + <dt><font><font>Habilitar a otros</font></font></dt> + <dd><font><font>Habilita todos los puntos de interrupción excepto el que hizo clic con el botón derecho.</font></font></dd> + <dt><font><font>Deshabilitar a otros</font></font></dt> + <dd>Disables all breakpoints except the one you right-clicked.</dd> + <dt>Remove others</dt> + <dd>Removes all breakpoints except the one you right-clicked.</dd> + <dt>Configure conditional breakpoint</dt> + <dd>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.</dd> + <dt>Disable breakpoint</dt> + <dd>Disables the breakpoint you right-clicked.</dd> + <dt>Enable breakpoint</dt> + <dd>Enables the breakpoint you right-clicked.</dd> +</dl> + +<h3 id="The_variable_panel">The variable panel</h3> + +<p><img alt="Primera toma del panel variable" src="/files/4403/variable-panel1.png" style="border-style: solid; border-width: 1px; float: left; height: 609px; margin: 8px; width: 208px;">Most 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, <code>qs_handleEvent()</code>), the calling function (here it's <code>ut_show()</code>), and the global scope (the {{domxref("Window")}} object, in this case).</p> + +<p>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 <code>geolocationEnabled</code>, you can type "false" to set the value to <code>false</code>. Variables whose values you've edited are highlighted in yellow, like this:</p> + +<p><img alt="Ejemplo de cómo se ve una variable modificada." src="/files/4405/changed-variable.png" style="height: 26px; width: 198px;"></p> + +<p>Pointing your cursor at a variable provides a tooltip that provides additional information about the variable; for example, pointing at the <code>evt</code> object says "<s>configurable</s> enumerable writable". This tells you that the <code>evt</code> object is not configurable, but is enumerable and writable. See <a href="/en-US/docs/JavaScript/Reference/Global_Objects/Object/defineProperty" title="/ es-US / docs / JavaScript / Reference / Global_Objects / Object / defineProperty"><code>Object.defineProperty()</code></a> for details on what these property descriptors mean.</p> + +<p>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 <code>this.bluetooth</code> object in the <code>qs_handleEvent()</code> function's scope, and the <code>Bluetooth</code> and <code>BluetoothTransfer</code> objects in the global scope.</p> + +<h3 class="cleared" id="Watch_expressions">Watch expressions</h3> + +<p>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.</p> + +<p>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.</p> + +<p>For example, let's say we're stepping through some code and we want to quickly know what the value of a variable <code>a</code> 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.</p> + +<p>When our breakpoint is reached, let's say the value of <code>a</code> is 1. The resulting display looks like this:</p> + +<p><img alt="Cómo se ve una expresión de reloj despedido" src="/files/4433/watch-expression-fired.png" style="height: 105px; width: 209px;"></p> + +<p>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.</p> + +<h2 id="Stopping_the_debugger">Stopping the debugger</h2> + +<p><font><font>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. </font><font>En esa página, verá un botón Más información. </font><font>Toque eso, luego en la página siguiente, desplácese hacia abajo hasta "Desarrollador" y toque eso. </font><font>Eso presenta una lista de opciones para desarrolladores. </font><font>Desactive la depuración remota allí. </font><font>Sin embargo, no tienes que hacer esto si no quieres.</font></font></p> + +<div class="note"> +<p><strong><font><font>Nota:</font></font></strong><font><font> 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.]</font></font></p> +</div> + +<h2 id="Vea_también">Vea también:</h2> + +<ul> + <li><a href="/en-US/docs/Mozilla/Firefox_OS/Debugging" title="/ en-US / docs / Mozilla / Firefox_OS / Depuración"><font><font>Depuración en Firefox OS</font></font></a></li> + <li><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol" title="https://wiki.mozilla.org/Remote_Debugging_Protocol"><font><font>Protocolo de depuración remota</font></font></a></li> + <li><a href="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/" title="https://hacks.mozilla.org/2012/08/remote-debugging-on-firefox-for-android/"><font><font>Depuración remota en Firefox para Android</font></font></a><font><font> (entrada de blog)</font></font></li> +</ul> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">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.</p> + +<div class="note"> +<p><strong>Nota</strong>: Si no conoces los mapas fuente, puedes aprender más sobre ellos en <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">Como usar un mapa fuente</a>.</p> +</div> + +<h2 id="Informe_de_errores_general_de_mapas_fuente">Informe de errores general de mapas fuente</h2> + +<p>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:</p> + +<p><img alt="Error from invalid JSON" src="https://mdn.mozillademos.org/files/15423/invalid-json.png" style="border-style: solid; border-width: 1px; display: block; height: 57px; margin: 0px auto; width: 744px;"></p> + +<p>Aquí, la URL del recurso nos dice que <code>bundle.js</code> 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.</p> + +<p>Hay unas cuantas formas en las que los mapas fuente pueden ir mal; Estas se detallan en las siguientes secciones.</p> + +<h2 id="Mapa_fuente_no_encontrado_o_inaccesible">Mapa fuente no encontrado o inaccesible</h2> + +<p>El mapa fuente puede estar desaparecido o inaccesible.</p> + +<p><img alt="Source map file is missing" src="https://mdn.mozillademos.org/files/15429/missing-map.png" style="border-style: solid; border-width: 1px; display: block; height: 42px; margin: 0px auto; width: 733px;"></p> + +<p>Para arreglarlo debemos asegurarnos que el fichero existe y esta siendo servido y es accesible por el navegador.</p> + +<h2 id="Mapa_fuente_invalido">Mapa fuente invalido</h2> + +<p>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:</p> + +<ul> + <li><code>SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data</code></li> + <li><code>Error: "version" is a required argument</code></li> +</ul> + +<p><img alt='Error: "version" is a required argument' src="https://mdn.mozillademos.org/files/15425/missing-field.png" style="border-style: solid; border-width: 1px; display: block; height: 45px; margin: 0px auto; width: 743px;"></p> + +<h2 id="Fuente_original_no_encontrada">Fuente original no encontrada</h2> + +<p>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:</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15421/Screenshot%20from%202017-09-15%2014-32-02.png" style="border-style: solid; border-width: 1px; display: block; height: 35px; margin: 0px auto; width: 727px;"></p> + +<p>En este caso, el error tambien se mostrará en el debugger en la pestaña de la fuente:</p> + +<p><img alt="Debugger source tab showing the error" src="https://mdn.mozillademos.org/files/15427/debugger-tab.png" style="border-style: solid; border-width: 1px; display: block; height: 109px; margin: 0px auto; width: 616px;"></p> + +<h2 id="Error_de_red_intentando_acceder_al_recurso._NetworkError_when_attempting_to_fetch_resource">Error de red intentando acceder al recurso. (NetworkError when attempting to fetch resource)</h2> + +<p>Un bug de Firefox evita que los mapas fuente se descarguen para las extensiones y complementos.</p> + +<p>Visita <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1437937">Bug 1437937: WebExtensions Doesn't Find Source Maps</a> para más detalles.</p> + +<pre class="syntaxbox"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">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</span></span></span></pre> + +<p>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.</p> diff --git a/files/es/tools/desempeño/index.html b/files/es/tools/desempeño/index.html new file mode 100644 index 0000000000..9dbf8e643d --- /dev/null +++ b/files/es/tools/desempeño/index.html @@ -0,0 +1,91 @@ +--- +title: Rendimiento +slug: Tools/Desempeño +translation_of: Tools/Performance +--- +<p>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 <a href="/en-US/docs/Tools/Performance/UI_Tour#Waterfall_overview">vista general</a> de todas las acciones que tu navegador empleó para generar el sitio web así como una gráfica con el <a href="/en-US/docs/Tools/Performance/Frame_rate">tiempo de respuesta</a> de dicha pagina.</p> + +<p>Para examinar con más detalle los aspectos del perfil tienes tres herramientas auxiliares:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a> muestra qué operaciones ejecutó el navegador, tales como el modelo de ejecución empleado, JavaScript, repaints y liberación de memoria.</li> + <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a> muestra en qué funciones de JavaScript se requirió más tiempo del navegador.</li> + <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a> muestra la pila de llamadas de JavaScript a lo largo de la grabación.</li> +</ul> + +<p>{{EmbedYouTube("WBmttwfA_k8")}}</p> + +<hr> +<h2 id="Preámbulo">Preámbulo</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/UI_Tour">UI Tour</a></dt> + <dd> + <p>Guía rápida de la interfaz para comenzar a manejar la herramienta de rendimiento.</p> + </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/How_to">How to</a></dt> + <dd>Tareas básicas: abrir la herramienta, crear, guardar, cargar y configurar las grabaciones.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Componentes_de_la_herramienta_de_Rendimiento">Componentes de la herramienta de Rendimiento</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate</a></dt> + <dd>Comprender la capacidad de respuesta general de tu sitio.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt> + <dd>Encontrar cuellos de botella en el JavaScript de tu sitio.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt> + <dd>Comprender el trabajo que el navegador realiza cuando un usuario interactúa con el sitio web.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt> + <dd>Ver qué funciones de JavaScript se ejecutan , y cuando , en el transcurso de la grabación.</dd> + <dd> </dd> +</dl> +</div> +</div> + +<hr> +<h2 id="Escenarios">Escenarios</h2> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties">Animating CSS properties</a></dt> + <dd>Utiliza Waterfall para entender cómo el navegador actualiza una página, y cómo las diferentes propiedades CSS pueden afectar al rendimiento.</dd> + <dd> </dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Scenarios/Intensive_JavaScript">Intensive JavaScript</a></dt> + <dd>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.</dd> +</dl> +</div> +</div> + +<p> </p> + +<div class="column-half"> +<dl> + <dd> </dd> +</dl> +</div> + +<p> </p> diff --git a/files/es/tools/desempeño/ui_tour/index.html b/files/es/tools/desempeño/ui_tour/index.html new file mode 100644 index 0000000000..8898abae03 --- /dev/null +++ b/files/es/tools/desempeño/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 +--- +<p>La interfaz de usuario (UI) de las herramientas de rendimiento, consta de cuatro partes principales:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13220/perf-tool-pieces.png" style="display: block; height: 702px; margin-left: auto; margin-right: auto; width: 1616px;"></p> + +<ul> + <li><a href="/es/docs/Tools/Desempeño/UI_Tour#Toolbar">Barra de herramientas (Toolbar)</a></li> + <li><a href="/es/docs/Tools/Desempeño/UI_Tour#Recordings_pane">Lista de grabaciones (Recordings pane)</a></li> + <li><a href="/es/docs/Tools/Desempeño/UI_Tour#Recording_overview">Vista previa de la grabación (Recording overview)</a></li> + <li><a href="/es/docs/Tools/Desempeño/UI_Tour#Details_pane">Ventana de detalles (Details pane)</a>, que puede mostrar: + <ul> + <li><a href="/en-US/docs/Tools/Performance/Waterfall">Vista en cascada (Waterfall)</a></li> + <li><a href="/en-US/docs/Tools/Performance/Call_Tree">Árbol de llamadas (Call Tree)</a></li> + <li><a href="/en-US/docs/Tools/Performance/Flame_Chart">Gráfico de llama(Flame Chart)</a></li> + </ul> + </li> +</ul> + +<h2 id="Barra_de_herramientas_(Toolbar)">Barra de herramientas (Toolbar)</h2> + +<p>De izquierde a derecha la barra de herramientas contiene los siguientes botones:</p> + +<ul> + <li> + <p>Borrar la lista de grabaciones.</p> + </li> +</ul> + +<div class="note"> +<p><em>Nota: Si haces esto, perderas cualquier grabación que no haya sido guardada.</em></p> +</div> + +<ul> + <li>Inicia o detiene una grabación.</li> + <li>Importar una grabación previamente guardada.</li> + <li>Filtra los <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">marcadores</a> que muestra la vista en cascada.</li> + <li>Cambia la vista activa en la <a href="/es/docs/Tools/Desempeño/UI_Tour#Details_pane">ventana de detalles</a>.</li> + <li>Muestra un popup con la configuración.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13222/perf-toolbar.png" style="display: block; height: 434px; margin-left: auto; margin-right: auto; width: 1672px;"></p> + +<h2 id="Lista_de_grabaciones_(Recordings_pane)">Lista de grabaciones (Recordings pane)</h2> + +<p>La lista de grabaciones muestra todas las grabaciones activas, incluyendo las realizadas durante la sesion y las que hayas importado.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10917/perf-recordings-pane.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 300px;"></p> + +<p>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".</p> + +<h2 id="Vista_previa_de_la_grabacion_(Recording_overview)">Vista previa de la grabacion (Recording overview)</h2> + +<p>Muestra un resumen de toda la grabación, donde el eje-x representa el tiempo.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10919/perf-overview.png" style="display: block; height: 164px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Contiene dos elementos: una vista previa de la vista en cascada y gráfico con el promedio de fotogramas.</p> + +<h3 id="Resumen_de_la_vista_en_cascada">Resumen de la vista en cascada</h3> + +<p>Nos presenta una versión comprimida de la <a href="/en-US/docs/Tools/Performance/Waterfall">vista en cascada</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10923/perf-waterfall-overview.png" style="display: block; height: 76px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Las operaciones grabadas están codificadas con el mismo <a href="/en-US/docs/Tools/Performance/Waterfall#Markers">esquema de colores empleado para la vista en cascada</a> que se muestra en la ventana de detalles.</p> + +<h3 id="Gráfico_con_el_promedio_de_fotogramas">Gráfico con el promedio de fotogramas</h3> + +<p>El promedio de fotogramas nos da una idea de como el navegador responde durante la grabación:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10921/perf-frame-rate.png" style="display: block; height: 88px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Puedes consultar la entrada sobre el <a href="/en-US/docs/Tools/Performance/Frame_rate">promedio de fotogramas</a>.</p> + +<h3 id="Relacionando_eventos">Relacionando eventos</h3> + +<p>Como estos eventos están sincronizados, <span>puedes crear una </span>correlación entre ellos.</p> + +<p>Por ejemplo en la captura de pantalla inferior, una larga operación de pintado (<a href="/en-US/docs/Tools/Performance/Waterfall#Markers">representada con una barra verde</a> en el resumen de la vista en cascada) corresponde con una caída en el promedio de fotogramas:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10925/perf-overview-correlation.png" style="display: block; height: 494px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h3 id="Ampliando">Ampliando</h3> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10927/perf-zoomed.png" style="display: block; height: 416px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<h2 id="Ventana_de_detalles_(Details_pane)">Ventana de detalles (Details pane)</h2> + +<p>La ventana de detalles muestra cualquier herramienta seleccionada. Para cambiar entre ellas, usa los botones de la <a href="/en-US/docs/Tools/Performance/UI_Tour#Toolbar">barra de herramientas</a>.</p> + +<h3 id="Vista_en_cascada">Vista en cascada</h3> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10929/perf-waterfall.png" style="display: block; height: 568px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Para aprender mas sobre la <a href="/en-US/docs/Tools/Performance/Waterfall">vista en cascada</a> puedes visitar su entrada.</p> + +<h3 id="Árbol_de_llamadas">Árbol de llamadas</h3> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10949/perf-call-tree.png" style="display: block; height: 384px; margin-left: auto; margin-right: auto; width: 972px;"><br> + Para aprender mas sobre el <a href="/en-US/docs/Tools/Performance/Call_Tree">árbol de llamadas</a> puedes visitar su entrada.</p> + +<h3 id="Gráfico_de_llama">Gráfico de llama</h3> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10933/perf-flame-chart.png" style="display: block; height: 504px; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>Para aprender mas sobre el <a href="/en-US/docs/Tools/Performance/Flame_Chart">gráfico de llama</a> puedes visitar su entrada.</p> + +<h3 id="Asignaciones">Asignaciones</h3> + +<div class="geckoVersionNote"> +<p>La vista de Asignaciones es nueva en Firefox 46.</p> +</div> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12413/allocations-view-1.png" style="display: block; margin-left: auto; margin-right: auto; width: 972px;"></p> + +<p>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.</p> + +<p>{{EmbedYouTube("Le9tTo7bqts")}}</p> + +<p>Para aprender mas sobre las <a href="/en-US/docs/Tools/Performance/Allocations">Asignaciones</a> puedes visitar su entrada.</p> 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 +--- +<div class="geckoVersionNote"> + <p>El editor de audio web es nuevo en Firefox 32.</p> +</div> +<p>Con la <a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">API de Audio Web</a>, los desarrolladores crean un <a href="/en-US/docs/Web/API/AudioContext">contexto de audio</a>. Dentro de ese contexto construyen un número de <a href="/en-US/docs/Web/API/AudioNode">nodos de audio</a>, incluyendo:</p> +<ul> + <li>nodos que proporcionan la <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_sources">fuente del audio</a>, como un oscilador o una fuente de buffer de datos</li> + <li>nodos que realizan <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_effects_filters">transformaciones</a> como delay y ganancia</li> + <li>nodos que representan el <a href="/en-US/docs/Web/API/Web_Audio_API#Defining_audio_destinations">destino del flujo de audio</a>, como los altavoces</li> +</ul> +<p>Cada nodo tiene cero o más propiedades <code><a href="/en-US/docs/Web/API/AudioParam">AudioParam</a></code> que configuran su operación. Por ejemplo, <code><a href="/en-US/docs/Web/API/GainNode">GainNode</a></code> tiene solamente la propiedad <code>gain</code>, mientras que <a href="/en-US/docs/Web/API/OscillatorNode"><code>OscillatorNode</code></a> tiene las propiedades <code>frequency</code> y <code>detune</code>.</p> +<p>El desarrollador conecta los nodos en un gráfico y ese gráfico completo define el comportamiento del flujo de audio.</p> +<p>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 <code>AudioParam</code> para cada nodo del gráfico. Algunas propiedades no-<code>AudioParam</code>, como una propiedad <code>OscillatorNode</code>'s <code>type</code> son mostradas y también se pueden editar.</p> +<p>Esta herramienta todavía es experimental. Si encuentra errores, nos encantaría que los <a class="external external-icon" href="https://bugzilla.mozilla.org/enter_bug.cgi?product=Firefox&component=Developer%20Tools%3A%20Web%20Audio%20Editor">informe en Bugzilla</a>. Si tiene alguna opinión o sugerencias para nuevas funcionalidades, <a href="http://ffdevtools.uservoice.com/forums/246087-firefox-developer-tools-ideas">ffdevtools.uservoice.com</a> o <a href="http://twitter.com/firefoxdevtools">Twitter</a> son lugares excelentes para registrarlas.</p> +<h2 id="Abriendo_el_editor_de_audio_web">Abriendo el editor de audio web</h2> +<p>El editor de audio web no está habilitado por defecto en Firefox 32. Para habilitarlo, abra la <a href="/es/docs/Tools/Tools_Toolbox#Configuraciones">Configuración de herramientas de desarrollador</a> y marque "Audio web". Ahora debería haber una pestaña extra en la <a href="/es/docs/Tools/Tools_Toolbox#Barra_de_herramientas">Barra de herramientas</a> llamada "Audio web". Haga clic en esa pestaña y cargue una página que construya un contexto de audio. Dos demos interesantes son:</p> +<ul> + <li><a href="https://github.com/mdn/voice-change-o-matic">Voice-change-O-Matic</a>, puede aplicar varios efectos a la entrada de micrófono y también muestra una visualización del resultado</li> + <li><a href="http://mdn.github.io/violent-theremin/">Violent Theremin</a>, cambia el tono y el volumen de una onda sinusoidal al mover el puntero del mouse</li> +</ul> +<h2 id="Visualizando_el_gráfico">Visualizando el gráfico</h2> +<p>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:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7941/web-audio-editor-graph.png" style="display: block; margin-left: auto; margin-right: auto;">Se puede ver que usa tres nodos: un <a href="/en-US/docs/Web/API/OscillatorNode"><code>OscillatorNode</code></a> como fuente, un <a href="/en-US/docs/Web/API/GainNode"><code>GainNode</code></a> para controlar el volumen y un <a href="/en-US/docs/Web/API/AudioDestinationNode"><code>AudioDestinationNode</code></a> como destino.</p> +<h2 id="Inspeccionando_y_modificando_AudioNodes">Inspeccionando y modificando AudioNodes</h2> +<p>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 <code>AudioParam</code>. Por ejemplo, así se ve el OscillatorNode:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/7943/web-audio-editor-inspect-node.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p> +<p>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.</p> 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 +--- +<p>El editor de estilo te permite:</p> + +<ul> + <li>ver y editar todas las hojas de estilo asociadas con una página</li> + <li>crear nuevas hojas de estilo desde bosquejos y aplicarlas a una página</li> + <li>importar hojas de estilo existentes y aplicarlas en la página</li> +</ul> + +<p>{{EmbedYouTube("7839qc55r7o")}}</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6941/style-editor.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>El Editor de Estilo está divivido en dos secciones principales: el panel de estilos en la izquierda y el editor en la derecha.</p> + +<div class="geckoVersionNote"> +<p>From Firefox 33 onwards, there's a third component to the Style Editor: <a href="/en-US/docs/Tools/Style_Editor#The_media_sidebar">the media sidebar</a>.</p> +</div> + +<h2 id="El_panel_de_hojas_de_estilo">El panel de hojas de estilo</h2> + +<p>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.</p> + +<h2 id="El_panel_de_edición">El panel de edición</h2> + +<p>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.</p> + +<p><span style="line-height: 1.5;">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 </span><a href="/en-US/docs/Tools/Style_Editor#Source_editor_shortcuts" style="line-height: 1.5;">keyboard shortcuts</a><span style="line-height: 1.5;">.</span></p> + +<p>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.</p> + +<p>El Editor de Estilos soporta autocompletado. Empiece escribiendo y el sistema le ofrecerá una lista de sugerencias.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6943/style-editor-autocomplete.png" style="display: block; margin-left: auto; margin-right: auto;">Puede deshabilitar el autocompletado en <a href="/en-US/docs/Tools_Toolbox#Style_Editor">Style Editor settings</a>.</p> + +<h2 id="La_barra_lateral_media">La barra lateral "media"</h2> + +<p>A partir de Firefox 33 en adelante, el Editor de Estilos muestra una barra lateral a la derecha cuando se encuentra alguna regla @media (<a href="/en-US/docs/Web/Guide/CSS/Media_queries"><code>@media</code> rules</a>). 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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8365/style-editor-media-sidebar-detail.png" style="display: block; margin-left: auto; margin-right: auto;">La barra lateral de medios funciona especialmente bien con <a href="https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_View">Responsive Design View</a> para crear y depurar diseños móviles :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8363/style-editor-media-sidebar.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Creación_e_importación_de_hojas_de_estilo">Creación e importación de hojas de estilo</h2> + +<p>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.</p> + +<p>Se puede cargar una hoja de estilos desde el disco y aplicarlo a la página haciendo click en el boton de importar.</p> + +<h2 id="Soporte_de_mapa_fuente">Soporte de mapa fuente</h2> + +<p>{{EmbedYouTube("zu2eZbYtEUQ")}}</p> + +<p>Los desarrolladores web, con frecuencia crean archivos CSS utilizando un preprocesador como <a href="http://sass-lang.com/">Sass</a>, <a href="http://lesscss.org/">Less</a>, o <a href="http://learnboost.github.io/stylus/">Stylus</a>. 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 <span class="short_text" id="result_box" lang="es"><span>sintaxis</span> <span>preprocesado</span></span>, 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.</p> + +<p>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 .</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6939/style-editor-sourcemap-820.png" style="display: block; margin-left: auto; margin-right: auto;">Para que esto funcione ,es necesario:</p> + +<ul> + <li>utilizar un preprocesador CSS que interprete <a href="https://docs.google.com/document/d/1U1RGAehQwRypUTovF1KRlpiOFze0b-_2gc6fAH0KY0k/edit">Source Map Revision 3 proposal</a>. Actualmente esto significa <a href="http://sass-lang.com/">Sass 3.3.0 </a> o superior , o la <a href="http://roots.io/using-less-source-maps/">versión 1.5.0 de Less</a>. Otros preprocesadores están trabajando activamente en añadir soporte, o lo están considerando.</li> + <li>actualmente el preprocesador da instrucciones para generar un mapa fuente, por ejemplo pasando el argumento <code>--sourcemap</code> a la herramienta de comando en linea de Sass.</li> +</ul> + +<h3 id="Visualización_de_las_fuentes_originales">Visualización de las fuentes originales</h3> + +<p>Ahora, si compruebas "mostrar fuentes originales" en los <a href="/en-US/docs/Tools_Toolbox#Style_Editor">ajustes del Editor de estilos</a>, el vínculo junto a las reglas CSS en la <a href="/en-US/docs/Tools/Page_Inspector#Rules_view">Vista de Reglas</a> ,vincula con las fuentes originales en el Editor de Estilos.</p> + +<h3 id="Edición_de_las_fuentes_originales">Edición de las fuentes originales</h3> + +<p>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.</p> + +<p>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 <code>--watch</code> :</p> + +<pre>sass index.scss:index.css --sourcemap --watch</pre> + +<p>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.</p> + +<p>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.</p> + +<h2 id="Atajos_de_Teclado">Atajos de Teclado</h2> + +<h3 id="Atajos_del_editor_de_código_fuente">Atajos del editor de código fuente</h3> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<p>{{ languages( { "ja": "ja/Tools/Style_Editor"} ) }}</p> 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 +--- +<div>{{ToolsSidebar}}</div> +<div class="summary"><span class="seoSummary">Examina, edita y depura HTML, CSS y JavaScript en el ordenador y en el móvil</span></div> + +<div class="column-container zone-callout"><a href="https://www.mozilla.org/en-US/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Instala Firefox Developer Edition</a> + +<h3 id="What's_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">¿Qué hay de nuevo en Firefox Developer Edition?</h3> + +<p><a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a> 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 (<a href="/en-US/Firefox/Developer_Edition">Firefox Developer Edition</a>) incluye estos cambios en las herramientas de desarrollador:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Server">Registro del servidor en la Consola Web</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">Busqueda rápida de la regla sobre escrita en la declaración del CSS</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">"Usar en Consola" en el item de menu contextual en el Inspector</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Strict_search">Opción "estricto" para filtrado en las reglas de la vista</a></li> + <li><a href="/en-US/docs/Tools/Web_Console/Console_messages#Network">Entradas de red en la Consola ahora enlaza al Monitor de Red</a></li> + <li><span class="author-g-1scq3ywqbljc5puc">Nueva barra lateral UI para WebIDE</span></li> +</ul> +</div> + +<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: #81BC2E; white-space: nowrap; color: white; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.2), 0px -1px 0px 0px rgba(0, 0, 0, 0.3) inset;">Comparte tus ideas</a> + +<h3 id="Share_your_ideas" name="Share_your_ideas">Comparte tus ideas</h3> + +<p>Pregunte por las nuevas propiedades en las herramientas de desarrollador o vote por las ideas que otros desarrolladores están solicitando.</p> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10529/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p> + +<div class="column-container"> +<div class="column-half"> +<h2 id="Creating" name="Creating">Creando</h2> + +<p>Herramientas de autorización para sitios web y aplicaciones web.</p> + +<dl> + <dt><a href="https://developer.mozilla.org/en-US/docs/Tools/Scratchpad">Scratchpad</a></dt> + <dd>Un editor construido dentro de Firefox que te permite escribir y ejecutar JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Style_Editor">Editor de estilos</a></dt> + <dd>Revisa y edita estilos CSS para la página actual.</dd> + <dt><a href="/en-US/docs/Tools/Shader_Editor">Editor de sombras</a></dt> + <dd>Revisa y edita los vertex y fragmentos de sombras usado por <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd> + <dt><a href="/en-US/docs/Tools/Web_Audio_Editor">Editor de audio web</a></dt> + <dd>Examina el gráfico de los nodos de audio en un contexto de audio y modifica sus parámetros.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Exploring" name="Exploring">Explorando y depurando</h2> + +<p>Examina, explora y depura sitios web y aplicaciones web.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Web_Console">Consola Web</a></dt> + <dd>Mira mensajes de registro (logs) en una página web e interactua con la página usando JavaScript.</dd> + <dt><a href="/en-US/docs/Tools/Page_Inspector">Inspector de página</a></dt> + <dd>Revisa y modifica el HTML y CSS de la página.</dd> + <dt><a href="/en-US/docs/Tools/Debugger">Depurador JavaScript</a></dt> + <dd>Deten, ve paso a paso, examina y modifica el JavaScript que está ejecuntandose in una página.</dd> + <dt><a href="/en-US/docs/Tools/Network_Monitor">Monitor de red</a></dt> + <dd>Mira las solicitudes de red hechas cuando una página está cargada.</dd> + <dt><a href="/en-US/docs/Tools/Storage_Inspector">Inspector de almacenamiento</a></dt> + <dd>Inspecciona cookies, almacenamiento local, Inspect cookies, local storage, indexedDB y almacenamiento de session presente en una página.</dd> + <dt><a href="/en-US/docs/Tools/GCLI">Barra de desarrollador</a></dt> + <dd>Una interface de linea de comandos para el desarrollador.</dd> + <dt><a href="/en-US/docs/Tools/3D_View">Vista 3D</a></dt> + <dd>Visualization 3D de la página.</dd> + <dt><a href="/en-US/docs/Tools/Eyedropper">Eyedropper</a></dt> + <dd>Selecciona un color de la página.</dd> + <dt><a href="/en-US/docs/Tools/Working_with_iframes">Trabajando con iframes</a></dt> + <dd>Como seleccionar un iframe en particular.</dd> +</dl> +</div> +</div> + +<hr> +<div class="column-container"> +<div class="column-half"> +<h2 id="Mobile" name="Mobile">Móvil</h2> + +<p>Herramientas para desarrollo móvil.</p> + +<dl> + <dt><a href="/en-US/Firefox_OS/Using_the_App_Manager">Administrador de aplicaciones</a></dt> + <dd>El administrador de aplicaciones ha sido reemplazado por <a href="/en-US/docs/Tools/WebIDE">WebIDE</a>.</dd> + <dt><a href="/en-US/docs/Tools/WebIDE">WebIDE</a></dt> + <dd>El reemplazo para el App Manager, disponible desde Firefox 33 en adelante.</dd> + <dt><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Simulador de Firefox OS</a></dt> + <dd>Corre y depura tu aplicación de Firefox OS en el escritorio, sin necesidad de un dispositivo Firefox OS real.</dd> + <dt><a href="https://developer.mozilla.org/en-us/docs/Tools/Responsive_Design_View">Responsive Design View</a></dt> + <dd>Mira como tu sitio o aplicación se verá en diferentes pantallas sin cambiar el tamaño de la ventana del navegador.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Depurando Firefox para Android</a></dt> + <dd>Conecta las herramientas de desarrollador a Firefox para Android.</dd> + <dt><a href="/en-US/docs/Tools/Remote_Debugging/Debugging_Firefox_for_Android_with_WebIDE">Depurando Firefox para Android con WebIDE</a></dt> + <dd>Para Desktop Firefox 36+ / Android Firefox 35+, existe un proceso más sencillo.</dd> + <dt><a href="/en-US/docs/Tools/Valence">Valence</a></dt> + <dd>Conecta las herramientas de desarrollo de Chrome con Android y Safari en iOS</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Performance" name="Performance">Rendimiento</h2> + +<p>Diagnostica y arregla problemas de rendimiento.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Performance">Performance tool</a></dt> + <dd>Analiza la capacidad de respuesta de tu sitio web, del JavaScript y el rendimiento del diseño.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Frame_rate">Frame rate graph</a></dt> + <dd>Revisa la velocidad de frames de tu sitio web.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Waterfall">Waterfall</a></dt> + <dd>Averigua como esta funcionando tu sito web en el navegador.</dd> + <dt><a href="/en-US/docs/Tools/Performance/Call_Tree">Call Tree</a></dt> + <dd>Averigua donde está el codigo JavaScript perdiendo el tiempo.</dd> +</dl> + +<dl> + <dt><a href="/en-US/docs/Tools/Performance/Flame_Chart">Flame Chart</a></dt> + <dd>Muestra las funciones que están en la cola de trabajo a lo largo de un perfil.</dd> + <dt><a href="/en-US/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt> + <dd>Resalta las partes de la página que son repintadas en respuesta a eventos.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt> + <dd>Ver eventos en la consola web de reflujo.</dd> + <dt><a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt> + <dd>Muestra cuanto tardan en cargar las partes de tu sitio web.</dd> +</dl> +</div> +</div> + +<hr> + + + + +<div class="column-container"> +<div class="column-half"> +<h2 id="Debugging_the_browser" name="Debugging_the_browser">Depuración del navegador</h2> + +<p>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.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Browser_Console">Browser Console</a></dt> + <dd>See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.</dd> + <dt><a href="/en-US/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt> + <dd>Attach the Developer Tools to the browser itself.</dd> +</dl> +</div> + +<div class="column-half"> +<h2 id="Extending_the_devtools" name="Extending_the_devtools">Extending the devtools</h2> + +<p>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.</p> + +<dl> + <dt><a href="/en-US/docs/Tools/Adding_a_panel_to_the_toolbox">Add a new panel to the devtools</a></dt> + <dd>Write an add-on that adds a new panel to the Toolbox.</dd> + <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt> + <dd>The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.</dd> + <dt><a href="/en-US/docs/Tools/Editor">Source Editor</a></dt> + <dd>A code editor built into Firefox that can be embedded in your add-on.</dd> + <dt><a href="/en-US/docs/Tools/Debugger-API">The <code>Debugger</code> Interface</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Tools/Web_Console/Custom_output">Web Console custom output</a></dt> + <dd>How to extend and customize the output of the <a href="/en-US/docs/Tools/Web_Console">Web Console</a> and the <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd> + <dt><a href="/en-US/docs/Tools/Example_add-ons">Example devtools add-ons</a></dt> + <dd>Use these examples to understand how to implement a devtools add-on.</dd> +</dl> +</div> +</div> + +<hr> +<h2 id="More_resources" name="More_resources">Más recursos</h2> + +<p>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 <a href="https://addons.mozilla.org/es/firefox/extensions/web-development/">"Desarrollo web" en addons.mozilla.org</a>.</p> + +<div class="column-container"> +<div class="column-half"> +<dl> + <dt><a href="https://www.getfirebug.com/">Firebug</a></dt> + <dd>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.</dd> + <dt><a href="/en-US/docs/Tools/Add-ons/DOM_Inspector">DOM Inspector</a></dt> + <dd>Inspecciona, busca y edita los DOM de las páginas web o las ventanas XUL.</dd> + <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt> + <dd>Añade un menú y una barra de herramientas al navegador con varias utilidades para el desarrollo web.</dd> +</dl> +</div> + +<div class="column-half"> +<dl> + <dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt> + <dd>Un conjunto de utilidades creadas por Mozilla, enfocadas para la gente que empieza con el desarrollo Web.</dd> + <dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt> + <dd>La web del W3C alberga herramientas para comprobar y validar su sitio web, incluyendo su HTML y CSS.</dd> + <dt><a href="http://www.jshint.com/">JSHint</a></dt> + <dd>Herramienta para el análisis del código JavaScript.</dd> +</dl> +</div> +</div> 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 +--- +<p>El monitor de red muestra todas las solicitudes de red que Firefox realiza (por ejemplo, cuando carga una página, o debido a <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequests</a>), 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".</p> + +<p>El monitor de red aparecerá al final de la ventana de navegación. Recargue la página para ver las solicitudes:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7405/nm-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Lista_de_Solicitudes_de_Red">Lista de Solicitudes de Red</h2> + +<p>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:<br> + <img alt="" src="https://mdn.mozillademos.org/files/7419/nm-row.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Tools_Toolbox#Common_preferences">Herramientas</a>.</p> + +<h3 id="Area_de_Solicitudes_de_Red">Area de Solicitudes de Red</h3> + +<p>Cada fila muestra:</p> + +<ul> + <li><strong>√</strong>: El código HTTP retornado. Este es mostrado por un ícono a colores: Verde para correcto (Códigos 2XX ), naranja para redirección (3XX), o rojo para errores (4XX and 5XX). Desde Firefox 30 en adelante, el código exacto es mostrado inmediatamente después del ícono.</li> + <li><strong>Método</strong>: El método de Solicitud HTTP</li> + <li><strong>Archivo</strong>: Nombre base del archivo solicitado.</li> + <li><strong>Dominio</strong>: Dominio del path solicitado.</li> + <li><strong>Tipo</strong>: <code>Content-type</code> de la respuesta</li> + <li><strong>Tamaño</strong>: Tamaño de la respuesta</li> +</ul> + +<p>La barra de herramientas en la parte superior etiqueta estas columnas, y hacer click en las etiquetas ordena todas las solicitudes por esa columna.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7403/nm-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Linea_de_Tiempo">Linea de Tiempo</h3> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Tools/Network_Monitor#Timings">Tiempos</a>.</p> + +<h3 id="Filtrando_por_tipo_de_Contenido">Filtrando por tipo de Contenido</h3> + +<p>Al final de la ventana una fila de botones le permite a ud. filtrar las solicitudes por el tipo de contenido de la respuesta:<img alt="" src="https://mdn.mozillademos.org/files/7395/nm-filter-by-type.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>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.</p> + +<h3 id="Menu_Contextual">Menu Contextual</h3> + +<p>Haciendo click en una fila de la lista muestra un menú contextual con las siguientes opciones:</p> + +<ul> + <li>Abrir en nueva pestaña</li> + <li>Copiar URL</li> + <li>Copiar como cURL (solo desde Firefox 31 en adelante)</li> + <li>Copiar imagen como Data URI (solo para imágenes)</li> + <li>Editar y Reenviar</li> + <li>Comenzar <a href="/en-US/docs/Tools/Network_Monitor#Performance_analysis">Análisis de Performance</a> para la página</li> +</ul> + +<h4 id="Editar_y_Reenviar">Editar y Reenviar</h4> + +<p>Esta opción abre un editor que le permite editar el método de Solicitud, URL, parámetros, y cabeceras, y reenviar la solicitud.</p> + +<h4 id="Copiar_como_cURL">Copiar como cURL</h4> + +<div class="geckoVersionNote"> +<p>Esta característica es nueva en Firefox 31.</p> +</div> + +<p>Esta opción copia la solicitud de red al portapapeles como un comando <a href="http://curl.haxx.se/">cURL</a>, de manera que ud. pueda ejectutarlo desde una línea de comandos. El comando puede incluir las siguientes opciones:</p> + +<table class="standard-table"> + <tbody> + <tr> + <td><code>-X [METODO]</code></td> + <td>Si el método no es GET o POST</td> + </tr> + <tr> + <td><code>--data</code></td> + <td>Para parámetros de solicitud URL encodeados</td> + </tr> + <tr> + <td><code>--data-binary</code></td> + <td>Para parámetros de solicitud multiparte</td> + </tr> + <tr> + <td><code>--http/VERSION</code></td> + <td>Si la versión de HTTP no es 1.1</td> + </tr> + <tr> + <td><code>-I</code></td> + <td>Si el método no es HEAD</td> + </tr> + <tr> + <td><code>-H</code></td> + <td> + <p>Uno para cada encabezado de solicitud.</p> + + <p>Deesde Firefox 34, si el encabezado "Accept-Encoding" está presente, el comando cURL incluirá <code>--compressed</code> en vez de <code>-H "Accept-Encoding: gzip, deflate"</code>. Esto significa que la respuesta será automáticamente descomprimida.</p> + </td> + </tr> + </tbody> +</table> + +<h2 id="Detalles_de_Solicitud_de_red">Detalles de Solicitud de red</h2> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7393/nm-details-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">Las pestañas de la parte superior de este panel le permiten cambiar entre 5 diferentes páginas:</p> + +<ul> + <li><strong>Encabezados</strong></li> + <li><strong>Cookies</strong></li> + <li><strong>Parámetros</strong></li> + <li><strong>Respuestas</strong></li> + <li><strong>Tiempos</strong></li> +</ul> + +<p>Desde Firefox 30 en adelante, hay una sexta página que aparece solamente si el tipo de contenido es HTML, la página de <strong>Vista Preliminar</strong>.</p> + +<p>Hacer click en el ícono de la izquierda de las pestañas cierra el panel y vuelve a la vista de lista.</p> + +<h3 id="Encabezados">Encabezados</h3> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7397/nm-headers.png" style="display: block; margin-left: auto; margin-right: auto;">Ud. puede filtrar las encabezados que se muestran:</p> + +<h3 id="Cookies"><img alt="" src="https://mdn.mozillademos.org/files/7399/nm-headers-filtered.png" style="display: block; margin-left: auto; margin-right: auto;">Cookies</h3> + +<p>Esta pestaña lista detalles completos de cualquier cookie que fue enviada con la solicitud o respuesta:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7391/nm-cookies.png" style="display: block; margin-left: auto; margin-right: auto;">Al igual que con los encabezados, ud. puede filtrar las cookies que se muestran.</p> + +<h3 id="Parametros">Parametros</h3> + +<p>Esta pestaña muestra los parámetros GET y datos POST de una solicitud:</p> + +<h3 id="Respuesta"><img alt="" src="https://mdn.mozillademos.org/files/7407/nm-params.png" style="display: block; margin-left: auto; margin-right: auto;">Respuesta</h3> + +<p>El contenido completo de la respuesta. Si la respuesta es HTML, JS o CSS, será mostrada como texto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7413/nm-response-html.png" style="display: block; margin-left: auto; margin-right: auto;">Si la respuesta es JSON, será mostrada como un objeto inspeccionable:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7421/nm-response-json.png" style="display: block; margin-left: auto; margin-right: auto;">Si la respuesta es una imagen, la pestaña muestra una vista preliminar:</p> + +<h3 id="Tiempos"><img alt="" src="https://mdn.mozillademos.org/files/7415/nm-response-image.png" style="display: block; margin-left: auto; margin-right: auto;">Tiempos</h3> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7417/nm-timings.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Vista_Preliminar">Vista Preliminar</h3> + +<div class="geckoVersionNote"> +<p>Esta caracteristica es nueva en Firefox 30.</p> +</div> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7401/nm-html-preview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Análisis_de_Rendimiento">Análisis de Rendimiento</h2> + +<div class="geckoVersionNote"> +<p>La herramienta de análisis de rendimiento es nueva en Firefox 29.</p> +</div> + +<p>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.<br> + <br> + 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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7411/nm-performance-button.png" style="display: block; margin-left: auto; margin-right: auto;">(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.)</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7409/nm-performance.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p> + +<p>Para volver a la lista de Solicitudes de Red del Monitor de Red haga click en el botón "Volver" en la izquierda.</p> + +<p>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 <a href="/en-US/docs/Tools/Network_Monitor#Filtering_by_content_type">solo este tipo de recurso</a>.</p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">Este articulo explica como usar el 3er panel del modo inspector.</p> + +<h2 id="Feature_summary">Feature summary</h2> + +<p>Desde Firefox 62 en adelante, el <a href="/en-US/docs/Tools/Page_Inspector">Inspector de página</a> tieen un nuevo modo disponible— <strong>modo 3er-Panel</strong>. cuando este es activado, te permitira ver en simultaneo lo siguiente:</p> + +<ul> + <li>El <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">panel HTML</a> al costado izquierdo, como es usual.</li> + <li>Las <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">reglas CSS</a> en un panel diferente en la partecentral, es mas como una pestaña.</li> + <li>Las otras caracteristicas relacionadas a CSS — como la <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">vista de estilos computados</a>, <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations">vista de animaciones</a>, y <a href="/en-US/docs/Tools/Page_Inspector/How_to/View_fonts">vista de fuentes</a> — en la pstaña derecha, como es usual.</li> +</ul> + +<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: En tamaños de pantalla mas reducidos, las pestañas apareceran bajo el panel de Reglas CSS.</p> +</div> + +<p>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.</p> + +<h2 id="A_brief_walkthrough">A brief walkthrough</h2> + +<p>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.</p> + +<p><img alt="a view of the tabs panel, showing the 2 to 3 pane toggle icon" src="https://mdn.mozillademos.org/files/15937/toggle-icon-final.png" style="display: block; height: 241px; margin: 0px auto; width: 410px;"></p> + +<p>presionando el toggle podras cambiar de la vista de 2 a 3 paneles.</p> + +<p><img alt="The firefox page inspector in 2 pane mode, with HTML pane on left and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15936/2-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 1195px;"></p> + +<p><img alt="The firefox page inspector in 3 pane mode, with HTML pane on left, CSS rules pane in center, and CSS tool tabs on right" src="https://mdn.mozillademos.org/files/15935/3-pane-view-final.png" style="border-style: solid; border-width: 1px; display: block; height: 259px; margin: 0px auto; width: 1195px;"></p> + +<p>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 <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">Rejilla CSS </a>y ver inmediatamente los cambios en el <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Inspector de rejilla</a>.</p> + +<p>{{EmbedYouTube("ELS2OOUvxIw")}}</p> + +<h2 id="Habilitando_el_inspector_de_3_paneles_en_versiones_anteriores_a_Firefox_62">Habilitando el inspector de 3 paneles en versiones anteriores a Firefox 62</h2> + +<p>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 <code>true</code>:</p> + +<p><code>devtools.inspector.split-rule-enabled</code> — esto cambia el modo de 3 paneles de on a off.</p> + +<p><code>devtools.inspector.split-sidebar-toggle</code> — esto añade el boton a la UI.</p> + +<p>en Firefox 61, estas preferencias se renombran como:</p> + +<ul> + <li><code>devtools.inspector.three-pane-enabled</code></li> + <li><code>devtools.inspector.three-pane-toggle</code></li> +</ul> + +<p>debes pasar estas dos a <code>true</code> en el Beta para probar las caracteristicas enFirefox 61.</p> + +<div class="note"> +<p><strong>Nota</strong>: El inspector de 3 paneles esta disponible en la edicion Nightly/Developer desde Firefox 62.</p> +</div> 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 +--- +<p>Hay dos maneras básicas para abrir el Inspector:</p> + +<ul> + <li><em>Si no tenemos seleccionado ningun elemento:</em> desde la barra de menú "Herramientas -> Desarrollador Web -> Inspector" ; o utilizando un <a href="https://developer.mozilla.org/es/docs/tools/Keyboard_shortcuts#Opening_and_closing_tools">atajo de teclado</a> equivalente</li> + <li> + <p><em>Si tenemos seleccionado un elemento: haz click derecho en un elemento de la página web y selecciona </em> "Inspeccionar elemento"</p> + </li> +</ul> + +<p>El Inspector aparecerá en la parte inferior de la ventana del navegador:</p> + +<p><img alt="The all-new Inspector in Firefox 57 DevTools." src="https://mdn.mozillademos.org/files/15493/57-inspector-starfish.png" style="display: block; height: 647px; margin-left: auto; margin-right: auto; width: 845px;">Para empezar a aprender sobre el Inspector ve al <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/UI_Tour"> Tour por la UI</a>.</p> 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 +--- +<h2 id="Visualización_del_modelo_de_caja">Visualización del modelo de caja</h2> + +<p>Con el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">botón Seleccionar elemento</a> pulsado, si se pasa el ratón por encima de un elemento en la página, el <a href="/es/docs/Web/CSS/box_model">modelo de caja</a> para ese elemento se muestra superpuesto en la página:</p> + +<p>{{EmbedYouTube("vDRzN-svJHQ")}}</p> + +<p>También se muestra superpuesto en la página si en el panel HTML ponemos el cursor sobre la marca de un elemento :</p> + +<p>{{EmbedYouTube("xA4IxTttNLk")}}</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/10349/inline-box-model.png" style="display: block; height: 186px; margin-left: auto; margin-right: auto; width: 351px;"></p> + +<h3 id="Vista_Modelo_de_Caja">Vista Modelo de Caja</h3> + +<p>Cuando se selecciona un elemento, podemos obtener una vista detallada del modelo de caja en dos de las vistas del panel CCS: <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Calculado</a> y Disposición:</p> + +<ul> + <li>en la vista Calculado aparece en primer término, seguido de la sección con el listado de reglas que se aplican al elemento;</li> + <li>en la vista Disposición está en segundo término, detrás de la sección 'Rejilla' y seguido de la sección Propiedades del modelo de caja (box-sizing, display, float, line-height, position y z-index) indicando sus valores</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14241/box-model.png" style="display: block; height: 232px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14243/box-model-tooltip.png" style="display: block; height: 234px; margin-left: auto; margin-right: auto; width: 620px;"></p> + +<p>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):</p> + +<p>{{EmbedYouTube("H3ZxRbbyfwI")}}</p> + +<h2 id="Edición_del_modelo_de_caja">Edición del modelo de caja</h2> + +<p>También podemos editar los valores en la <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model#The_Box_Model_view">Vista Modelo de Caja</a>: hacer clic sobre un valor permite editarlo y ver los resultados inmediatamente en la página:</p> + +<p>{{EmbedYouTube("gHjDjM8GJ9I")}}</p> 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 +--- +<p>Puedes examinar y editar el HTML de la página en el <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a>.</p> + +<h2 id="Navegar_en_HTML">Navegar en HTML</h2> + +<h3 id="HTML_breadcrumbs_(migas_de_pan)">HTML breadcrumbs (migas de pan)</h3> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15499/57-html-panel.png" style="display: block; height: 274px; margin-left: auto; margin-right: auto; width: 633px;"></p> + +<p>Pasar el ratón sobre cada miguita de pan destaca ese elemento de la página.</p> + +<p>La barra breadcrumbs tiene sus propios <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/Keyboard_shortcuts#Breadcrumbs_bar">atajos de teclado</a>.</p> + +<div class="note"> +<p>Ten en cuenta que antes de Firefox 48, esta barra de herramientas estaba en la parte superior del panel HTML.</p> +</div> + +<h3 id="Buscar">Buscar</h3> + +<p>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.</p> + +<p>Para empezar a buscar un marcador, haz clic en el cuadro de búsqueda para expandirlo o presiona <kbd>Ctrl</kbd> + <kbd>F</kbd> , o <kbd>Cmd</kbd> + <kbd>F</kbd> en Mac.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15495/html-code-search.png" style="display: block; height: 398px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>Presiona <kbd>Up</kbd> y <kbd>Down</kbd> para desplazarte por las sugerencias, <kbd>Tab</kbd> para elegir la sugerencia actual y entonces <kbd>Enter</kbd> para seleccionar el primer nodo con ese atributo.</p> + +<p>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.</p> + +<p>{{EmbedYouTube("AKBhnfp1Opo")}}</p> + +<p>Para desplazarte por las sugerencias presiona <kbd>Enter</kbd> . A partir de Firefox 48 es posible el desplazamiento hacia atrás con <kbd>Shift</kbd> + <kbd>Enter</kbd> .</p> + +<h3 id="Árbol_HTML">Árbol HTML</h3> + +<p>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 <kbd>Alt</kbd> mientras haces clic en la flecha, se desplegará el nodo y todos los nodos situados debajo de él.</p> + +<p><img alt="The new Firefox 57 inspector HTML tree." src="https://mdn.mozillademos.org/files/15503/57-html-tree.png" style="display: block; height: 433px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<p>Mover el ratón sobre un nodo del árbol destaca el elemento en la página.</p> + +<p>Los nodos no-visibles se representan descoloridos o desaturados. La invisibilidad puede deberse a razones diversas, entre ellas el uso de <code><a href="/es/docs/Web/CSS/display">display: none</a></code>, o que el elemento no tenga ninguna dimensión.</p> + +<p>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: <img alt="" src="https://mdn.mozillademos.org/files/14925/child-node-indicator.png" style="height: 24px; width: 32px;"></p> + +<div class="note"> +<p><strong>Nota</strong>: Hay atajos de teclado útiles para usar en el árbol HTML — ve a la <a href="/es/docs/Tools/Keyboard_shortcuts#HTML_pane">lista de atajos de teclado del panel HTML</a>.</p> +</div> + +<h3 id="before_y_after">::before y ::after</h3> + +<p>Desde Firefox 35 en adelante, puede inspeccionar los pseudoelementos añadidos usando {{cssxref("::before")}} y {{cssxref("::after")}}:</p> + +<p>{{EmbedYouTube("ecfqTGvzsNc")}}</p> + +<h3 id="Whitespace-only_text_nodes">Whitespace-only text nodes</h3> + +<div class="geckoVersionNote">Nuevo en Firefox 52</div> + +<p>Los desarrolladores web no escriben todo su código en una sola línea de texto. Introducen espacios en blanco con <kbd>Space</kbd> , <kbd>Return</kbd> , y <kbd>Tab</kbd> entre sus elementos HTML para que el marcado sea más legible.</p> + +<p>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.</p> + +<p>Si estos nodos de texto generados automáticamente están <a href="https://developer.mozilla.org/es/docs/Web/Guide/CSS/Visual_formatting_model#Inline-level_elements_and_inline_boxes">inline level</a>, 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.</p> + +<p>Desde Firefox 52, el Inspector muestra los nodos whitespace para que puedas saber de dónde vienen los huecos en su marcado.</p> + +<p>Los nodos Whitespace se representan con un punto: <img alt="" src="https://mdn.mozillademos.org/files/14931/new-whitespace-text-indicator.png" style="height: 23px; width: 30px;"> y cuando pasas el ratón sobre ellos muestra un tooltip explicativo</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14929/whitespace-text-nodes-2.png" style="display: block; height: 1010px; margin-left: auto; margin-right: auto; width: 912px;"></p> + +<p>Para ver esto en la práctica ve a la demo en <a href="https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html">https://mdn.github.io/devtools-examples/whitespace-only-demo/index.html</a>.</p> + +<h2 id="Elemento_menú_contextual_emergente">Elemento: menú contextual emergente</h2> + +<p>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")}}:</p> + +<ul> + <li><a href="#Edit as HTML">Editar como HTML</a></li> + <li><a href="#Create New Node">Crear nodo nuevo</a></li> + <li><a href="#Duplicate Node">Duplicar nodo</a></li> + <li><a href="#Delete Node">Eliminar nodo</a></li> + <li>Atributos + <ul> + <li><a href="#Attribute/Add Attribute">Añadir atributo</a></li> + <li><a href="#Attribute/Copy Attribute">Copiar valor del atributo</a></li> + <li><a href="#Attribute/Edit Attribute">Editar atributo</a></li> + <li><a href="#Attribute/Remove Attribute">Eliminar atributo</a></li> + </ul> + </li> + <li><a href="#:hover">:hover</a></li> + <li><a href="#:active">:active</a></li> + <li><a href="#:focus">:focus</a></li> + <li>Copiar + <ul> + <li><a href="#Copy Inner HTML">HTML interno</a></li> + <li><a href="#Copy Outer HTML">HTML externo</a></li> + <li><a href="#Copy Unique Selector">Selector CSS</a></li> + <li><a href="#Copy CSS Path">Ruta CSS</a></li> + <li><a href="#Copy XPath">XPath</a></li> + <li><a href="#Copy Image Data-URL">Data-URL de imagen</a></li> + </ul> + </li> + <li>Pegar + <ul> + <li><a href="#Paste Inner HTML">HTML interno</a></li> + <li><a href="#Paste Outer HTML">HTML externo</a></li> + <li><a href="#Paste/Before">Antes</a></li> + <li><a href="#Paste/After">Detrás</a></li> + <li><a href="#Paste/As First Child">Como primer hijo</a></li> + <li><a href="#Paste/As Last Child">Como último hijo</a></li> + </ul> + </li> + <li><a href="#Expand All">Expandir todo</a></li> + <li><a href="#Collapse">Contraer todo</a></li> + <li><a href="#Scroll Into View">Desplazarse a la vista</a></li> + <li><a href="#Screenshot Node">Obtener instantanea del nodo</a></li> + <li><a href="#Use in Console">Usar en consola</a></li> + <li><a href="#Show DOM Properties">Mostrar propiedades del DOM</a></li> + <li><a href="#Open Link in New Tab">Abrir enlace en una pestaña nueva</a> *</li> + <li><a href="#Open File in Debugger">Abrir archivo en depurador</a> *</li> + <li><a href="#Open File in Style-Editor">Abrir archivo en editor de estilos</a> *</li> + <li><a href="#Copy Link Address">Copiar la ruta del enlace</a> *</li> +</ul> + +<p>* 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.</p> + +<h3 id="Context_menu_reference">Context menu reference</h3> + +<div class="note"> +<p><strong>Nota</strong>: 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</p> +</div> + +<table class="standard-table"> + <tbody> + <tr> + <td style="width: 30%;"><a id="Edit as HTML">Edit as /en-US/docs/HTML</a></td> + <td> + <p><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Editing_HTML">Editar el HTML del elemento</a></p> + </td> + </tr> + <tr> + <td><a id="Copy Inner HTML">(Copy) Inner HTML</a></td> + <td>Copiar el HTML interno para el elemento.</td> + </tr> + <tr> + <td><a id="Copy Outer HTML">(Copy) Outer HTML</a></td> + <td> + <p>Copiar el HTML externo para el elemento.</p> + + <p>Presione <kbd>Ctrl</kbd> + <kbd>C</kbd> (o <kbd>Cmd</kbd> + <kbd>C</kbd> en Mac) realiza la misma acción.</p> + </td> + </tr> + <tr> + <td><a id="Copy Unique Selector">(Copy) Unique Selector/CSS Selector</a></td> + <td>Copiar el selector CSS que selecciona únicamente el elemento</td> + </tr> + <tr> + <td><a id="Copy CSS Path">(Copy) CSS Path</a></td> + <td>Copiar el selector CSS que representa la ruta completa al elemento.</td> + </tr> + <tr> + <td><a id="Copy Image Data-URL">(Copy) Image Data-URL</a></td> + <td>Copiar imagen como data:// URL, l elemento selecionado es una imagen</td> + </tr> + <tr> + <td><a id="Copy Attribute">(Copy) Attribute</a></td> + <td> + <p>Copiar el atributo del elemento.</p> + </td> + </tr> + <tr> + <td><a id="Show DOM Properties">Show DOM P/en-US/docs/roperties</a></td> + <td>Abrir la <a href="/es/docs/Tools/Web_Console#The_split_console">split console</a> e introducir el comando "<code>inspect($0)</code>" para <a href="/en-US/docs/Tools/Web_Console#Inspecting_objects">inspect</a> el elemento actualmente selecionado.</td> + </tr> + <tr> + <td><a id="Use in Console">Use in Console</a></td> + <td> + <div class="geckoVersionNote"> + <p>Nuevo en Firefox 43<a href="/en-US/docs/">(Copy) Image Data-URL (Copy) Attribute </a></p> + </div> + Asigna el nodo actualmente seleccionado a una variable llamada <code>temp0</code> (o <code>temp1</code> si <code>temp0</code> esta ya asignado, y así sucesivamente), entonces abre la <a href="/es/docs/Tools/Web_Console#The_split_console">split console</a>,que le permite interactuar con ese nodo utilizando la línea de comandos de la consola.</td> + </tr> + <tr> + <td><a id="Expand All">Expand All</a></td> + <td> + <div class="geckoVersionNote"> + <p>Nuevo en Firefox 44</p> + </div> + En la vista de árbol, expande el elemento actual y todos los elementos debajo de él. Esto equivale a mantener presionada la tecla <kbd>Alt</kbd> y hacer clic en el triángulo antes del elemento.</td> + </tr> + <tr> + <td><a id="Collapse">Collapse</a></td> + <td> + <div class="geckoVersionNote"> + <p>Nuevo en Firefox 44</p> + </div> + 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.</td> + </tr> + <tr> + <td><a id="Paste Inner HTML">(Paste) Inner HTML</a></td> + <td>Pegar el contenido del portapapeles en el nodo como su <a href="/es/docs/Web/API/element.innerHTML">HTML interno</a>.</td> + </tr> + <tr> + <td><a id="Paste Outer HTML">(Paste) Outer HTML</a></td> + <td>Pegar el contenido del portapapeles en el nodo como su <a href="/es/docs/Web/API/element.outerHTML">HTML externo</a>.</td> + </tr> + <tr> + <td><a id="Paste/Before">(Paste) Before</a></td> + <td>Pegar el contenido del portapapeles en el documento inmediatamente antes de este nodo</td> + </tr> + <tr> + <td><a id="Paste/After">(Paste) After</a></td> + <td>Pegar el contenido del portapapeles en el documento inmediatamente después de este nodo</td> + </tr> + <tr> + <td><a id="Paste/As First Child">(Paste) As First Child</a></td> + <td>Pegar el contenido del portapapeles en el documento como primerdescendiente de este nodo</td> + </tr> + <tr> + <td><a id="Paste/As Last Child">(Paste) As Last Child</a></td> + <td>Pegar el contenido del portapapeles en el documento como último descendiente de este nodo</td> + </tr> + <tr> + <td><a id="Scroll Into View">Scroll Into View</a></td> + <td> + <p>Desplazamiento en la página web para que el nodo seleccionado sea visible.</p> + + <p>Desde Firefox 44, pulsando el atajo de teclado <kbd>S</kbd> también sirve para desplazarse en la página hasta que el nodo seleccionado está a la vista.</p> + </td> + </tr> + <tr> + <td><a id="Screenshot Node">Screenshot Node</a></td> + <td>Hace una captura del nodo seleccionado y la guarda en tu directorio de Descargas. Ver <a href="/es/docs/Tools/Taking_screenshots">Taking screenshots</a>.</td> + </tr> + <tr> + <td><a id="Create New Node">Create New Node</a></td> + <td>Crea un nuevo elemento <div> como último descendiente del elemento actualmente seleccionado. Ver <a href="#Inserting_new_nodes">Inserting new nodes</a>.</td> + </tr> + <tr> + <td><a id="Duplicate Node">Duplicate Node</a></td> + <td> + <div class="geckoVersionNote"> + <p>Nuevo en Firefox 44</p> + </div> + + <p>Crear una copia de este elemento e insertarla inmediatamente antes de este elemento.</p> + </td> + </tr> + <tr> + <td><a id="Delete Node">Delete Node</a></td> + <td>Elimina el elemento del DOM.</td> + </tr> + <tr> + <td><a id="Attribute/Add Attribute">Attribute/Add Attribute</a></td> + <td> + <div class="geckoVersionNote"> + <p>Nuevo en Firefox 44</p> + </div> + Añade un atributo al elemento.</td> + </tr> + <tr> + <td><a id="Attribute/Edit Attribute">Attribute/Edit Attribute</a></td> + <td> + <div class="geckoVersionNote"> + <p>Nuevo en Firefox 44</p> + </div> + (solo cuando se invoca en un atributo) Editar el atributo.</td> + </tr> + <tr> + <td><a id="Attribute/Remove Attribute">Attribute/Remove Attribute</a></td> + <td> + <div class="geckoVersionNote"> + <p>Nuevo en Firefox 44</p> + </div> + (solo cuando se invoca en un atributo) Suprimir el atributo.</td> + </tr> + <tr> + <td><a id="Open Link in New Tab">Open Link in New Tab</a></td> + <td>(solo cuando se invoca sobre un enlace como atributo href) Abrir el item enlazado en una nueva pestaña.</td> + </tr> + <tr> + <td><a id="Open File in Debugger">Open File in Debugger</a></td> + <td>(solo cuando se invoca sobre un enlace a un archivo de código JS) Abrir el archivo enlazado en el depurador.</td> + </tr> + <tr> + <td><a id="Open File in Style-Editor">Open File in Style-Editor</a></td> + <td>(solo cuando se invoca sobre un enlace a un archivo de código CSS) Abrir el archivo CSS enlazado en un editor de estilos</td> + </tr> + <tr> + <td><a id="Copy Link Address">Copy Link Address</a></td> + <td>(solo cuando se invoca en una URL) Copiar la URL.</td> + </tr> + <tr> + <td><a id=":hover">:hover</a></td> + <td>Selecciona la pseudoclase CSS <a href="/en-US/docs/Web/CSS/:hover" title="/es/docs/Web/CSS/:hover">:hover</a></td> + </tr> + <tr> + <td><a id=":active">:active</a></td> + <td>Selecciona la pseudoclase CSS <a href="/en-US/docs/Web/CSS/:active" title="/es/docs/Web/CSS/:active">:active</a></td> + </tr> + <tr> + <td><a id=":focus">:focus</a></td> + <td>Selecciona la pseudoclase CSS <a href="/en-US/docs/Web/CSS/:focus" title="/es/docs/Web/CSS/:focus">:focus</a> CSS</td> + </tr> + </tbody> +</table> + +<h2 id="Editar_HTML">Editar HTML</h2> + +<p> </p> + +<p>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 <kbd>Enter</kbd> para ver los cambios reflejados inmediatamente.</p> + +<p>Para editar el HTML externo de un elemento (<a href="/es/docs/Web/API/Element.outerHTML">HTML externo</a>), activa el menú emergente del elemento y selecciona "Editar como HTML". Verás un cuadro de texto en el panel HTML:</p> + +<p><img alt="Edit HTML directly in the Inspector panel in Firefox 57" src="https://mdn.mozillademos.org/files/15505/57-edit-as-html.png" style="display: block; height: 332px; margin-left: auto; margin-right: auto; width: 600px;"></p> + +<p>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.</p> + +<p>A partir de Firefox 52, si estás editando HTML, el menú contextual que verás es el habitual al trabajar con texto editable:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h3 id="Copiar_y_pegar">Copiar y pegar</h3> + +<p>Puedes usar el <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menú emergente</a> desplegable para copiar nodos en el árbol HTML y pegarlos en la ubicación deseada.</p> + +<h3 id="Arrastrar_y_Soltar_(Drag_and_drop)">Arrastrar y Soltar (Drag and drop)</h3> + +<p>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:</p> + +<p>{{EmbedYouTube("oI-a035nfWk")}}</p> + +<p>A partir de Firefox 44, puedes cancelar el arrastrar y soltar pulsando la tecla <kbd>Esc</kbd> .</p> + +<h3 id="Insertar_nuevos_nodos">Insertar nuevos nodos</h3> + +<div class="geckoVersionNote">Nuevo en Firefox 48</div> + +<p>A partir de Firefox 48, hay un icono "+" en la parte superior de la vista de marcado:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13082/inspector-insert-node.png" style="display: block; height: 337px; margin-left: auto; margin-right: auto; width: 547px;"></p> + +<p>Haz clic en este icono para insertar un <code><a href="/es/docs/Web/HTML/Element/div"><div></a></code> 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.</p> + +<p>{{EmbedYouTube("NG5daffvVZM")}}</p> + +<p>Puedes acceder a la misma funcionalidad utilizando el menú desplegable "Crear nuevo nodo".</p> + +<p>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 <code><a href="/es/docs/Web/HTML/Element/html"><html></a></code> o <code><a href="/es/docs/Web/HTML/Element/iframe"><iframe></a></code>). Sin embargo, está habilitado en lugares donde no es válido insertar <code><div></code>, como <code><a href="/es/docs/Web/HTML/Element/style"><style></a></code> o <code><a href="/es/docs/Web/HTML/Element/link"><link></a></code>. En estos casos, el elemento se añade como texto.</p> 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 +--- +<p>Puedes examinar y editar CSS en el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a> del Inspector.</p> + +<h2 id="Examinar_reglas_CSS">Examinar reglas CSS</h2> + +<p>La <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Vista reglas</a> muestra la lista de todas las reglas que se aplican al elemento seleccionado, ordenadas de más específicas a menos específicas:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11203/css-overview.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>La vista Reglas muestra la lista de estilos aplicados por el navegador o <a href="/es/docs/Web/CSS/Cascade">estilos de agente de usuario</a> si la opción para hacerlo está seleccionada en la <a href="/es/docs/Tools/Tools_Toolbox#Settings_2">configuración de las herramienta del desarrollador</a>. Ten en cuenta que esta configuración es independiente de la casilla de verificación "Estilos de navegador" de la <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Vista calculado</a>.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/12189/css-as-authored.png" style="display: block; height: 357px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Visualización_de_Reglas">Visualización de Reglas</h3> + +<p>Muestra cada regla como en una hoja de estilo, con una lista de selectores seguida de una lista de declaraciones con forma <code>property:value;</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11635/css-rule-anatomy.png" style="display: block; height: 488px; margin-left: auto; margin-right: auto; width: 650px;"></p> + +<ul> + <li><em>Resaltar elementos coincidentes: </em>: al lado del selector hay un icono de target: haz clic en él para resaltar todos los nodos de la página que coincidan con este selector.</li> + <li><em>Declaración anulada:</em>: las declaraciones anuladas por normas posteriores se tachan. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">declaraciones anuladas</a>.</li> + <li><em>Mostrar cascada:</em>: junto a las declaraciones anuladas hay una lupa: haz clic aquí para ver la cascada de reglas que contienen la propiedad anulada. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Overridden_declarations">declaraciones anuladas</a>.</li> + <li><em>Activar/desactivar:</em>: si pasas el cursor sobre una declaración, aparece una casilla de selección junto a ella: se puede utilizar para activar o desactivar la declaración.</li> + <li><em>Nombre de archivo y número de línea:</em>: en el lado derecho hay un enlace a la regla. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">enlace al archivo CSS</a>.</li> +</ul> + +<p>Desde Firefox 52, si el elemento tiene una declaración <code><a href="https://developer.mozilla.org/es/docs/Web/CSS/display">display: grid</a></code>, entonces aparece a su lado un icono grid así: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">. 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 <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examinar grid layouts</a> para obtener más información al respecto.</p> + +<p>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 <code>(agente de usuario)</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11207/css-user-agent.png" style="display: block; height: 118px; margin-left: auto; margin-right: auto; width: 585px;"></p> + +<h3 id="Regla_element">Regla element {}</h3> + +<p>La regla <code>element {}</code> 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")}}.</p> + +<p>A partir de Firefox 52, también se muestra el icono de target:: <img alt="" src="https://mdn.mozillademos.org/files/14520/target-icon.png" style="height: 22px; margin-bottom: -5px; width: 22px;">, que ofrece una forma cómoda de resaltar el elemento seleccionado en la página.</p> + +<p>{{EmbedYouTube("bQzOAFvEDco")}}</p> + +<h3 id="Reglas_de_filtrado">Reglas de filtrado</h3> + +<p>Hay un campo en la parte superior de la vista Reglas, llamado "Filtrar Estilos":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11195/css-filter-annotated.png" style="display: block; height: 264px; margin-left: auto; margin-right: auto; width: 606px;"> A medida que escribes:</p> + +<ul> + <li>Cualquier regla que no contenga la cadena mecanografiada queda oculta.</li> + <li>Se resaltan las declaraciones que contengan la cadena mecanografiada.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11197/css-filtered.png" style="display: block; height: 382px; margin-left: auto; margin-right: auto; width: 588px;">Para eliminar el filtro haz clic en la "X" al final del cuadro de búsqueda.</p> + +<div class="note"> +<p>En la vista Reglas, presionar <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> focaliza el campo de búsqueda. Una vez que has escrito un filtro, puedes presionar <kbd>Esc</kbd> para quitarlo de nuevo.</p> +</div> + +<p>{{EmbedYouTube("9w8vDIWqnAE")}}</p> + +<h4 id="Búsqueda_estricta">Búsqueda estricta</h4> + +<p>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 <code><a href="/es/docs/Web/CSS/border-bottom-color">border-bottom-color</a></code> y <code><a href="/es/docs/Web/CSS/background-color">background-color</a></code> así como <code><a href="/es/docs/Web/CSS/color">color</a></code>.:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11625/css-search-not-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>Si la consulta de búsqueda se encierra entre comillas de este modo: `color` se limita la búsqueda a las coincidencias exactas:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11627/css-search-strict.png" style="display: block; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h3 id="Expandir_las_propiedades_shorthand">Expandir las propiedades shorthand</h3> + +<p>Las <a href="/es/docs/Web/CSS/Shorthand_properties">propiedades Shorthand</a> (abreviadas) se pueden expandir para mostrar las características correspondientes en forma larga haciendo click en la flecha junto a ellas.</p> + +<h3 id="Mostrar_pseudo-elementos">Mostrar pseudo-elementos</h3> + +<p>La vista Regla muestra los siguientes <a href="/es/docs/Web/CSS/Pseudo-elements">pseudo-elementos</a>, en caso de que se apliquen al elemento seleccionado</p> + +<p><code>::after<br> + ::backdrop</code><br> + <code>::before<br> + ::first-letter<br> + ::first-line<br> + ::selection<br> + :-moz-color-swatch<br> + :-moz-number-spin-box<br> + :-moz-number-spin-down<br> + :-moz-number-spin-up<br> + :-moz-number-text<br> + :-moz-number-wrapper<br> + :-moz-placeholder<br> + :-moz-progress-bar<br> + :-moz-range-progress<br> + :-moz-range-thumb<br> + :-moz-range-track<br> + :-moz-selection</code></p> + +<p>Si el elemento seleccionado tiene pseudo-elementos aplicados, se muestran delante del elemento seleccionado pero ocultos por un triángulo:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11225/css-pseudo-collapsed.png" style="display: block; height: 304px; margin-left: auto; margin-right: auto; width: 626px;"></p> + +<p>Haciendo clic en el triángulo se muestran:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11227/css-pseudo-expanded.png" style="display: block; height: 371px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<h3 id="Setting_hover_active_focus">Setting :hover, :active, :focus</h3> + +<p>A la derecha del campo Filtrar hay un botón:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11199/css-lock-hover-1.png" style="display: block; height: 510px; margin-left: auto; margin-right: auto; width: 597px;">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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11201/css-lock-hover-2.png" style="display: block; height: 732px; margin-left: auto; margin-right: auto; width: 588px;">También puedes acceder a esta función desde el <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML#Element_popup_menu">menú contextual emergente</a> de la vista HTML.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11637/css-pseudo-class.png" style="display: block; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<h3 id="Enlazar_al_archivo_CSS">Enlazar al archivo CSS</h3> + +<p>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 <a href="/es/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Editor de estilos</a>.</p> + +<p>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".</p> + +<p>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 <a href="/es/docs/Tools_Toolbox#Style_Editor">Configuración del editor de estilos</a>, 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 <a href="/es/docs/Tools/Style_Editor#Source_map_support">Documentación del editor de estilos</a>.</p> + +<h3 id="Declaraciones_anuladas">Declaraciones anuladas</h3> + +<p>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.</p> + +<p>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.</p> + +<p>Esto facilita ver qué regla prevalece sobre la declaración</p> + +<p>{{EmbedYouTube("i9mDVjJAGwQ")}}</p> + +<h2 id="Examinar_CSS_calculado">Examinar CSS calculado</h2> + +<p>Para ver todas las reglas CSS que se calculan para el elemento seleccionado cambia a la <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Vista calculado</a>.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 :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11209/css-computed.png" style="display: block; height: 566px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>Puedes usar la tecla <kbd>Tab</kbd> para seleccionarlos moviéndote través de ellos. Desde Firefox 49 en adelante, puedes encontrar más información sobre estas propiedades: si pulsas <kbd>F1</kbd> en una propiedad seleccionada se abrirá su página de referencia MDN</p> + +<p>Haciendo clic en la flecha situada junto al nombre de la propiedad (o pulsando <kbd>Enter</kbd> o <kbd>Space</kbd> 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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11211/css-computed-expanded.png" style="display: block; height: 484px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>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 <kbd>Tab</kbd> para moverte a través de los nombres de archivo/números de línea; y pulsando <kbd>Enter</kbd>/<kbd>Return</kbd> Enter/Return se abrirá el archivo en ese punto en el <a href="/es/docs/Tools/Style_Editor">Editor de estilos</a>.</p> + +<p>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.</p> + +<div class="note"> +<p>En la vista calculado, puedes presionar <kbd>Ctrl</kbd> / <kbd>Cmd</kbd> + <kbd>F</kbd> para enfocar el campo de búsqueda. Una vez que hayas escrito un filtro, presiona <kbd>Esc</kbd> para quitarlo.</p> +</div> + +<h2 id="Editar_reglas">Editar reglas</h2> + +<p>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 <kbd>Tab</kbd> para desplazarte por las diferentes propiedades y valores existentes, y empezar a editarlos pulsando <kbd>Enter</kbd> o <kbd>Space</kbd>. 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).</p> + +<p>A medida que comiences a escribir un nombre de propiedad, verás una lista de sugerencias autocompletadas. Presiona <kbd>Tab</kbd> para aceptar la sugerencia actual o <kbd>Up</kbd> y <kbd>Down</kbd> 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":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/13080/css-autocomplete.png" style="display: block; height: 401px; margin-left: auto; margin-right: auto; width: 587px;"></p> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: Desde Firefox 60 en adelante, los <a href="https://developer.mozilla.org/es/docs/Web/CSS/Using_CSS_variables"> nombres de variables CSS</a> también se completarán automáticamente (ver {{bug(1422635)}}). Si escribes <code>var(-</code> var(- seguido de un guión (<code>-</code>) como valor de una propiedad, cualquier variable que hayas declarado en tu CSS aparecerá en la lista de autocompletado.<br> + <br> + <img alt="" src="https://mdn.mozillademos.org/files/15813/css-variable-autocomplete.png" style="display: block; margin: 0 auto;"></p> +</div> + +<p>Cualquier cambio que hagas es temporal: recargar la página restaurará el estilo original.</p> + +<p>Puedes utilizar las teclas <kbd>Up</kbd> , <kbd>Down</kbd> y <kbd>Page up</kbd> , <kbd>Page down</kbd> (junto con otras) para aumentar/disminuir las reglas numéricas durante la edición:</p> + +<ul> + <li>La flecha <kbd>Up</kbd> incrementa los valores por 1 — "1px" pasará a "2px", por ejemplo.</li> + <li><kbd>Shift</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> incrementa los valores por 10.</li> + <li><kbd>Alt</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> incrementa los valores por 0.1. Ten en cuenta que en Firefox 60 esta combinación cambia a <kbd>Ctrl</kbd> + <kbd>Up</kbd>/<kbd>Down</kbd> en Linux y Windows para evitar conflictos con los atajos predeterminados del Sistema Operativo (ver {{bug("1413314")}}). En Mac se mantiene— <kbd>Ctrl</kbd> + <kbd>Up</kbd> ya que en macOS es el atajo predeterminado para mostrar el Control de Misión.</li> + <li><kbd>Shift</kbd> + <kbd>Page up</kbd>/<kbd>Page down</kbd> incrementa los valores por 100.</li> +</ul> + +<p>Los cambios que realices en la vista Reglas se reflejan en el <a href="/es/docs/Tools/Style_Editor">Editor de estilos</a>, y viceversa</p> + +<p>A partir de Firefox 52, si estás editando CSS, el menú contextual que verás es el normal para trabajar con texto editable:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14522/editable-context-menu.png" style="display: block; height: 241px; margin-left: auto; margin-right: auto; width: 200px;"></p> + +<h2 id="Añadir_reglas">Añadir reglas</h2> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11193/css-add-rule-menu.png" style="display: block; height: 734px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<p>También hay un botón que te posibilita hacer lo mismo:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11191/css-add-rule-button.png" style="display: block; height: 256px; margin-left: auto; margin-right: auto; width: 588px;"></p> + +<h2 id="Copiar_reglas">Copiar reglas</h2> + +<p>Para copiar reglas o partes de ellas usa uno de los items del siguiente menú contextual en la vista reglas</p> + +<ul> + <li>Copiar regla</li> + <li>Copiar selector</li> + <li>Copiar declaración de propiedad</li> + <li>Copiar nombre de la propiedad</li> + <li>Copiar valor de la propiedad</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11217/css-context-menu.png" style="display: block; height: 218px; margin-left: auto; margin-right: auto; width: 281px;"></p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li>Lista completa de los <a href="/es/docs/Tools/Page_Inspector/Keyboard_shortcuts">Atajos de teclado</a>.</li> + <li>El Inspector también tiene herramientas especializadas para trabajar con algunas características CSS como colores, fuentes y animaciones. Para leer más <a href="/es/docs/Tools/Page_Inspector">Guías how to</a>.</li> +</ul> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p class="summary">El <strong>Grid Inspector</strong> te permite examinar los <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layouts</a> usando las Firefox DevTools, descubrir las rejillas presentes en una página, examinarlas y modificarlas, depurando los problemas de layout, y más.</p> + +<div class="note"> +<p><strong>Nota</strong>: Los ejemplos mostrados en los screenshots aparecen el los articulos de Jen Simmons <a href="http://labs.jensimmons.com/2016/examples/futurismo-1.html">Futurismo</a> y <a href="http://labs.jensimmons.com/2017/01-003.html">Variations on a grid</a>, y un <a href="/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas#Naming_a_grid_area">live llamado grid area example</a> de Rachel Andrew.</p> +</div> + +<h2 id="Descubriendo_CSS_grids">Descubriendo CSS grids</h2> + +<p>Cuando un elemento HTML de tu página tiene <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> aplicado, un numero de nuevas opciones estan disponibles en las DevTools para proveer un acceso sencillo a las caracteristicas de la rejilla.</p> + +<h3 id="En_el_panel_HTML">En el panel HTML</h3> + +<p>En el <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a>, los elementos pertenecientes a la rejilla tienen un marker "grid" junto a ellos.</p> + +<p><img alt="The HTML pane of the Firefox devtools, showing an element annotated with a grid marker, meaning that it has display: grid set on it" src="https://mdn.mozillademos.org/files/15977/html-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 262px; margin: 0px auto; width: 400px;"></p> + +<h3 id="En_el_panel_CSS">En el panel CSS</h3> + +<p>En el <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a> veremos las reglas, cualquier instancia con <code><a href="/en-US/docs/Web/CSS/display">display: grid</a></code> declarado tendra un icono de rejilla como este: <img alt="" src="https://mdn.mozillademos.org/files/14524/Screen%20Shot%202016-12-16%20at%2010.51.15%20AM.png" style="height: 22px; margin-bottom: -5px; width: 22px;">.</p> + +<p><img alt="The CSS pane of the Firefox devtools, showing the CSS for a grid layout with a grid icon included next to display: grid" src="https://mdn.mozillademos.org/files/15978/css-pane.png" style="border-style: solid; border-width: 1px; display: block; height: 399px; margin: 0px auto; width: 1146px;"></p> + +<p>Al dar click en el icono la rejilla sera visible, y aparecera sobre los elemento, mostrando la posicion, lineas y tracks:</p> + +<p><img alt="A screenshot of the Firefox web browser, showing a colored overlay on top of a section of the page laid out like a grid " src="https://mdn.mozillademos.org/files/15979/grid-overlay.png" style="border-style: solid; border-width: 1px; display: block; height: 1383px; margin: 0px auto; width: 1842px;"></p> + +<p>La rejilla permanecera aun cuando selecciones otro elemento, puedes editar las propiedades CSS relacionadas y ver como esta es afectada.</p> + +<h3 id="La_vista_de_rejilla_en_la_seccion_disposición">La vista de rejilla en la seccion disposición</h3> + +<p>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.</p> + +<div class="note"> +<p><strong>Nota</strong>: 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.</p> +</div> + +<h2 id="Opciones_de_Rejilla">Opciones de Rejilla</h2> + +<p>La seccion Rejilla de la vista de disposicion; luce algo así:</p> + +<p><img alt="The grid options section of the Firefox devtools Layout view, showing multiple options for specifying how you want to see CSS grids displayed" src="https://mdn.mozillademos.org/files/15980/grid-options.png" style="border-style: solid; border-width: 1px; display: block; height: 408px; margin: 0px auto; width: 500px;"></p> + +<p>Encontraras algunas opciones dentro de este:</p> + +<ul> + <li>Superponer Rejilla: cuenta con un checkbox para cada una de las rejillas en la pagina, con varias opciones. permitiendo la vista sobrepuesta de estas, asi como activar o desactivar cada una de estas.</li> + <li>Configuracion de la rejilla : + <ul> + <li>Mostrar números de línea: marca cada linea mostrada en la parte superior e inferior.</li> + <li>Mostrar nombres de áreas: mostrara los nombres de las areas, en el caso de que la rejilla cuente con estas (por defecto encima, donde es relevante).</li> + <li>Extender líneas infinitamente: por defecto, las lineas de la rejilla/tracks son visibles solamente dentro del elemento con la propiedad <code>display: grid</code> en él; cuando activamos esta opción, las lineas de la rejilla se extenderan hasta el limite del viewport en ambos ejes</li> + </ul> + </li> + <li>Mini vista de Rejilla: Una vista miniatura de la rejilla activa.</li> +</ul> + +<div class="note"> +<p><strong>Nota</strong>: Tus preferencias de rejilla asi como al sobreposicion, color y configuracion de pantalla persistiran atravez de las paginas cargadas por separado.</p> +</div> + +<p>Examinemos estas carácteristicas más a detalle.</p> + +<h3 id="Superponer_Rejilla">Superponer Rejilla</h3> + +<p>Cada rejilla presente en tu pagina tiene su propia entrada en la sección "Superponer Rejilla":</p> + +<p><img alt="An entry for a single grid in the Overlay Grid section of the Grid options, showing a grid's name, overlay color, and more." src="https://mdn.mozillademos.org/files/15981/overlay-grid-entry.png" style="border-style: solid; border-width: 1px; display: block; height: 37px; margin: 0px auto; width: 300px;"></p> + +<p>Cada entrada consiste en (de izquierda a derecha):</p> + +<ul> + <li>Un checkbox que te permite activar y desactivar la sobreposicion de la rejilla. ten en cuenta que solo puedes ver una rejilla a la vez.</li> + <li>Una etiqueta que representa la rejilla, constando de un selector de un elemento HTML al cual le fue aplicada la propiedad rejilla. al dar click sobre esta tambien puedes activar o desactivar la superposición.</li> + <li>Un icono de objetivo que al momendo de dar click sobre él seleccionaras el elemento al que la rejilla esta asociada, dentro del panel HTML.</li> + <li>Un icono selector de color que te permitira cambiar el color primario de la rejilla superpuesta. Esto es sumamente util para seleccionar colores asi podras ver facilmente las secciones de tu rejilla.</li> +</ul> + +<h3 id="Mostrar_números_de_línea">Mostrar números de línea</h3> + +<p>Por defecto, los números de linea se muestran sobre la rejilla superpuesta.</p> + +<p><img alt="A CSS grid overlay with grid line numbers displayed" src="https://mdn.mozillademos.org/files/15982/line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 582px; margin: 0px auto; width: 600px;"></p> + +<p>Al desactivarla opcion "Mostrar números de línea" lucira así.</p> + +<p><img alt="A CSS grid overlay with grid line numbers not displayed" src="https://mdn.mozillademos.org/files/15983/no-line-numbers.png" style="border-style: solid; border-width: 1px; display: block; height: 580px; margin: 0px auto; width: 600px;"></p> + +<h3 id="Mostrar_nombres_de_áreas">Mostrar nombres de áreas</h3> + +<p>En una rejilla con areas nombradas, los nombres de area se mostraran superpuestos sobre la rejilla.</p> + +<p><img alt="A CSS grid overlay with named area names displayed" src="https://mdn.mozillademos.org/files/15984/grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 777px; margin: 0px auto; width: 1396px;"></p> + +<p>Al desactivar la opción "Mostrar nombres de áreas" lucira así.</p> + +<p><img alt="A CSS grid overlay with named area names not displayed" src="https://mdn.mozillademos.org/files/15990/no-grid-named-areas.png" style="border-style: solid; border-width: 1px; display: block; height: 788px; margin: 0px auto; width: 1400px;"></p> + +<h3 id="Extender_líneas_infinitamente">Extender líneas infinitamente</h3> + +<p>Por defecto, las lineas de rejilla/tracks se muestran solomente sobre el elemento con <code>display: grid</code>.</p> + +<p><img alt="A CSS grid overlay with grid lines not extended infinitely" src="https://mdn.mozillademos.org/files/15987/no-extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 499px; margin: 0px auto; width: 1000px;"></p> + +<p>Cuando activas la opcion "Extender líneas infinitamente", las lineas de la rejilla se extienden hasta el limite del viewport en ambos ejes.</p> + +<p><img alt="A CSS grid overlay with grid lines extended infinitely" src="https://mdn.mozillademos.org/files/15986/extend-lines.png" style="border-style: solid; border-width: 1px; display: block; height: 501px; margin: 0px auto; width: 1000px;"></p> + +<h3 id="Mini_vista_de_Rejilla">Mini vista de Rejilla</h3> + +<p>Muestra una version miniatura de la rejilla activa, con la misma proporcion que la real.</p> + +<p><img alt="A mini CSS grid view from the Firefox DevTools" src="https://mdn.mozillademos.org/files/15988/mini-grid-view.png" style="border-style: solid; border-width: 1px; display: block; height: 246px; margin: 0px auto; width: 600px;"></p> + +<p>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.</p> + +<p><img alt="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." src="https://mdn.mozillademos.org/files/15989/mini-grid-highlight.png" style="border-style: solid; border-width: 1px; display: block; height: 793px; margin: 0px auto; width: 1200px;"></p> + +<h2 id="Mira_tambien">Mira tambien</h2> + +<ul> + <li><a href="http://labs.jensimmons.com/">labs.jensimmons.com</a> — algunos ejercicios interesantes de rejillas.</li> + <li><a href="https://gridbyexample.com/">Grid by Example</a> — estudiando los recursos de CSS Grid de Rachel Andrew.</li> + <li><a href="/en-US/docs/Web/CSS/CSS_Grid_Layout">CSS Grid Layout</a> — MDN CSS Grid Layout rreferencias y tutoriales.</li> +</ul> 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 +--- +<p><span class="seoSummary">Links for various HOW TO's can be found here. These links describe in depth the HOW TO techniques.</span></p> + +<p>{{ ListSubpages () }}</p> + +<p> </p> 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 +--- +<p>En la <a href="/es/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Vista reglas</a> del panel CSS, si una regla contiene un valor de color, verás una muestra del color junto al valor:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> + +<p>Si haces clic en la muestra de color, verás una ventana emergente que te permite cambiar el color:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; height: 320px; margin-left: auto; margin-right: auto; width: 835px;"></p> + +<p>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:</p> + +<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<p>A partir de Firefox 40, al hacer clic en la muestra de color mientras mantienes pulsada la tecla <kbd>Shift</kbd>, cambiará el formato de color: hexadecimal, HSL y RGB</p> + +<p>{{EmbedYouTube("gYL8-gxc1MA")}}</p> + +<p>Firefox 53 y versiones más recientes son compatibles con los valores de <a href="https://drafts.csswg.org/css-color/">CSS color level 4</a>.</p> 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 +--- +<div class="geckoVersionNote">Novedades en Firefox 48</div> + +<p>A partir de Firefox 48 puede mover elementos con <code>position: absolute</code> arrastrándolos alrededor de la página.</p> + +<p>{{EmbedYouTube("Or5HM1FFhvE")}}</p> + +<p>Si un elemento tiene su propiedad <code>{{cssxref("position")}}</code> seteada en <code>absolute</code>, <code>relative</code> o <code>fixed</code> y una o más de las propiedades {{cssxref("top")}}, {{cssxref("bottom")}} , {{cssxref("left")}} or {{cssxref("right")}} , la <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Computed_view">Vista del modelo de caja</a> muestra un botón:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14245/box-model-reposition.png" style="display: block; height: 472px; margin-left: auto; margin-right: auto; width: 610px;"></p> + +<p>Si hace click en ese botón, aparecen dos identificadores junto al elemento:</p> + +<p><img alt="Example for changing the position of an element within the content" src="https://mdn.mozillademos.org/files/12986/in-content-box-model-editing.png" style="display: block; height: 215px; margin-left: auto; margin-right: auto; width: 388px;"></p> + +<p>Puede utilizar estos identificadores para arrastrar el elemento alrededor de la página.</p> + +<p>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.</p> 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 +--- +<p>Un <em>elemento seleccionado</em> es el elemento de la página en la que el Inspector está actualmente enfocado. El elemento seleccionado se ve en el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML</a> y su CSS en el <a href="/es/docs/Tools/Page_Inspector/UI_Tour#CSS_pane">panel CSS</a>.</p> + +<p>Un <em>elemento destacado</em> 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: </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/14516/inspector-highlighted.png" style="display: block; height: 779px; margin-left: auto; margin-right: auto; width: 1034px;"></p> + +<h2 id="Con_el_menú_contextual">Con el menú contextual</h2> + +<p>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.</p> + +<p>{{EmbedYouTube("db83PCnPiNM")}}</p> + +<h2 id="Con_el_panel_HTML">Con el panel HTML</h2> + +<p>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> + +</p><p>{{EmbedYouTube("EojH_vCMesI")}}</p> + +<p>También puedes utilizar las teclas de flecha para desplazarte por el DOM con el teclado: <kbd>flecha derecha</kbd> para expandir un elemento y acceder a los elementos descendientes;<br> <kbd>flecha izquierda</kbd> para contraer un elemento o subir al elemento ascendente; <br><kbd>flecha arriba</kbd> para recorrer hacia arriba las líneas del panel HTML <br> <kbd>flecha abajo</kbd> para recorrer hacia abajo las líneas del panel HTML.</p> + +<h2 id="Con_el_boton_seccionar_elemento">Con el boton seccionar elemento</h2> + +<p>Para seleccionar un elemento en la propia página, activa el "selector de elementos" haciendo clic en su icono <img alt="" src="https://mdn.mozillademos.org/files/14518/node-picker.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> (también llamado <em>Selector de nodos</em> o <em>Node picker</em>). 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:</p> + +<p>{{EmbedYouTube("Ss_fJz0zaxA")}}</p> + +<p>A partir de Firefox 52, si pulsas <kbd>Shift</kbd> + <kbd>Click</kbd> 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 .</p> 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 +--- +<p>Este artículo cubre tres herramientas que puede usar para visualizar y editar animaciones:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Animation_inspector">El inspector de animación</a></li> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_keyframes">Editor de @keyframes</a></li> + <li><a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations#Edit_timing_functions">Editor de funciones de tiempo</a></li> +</ul> + +<h2 id="Inspector_de_Animación">Inspector de Animación</h2> + +<div class="note"> +<p>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 <a href="/en-US/docs/Tools/Page_Inspector/How_to/Work_with_animations/Animation_inspector_(Firefox_41_and_42)">this separate page</a>.</p> +</div> + +<p>Desde Firefox 41, el Inspector de Página incluye una <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Animations_view">vista extra etiquetada "Animaciones"</a>.</p> + +<p>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.</p> + +<p>To see how it works, we'll walk through an example. The box below contains three grayscale icons, each representing a different <a href="https://www.mozilla.org/en-US/firefox/channel/">Firefox channel</a>. 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.</p> + +<p>{{ EmbedLiveSample('firefox-logo-animation', 500, 250, "", "Tools/Page_Inspector/How_to/Work_with_animations/Animations_examples") }}</p> + +<p>Let's use the animation inspector to see what's going on in this example.</p> + +<ul> + <li>Using Firefox 43 or later, right-click one of the icons and select "Inspect Element".</li> + <li>You'll probably also want to adjust the selected node up a level, to the <code><div class="channel"></code> node.</li> + <li>Switch over to the "Animations" tab.</li> +</ul> + +<p>{{EmbedYouTube("U2eJYacf5XY")}}</p> + +<p>Now play the animation:</p> + +<p>{{EmbedYouTube("CwXXXEllB3o")}}</p> + +<p>Let's take a closer look at the contents of the animation inspector here:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11929/animation-inspector-44.png" style="display: block; height: 181px; margin-left: auto; margin-right: auto; width: 643px;"></p> + +<p>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.</p> + +<p>Each animation or transition is shown as a horizontal bar laid across the timeline:</p> + +<ul> + <li>The bar is blue if a <code><a href="/en-US/docs/Web/CSS/transition">transition</a></code> was used to animate a property, and orange if a <a href="/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations"><code>@keyframes</code> animation</a> was used.</li> + <li>From Firefox 44 onwards, the bar contains a lightning bolt icon (<img alt="" src="https://mdn.mozillademos.org/files/11931/compositor-icon.png" style="height: 18px; width: 16px;">) if the property was animated using the compositor thread (see more about the <a href="/en-US/docs/Tools/Performance/Scenarios/Animating_CSS_properties#CSS_property_cost">cost of animating different CSS properties</a>).</li> + <li>The bar is labeled with the name of the property being animated or the name of the <code>@keyframes</code> animation.</li> + <li>If the animation or transition had a delay, this is shown as a cross-hatched portion of the bar.</li> + <li>If you hover over the bar, a tooltip appears, giving you more detailed information about the animation or transition.</li> +</ul> + +<p>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.</p> + +<p>To the left of the selector is a "target" icon (<img alt="" src="https://mdn.mozillademos.org/files/11919/target-icon.png" style="height: 16px; width: 15px;">). From Firefox 44, clicking this icon will lock the highlighter on the element.</p> + +<p>Applying all this to our example, we can see that:</p> + +<ul> + <li>The animation involved two elements, <code>span.channel-note</code> and <code>img#selected.channel-icon</code>. Hovering over these selectors, we can see that those elements are, respectively, the channel name "Firefox Nightly" and the channel icon: {{EmbedYouTube("EOUjHt0V1No")}}</li> + <li>Each element had two properties animated: + <ul> + <li><code><a href="/en-US/docs/Web/CSS/width">width</a></code> and <code><a href="/en-US/docs/Web/CSS/opacity">opacity</a></code> for the channel name</li> + <li><code><a href="/en-US/docs/Web/CSS/filter">filter</a></code> and <code><a href="/en-US/docs/Web/CSS/transform">transform</a></code> for the icon.<span style="display: none;"> </span><span style="display: none;"> </span><span style="display: none;"> </span></li> + </ul> + </li> + <li>The <code>filter</code> property had a delay of 0.25 seconds applied to it.</li> + <li>The <code>transform</code> property transition ends after 0.5 seconds.</li> + <li>The <code>transform</code> property was animated on the compositor thread.</li> +</ul> + +<h3 id="Animation_playback">Animation playback</h3> + +<p>At the top of the animation inspector:</p> + +<ul> + <li>there are buttons to play/pause and rewind the animation (new in Firefox 44)</li> + <li>the current time in the animation is displayed (new in Firefox 44).</li> +</ul> + +<p>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:</p> + +<p>{{EmbedYouTube("1hqNaMsB48g")}}</p> + +<h2 id="Edit_keyframes">Edit @keyframes</h2> + +<p>Any <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">@keyframes rules</a> associated with the currently selected element are displayed in the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Rules_view">Rules view</a> and are editable:</p> + +<p>{{EmbedYouTube("mDHtLK88ZW4")}}</p> + +<h2 id="Edit_timing_functions">Edit timing functions</h2> + +<p>When you <a href="/en-US/docs/Web/Guide/CSS/Using_CSS_animations">create a CSS animation</a> you can specify a <a href="/en-US/docs/Web/CSS/animation-timing-function">timing function</a>: this determines the rate at which the animation progresses. One way to specify the timing function is with a cubic Bézier curve.</p> + +<p>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 <a href="/en-US/docs/Web/CSS/timing-function#The_cubic-bezier()_class_of_timing-functions">P1 and P2</a>, and see the results in the page:</p> + +<p>{{EmbedYouTube("GW5-R2ewaqA")}}</p> + +<p>This feature uses open source code from <a href="http://cubic-bezier.com">Lea Verou’s cubic-bezier.com</a>.</p> + +<p>The cubic Bézier editor includes a number of presets, grouped under "Ease-in", "Ease-out", and "Ease-in-out":</p> + +<p>{{EmbedYouTube("Jx-J2Yy0aSg")}}</p> 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 +--- +<p>Utiliza el Inspector para examinar y modificar el HTML y CSS de una página.</p> + +<p>Puedes examinar las páginas cargadas en la copia local de Firefox o en un dispositivo remoto como Firefox para Android. Ver <a href="/es/docs/Tools/Remote_Debugging">depuración remota </a> para aprender a conectar las herramientas de desarrollo a un dispositivo remoto.</p> + +<hr> +<h2 id="Tour_por_la_UI">Tour por la UI</h2> + +<p>El <a href="/es/docs/Tools/Page_Inspector/UI_Tour">Tour por la UI</a> es un breve recorrido para aprender a usar el Inspector.</p> + +<hr> +<h2 id="How_to">How to</h2> + +<p>Para saber más sobre lo que puedes hacer con el Inspector, lee las siguientes guías:</p> + +<div class="twocolumns"> +<ul> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Open_the_Inspector">Abrir el Inspector</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">Examinar y editar HTML</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examinar y editar el modelo de cajas</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Inspect_and_select_colors">Inspeccionar y seleccionar colores </a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Reposition_elements_in_the_page">Reposicionar elementos en la página</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/View_fonts">Vista tipografía</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Visualize_transforms">Visualizar transformaciones</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_API">Usar la API del Inspector</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Select_an_element">Seleccionar un elemento</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_event_listeners">Examinar event listeners</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabajar con animaciones</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Edit_CSS_filters">Editar filtros CSS</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Edit_CSS_shapes">Editar figuras CSS </a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/View_background_images">Ver background images</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Use_the_Inspector_from_the_Web_Console">Usar el Inspector desde la Web Console</a></li> + <li><a href="/es/docs/Tools/Page_Inspector/How_to/Examine_grid_layouts">Examine CSS grid layouts</a></li> +</ul> +</div> + +<hr> +<h2 id="Referencia">Referencia</h2> + +<div class="twocolumns"> +<ul> + <li><a href="/es/docs/Tools/Page_Inspector/Keyboard_shortcuts">Atajos de teclado </a></li> + <li><a href="/es/docs/Tools/Tools_Toolbox#Inspector">Configuración</a></li> +</ul> +</div> + +<hr> +<h2 id="Abriendo_el_Inspector">Abriendo el Inspector</h2> + +<p>Hay varias formas de abrir el Inspector:</p> + +<ul> + <li>Elegir la opción de "Inspector" en el menú "Web Developer" (que es un submenú en el menú "Herramientas" en Mac)</li> + <li>Pulse Ctrl-Shift-C (Cmd + Opción + C en Mac OS X y Linux)</li> + <li>Haz clic derecho en un elemento de una página web y selecciona "Inspeccionar elemento"</li> +</ul> + +<p>La <a href="/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Caja de herramientas</a> aparecerá en la parte inferior de la ventana del navegador, con el Inspector activado.</p> + +<p>Si ha invocado el Inspector, haga clic en "Inspeccionar elemento", entonces ya estará seleccionado el elemento y el Inspector se mostrará y funcionará como lo hace en la <a href="#Selecting-Elements" title="#Selecting-Elements">"Selección de elementos"</a> abajo.</p> + +<p>De lo contrario, al mover el ratón por la página, el elemento bajo el puntero del ratón se resalta con un borde punteado y una anotación muestra su etiqueta HTML y cualquier atributo de clase o ID. Al mismo tiempo, se muestra la definición de HTML, en el contexto, en el panel de la izquierda del Inspector. Desde Firefox 30, también se muestran las líneas de cuadrícula para el elemento y su modelo de caja:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7459/inspector-opening.png" style="display: block; margin-left: auto; margin-right: auto;">Desde Firefox 32 la anotación también incluye el tamaño del elemento:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7901/inspector-annotation.png" style="display: block; margin-left: auto; margin-right: auto;">Al hacer clic en el elemento lo selecciona: Después de que hayas seleccionado un elemento, el Inspector se mostrará y funcionará como lo hace en la <a href="#Selecting-Elements" title="#Selecting-Elements">"Selección de elementos"</a> abajo.</p> + +<h2 id="Selección_de_elementos"><a name="Selecting-Elements">Selección de elementos</a></h2> + +<p>Cuando se selecciona un elemento, su marcado se resalta en el panel HTML a la izquierda del Inspector, y el panel de CSS a la derecha del Inspector muestra su información de estilo:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7465/inspector-selected-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>La linea de puntos alrededor del elemento de la página, y la anotación para ello, ya no se muestra una vez que un elemento ha sido seleccionado. Asimismo, el Inspector no está bloqueado en el elemento seleccionado: cuando se mueve el ratón alrededor de la marcación en el panel HTML, la linea punteada se muestra alrededor del elemento correspondiente. Para seleccionar un elemento diferente en la página web, haz clic en el botón "Seleccionar elemento", que aparece en la <a href="/en-US/docs/Tools_Toolbox#Toolbar">Caja de herramientas</a>.</p> + +<p>{{EmbedYouTube("zBYEg40ByCM")}}</p> + +<h3 id="Firefox_30_en_adelante">Firefox 30 en adelante</h3> + +<p>De Firefox 30, el comportamiento de la selección es el mismo que en Firefox 29, pero el inspector también muestra el modelo de caja y rejilla de líneas para los elementos en la página:</p> + +<p>{{EmbedYouTube("y2LcsxE2pR0")}}</p> + +<h3 id="Firefox_32_en_adelante">Firefox 32 en adelante</h3> + +<p>Tenga en cuenta que a partir de Firefox 32, el botón "Seleccionar elemento" está en el extremo izquierdo de la barra de herramientas:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7905/toolbar-fx32-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Menú_emergente_del_elemento"><a name="Element_popup_menu">Menú emergente del elemento </a></h2> + +<p>Puedes llevar a cabo ciertas tareas comunes en un nodo específico mediante un menú emergente. Para activar este menú contextual haz clic en el elemento, en el <a href="#HTML_pane">panel HTML</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7911/inspector-popup-menu.png" style="display: block; height: 380px; margin-left: auto; margin-right: auto; width: 605px;">El menú ofrece opciones para:</p> + +<ul> + <li><a href="#Editing_HTML">Modificar HTML del elemento.</a></li> + <li>Copiar el código HTML interno o externo para el elemento.</li> + <li>Copiar un selector CSS que selecciona únicamente el elemento.</li> + <li><span id="result_box" lang="es"><span class="hps">Pegar el contenido</span> <span class="hps">del portapapeles en</span> <span class="hps">el nodo</span> <span class="hps">como su</span> <span class="hps">outerHTML</span> <span class="atn hps">(</span><span>esto es nuevo</span> <span class="hps">en Firefox</span> <span class="hps">32</span><span>).</span></span></li> + <li><span class="short_text" id="result_box" lang="es"><span class="hps">Eliminar</span> <span class="hps">el elemento.</span></span></li> + <li> + <div class="almost_half_cell" id="gt-res-content"> + <div dir="ltr" style="zoom: 1;"><span class="short_text" id="result_box" lang="es"><span class="hps">Establecer el</span></span><a href="/en-US/docs/Web/CSS/:hover" title="/en-US/docs/Web/CSS/:hover"> :hover</a>, <a href="/en-US/docs/Web/CSS/:focus" title="/en-US/docs/Web/CSS/:focus">:focus</a>, y <a href="/en-US/docs/Web/CSS/:active" title="/en-US/docs/Web/CSS/:active">:active</a> CSS pseudo-classes.</div> + </div> + </li> +</ul> + +<h3 id="Copiar_imagen_como_URL_datos"><span class="short_text" id="result_box" lang="es"><span class="hps">Copiar imagen</span> <span class="hps">como URL</span> <span class="hps">datos</span></span></h3> + +<div class="almost_half_cell" id="gt-res-content"> +<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span class="hps">Desde</span> <span class="hps">Firefox</span> <span class="hps">29</span> <span class="hps">en adelante</span><span>, si el elemento</span> <span class="hps">seleccionado en ese momento</span> <span class="hps">es una imagen,</span> <span class="hps">a continuación,</span> <span class="hps">en el menú emergente</span> <span class="hps">incluye una opción para</span> <span class="hps">copiar la imagen</span> <span class="hps">en el portapapeles</span> <span class="hps">como una URL</span> <span class="hps">de datos</span><span>:</span></span></div> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7011/inspector-copyasdatauri.png" style="display: block; height: 282px; margin-left: auto; margin-right: auto; width: 529px;"></p> + +<h3 id="Edición_de_HTML"><a name="Editing_HTML">Edición de HTML</a></h3> + +<p><span class="short_text" id="result_box" lang="es"><span class="hps">Para editar</span> <span class="hps">un elemento</span> <span class="hps">de</span></span> <a href="/en-US/docs/Web/API/Element.outerHTML">outerHTML</a>, <span id="result_box" lang="es"><span class="hps">activar</span> <span class="hps">el menú emergente del</span> <span class="hps">elemento</span> <span class="atn hps">y seleccione "</span><span>Editar como</span> <span class="hps">HTML"</span><span>.</span> <span class="hps">Verá</span> <span class="hps">un cuadro de texto</span> <span class="hps">en el panel</span> <span class="hps">HTML</span></span>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7451/inspector-editHTML.png" style="display: block; height: 269px; margin-left: auto; margin-right: auto; width: 540px;"><span id="result_box" lang="es"><span class="hps">Puedes agregar cualquier</span> <span class="hps">código HTML</span> <span class="hps">aquí</span><span>: cambiar</span> <span class="hps">la etiqueta del elemento </span><span class="alt-edited">cambiando</span> <span class="hps">los elementos existentes</span><span>,</span> <span class="hps">o añadiendo otros nuevos</span><span>.</span> <span class="hps">Una vez que</span> <span class="hps">se hace clic</span> <span class="hps">fuera de la caja</span><span>, los cambios se</span> <span class="hps">aplican a la página</span></span>.</p> + +<h2 id="Panel_de_HTML"><a name="HTML_pane">Panel de HTML</a></h2> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7455/inspector-html-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"><span id="result_box" lang="es"><span class="hps">El panel de</span> <span class="hps">HTML, que</span> <span class="hps">muestra</span> <span class="hps">el HTML de</span> <span class="hps">la página como</span> <span class="hps">un árbol.</span> <span class="hps">Justo a la izquierda</span> <span class="hps">de cada</span> <span class="hps">nodo es</span> <span class="hps">una flecha</span><span>:</span> <span class="hps">Haz clic en la</span> <span class="hps">flecha para expandir</span> <span class="hps">el nodo.</span></span></p> + +<p><span id="result_box" lang="es"><span class="hps">Puedes editar el</span> <span class="hps">HTML -</span> <span class="hps">etiquetas</span><span>, atributos y</span> <span class="hps">contenido -</span> <span class="hps">directamente</span> <span class="hps">en este panel</span><span>:</span> <span class="hps">Haz clic en el</span> <span class="hps">elemento</span> <span class="hps">que deseas editar</span><span>,</span> <span class="hps">cambiar,</span> <span class="hps">y pulsa Enter</span> <span class="hps">para ver</span> <span class="hps">los</span> <span class="hps">cambios reflejados</span> <span class="hps">inmediatamente</span></span>.</p> + +<p><span id="result_box" lang="es"><span>Haciendo click en el contenido de</span><span> un</span> <span>elemento se muestra</span> <span>un</span></span> <a href="#Element_popup_menu">menu emergente para trabajar con ese elemento..</a><a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector#Element_popup_menu">.</a></p> + +<p><span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>31</span> <span>en adelante</span><span>,</span> <span>si se</span> <span>mantiene pulsada la tecla</span> <span>Alt</span> <span>mientras se hace clic</span> <span>en la flecha</span><span>, se expande</span> <span>el nodo y</span> <span>todos</span> <span>los</span> <span>nodos</span> <span>por debajo de ella</span><span>.</span></span></p> + +<p> <span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>32</span> <span>en adelante</span><span>, los nodos</span> <span>que están</span> <span>ocultos usando </span></span><a href="/en-US/docs/Web/CSS/display">display:none</a> se muestran descoloridos.</p> + +<h3 id="Barra_de_herramientas_del_panel_HTML"><span class="short_text" id="result_box" lang="es"><span>Barra de herramientas</span> <span>del panel</span> <span>HTML</span></span></h3> + +<p>Encima del panel , hay una barra de herramientas dedicada, dividida en dos secciones.</p> + +<ul> + <li><span id="result_box" lang="es"> <span>HTML Breadcrumbs</span><span>:</span> <span>Este muestra la</span> <span>jerarquía completa</span> <span>a través del</span> <span>documento para la</span> <span>rama que contiene</span> <span>el elemento</span> <span>seleccionado.</span> <span>Si se</span> <span>mantiene pulsado el botón</span> sobre <span>uno de</span> <span>los</span> <span>elementos en</span> <span>la barra</span><span>,</span> <span>aparece un menú emergente</span> <span>que le permite seleccionar</span> <span>uno de</span> <span>los hermanos de</span> <span>ese elemento</span><span>.</span> <span>Al hacer clic en</span> <span>los</span> <span>pequeños</span> <span>iconos de flecha</span> <span>de los extremos</span> <span>izquierdo y derecho de</span> <span>la barra</span>, <span>se desplazará</span> <span>la barra</span> <span>si es</span> <span>más ancha que el</span> <span>espacio disponible</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span>Search tags</span><span>:</span> <span>Busca etiquetas para la página que escribes</span><span>.</span> <span>Al pulsar</span> <span>"Enter</span><span>" aparece lo que ha encontrado</span><span> a continuación.</span></span></li> +</ul> + +<h2 id="Panel_CSS">Panel CSS</h2> + +<p><span id="result_box" lang="es"><span>El panel de</span> <span>CSS</span> <span>muestra la información</span> <span>acerca de los</span> <span>estilos aplicados</span> <span>al elemento</span> <span>actualmente seleccionado.</span> <span>Hay cuatro</span> <span>puntos de vista</span> <span>diferentes:</span> <span>"</span><span>Reglas</span><span>"</span><span>,</span> <span>"</span><span>computarizada</span><span>"</span><span>,</span> <span>"</span><span>Fuentes</span><span>"</span> <span>y</span> <span>"</span><span>modelo de caja</span><span>"</span><span>.</span> <span>Se puede cambiar entre</span> <span>ellas utilizando</span> <span>la barra de herramientas</span> <span>en la parte superior</span> <span>del</span> <span>panel</span><span>:</span></span></p> + +<h3 id="VISTA_DE_REGLAS"><img alt="" src="https://mdn.mozillademos.org/files/7447/inspector-css-toolbar.png" style="display: block; margin-left: auto; margin-right: auto;">VISTA DE REGLAS</h3> + +<div class="g-unit" id="gt-src-c"> +<div id="gt-src-p"> +<div id="gt-src-wrap"> +<div dir="ltr" style="zoom: 1;"><span id="result_box" lang="es"><span>Esta vista</span> <span>muestra todas las reglas</span> <span>que se aplican</span> <span>al elemento seleccionado</span><span>, ordenadas</span> <span>desde la</span> <span>más</span> <span>específica</span><span>, hasta la menos</span> <span>específica</span><span>:</span></span></div> +</div> +</div> +</div> + +<p> </p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7453/inspector-HTML-pane.png" style="display: block; margin-left: auto; margin-right: auto;">La vista de reglas muestra la lista de <a href="/en-US/docs/Web/CSS/Pseudo-elements">seudo-elementos</a>, y las reglas que se aplican.</p> + +<p><span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>32</span> <span>en adelante</span><span>,el </span><span>listado de vista de reglas,<a href="/en-US/docs/Web/CSS/Cascade"> usuario-agente-estilos</a></span> <span>(estilos</span> <span>aplicados</span> <span>por el navegador</span><span>)</span> <span>si la opción</span> <span>de hacerlo</span> <span>se revisa</span> <span>en</span> <span>los</span> <a href="/en-US/docs/Tools/Tools_Toolbox#Settings_2">ajustes de herramientas de desarrollador</a><span>.</span> <span>Tenga en cuenta que</span> <span>este ajuste</span> <span>es independiente de</span> <span>la casilla de verificación</span> <span>"</span><span>Estilos</span> <span>de navegador</span><span>"</span> <span>en la <a href="/en-US/docs/Tools/Page_Inspector#Computed_view">vista computarizada</a></span>.</span></p> + +<h4 id="Muestra_de_reglas">Muestra de reglas</h4> + +<p>Esta muestra cada regla como una hoja de estilos, con una lista de selectores seguida por una lista de declaraciones.<code> (property:value;)</code></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5659/inspector-css-rules-singlerule-annotated.png" style="display: block; height: 206px; margin-left: auto; margin-right: auto; width: 544px;"><span id="result_box" lang="es"><span>Las reglas que se</span> han <span>invalidado por normas</span> <span>posteriores</span> <span>están tachadas</span><span>.</span> <span>Si se pasa el ratón</span> <span>sobre</span> <span>una declaración</span><span>,</span> <span>una casilla de verificación</span> <span>aparece junto</span> <span>a ella</span><span>: Se puede usar</span> <span>esta opción para alternar</span> <span>el estado</span> de la regla de<span> encendido a apagado.</span></span></p> + +<p>Usuario-agente-estilos se muestra en un gris oscuro, y el vínculo y el número de linea contiene el prefijo <code>(user agent)</code>:<br> + <img alt="" src="https://mdn.mozillademos.org/files/7909/inspector-rules-view-ua-style.png" style="display: block; height: 121px; margin-left: auto; margin-right: auto; width: 342px;"></p> + +<h4 id="Vínculo_al_archivo_CSS">Vínculo al archivo CSS</h4> + +<p>En la parte superior derecha de cada regla, el <span class="short_text" id="result_box" lang="es"><span>nombre del archivo</span> de procedencia </span> y el numero de linea se muestran como un vínculo: Haciendo click en este ,se abre el archivo en el <a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor"> Editor de estilos</a>.</p> + +<p><span id="result_box" lang="es"><span>El Inspector</span> <span>entiende</span> los <span>mapas de procedencia del</span> <span>CSS</span><span>.</span> <span>Eso significa que si</span> <span>usted está usando</span> <span>un preprocesador</span> <span>CSS que</span> <span>tiene soporte para</span> <span>mapas fuente</span><span>,</span> <span>y</span> <span>ha habilitado</span> <span>el apoyo</span> <span>de mapa de origen</span> <span>en los <a href="/en-US/docs/Tools_Toolbox#Style_Editor">ajustes de editor de estilos</a></span><a href="/en-US/docs/Tools_Toolbox#Style_Editor"> </a><span>,</span> <span>a continuación,</span> <span>el enlace</span> <span>le llevará a</span> <span>la fuente</span> <span>original, no al</span> <span>CSS</span> <span>generado</span></span>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6947/inspector-css-sourcemap-detail.png" style="display: block; height: 133px; margin-left: auto; margin-right: auto; width: 390px;"></p> + +<p>Leer más sobre el soporte para mapas de procedencia de CSS en la <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">documentación del editor de estilos</a>.</p> + +<h4 id="Muestras_de_color">Muestras de color</h4> + +<p>Verás que aparece una muestra de color junto a sus valores numéricos:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6361/inspector-css-color-swatch.png" style="display: block; height: 158px; margin-left: auto; margin-right: auto; width: 487px;"></p> + +<h4 id="Selector_de_color">Selector de color</h4> + +<p>Si haces click en la muestra de color, verás aparecer un selector de color, que te permite cambiarlo:</p> + +<h4 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/7747/inspector-color-picker.png" style="display: block; margin-left: auto; margin-right: auto;"></h4> + +<p><span id="result_box" lang="es"><span>A partir de</span> <span>Firefox</span> <span>31</span> <span>en adelante, el</span> <span>selector de color</span> <span>incluye un</span> <span>icono de cuentagotas</span><span>:</span> <span>Al hacer clic</span> <span>en este icono</span> <span>se permite utilizar</span> <span>el cuentagotas para seleccionar</span> <span>un nuevo color</span> <span>para el elemento</span> <span>de la</span> <span>página:</span></span></p> + +<p>{{EmbedYouTube("0Zx1TN21QOo")}}</p> + +<p> </p> + +<h4 id="Previsualización_de_la_imagen_de_fondo">Previsualización de la imagen de fondo</h4> + +<p><span id="result_box" lang="es"><span>Verás</span> <span>una vista previa de</span> <span>imágenes</span> <span>especificas utilizando</span> <a href="/en-US/docs/Web/CSS/background-image">Imagen de fondo</a> <span>si</span> <span>te detienes sobre</span> <span>la regla:</span></span></p> + +<h4 id="Transformar_la_visualización"><img alt="" src="https://mdn.mozillademos.org/files/7457/inspector-image-preview.png" style="display: block; margin-left: auto; margin-right: auto;"><span class="short_text" id="result_box" lang="es"><span>Transformar</span> <span>la visualización</span></span></h4> + +<p><span id="result_box" lang="es"><span>Si</span> <span>se pasa sobre</span> <span>una propiedad de</span> <a href="/en-US/docs/Web/CSS/transform">transformación</a> <span>en la vista de reglas,</span><span> se obtiene</span> <span>una información sobre herramientas</span><span>, que</span> <span>visualiza</span> <span>la transformación</span> que <span>se</span> <span>lleva a cabo</span><span>:</span></span></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7133/transform-tooltip.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Herramienta_informativa_fuente-familia">Herramienta informativa fuente-familia</h4> + +<div class="geckoVersionNote"> +<p>Esto es nuevo en Firefox 30.</p> +</div> + +<p>A partir de Firefox 30 en adelante, si pasas sobre una propiedad <a href="/en-US/docs/Web/CSS/font-family"><code>fuente-familia</code></a> en la Vista de Reglas, consigues una información con una muestra sobre ese tipo de letra :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7385/font-family-tooltip.png" style="display: block; height: 248px; margin-left: auto; margin-right: auto; width: 359px;"></p> + +<h4 id="Edición_de_Reglas">Edición de Reglas</h4> + +<p>Si haces click en una declaración,puedes modificar esa propiedad o valor, y ves el resultado inmediatamente. Para añadir una nueva declaración a una regla, haces click sobre la última linea de la regla (la linea ocupada por la llave de cierre). Si introduces un valor no válido para una propiedad mientras lo estás editando, o el nombre de una propiedad desconocida, un icono de alerta amarillo aparece bajo la declaración.</p> + +<p>Cualquier cambio que se realice es temporal: Al volver a cargar la página , se restablecerá el estilo original.</p> + +<p><strong>Consejo:</strong> Puedes utilizar las teclas de flecha para aumentar/disminuir reglas numéricas mientras realizas la edición. La flecha hacia arriba cambiará "1px" a 2px, y Shift+up/down la aumentará o disminuira en 10. Alt+up/down cambiará los valores en 0.1, y shift+Page up/down sumará o restará 100 al valor.</p> + +<h3 id="Vista_computada">Vista computada</h3> + +<p>Esta vista organiza el estilo del elemento por propiedades. En esta lista se enumeran todas las propiedades CSS que se han aplicado a este elemento en orden alfabétiico: Muestra el valor calculado que cada propiedad CSS tiene para el elemento seleccionado :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7443/inspector-computed-view.png" style="display: block; margin-left: auto; margin-right: auto;">Al hacer click en la flecha junto al nombre de la propiedad ,muestra la regla que establece ese valor , junto a un enlace al nombre del archivo de origen y el número de linea :</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7445/inspector-computed-view-open.png" style="display: block; margin-left: auto; margin-right: auto;">Por defecto, solo muestra los valores que han sido explicitamente establecidos para esa página: Para ver todos los valores haz click en el cuadro de "Estilos del navegador" .</p> + +<p>Escribir en el buscador realiza un filtrado directo de la lista , por lo que, por ejemplo,si lo que deseas es ver los ajustes relacionados con la fuente, puedes escribir "fuente" en el buscador, y unicamente las propiedades con "fuente" en el nombre seran listadas. Tambien puedes buscar por los valores de las propiedades: Para encontrar la regla responsable de establecer la fuente "Lucida Grande", escribe eso en el buscador.</p> + +<h3 id="Vista_de_fuentes">Vista de fuentes</h3> + +<p>Esta muestra todas las fuentes utilizadas por el elemento seleccionado. Tenga en cuenta que muestra el tipo de letra utilizado en su sistema, que puede ser diferente a las especificadas en el css:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7449/inspector-fonts-view.png" style="display: block; margin-left: auto; margin-right: auto;">El texto en la vista de fuentes es "Abc" por defecto,pero en realidad es un area de texto y puede ser editado libremente.</p> + +<h3 id="Vista_modelo_de_caja">Vista modelo de caja</h3> + +<p>Esta muestra una representación gráfica de como el <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/box_model" title="/en-US/docs/Web/CSS/box_model">modelo de caja</a> se aplica a este elemento. A partir de Firefox 30, mientras el ratón está en vista del modelo de caja, las lineas de cuadrícula y el modelo de caja para el elemento de la página son mostradas:<img alt="" src="https://mdn.mozillademos.org/files/7439/inspector-box-model-view.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Vista_detallada_del_modelo_de_caja">Vista detallada del modelo de caja</h4> + +<p> Antes de Firefox 30, la vista del modelo de caja era el siguiente:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5671/inspector-css-box-model-annotated.png" style="display: block; height: 435px; margin-left: auto; margin-right: auto; width: 680px;"></p> + +<ul> + <li>En la parte superior izquierda está el espacio total tomado por el elemento en la página.</li> + <li>Los números externos te dicen el tamaño del margen a cada lado del elemento.</li> + <li>Los números en los bordes cuadrados te dicen cual es la anchura del borde de cada lado.</li> + <li>La siguiente capa muestra el tamaño del relleno a cada lado del elemento .</li> + <li>Finalmente, en el centro, está el tamaño del contenido del elemento.</li> +</ul> + +<p>A partir de Firefox 30, se ha simplificado:<img alt="" src="https://mdn.mozillademos.org/files/7437/inspector-box-model-detail.png" style="display: block; height: 273px; margin-left: auto; margin-right: auto; width: 328px;"></p> + +<ul> + <li>La parte superior izquierda todavía muestra el tamaño tomado por el elemento en la página (contenido + relleno).</li> + <li>El centro todavía muestra el tamaño del contenido.</li> + <li>La parte superior derecha muestra el valor de la propiedad <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/position_value"><code>posicion.</code></a></li> + <li>Los valores individuales para el relleno, borde, y margen están donde podrías esperar.</li> +</ul> + +<p>A partir de Firefox 31, si haces click sobre uno de los números en la vista modelo de caja, puedes modificar el valor y ver el resultado en la página inmediatamente.</p> + +<h2 id="Utilización_del_Inspector_de_Página_en_la_Consola_Web">Utilización del Inspector de Página en la Consola Web</h2> + +<p>El elemento seleccionado en ese momento en el inspector de página , en su caso, puede ser referenciado en JavaScript en la Cónsola web utilizando la variable <code>$0</code>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5461/inspector-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Además, a partir de Firefox 30, si pasas sobre el elemento en la salida de la Cónsola Web ,este es resaltado en la pantalla:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7469/inspector-web-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="API_para_desarrolladores"> API para desarrolladores</h2> + +<p>Firefox complementos puede acceder a los siguientes objetos desde chrome://browser/content/devtools/inspector/inspector.xul context:</p> + +<h3 id="ventana.inspector">ventana.inspector</h3> + +<p>Definido en <a href="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js" title="http://mxr.mozilla.org/mozilla-central/source/browser/devtools/inspector/inspector-panel.js">inspector-panel.js</a>. Atributos y funciones:</p> + +<ul> + <li>.selection - información sobre la selección del inspector: + <ul> + <li>.isNode() - devuelve verdadero si la selección es el nodo.</li> + <li>.node - devuelve el elemento actual desde la página.</li> + <li>.window - El objeto seleccionado de la estructura está en la ventana.</li> + </ul> + </li> + <li>.markDirty() - marca la página que ha sido cambiada por el inspector - un aviso será mostrado cuando se abandone la página, ya que los cambios realizados a traves del inspector, serán incorporados al recargar la página.</li> +</ul> + +<p>Capacidad de enlazar eventos en:</p> + +<h4 id="Markup_cargado"> Markup cargado</h4> + +<p>LLamado cuando el panel izquierdo ha sido renovado, despues del cambio de página.</p> + +<h4 id="Listo">Listo</h4> + +<p>LLamado cuando se ha cargado el primer markup.</p> + +<h4 id="Seudoclase">Seudoclase</h4> + +<p>LLamado despues comando de seudoclase.</p> + +<h4 id="Cambio_de_diseño">Cambio de diseño</h4> + +<p>"Evento de cambio de baja prioridad para cosas como pintar o cambiar el tamaño."</p> + +<h2 id="Atajos_de_teclado">Atajos de teclado</h2> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "page-inspector") }}</p> + +<h3 id="Atajos_globales">Atajos globales</h3> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> + +<p> </p> + +<p> </p> + +<p> </p> 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 +--- +<p>Este artículo es un breve recorrido por las principales secciones de la interfaz de usuario del Inspector de páginas.</p> + +<p>Recorre los tres componentes de máximo nivel de la interfaz de usuario del Inspector:</p> + +<ul> + <li>el botón "Seleccionar elemento</li> + <li>el panel HTML</li> + <li>el panel CSS</li> +</ul> + +<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15507/57-inspector-UI.png" style="display: block; height: 649px; margin-left: auto; margin-right: auto; width: 900px;"></p> + +<p>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.</p> + +<h2 id="Botón_seleccionar_elemento">Botón seleccionar elemento</h2> + +<p>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:</p> + +<p><img alt="This is the button in Firefox 57 Inspector you can use to select elements on a web page." src="https://mdn.mozillademos.org/files/15513/57-select-element.png" style="display: block; height: 147px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>Este botón forma parte de la <a href="/es/docs/Tools/Tools_Toolbox#Toolbar">barra de herramientas principal</a>, por tanto es accesible desde cualquier herramienta, no sólo desde el Inspector.</p> + +<p>Para aprender a seleccionar un elemento ver la guía <a href="/en-US/docs/Tools/Page_Inspector/How_to/Select_an_element">seleccionar un elemento</a>.</p> + +<h2 id="Panel_HTML">Panel HTML</h2> + +<p>El Inspector está dividido en dos mitades. La mitad izquierda está ocupada por el panel HTML:</p> + +<p><img alt="These are the tasty new HTML and CSS panes in Firefox 57." src="https://mdn.mozillademos.org/files/15515/57-html-css-pane.png" style="display: block; height: 254px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>Para aprender más sobre la estructura del panel HTML, ver a la guía <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_HTML">examinar y editar HTML</a>.</p> + +<h2 id="Panel_CSS">Panel CSS</h2> + +<p>La mitad derecha del Inspector la ocupa el panel CSS:</p> + +<p><img alt="The rules view within the Inspector." src="https://mdn.mozillademos.org/files/15511/57-rules-view.png" style="display: block; height: 579px; margin-left: auto; margin-right: auto; width: 600px;">The CSS pane is divided into 4 views:</p> + +<p>El panel CSS está dividido en 5 vistas:</p> + +<ul> + <li>Vista reglas</li> + <li>Vista Calculado</li> + <li>Vista Disposición</li> + <li>Vista animaciones</li> + <li>Vista tipografía</li> +</ul> + +<p>Para cambiar de vista utiliza las pestañas que hay en la parte superior de la página</p> + +<h3 id="Vista_reglas">Vista reglas</h3> + +<p>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</p> + +<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS">Examinar y editar CSS</a> para más detalles.</p> + +<h3 id="Vista_calculado">Vista calculado</h3> + +<p>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:</p> + +<p><img alt="The Computed view within the Inspector." src="https://mdn.mozillademos.org/files/15509/57-computed-view.png" style="display: block; height: 491px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>Para aprender más sobre la vista modelo de cajas ver <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_the_box_model">Examinar y editar el modelo de caja</a>. 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.</p> + +<p>Para aprender más sobre las declaraciones CSS listadas en esta vista ver <a href="/es/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Examinar CSS calculado</a>.</p> + +<h3 id="Vista_tipografía">Vista tipografía</h3> + +<div class="warning"> +<p>En Firefox 47 <strong>únicamente</strong>, la vista Tipografía está desactivada por defecto. Si quieres verla en Firefox 47, visita <code>about:config</code>, busca la opción <code>devtools.fontinspector.enabled</code>, y seleccionala como <code>true</code>.</p> + +<p>Antes y después de Firefox 47, la vista Tipografía está habilitada por defecto.</p> +</div> + +<p>La vista Tipografía muestra todas las fuentes de la página con muestras editables.</p> + +<p><img alt="The all-new Inspector panel in Firefox 57." src="https://mdn.mozillademos.org/files/15517/57-fonts-panel.png" style="display: block; height: 344px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/View_fonts">Vista tipografía</a> para más detalles.</p> + +<h3 id="Vista_animaciones">Vista animaciones</h3> + +<p>La Vista Animaciones ofrece los detalles de cualquier animación aplicada al elemento seleccionado, y un controlador para pausarlas</p> + +<p> </p> + +<p><img alt="This is the Animations pane in the Firefox 57 Inspector. " src="https://mdn.mozillademos.org/files/15519/animation-view.png" style="display: block; height: 343px; margin-left: auto; margin-right: auto; width: 500px;"></p> + +<p>Ver <a href="/es/docs/Tools/Page_Inspector/How_to/Work_with_animations">Trabajar con animaciones</a> para más detalles.</p> 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 +--- +<div> + 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. </div> +<div> + </div> +<div> + 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. </div> +<div> + </div> +<div> + La <a href="/en-US/docs/Tools/DevTools_Window">Caja de herramientas</a> se abrirá, con el Profiler seleccionado.</div> +<div> + </div> +<h2 id="Los_perfiladores_de_muestreo"><a name="sampling-profilers">Los perfiladores de muestreo</a></h2> +<p>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.<br> + <br> + <a name="profiling-example">Por ejemplo, considere un programa como este:</a></p> +<pre class="brush: js">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();</pre> +<p>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. </p> +<p>Todos están tomadas desde el interior <code>doSomething()</code>, pero los otros dos se encuentran dentro de la función <code>logTheValue()</code> llamado por <code>doSomething()</code>. Así que el perfil consistiría en tres seguimientos de pila, como este:</p> +<pre>Sample A: doSomething() +Sample B: doSomething() > logTheValue() +Sample C: doSomething() > logTheValue()</pre> +<p>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 <code>logTheValue()</code> es el cuello de botella en nuestro código.</p> +<h2 id="Creación_de_un_perfil">Creación de un perfil</h2> +<p>Haga clic en el botón del cronómetro (<em>stopwatch</em><span style="font-size: 14px; line-height: 1.5;">) 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:</span></p> +<p style="text-align: center;"><img alt="" src="https://mdn.mozillademos.org/files/5977/Screen%20Shot%202013-08-26%20at%2010.35.47%20AM.png"></p> +<p>Una vez que haya hecho clic en "Stop", el nuevo perfil se abrirá de forma automática:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5981/Screen%20Shot%202013-08-26%20at%2011.07.18%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>Este panel está dividido en dos partes:</p> +<ul> + <li>El lado izquierdo muestra todos los perfiles que ha capturado y le permite cargar cada uno. Justo por encima de esto hay dos botones: el botón del cronómetro (<em>stopwatch</em>) le permite grabar un nuevo perfil, mientras que el botón Importar (<em>Import</em>) ... permite importar los datos guardados anteriormente. Cuando se selecciona el perfil, puede guardar sus datos como un archivo JSON haciendo clic en el botón Guardar (Save). </li> + <li>El lado derecho muestra el perfil actualmente cargado.</li> +</ul> +<h2 id="Analyzing_a_profile">Analyzing a profile</h2> +<p>The profile is split into two parts:</p> +<ul> + <li>the <a href="#profile-timeline" title="#profile-timeline">profile timeline</a></li> + <li>the <a href="#profile-details" title="#profile-details">profile details</a></li> +</ul> +<h3 id="Profile_timeline"><a name="profile-timeline">Profile timeline</a></h3> +<p>The profile timeline occupies the top part of the profile display:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5987/timeline" style="display: block; margin-left: auto; margin-right: auto;">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.</p> +<p>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 <a href="/en-US/docs/Web/API/window.requestAnimationFrame" title="/en-US/docs/Web/API/window.requestAnimationFrame">requestAnimationFrame</a> and <a href="/en-US/docs/Web/Guide/Performance/Using_web_workers" title="/en-US/docs/Web/Guide/Performance/Using_web_workers">Workers</a>.</p> +<p>You can examine a specific range within the profile by clicking and dragging inside the timeline:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5989/Screen%20Shot%202013-08-26%20at%2011.17.59%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>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:</p> +<p><br> + <img alt="" src="https://mdn.mozillademos.org/files/5991/Screen%20Shot%202013-08-26%20at%2011.18.03%20AM.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<h3 id="Profile_details"><a name="profile-details">Profile details</a></h3> +<p>The profile details occupy the bottom part of the profile display:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5993/profiler-details-highligted.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5995/Screen%20Shot%202013-08-26%20at%2011.22.10%20AM.png"></p> +<p><strong>Running time</strong> shows the total number of samples in which this function appeared<a href="#footnote-1"><sup>1</sup></a>, 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 <code>detectImage()</code> function.</p> +<p><strong>Self</strong> 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 <a href="#profiling-example" title="#profiling-example">simple example</a> above, <code>doSomething()</code> would have a <strong>Running time</strong> of 3 (samples A, B, and C), but a <strong>Self</strong> value of 1 (sample A).</p> +<p>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.</p> +<h3 id="Expanding_the_call_tree">Expanding the call tree</h3> +<p>In a given row, if there are any samples taken while we were in a function called by this function (that is, if <strong>Running Time</strong> is greater than <strong>Self</strong> for a given row) then an arrow appears to the left of the function's name, enabling you to expand the call tree.</p> +<p>In the <a href="#profiling-example" title="#profiling-example">simple example</a> above, the fully-expanded call tree would look like this:</p> +<table class="standard-table"> + <tbody> + <tr> + <td style="text-align: center;"><strong>Running Time</strong></td> + <td style="text-align: center;"><strong>Self</strong></td> + <td style="text-align: center;"> </td> + </tr> + <tr> + <td style="text-align: center;">3 100%</td> + <td style="text-align: center;">1</td> + <td style="text-align: center;">doSomething()</td> + </tr> + <tr> + <td style="text-align: center;">2 67%</td> + <td style="text-align: center;">2</td> + <td style="text-align: center;">logTheValue()</td> + </tr> + </tbody> +</table> +<p>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 <code>detectImage()</code> function. But all of them were taken in functions called by <code>detectImage()</code> (the <strong>Self</strong> cell is zero). We can expand the call tree to find out which functions were actually running when most of the samples were taken:</p> +<p><img alt="" src="https://mdn.mozillademos.org/files/5999/bla.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +<p>This tells us that 6 samples were taken when we were actually executing <code>detectAtScale(), </code>12 when we were executing <code>getRect()</code> and so on.</p> +<h2 id="Footnotes">Footnotes</h2> +<ol> + <li><a name="footnote-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 <code>forEach</code> will appear multiple times in the call tree.</a></li> +</ol> +<p> </p> 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' +--- +<blockquote> +<h3 id="draft">{{draft}}</h3> +</blockquote> + +<p>Coming soon...</p> 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 +--- +<p>Esta guía explica como usar la <a href="/en-US/docs/Mozilla/Firefox_OS/Firefox_OS_usage_tips/Remote_debugging">depuración remota </a>para inspeccionar o depurar código funcionando en <a href="/en-US/docs/Mozilla/Firefox_for_Android">Firefox para Android </a>conectado por USB.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>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. </p> + +<h2 id="Requisitos_previos">Requisitos previos</h2> + +<p>Primero, lo que necesitará:</p> + +<ul> + <li>un ordenador de sobremesa o un portátil con Firefox funcionando</li> + <li>un dispositivo Android con <a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capacidad de arrancar Firefox para Android</a> con Firefox para Android funcionando en él</li> + <li>un cable USB que conecte ambos dispositivos</li> +</ul> + +<h3 id="Configuración_ADB">Configuración ADB</h3> + +<p>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.</p> + +<h4 class="note" id="En_el_dispositivo_Android">En el dispositivo Android</h4> + +<ul> + <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">Habilita la depuración USB (solo el paso 2 de este enlace)</a>.</li> + <li>Conecta el dispositivo con el ordenador mediante el cable USB.</li> +</ul> + +<h4 class="note" id="En_el_ordenador_de_sobremesa">En el ordenador de sobremesa</h4> + +<ul> + <li>Instala la versión correcta del <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">SDK de Android</a> para tu dispositivo.</li> + <li>Utilizando el SDK de Android, instala las <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">herramientas de la plataforma Android</a>.</li> + <li>Las herramientas de la plataforma Android instalan adb en un subdirectorio llamado "platform-tools" dentro del directorio donde hayas instalado el Android SDK. Asegúrate que el directorio "platform-tools" aparece en la variable "path" de tu sistema operativo.</li> +</ul> + +<p>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:</p> + +<pre>adb devices</pre> + +<p>Deberías ver una respuesta parecida a esta:</p> + +<pre>List of devices attached +51800F220F01564 device +</pre> + +<p>(La cadena de texto hexadecimal será diferente.)</p> + +<p>Si obtienes ésto, entonces <code>adb</code> ha encontrado tu dispositivo y has configurado correctamente el ADB.</p> + +<h3 id="Habilitar_la_depuración_remota">Habilitar la depuración remota</h3> + +<p>A continuación, tienes que activar la depuración remota en el ordenador de sobremesa y en el dispositivo Android.</p> + +<h4 id="Firefox_versión_24_y_anteriores_para_Android">Firefox versión 24 y anteriores para Android</h4> + +<p>Para habilitar la depuración remota en el dispositivo, tienes que ajustar la preferencia <code>devtools.debugger.remote-enabled</code> al valor <code>true</code>.</p> + +<p>Introduce la dirección <code>about:config</code> 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 <code>devtools.debugger.remote-enabled</code> preference, y pulsa "Toggle".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 class="note" id="Firefox_versión_25_y_posteriores_para_Android">Firefox versión 25 y posteriores para Android</h4> + +<p>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":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>El navegador mostrará una notificación para recordarte que debes configurar el redireccionamiento de puertos, lo cuál haremos más adelante.</p> + +<h4 id="En_el_ordenador_de_sobremesa_2">En el ordenador de sobremesa</h4> + +<p>En el ordenador, la depuración remota se habilita a través de un ajuste en la caja de herramientas. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Abre la caja de herramientas</a>, haz clic en el botón "Settings" de la <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">barra de herramientas</a>, y marca "Enable remote debugging" en la pestaña de <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="Note">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.</div> + +<p>Verás una nueva opción en el menú "Web Developer" con la etiqueta "Connect...":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Conectarse">Conectarse</h2> + +<p>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.</p> + +<h4 class="note" id="En_el_ordenador_de_sobremesa_3">En el ordenador de sobremesa</h4> + +<p>Ve al símbolo del sistema y teclea:</p> + +<pre>adb forward tcp:6000 tcp:6000</pre> + +<p>(Si has cambiado el valor que el dispositivo Android usa para el puerto de depuración, deberás modificarlo a este valor.)</p> + +<p>Para Firefox OS, teclea:</p> + +<pre><code>adb forward tcp:6000 localfilesystem:/data/data/org.mozilla.firefox/firefox-debugger-socket</code></pre> + +<p>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.</p> + +<p>A continuación, ve al menú Web Developer del Firefox, y selecciona "Connect...". Verás una página parecida a ésta:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Si no has cambiado los números de puerto, elige 6000 y pulsa el botón 'Connect'.</p> + +<h4 class="note" id="En_el_dispositivo_Android_2">En el dispositivo Android</h4> + +<div class="mttextarea" dir="ltr" id="TranslationOutput"> +<div><span>A </span><span id="Dst[0][0:3:2:13]">continuación</span><span> </span><span id="Dst[0][5:14:15:24]">verás</span><span> </span><span id="Dst[0][16:16:26:27]">un</span><span> cuadro de </span><span id="Dst[0][18:23:39:45]">diálogo</span><span> </span><span id="Dst[0][25:26:47:48]">en</span><span> </span><span id="Dst[0][28:30:50:51]">el</span><span> </span><span id="Dst[0][40:45:53:63]">dispositivo</span><span> </span><span id="Dst[0][32:38:65:71]">Android que pide </span><span>que </span><span> </span><span id="Dst[0][61:67:87:95]">confirmes</span><span> </span><span id="Dst[0][69:71:97:98]">la</span><span> </span><span id="Dst[0][73:82:100:107]">conexión</span>:</div> +</div> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p> + +<h4 class="note" id="En_el_ordenador_de_sobremesa_4">En el ordenador de sobremesa</h4> + +<p>A continuación, el ordenador te muestra un cuadro de diálogo parecido a este:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p> + +<ul> + <li>Verás una entrada por cada pestaña abierta debajo de "Available remote tabs", y haciendo click sobre una conectarás la herramienta de depuración al contenido web de la pestaña. Si quieres depurar el contenido de tu web, elige la pestaña pertinente.</li> + <li>Verás una entrada debajo de "Available remote processes": este es el propio proceso del navegador. Elige esta opción si quieres depurar el código del navegador.</li> +</ul> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>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.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> 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 +--- +<p>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 <a href="/en-US/docs/Toolbox" title="/en-US/docs/Toolbox">Toolbox</a> to the remote process, and the Toolbox is then launched in its own window. At the moment the following tools support remote debugging:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Page_Inspector">Page Inspector</a> (new in Firefox 26)</li> + <li><a href="/en-US/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">JavaScript Debugger</a></li> + <li><a href="/en-US/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Style Editor</a></li> + <li><a href="/en-US/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Web Console</a></li> + <li><a href="/en-US/docs/Tools/Profiler" title="/en-US/docs/Tools/Profiler">Profiler</a></li> + <li><a href="/en-US/docs/Tools/Network_Monitor" title="/en-US/docs/Tools/Network_Monitor">Network Monitor</a></li> +</ul> + +<p>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 <a href="/en-US/docs/Tools/Firefox_OS_Simulator#Attaching_developer_tools" title="/en-US/docs/Tools/Firefox_OS_Simulator#Attaching_developer_tools">Firefox OS Simulator documentation</a>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5833/remote-debugging-overview.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>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. </p> + +<h2 id="Prerequisites">Prerequisites</h2> + +<p>First, you'll need:</p> + +<ul> + <li>a desktop or laptop computer with Firefox running on it</li> + <li>an Android device <a href="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device" title="https://support.mozilla.org/en-US/kb/will-firefox-work-my-mobile-device">capable of running Firefox for Android</a> with Firefox for Android running on it</li> + <li>a USB cable to connect the two devices</li> +</ul> + +<h3 id="ADB_setup">ADB setup</h3> + +<p>Next, you'll need to get the desktop and the Android device talking to each other using the <a href="https://developer.android.com/tools/help/adb.html" title="https://developer.android.com/tools/help/adb.html">adb</a> command-line tool.</p> + +<h4 class="note" id="On_the_Android_device"><strong>On the Android device</strong></h4> + +<ul> + <li><a href="http://developer.android.com/guide/developing/device.html#setting-up" title="http://developer.android.com/guide/developing/device.html#setting-up">Enable USB debugging (step 2 of this link only)</a>.</li> + <li>Attach the device to the desktop via USB.</li> +</ul> + +<h4 class="note" id="On_the_desktop"><strong>On the desktop</strong></h4> + +<ul> + <li>Install the correct version of the <a href="http://developer.android.com/sdk/index.html" title="http://developer.android.com/sdk/index.html">Android SDK</a> for your device.</li> + <li>Using the Android SDK, install the <a href="http://developer.android.com/sdk/installing.html#components" title="http://developer.android.com/sdk/installing.html#components">Android Platform Tools</a>.</li> + <li>Android Platform Tools installs adb in the "platform-tools" directory under the directory in which you installed the Android SDK. Make sure the "platform-tools" directory is in your path.</li> +</ul> + +<p>To check it worked, open up a command shell on the desktop and type:</p> + +<pre>adb devices</pre> + +<p>You should see some output like:</p> + +<pre>List of devices attached +51800F220F01564 device +</pre> + +<p>(The long hex string will be different.)</p> + +<p>If you do, then <code>adb</code> has found your device and you've successfully set up ADB.</p> + +<h3 id="Enable_remote_debugging">Enable remote debugging</h3> + +<p>Next, you need to enable remote debugging on both the Android device and the desktop.</p> + +<h4 id="Firefox_for_Android_24_and_earlier">Firefox for Android 24 and earlier</h4> + +<p>To enable remote debugging on the device, you need to set the <code>devtools.debugger.remote-enabled</code> preference to <code>true</code>.</p> + +<p>Go to <code>about:config</code> in Firefox for Android, type "devtools" into the search box and press the Search key. You'll see all the devtools preferences. Find the <code>devtools.debugger.remote-enabled</code> preference, and press "Toggle".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5803/remote-debugger-about-config-toggle.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 class="note" id="Firefox_for_Android_25_and_later">Firefox for Android 25 and later</h4> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5829/remote-debugging-device-enable.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The browser will display a notification reminding you to set up port forwarding, which we'll do later on.</p> + +<h4 id="On_the_desktop_2"><strong>On the desktop</strong></h4> + +<p>On the desktop, remote debugging is enabled by a setting in the Toolbox. <a href="/en-US/docs/Tools_Toolbox" title="/en-US/docs/Tools_Toolbox">Open the Toolbox</a>, click the "Settings" button in the <a href="/en-US/docs/Tools_Toolbox#Toolbar" title="/en-US/docs/Tools_Toolbox#Toolbar">toolbar</a>, and check "Enable remote debugging" in the <a href="/en-US/docs/Tools_Toolbox#Settings" title="/en-US/docs/Tools_Toolbox#Settings">Settings </a>tab:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5827/remote-debugger-toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;">Restart the browser, and you'll see a new option in the Web Developer menu labeled "Connect...":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5811/remote-debugging-connect-menuitem.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Connecting">Connecting</h2> + +<p>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.</p> + +<div style="margin-left: 25%; padding: 1em; border: solid rgb(245, 242, 240) 3px; margin-bottom: 2em;"> +<div class="note"><strong>On the desktop</strong></div> + +<p>Go to a command prompt, and type:</p> + +<pre>adb forward tcp:6000 tcp:6000</pre> + +<p>(If you've changed the value the Android device uses for a debugging port, you'll need to adjust this accordingly.)</p> + +<p>For Firefox OS, type:</p> + +<pre>adb forward tcp:6000 localfilesystem:/data/local/debugger-socket</pre> + +<p>You'll need to reissue this command each time you physically attach desktop and device with the USB cable.</p> + +<p>Then go to the Web Developer menu on Firefox, and select "Connect...". You'll see a page that looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5813/remote-debugging-desktop-connect.png" style="display: block; margin-left: auto; margin-right: auto;">Unless you've changed the port numbers, choose 6000 and press the "Connect" button.</p> +</div> + +<div style="margin-right: 25%; padding: 1em; border: solid rgb(245, 242, 240) 3px; margin-bottom: 2em;"> +<div class="note"><strong>On the Android device</strong></div> + +<p>Next you'll see a dialog on the Android device asking you to confirm the connection:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5815/remote-debugging-device-connect.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p> +</div> + +<div style="margin-left: 25%; padding: 1em; border: solid rgb(245, 242, 240) 3px; margin-bottom: 2em;"> +<div class="note"><strong>On the desktop</strong></div> + +<p>Next, the desktop shows you a dialog that looks something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5819/remote-debugging-desktop-select-target.png" style="display: block; margin-left: auto; margin-right: auto;">This is asking whether you want to debug web content running in a browser tab, or to debug the browser code itself.</p> + +<ul> + <li>You'll see one entry under "Available remote tabs" for each open tab, and clicking it will attach the debugging tools to the web content hosted by that tab. If you want to debug your web content, you'll choose the relevant content tab.</li> + <li>You'll see one entry under "Available remote processes": this is the browser process itself. You'll choose this option if you want to debug the browser's own code.</li> +</ul> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5821/remote-debugging-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The Toolbox, and the tools it hosts, work in just the same way as they do when attached to local content.<img alt="" src="https://mdn.mozillademos.org/files/5823/remote-debugging-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> +</div> + +<p> </p> + +<p> </p> 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 +--- +<p>{{ fx_minversion_header("15.0") }}</p> + +<p>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. <a href="/en-US/docs/Web_Development/Responsive_Web_design">Diseño Adaptable</a> 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 <a href="http://mozilla.org" title="/en-US/docs/Localizing_extension_metadata_on_addons.mozilla.org">mozilla.org</a> vista con un área de contenido 320 por 480.</p> + +<p><img alt="" src="/files/3877/Responsive%20Design%20View.png" style="float: left; height: 628px; padding-right: 2em; width: 372px;">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.</p> + +<p>Tu puedes encontrar la vista de Diseño Adaptable en el menú Desarrollador Web.</p> + +<p>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.</p> + +<p>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 ).</p> + +<p><span id="result_box" lang="es"><span class="hps">Usted</span> <span class="hps">puede utilizar el</span> <span class="hps">controlador de tamaño</span> <span class="hps">en la</span> <span class="hps">parte inferior derecha del</span> <span class="hps">área de contenido</span> <span class="hps">para cambiar el</span> <span class="hps">tamaño del área de</span> <span class="hps">contenido</span></span>.</p> 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 +--- +<h2 id="Configuraciones"><a name="Settings">Configuraciones</a></h2> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6353/toolbox-settings.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Por_defecto_Firefox_Herramientas_de_Desarrollo">Por defecto Firefox Herramientas de Desarrollo</h3> + +<p>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.</p> + +<h3 id="Elija_DevTools_tema"><span class="short_text" id="result_box" lang="es">Elija DevTools tema</span></h3> + +<p>Esto le permite cambiar entre tema claro u oscuro:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6355/inspector-light-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="sect1"><img alt="" src="https://mdn.mozillademos.org/files/6357/inspector-dark-theme.png" style="display: block; margin-left: auto; margin-right: auto;"></h3> + +<h3 id="Inspector">Inspector</h3> + +<div class="geckoVersionNote"> +<p>Este ajuste está disponible en Firefox 27 en adelante</p> +</div> + +<p><em>Unidad de color por defecto</em>: un valor para controlar cómo se representan los colores de la inspección: Hex, HSL(A), RGB(A), <span class="short_text" id="result_box" lang="es">y por su nombre.</span></p> + +<h3 id="Consola_Web">Consola Web</h3> + +<p><em>Habilitar registros persistentes</em>: una configuración para controlar si la consola borra la salida cuando se navega a una página nueva..</p> + +<h3 id="Analizador_JavaScript">Analizador JavaScript</h3> + +<p><em>Mostrar datos de la plataforma Gecko:</em> una opción para controlar si los perfiles deben incluir Gecko símbolos de plataforma.</p> + +<h3 id="Configuraciones_avanzadas">Configuraciones avanzadas</h3> + +<ul> + <li><em>Desactivar JavaScript</em>: recargar la pestaña actual con JavaScript desactivado</li> + <li><em>Activar depurador chrome:</em> le permiten utilizar herramientas de desarrollo en el contexto del navegador en sí, y no sólo el contenido web</li> + <li><em>Activar depuración remota</em>: permitir a las herramientas de desarrollo <a href="/en-US/docs/Tools/Remote_Debugging">depurar instancias de Firefox remotas</a></li> +</ul> + + + + +<h2 id="Opening_Settings">Opening Settings</h2> + +<p>To see the Developer Tools Settings pane, open any of the Developer Tools, and then:</p> + +<ul> + <li>either click the "Settings" button (<img alt="" src="https://mdn.mozillademos.org/files/13158/settings-icon.png" style="display: inline-block; height: 25px; margin-bottom: -7px; width: 24px;">) in the Toolbox toolbar:<img alt="" src="https://mdn.mozillademos.org/files/13176/settings-show-icon.png" style="display: block; height: 632px; margin-left: auto; margin-right: auto; width: 890px;"></li> + <li>or press <kbd>F1</kbd> to toggle between the active tool and the Settings pane</li> + <li>or press <kbd>Ctrl/Cmd</kbd>+<kbd>Shift</kbd>+<kbd>O</kbd> to toggle between the active tool and the Settings pane</li> +</ul> + +<p>The Settings pane looks something like this:</p> + +<p><img alt="Depicts the Toolbox options" src="https://mdn.mozillademos.org/files/14703/devtool-settings-squashed.png" style=""></p> + +<h2 id="Categories">Categories</h2> + +<h3 id="Default_Firefox_Developer_Tools">Default Firefox Developer Tools</h3> + +<p>This group of checkboxes determines which tools are enabled in the toolbox. New tools are often included in Firefox but not enabled by default.</p> + +<h3 id="Available_Toolbox_Buttons">Available Toolbox Buttons</h3> + +<p>This group of checkboxes determines which tools get <a href="https://developer.mozilla.org/en-US/docs/Tools/Tools_Toolbox#Extra_tools">an icon in the Toolbox's toolbar</a>.</p> + +<p>Note that in Firefox 52 we removed the checkbox to toggle the <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#Select_element_button">"Select element" button</a>. The "Select element" button is now always shown.</p> + +<h3 id="Themes">Themes</h3> + +<p>This enables you to choose one of three different themes.</p> + +<p>There's a light theme, which is the default:</p> + +<p><img alt="Light theme for DevTools" src="https://mdn.mozillademos.org/files/13172/theme-light-shadowed.png" style="display: block; height: 317px; margin-left: auto; margin-right: auto; width: 890px;"></p> + +<p>A dark theme (the default on <a href="/en-US/docs/Mozilla/Firefox/Developer_Edition">Firefox Developer Edition</a>):</p> + +<p><img alt="Dark theme for DevTools" src="https://mdn.mozillademos.org/files/13168/theme-dark.png" style="display: block; height: 306px; margin-left: auto; margin-right: auto; width: 875px;"></p> + +<p>There's also a Firebug theme that looks like the <a href="https://getfirebug.com/">Firebug extension</a>, letting you feel at home if you're used to Firebug:</p> + +<p><img alt="Firebug theme for DevTools" src="https://mdn.mozillademos.org/files/13170/theme-firebug-shadowed.png" style="display: block; height: 318px; margin-left: auto; margin-right: auto; width: 890px;"></p> + +<h3 id="Common_preferences">Common preferences</h3> + +<p>Settings that apply to more than one tool. There's just one of these:</p> + +<dl> + <dt><em>Enable persistent logs</em></dt> + <dd>A setting to control whether or not the Web Console and Network Monitor clear their output when you navigate to a new page.</dd> +</dl> + +<h3 id="Inspector_2">Inspector</h3> + +<dl> + <dt><em>Show browser styles</em></dt> + <dd>A setting to control whether styles applied by the browser (<a href="/en-US/docs/Web/CSS/Cascade">user-agent styles</a>) should be displayed in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_CSS_rules">Rules view</a>. Note that this setting is independent of the "Browser styles" checkbox in the Inspector's <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Examine_computed_CSS">Computed view</a>.</dd> + <dt><em>Truncate DOM attributes</em></dt> + <dd>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".</dd> + <dt><em>Default color unit</em></dt> + <dd>A setting to control how colors are represented in the inspector: + <ul> + <li>Hex</li> + <li>HSL(A)</li> + <li>RGB(A)</li> + <li>color name</li> + <li>As authored.</li> + </ul> + </dd> + <dt><em>Enable layout panel</em></dt> + <dd>Enable the experimental layout panel. This setting only exists in Firefox Nightly.</dd> +</dl> + +<h3 id="Web_Console">Web Console</h3> + +<dl> + <dt><em>Enable timestamps</em></dt> + <dd>Controls whether the Web Console displays timestamps. The Web Console defaults to hiding timestamps.</dd> + <dt><em>Enable new console frontend</em></dt> + <dd>Switch to the experimental new console. This setting only exists in Firefox Nightly.</dd> +</dl> + +<h3 id="Debugger">Debugger</h3> + +<dl> + <dt><em>Enable Source Maps</em></dt> + <dd>Enable <a href="/en-US/docs/Tools/Debugger/How_to/Use_a_source_map">source map support</a> in the debugger.</dd> + <dt><em>Enable new debugger frontend</em></dt> + <dd>Enable the new debugger. This setting only exists in Firefox Nightly.</dd> +</dl> + +<h3 id="Style_Editor">Style Editor</h3> + +<dl> + <dt><em>Show original sources</em></dt> + <dd>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. <a href="/en-US/docs/Tools/Style_Editor#Source_map_support">Learn more about Style Editor support for CSS source maps</a>. With this setting checked, the <a href="/en-US/docs/Tools/Page_Inspector/How_to/Examine_and_edit_CSS#Link_to_CSS_file">Page Inspector Rules view will also provide links to the original sources</a>.</dd> + <dt><em>Autocomplete CSS</em></dt> + <dd>Enable the Style Editor to offer autocomplete suggestions.</dd> +</dl> + +<h3 id="Screenshot_Behavior">Screenshot Behavior</h3> + +<dl> + <dt><em>Screenshot to clipboard</em></dt> + <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, copy the screenshot image to the clipboard (the image will still be saved to your Downloads directory). New in Firefox 53.</dd> + <dt><em>Play camera shutter sound</em></dt> + <dd>When you click the icon for the <a href="/en-US/docs/Tools/Screenshot_tool">Screenshot tool</a>, play a shutter sound. New in Firefox 53.</dd> +</dl> + +<h3 id="Editor_Preferences">Editor Preferences</h3> + +<p>Preferences for the <a href="http://codemirror.net/">CodeMirror</a> source editor, which is included in Firefox and used by several developer tools, including <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a> and the <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>.</p> + +<dl> + <dt><em>Detect indentation</em></dt> + <dd>Auto-indent new lines based on the current indentation.</dd> + <dt><em>Autoclose brackets</em></dt> + <dt> </dt> + <dt><em>Indent using spaces</em></dt> + <dt> </dt> + <dt><em>Tab size</em></dt> + <dt> </dt> + <dt><em>Keybindings</em></dt> + <dd>Choose the default CodeMirror keybindings or keybindings from one of several popular editors: + <ul> + <li>Vim</li> + <li>Emacs</li> + <li>Sublime Text</li> + </ul> + </dd> +</dl> + +<h3 id="Advanced_settings">Advanced settings</h3> + +<dl> + <dt><em>Show Gecko platform data</em></dt> + <dd>A setting to control whether or not profiles should include Gecko platform symbols.</dd> +</dl> + +<dl> + <dt><em>Disable HTTP Cache</em></dt> + <dd>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. + <div class="note">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 <a href="/en-US/docs/Web/API/Service_Worker_API">Service Workers</a>/the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</div> + </dd> + <dt><em>Disable JavaScript</em></dt> + <dd>Reload the current tab with JavaScript disabled.</dd> + <dt><em>Enable Service Workers over HTTP</em></dt> + <dd>Enable Service Worker registrations from insecure websites.</dd> + <dt><em>Enable browser chrome and add-on debugging toolboxes</em></dt> + <dd>Enable you to use developer tools in the context of the browser itself, and not only web content.</dd> + <dt><em>Enable remote debugging</em></dt> + <dd>Enable the developer tools to <a href="/en-US/docs/Tools/Remote_Debugging">debug remote Firefox instances</a>.</dd> + <dt><em>Enable worker debugging</em></dt> + <dd>Enable a panel within the debugger to debug workers. + <p class="note">Note: This option got removed from the UI in Firefox 56, because this version ships with a <a href="/en-US/docs/Tools/Debugger">new Debugger UI</a>, but it can still be enabled for the old UI by setting the preference <code>devtools.debugger.workers</code> to <code>true</code>.</p> + </dd> +</dl> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p>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:</p> + +<ul> + <li><em>Name</em> — El nombre de la cookie.</li> + <li><em>Value</em> — El valor de la cookie.</li> + <li><em>Domain</em> — El dominio de la cookie.</li> + <li><em>Path</em> — La propiedad path de la cookie.</li> + <li><em>Expires / Max-Age</em> — El tiempo cuando la cookie expirará. Si la cookie es una cookie de sesión, el valor de esta columna será "Session".</li> + <li><em>Size</em> — El tamaño del nombre de la cookie mas el valor en bytes.</li> + <li><em>HttpOnly</em> — ¿Es esta cookie sólo HTTP ?</li> + <li><em>Secure</em> — ¿Es esta cookie una cookie segura?</li> + <li><em>SameSite</em> — Is this cookie a same-site cookie? Same-site cookies allow servers to mitigate the risk of CSRF and information leakage attacks by asserting that a particular cookie should only be sent with requests initiated from the same registrable domain.</li> + <li><em>Last accessed</em> — Date and time when the cookie was last read.</li> + <li><em>Created</em> — Date and time when the cookie was created.</li> + <li><em>HostOnly</em> — Is this cookie a domain cookie? That is, the domain value matches exactly the domain of the current website.</li> +</ul> + +<div class="note"> +<p><strong>Note</strong>: 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.</p> +</div> + +<p>You can edit cookies by double-clicking inside cells in the <a href="/en-US/docs/Tools/Storage_Inspector#Table_Widget">Table Widget</a> 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.</p> + +<h3 id="Context_menu">Context menu</h3> + +<p>The context menu for each cookie includes the following commands:</p> + +<ul> + <li><em>Add item</em> - add a new cookie.</li> + <li><em>Delete <cookie name>.<domain></em> - deletes the selected cookie</li> + <li><em>Delete All From <domain></em> - deletes all cookies from the selected domain. This must be an exact match. For example, if you select "Delete All From test8.example.com" only cookies from that domain will be deleted. Cookies from "test13.example.com" will not be deleted.</li> + <li><em>Delete All</em> - deletes all cookies for the current host.</li> + <li><em>Delete All Session Cookies</em> - deletes all cookies for the current host that are scheduled to be deleted when the browser shuts down</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16811/cookie_table_widget_context.png" style="border: 1px solid black; display: block; height: 250px; margin-left: auto; margin-right: auto; width: 924px;"></p> 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 +--- +<div>{{ToolsSidebar}}</div> + +<p>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:</p> + +<ul> + <li><em>Cache Storage</em> — any DOM caches created using the <a href="/en-US/docs/Web/API/Cache">Cache API</a>.</li> + <li><em>Cookies</em> — All the <a href="/en-US/docs/Web/API/Document/cookie">cookies</a> created by the page or any iframes inside of the page. Cookies created as a part of response of network calls are also listed, but only for calls that happened while the tool is open.</li> + <li><em>IndexedDB</em> — All <a href="/en-US/docs/Web/API/IndexedDB_API">IndexedDB</a> databases created by the page or any iframes inside the page, their Object Stores and the items stored in these Object Stores.</li> + <li><em>Local Storage</em> — All <a href="/en-US/docs/Web/API/Window/localStorage">local storage</a> items created by the page or any iframes inside the page.</li> + <li><em>Session Storage</em> — All <a href="/en-US/docs/Web/API/Window/sessionStorage">session storage</a> items created by the page or any iframes inside the page.</li> +</ul> + +<p>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.</p> + +<h2 id="Opening_the_Storage_Inspector">Opening the Storage Inspector</h2> + +<p>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 <kbd>Shift</kbd> + <kbd>F9</kbd> keyboard shortcut.</p> + +<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Storage Inspector activated. It's just called "Storage" in the Developer Toolbox.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16764/storage_inspector.png" style="display: block; margin: 0px auto; width: 600px;"></p> + +<h2 id="Storage_Inspector_User_Interface">Storage Inspector User Interface</h2> + +<p>The Storage Inspector UI is split into three main components:</p> + +<ul> + <li><a href="#storage-tree">Storage tree</a></li> + <li><a href="#table-widget">Table Widget</a></li> + <li><a href="#sidebar">Sidebar</a></li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16765/storage_labeled.png" style="display: block; margin: 0 auto; width: 600px;"></p> + +<h3 id="Storage_tree"><a name="storage-tree">Storage tree</a></h3> + +<p>The storage tree lists all the storage types that the Storage Inspector can inspect:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16766/storage_types.png" style="display: block; height: 129px; margin: 0 auto; width: 400px;"></p> + +<p>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.</p> + +<p>Under "Cache Storage", objects are organized by origin and then by the name of the cache:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16802/cache_storage.png" style="border: 1px solid black; display: block; height: 215px; margin-left: auto; margin-right: auto; width: 274px;"></p> + +<p>IndexedDB objects are organized by origin, then by database name, then by object store name:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16804/indexedDb_storage.png" style="border: 1px solid black; display: block; height: 193px; margin-left: auto; margin-right: auto; width: 274px;"></p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16803/cookie_storage.png" style="border: 1px solid black; display: block; height: 217px; margin-left: auto; margin-right: auto; width: 274px;"></p> + +<p>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.</p> + +<p>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.</p> + +<h3 id="Table_Widget"><a name="table-widget">Table Widget</a></h3> + +<p>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.</p> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16767/cookie_context_menu.png" style="border: 1px solid black; display: block; height: 330px; margin-left: auto; margin-right: auto; width: 914px;"></p> + +<h3 id="Search">Search</h3> + +<p>There's a search box at the top of the Table Widget:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16808/storage_detail_filter.png" style="border: 1px solid black; display: block; height: 249px; margin-left: auto; margin-right: auto; width: 926px;"></p> + +<p>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.</p> + +<p>You can use <kbd>Ctrl</kbd> + <kbd>F</kbd> (<kbd>Cmd</kbd> + <kbd>F</kbd> on a Mac) to focus the search box.</p> + +<h3 id="Add_and_refresh_storage">Add and refresh storage</h3> + +<p>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):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/16809/storage_detail_add_refresh.png" style="border: 1px solid black; display: block; height: 249px; margin: 0px auto; width: 926px;"></p> + +<h3 id="Sidebar"><a name="sidebar">Sidebar</a></h3> + +<p>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.</p> + +<p>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:</p> + +<ul> + <li>A stringified JSON like <code>'{"foo": "bar"}'</code> is shown as the origin JSON: <code>{foo: "bar"}</code>.</li> + <li>A string containing a key separated value, like <code>"1~2~3~4"</code> or <code>"1=2=3=4"</code> is shown like an array: <code>[1, 2, 3, 4]</code>.</li> + <li>A string containing key-value pairs, like <code>"ID=1234:foo=bar"</code> is shown as JSON: <code>{ID:1234, foo: "bar"}</code>.</li> +</ul> + +<p>The shown values can also be filtered using the search box at the top of the sidebar.</p> + +<h2 id="Working_with_the_Storage_Inspector">Working with the Storage Inspector</h2> + +<p>The following articles cover different aspects of using the network monitor:</p> + +<ul> + <li><a href="/en-US/docs/Tools/Storage_Inspector/Cookies">Cookies</a></li> + <li><a href="/en-US/docs/Tools/Storage_Inspector/Local_Storage_Session_Storage">Local Storage / Session Storage</a></li> + <li><a href="/en-US/docs/Tools/Storage_Inspector/Cache_Storage">Cache Storage</a></li> + <li><a href="/en-US/docs/Tools/Storage_Inspector/IndexedDB">IndexedDB</a></li> + <li><a href="/en-US/docs/Tools/Storage_Inspector/Extension_Storage">Extension Storage</a></li> +</ul> 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 +--- +<p>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.</p> + +<h2 id="Tomar_una_captura_de_pantalla_de_la_página">Tomar una captura de pantalla de la página</h2> + +<p>Usa el ícono de captura de pantalla: <img alt="" src="https://mdn.mozillademos.org/files/14713/camera-icon.png" style="height: 16px; margin-bottom: -4px; width: 18px;"> para tomar una captura completa de la página actual.</p> + +<p>Por defecto, el ícono de captura de pantalla no está habilitado. Para habilitarlo::</p> + +<ul> + <li>visita la página de <a href="/en-US/docs/Tools/Settings">Ajustes (Settings)</a></li> + <li>encuentra la sección con el texto "Available Toolbox Buttons"</li> + <li>marca la caja con la etiqueta "Take a screenshot of the entire page".</li> +</ul> + +<p>Verás el ícono en la barra de herramientas:</p> + +<p>{{EmbedYouTube("KB5V9uJgcS4")}}</p> + +<p>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:</p> + +<p>{{EmbedYouTube("HKS6MofdXVE")}}</p> + +<h2 id="Tomar_una_captura_de_un_elemento">Tomar una captura de un elemento</h2> + +<p>Para tomar una captura de un único elemento en la página, activa el menú contextual en ese elemento en el <a href="/en-US/docs/Tools/Page_Inspector/UI_Tour#HTML_pane">panel HTML del Inspector</a>, y selecciona "Screenshot Node". La captura se guarda en el directorio de descargas del navegador:</p> + +<p>{{EmbedYouTube("p2pjF_BrE1o")}}</p> + +<h2 id="Copiar_capturas_de_pantalla_al_portapapeles">Copiar capturas de pantalla al portapapeles</h2> + +<p>Desde Firefox 53, también puedes copiar la captura al portapapeles. Sólo marca la caja en Ajustes con la etiqueta "Screenshot to clipboard":</p> + +<p>{{EmbedYouTube("AZedFGh6F78")}}</p> + +<p>Ahora, cuando tomes una captura, la captura también es copiada al portapapeles.</p> 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 +--- +<p>La Caja de herramientas proporciona un único lugar para todas las herramientas de desarrollo que están incorporadas en Firefox.</p> + +<p>Puedes abrirla de varias maneras:</p> + +<ul> + <li>Abriendo el menú Herramientas del navegador, selecciona "Desarrollador web" y después "Inspector" o "Alternar Herramientas".</li> + <li>haz click en el icono de la llave en la barra de herramientas principal o en el menú hamburguesa y después en "Inspector" o "Alternar Herramientas".</li> + <li>Activando cualquier herramienta alojada en la barra de herramientas: por ejemplo, el depurador JavaScript o el Inspector de la página.</li> + <li>Presionando <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>I</kbd> en Windows y Linux, o <kbd>Cmd</kbd> + <kbd>Opt</kbd> + <kbd>I</kbd> en OS X. Explora también los <a href="https://developer.mozilla.org/es/docs/Tools/Keyboard_shortcuts">atajos de teclado</a>.</li> +</ul> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6923/toolbox.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>La ventana está dividida en dos partes: una barra de herramientas en la parte superior y un panel principal inferior:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6925/toolbox-annotated-29.png" style="display: block; height: 471px; margin-left: auto; margin-right: auto; width: 876px;"></p> + +<h2 id="Modo_de_Docking">Modo de Docking</h2> + +<p>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 <a href="/es/docs/Tools/Tools_Toolbox#Toolbox_controls">botones de la barra de herramientas</a>.</p> + +<p> A partir de Firefox 41 puedes alternar entre los dos últimos que has utilizado pulsando <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd> en Windows y Linux, o <kbd>Cmd</kbd> + <kbd>Shift</kbd> + <kbd>D</kbd> en OS X.</p> + +<h2 id="Barra_de_herramientas">Barra de herramientas</h2> + +<p>La barra de herramientas contiene los controles para activar una herramienta en particular, para fijar / flotar la ventana, y para cerrar la ventana:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7913/toolbox-toolbar-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Selector_de_Elementos">Selector de Elementos</h3> + +<p>Empezando por la izquierda, primero hay un botón para activar el selector de elementos (también llamado <em>Selector de nodos</em> o <em>Node picker</em>) que sirve para elegir el elemento de la página que vamos a inspeccionar. Ver <a href="https://developer.mozilla.org/es/docs/Tools/Page_Inspector/How_to/Select_an_element">Seleccionar un elemento</a>.</p> + +<h3 id="Herramientas_alojadas_en_barra_de_herramientas">Herramientas alojadas en barra de herramientas</h3> + +<p>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:</p> + +<ul> + <li><a href="/es/docs/Tools/Page_Inspector" title="/en-US/docs/Tools/Page_Inspector">Inspector de página</a></li> + <li><a href="/es/docs/Tools/Web_Console" title="/en-US/docs/Tools/Web_Console">Consola</a></li> + <li><a href="/es/docs/Tools/Debugger" title="/en-US/docs/Tools/Debugger">Depurador </a></li> + <li><a href="/es/docs/Tools/Style_Editor" title="/en-US/docs/Tools/Style_Editor">Editor de Estilos</a></li> + <li><a href="/es/docs/Tools/Profiler" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Analizador</a></li> + <li><a href="/es/docs/Tools/Network_Monitor" title="/en-US/docs/Performance/Profiling_with_the_Built-in_Profiler">Monitor de red</a></li> +</ul> + +<p>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).</p> + +<h3 id="Herramientas_Extra">Herramientas Extra</h3> + +<p>A continuación están los botones que pueden ponerse o quitarse desde la <a href="#Settings">configuración de la propia barra</a>. Por defecto se incluyen:</p> + +<ul> + <li><a href="/es/docs/Tools/Web_Console#The_split_console">Alternar consola dividida</a></li> + <li><a href="/es/docs/Tools/Responsive_Design_View">Vista de diseño adaptable</a></li> + <li><a href="/es/docs/tools/Working_with_iframes">Seleccionar un iframe como el documento actualmente seleccionado</a> (incluído por defecto solo a partir de Firefox 41).</li> +</ul> + +<p>Las siguientes herramientas no están incluídas por defecto, pero puedes incluirlas desde el botón de <a href="#Settings">configuración de la barra de herramientas</a>:</p> + +<ul> + <li><a href="/es/docs/Tools/Paint_Flashing_Tool" title="/en-US/docs/Tools/HIghlight_Painted_Area">Resaltar el área pintada</a></li> + <li><a href="/es/docs/Tools/3D_View" title="/en-US/docs/Tools/3D_View">3D View</a> (No está disponible en Firefox 40)</li> + <li><a href="/es/docs/Tools/Scratchpad" title="/en-US/docs/Tools/Scratchpad">Borrador</a></li> + <li><a href="/es/docs/Tools/Eyedropper">Seleccionar un color de la propia página</a></li> + <li>Hacer una captura de pantalla de la página entera: hace una captura de la página web y la guarda en tu directorio de descargas</li> + <li><a href="/es/docs/Tools/Rulers">Alternar reglas en la página</a></li> + <li>Medir parte de la página</li> +</ul> + +<h3 id="Controles_de_la_barra_de_herramientas">Controles de la barra de herramientas</h3> + +<p>Próximos a la esquina derecha los últimos botones son para:</p> + +<ul> + <li><a href="#Settings">Opciones de herramientas</a> da acceso a la configuración de las herramientas para desarrolladores.</li> + <li>Fijar al lateral de la ventana del navegador: quita la ventana de herramientas de la parte inferior de la ventana del navegador, y la fija al lateral de la ventana del navegador.</li> + <li>Mostrar en una ventana separada: alternar entre la ventana independiente y fijar a la ventana del navegador.</li> + <li>Cerrar la ventana.</li> +</ul> + +<h2 id="Settings_2"><a name="Settings">Settings</a></h2> + +<p>Ver la página de <a href="/es/docs/Tools/Settings">configuración de las herramientas de desarrollador</a>.</p> + + +<h2 id="Panel_principal">Panel principal</h2> + +<p>El contenido de la ventana del panel principal está totalmente controlado por, y es específico de la herramienta alojada actualmente seleccionada.</p> + +<h2 id="Atajos_de_teclado">Atajos de teclado</h2> + +<p>{{ Page ("es/docs/tools/Keyboard_shortcuts", "toolbox-shortcuts") }}</p> + +<p>{{ Page ("es/docs/tools/Keyboard_shortcuts", "all-toolbox-tools") }}</p> 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 +--- +<p><span id="result_box" lang="es"><span class="hps">Ver código fuente</span> <span class="hps">permite ver</span> <span class="hps">el código fuente HTML</span> <span class="hps">o XML</span> de<span class="hps"> la</span> <span class="hps">página que estás visitando</span><span>.</span> <span class="hps">Para activar</span> <span class="hps">Ver código fuente:</span></span></p> + +<ul> + <li>botón derecho del ratón en la página y seleccionar "Ver código fuente de la página"</li> + <li>pulsar Ctrl+U, o Cmd+U en OS X</li> +</ul> + +<p>Antes de Firefox 42, se abría una ventana nueva con el código fuente de la página.</p> + +<p>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 <code>about:config</code> y cambia la preferencia <code>view_source.tab</code> a <code>false</code>.</p> + +<p>A partir de Firefox 60 en adelante, la preferencia <code>view_source.tab</code> 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.</p> + +<h2 id="Características_de_ver_código_fuente">Características de ver código fuente</h2> + +<p>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:</p> + +<ul> + <li>Ir a la línea</li> + <li>Ajustar líneas largas (alternar)</li> + <li>Resaltar sintaxis (alternar)</li> +</ul> + +<p>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.</p> + +<p>Para acceder a Ir a línea usando el teclado, pulsa <kbd>Control</kbd> + <kbd>Option</kbd> + <kbd>L</kbd> en Mac, o <kbd>Alt</kbd> + <kbd>Shift</kbd> + <kbd>L</kbd> en Windows o Linux.</p> + +<h2 id="Enlazar_a_un_número_de_línea">Enlazar a un número de línea</h2> + +<p>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.</p> + +<p>Por ejemplo <a>view-source:https://www.mozilla.org/#line100</a></p> + +<p> </p> + +<h2 id="Ver_código_fuente_seleccionado">Ver código fuente seleccionado</h2> + +<p>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.</p> + +<h2 id="Ver_código_fuente_MathML">Ver código fuente MathML</h2> + +<p>Si haces clic con el botón contextual del ratón sobre algún <a href="/es/docs/Web/MathML">MathML</a>, <span id="result_box" lang="es"><span class="hps">verás un</span> item<span class="hps"> del menú contextual</span> <span class="atn hps">con la etiqueta "</span><span>Ver</span> <span class="hps">código fuente</span><span>"</span><span>:</span> haz<span class="hps"> clic en él</span> <span class="hps">para ver</span> <span class="hps">el código fuente</span> <span class="hps">MathML</span><span>.</span></span></p> + +<h2 id="Limitaciones_de_Ver_código_fuente">Limitaciones de Ver código fuente</h2> + +<p>Existen limitaciones en lo que hace Ver el código fuente algo que deberías tener en cuenta.</p> + +<h3 id="Informador_de_error_≠_validador">Informador de error ≠ validador</h3> + +<p>Ver código fuente sólo reporta errores de procesado, <strong>no</strong> 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 <strong>no es</strong> un HTML válido. <span id="result_box" lang="es"><span class="hps">Por lo tanto</span><span>,</span> <span class="hps">no</span> <span class="hps">se marcará</span> <span class="hps">este error en</span> <span class="hps">Ver código fuente.</span> <span class="hps">Si</span> <span class="hps">desea comprobar</span> <span class="hps">que el HTML</span> <span class="hps">es válido</span><span>, debe utilizar</span> <span class="hps">un validador</span> <span class="hps">HTML, como</span> <span class="hps">el <a href="http://validator.w3.org" lang="en">ofrecido por el W3C</a></span><span>.</span></span></p> + +<h3 id="No_se_reportan_todos_los_errores_de_procesado">No se reportan todos los errores de procesado</h3> + +<p><span id="result_box" lang="es"><span class="hps">A pesar de</span> <span class="hps">que todos los errores</span> <span class="hps">reportados son</span> <span class="hps">errores de análisis</span> <span class="hps">de acuerdo con la</span> <span class="hps">especificación de HTML</span><span>,</span> <span class="hps">no todos</span> <span class="hps">los errores</span> de procesado <span class="hps">son reportados por</span> <span class="hps">Ver código fuente.</span> <span class="hps">Entre los</span> <span class="hps">errores que</span> <span class="hps">no se </span><span class="hps">informan:</span></span></p> + +<ul> + <li><span id="result_box" lang="es"><span class="hps">Bytes</span> <span class="hps">que no son conformes</span> <span class="hps">según la</span> <span class="hps">codificación</span> <span class="hps">del</span> <span class="hps">documento no</span> <span class="hps">se marcan como</span> <span class="hps">errores</span><span>.</span></span></li> + <li><span id="result_box" lang="es"><span class="hps">Caracteres</span> <span class="hps">prohibidos</span> <span class="hps">no</span> <span class="hps">son reportados como</span> <span class="hps">errores</span><span>.</span></span></li> + <li>Errores relacionados con el final de fichero no se reportan.</li> + <li><span id="result_box" lang="es"><span class="hps">No</span> <span class="hps">se informa de errores</span> cuando se construye el árbol <span class="hps">relacionados con</span> <span class="hps">texto</span> <span class="hps">(en contraposición</span> <span class="hps">a las etiquetas</span><span>, comentarios o</span> <span class="hps">doctypes</span><span>)</span><span>.</span></span></li> + <li>Errores de procesado relacionados con los atributos <code>xmlns</code> tampoco son reportados.</li> +</ul> + +<h2 id="Resaltado_de_sintaxis_XML">Resaltado de sintaxis XML</h2> + +<p><span id="result_box" lang="es"><span class="hps">Ver código</span> fuente <span class="hps">utiliza el</span> <span class="hps">tokenizer</span> <span class="hps">de HTML</span> <span class="hps">para resaltar la</span> <span class="hps">fuente</span> <span class="hps">XML</span><span>.</span> <span class="hps">Mientras que el</span> <span class="hps">tokenizer</span> implementa<span class="hps"> el procesamiento de</span> <span class="hps">instrucciones cuando</span> se resalta una <span class="hps">fuente</span> <span class="hps">XML</span><span>,</span> <span class="hps">esta</span> <span class="hps">es la única</span> <span class="hps">capacidad de</span> <span class="hps">XML</span> <span class="hps">prevista</span><span>.</span> <span class="hps">Debido a esto,</span> <span class="hps">doctypes</span> <span class="hps">que tienen un</span> <span class="hps">subconjunto interno</span> <span class="hps">no se resaltan</span> <span class="hps">correctamente,</span> <span class="hps">y</span> <span class="hps">referencias de entidad</span> <span class="hps">a</span> <span class="hps">entidades personalizadas</span> tampoco <span class="hps">no se resaltan</span> <span class="hps">correctamente.</span></span></p> + +<p>Este resaltado defectuoso se puede observar si se ve el código fuente de los archivos chrome de Firefox (como los documentos XUL). </p> + +<p><span id="result_box" lang="es"><span class="hps">Sin embargo</span><span>, esto no debería</span> <span class="hps">ser un</span> <span class="hps">problema en la práctica</span> <span class="hps">cuando se ven</span> <span class="hps">los archivos XML</span> <span class="hps">típicos.</span></span></p> + +<h2 id="Ver_también">Ver también</h2> + +<ul> + <li><a class="external" href="http://hsivonen.iki.fi/view-source/" lang="en" title="http://hsivonen.iki.fi/view-source/">HTML5 Parser-Based View Source Syntax Highlighting</a> (Artículo de blog)</li> +</ul> + +<p>{{ languages( { "ja": "ja/View_source"} ) }}</p> 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 +--- +<p dir="ltr">La mayor parte de la Consola Web está ocupada por el panel de visualización de mensaje:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11661/web-console-message-pane.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 952px;"></p> + +<p>Cada mensaje se muestra como una fila separada</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>Tiempo</strong></td> + <td>La 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 <a href="/en-US/docs/barradeherramientas">barra de herramientas</a></td> + </tr> + <tr> + <td><strong>Categoria</strong></td> + <td> + <p><strong>Categoria</strong>: Esta indicacion nos revela de que trata el mensaje:</p> + + <ul style="margin-left: 40px;"> + <li><strong>Negro</strong>: Solicitud de red</li> + <li><span style="color: #0099ff;"><strong>Azul</strong></span>: CSS advertencia/error/registro</li> + <li><strong><span style="color: #ff8c00;">Naranja</span></strong>: JavaScript advertencia/error</li> + <li><span style="color: #ff0000;"><strong>Rojo</strong></span>: Advertencia de seguridad/error</li> + <li><span style="color: #90b090;"><strong>Verde</strong></span>: Registro de servidor</li> + <li><span style="color: #a9a9a9;"><strong>Gris claro</strong></span>: <a href="/en-US/docs/console">Consola</a> API mensajes</li> + <li><span style="color: #696969;"><strong>Gris oscuro</strong></span>: de entrada/salida desde el <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter">intérprete de línea de Comando</a></li> + </ul> + </td> + </tr> + <tr> + <td><strong>Tipo</strong></td> + <td>Para 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).</td> + </tr> + <tr> + <td><strong>Mensaje</strong></td> + <td>El cuerpo del mensaje.</td> + </tr> + <tr> + <td><strong>Número de apariciones</strong></td> + <td>Si 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ó.</td> + </tr> + <tr> + <td><strong>Nombre y número de línea</strong></td> + <td> + <p>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.</p> + + <p>A partir de Firefox 36, esto incluye también el número de columna.</p> + </td> + </tr> + </tbody> +</table> + +<p>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 <a href="/en-US/docs/Tools_Toolbox#Common_preferences">Configuración</a>.</p> + +<h2 id="Categorías_de_los_mensajes">Categorías de los mensajes</h2> + +<h3 id="Red">Red</h3> + +<div class="note"> +<p>Los mensajes de registro de la red no se muestran por defecto. Utiliza la función de <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtrar</a> para mostrarlos</p> +</div> + +<p>Las solicitudes de red están conectadas con una línea que tiene este aspecto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<table class="fullwidth-table standard-table"> + <tbody> + <tr> + <td><strong>Time</strong></td> + <td>La hora a la que se registró el mensaje.</td> + </tr> + <tr> + <td><strong>Category</strong></td> + <td>Indica que el mensaje es una solicitud HTTP.</td> + </tr> + <tr> + <td><strong>Method</strong></td> + <td> + <p>El método específico de la petición HTTP.</p> + + <p>Si la petición se hizo como una <a href="/en-US/docs/Web/API/XMLHttpRequest">XMLHttpRequest</a>, hay una nota adicional que indica ésto:</p> + + <p><img alt="" src="https://mdn.mozillademos.org/files/10167/web-console-xhr.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 648px;"></p> + </td> + </tr> + <tr> + <td><strong>URI</strong></td> + <td>El URI de destino.</td> + </tr> + <tr> + <td><strong>Summary</strong></td> + <td>La versión de HTTP, código de estado, y el tiempo que tarda en completarse.</td> + </tr> + </tbody> +</table> + +<h4 id="Revisando_los_detalles_de_la_petición_de_red">Revisando los detalles de la petición de red</h4> + +<p>Si hace clic en el mensaje, se le redirige al <a href="/en-US/docs/Tools/Network_Monitor">Panel de Red</a> 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.</p> + +<p>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:</p> + +<p>Encabezados: encabezados de petición y respuesta.</p> + +<p>Respuesta: el cuerpo de la respuesta</p> + +<p>Cookies: cualquier cookie que fuera enviada junto con la solicitud.</p> + +<h3 id="JS">JS</h3> + +<p>Los mensajes de JavaScript tienen el siguiente aspecto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7101/js-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="CSS">CSS</h3> + +<div class="note"> +<p>CSS warnings and reflow messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> +</div> + +<p>Los mensajes CSS tienen el siguiente aspecto:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h4 id="Eventos_de_reflujo_Reflow_events">Eventos de reflujo (Reflow events)</h4> + +<p>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: <a href="/en-US/docs/Web/CSS/:hover">hover</a>, o manipular el DOM en JavaScript.</p> + +<p>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 <a href="/en-US/docs/Tools/Web_Console/Console_messages#Synchronous_and_asynchronous_reflows">reflujos sínronos</a> <span id="ouHighlight__39_47TO35_43">activados</span><span id="noHighlight_0.171338285947087"> </span><span id="ouHighlight__49_52TO45_49">desde</span><span id="noHighlight_0.9176767211697917"> </span><span id="ouHighlight__54_63TO51_60">JavaScript</span><span id="noHighlight_0.15245612256799834">,</span><span id="noHighlight_0.6146070317208301"> </span><span id="ouHighlight__66_70TO63_66">cuyo</span><span id="noHighlight_0.7150414780955989"> </span><span id="ouHighlight__72_75TO68_73">código</span><span id="noHighlight_0.46273609600296195"> </span><span id="ouHighlight__87_90TO75_77">les</span><span id="noHighlight_0.04020396857638897"> </span><span id="ouHighlight__77_85TO79_85">dispara</span><span id="noHighlight_0.23969500573306946">.</span>.</p> + +<p>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 <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">barra de herramientasr</a> y seleccionar "Reflows".</p> + +<p>Cada mensaje está marcado como "reflujo" y muestra el tiempo necesario para ejecutarse:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">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ó:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Haga clic en el enlace para abrir el archivo en el <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p> + +<h4 id="Reflujos_síncronos_y_asíncronos"><a name="synchronous-and-asynchronous-reflows">Reflujos síncronos y asíncronos</a></h4> + +<p>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.</p> + +<p>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 <code>window.getComputedStyle(thing).height</code>:</p> + +<pre class="brush: js notranslate">var thing = document.getElementById("the-thing"); +thing.style.display = "inline-block"; +var thingHeight = window.getComputedStyle(thing).height;</pre> + +<div class="es" id="OutputArea" style="direction: ltr; text-align: left;"> +<div class="Wrap" id="OutputText" style="direction: ltr; text-align: left;"> +<div><span id="ouHighlight__0_9TO0_7">Debido a</span><span id="noHighlight_0.5080495377710348"> </span><span id="ouHighlight__11_14TO9_12">esto</span><span id="noHighlight_0.27660277495974706">,</span><span id="noHighlight_0.7014250788747086"> </span><span id="ouHighlight__17_20TO15_16">es</span><span id="noHighlight_0.8477552875134879"> </span><span id="ouHighlight__22_22TO18_20">una</span><span id="noHighlight_0.3077554454245065"> </span><span id="ouHighlight__24_27TO22_26">buena</span><span id="noHighlight_0.520335799909469"> </span><span id="ouHighlight__29_32TO28_31">idea</span><span id="noHighlight_0.5819655685356027"> </span><span id="ouHighlight__34_35TO33_36">para</span><span id="noHighlight_0.5366314914815862"> </span><span id="ouHighlight__37_41TO38_43">evitar</span><span id="noHighlight_0.4977607827883951"> la </span><span id="ouHighlight__43_54TO48_60">interpolación</span><span id="noHighlight_0.6059269045169466"> de la </span><span id="ouHighlight__56_60TO68_76">escritura</span><span id="noHighlight_0.33691265646783897"> </span><span id="ouHighlight__62_64TO78_78">y</span><span id="noHighlight_0.18550086187907766"> </span><span id="ouHighlight__66_69TO80_83">leer</span><span id="noHighlight_0.11440921100749979"> </span><span id="ouHighlight__71_75TO85_92">llamadas</span><span id="noHighlight_0.18346951849610216"> </span><span id="ouHighlight__77_78TO94_94">a</span><span id="noHighlight_0.8173881044979314"> los </span><span id="ouHighlight__93_98TO100_106">estilos</span><span id="noHighlight_0.7372463059156626"> </span><span id="ouHighlight__83_91TO108_109">de</span><span id="noHighlight_0.25672890219068567"> </span><span id="ouHighlight__80_81TO111_112">un</span><span id="noHighlight_0.5722843891711001"> </span><span id="ouHighlight__83_91TO114_121">elemento</span><span id="noHighlight_0.9651635901078331"> </span><span id="ouHighlight__100_103TO123_124">al</span><span id="noHighlight_0.6756293244240998"> </span><span id="ouHighlight__105_116TO126_134">manipular</span><span id="noHighlight_0.15856259142986695"> </span><span id="ouHighlight__118_120TO136_137">el</span><span id="noHighlight_0.17549086719617357"> </span><span id="ouHighlight__122_124TO139_147">árbol DOM</span>, 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.</div> + +<div></div> +</div> +</div> + +<h3 id="Security">Security</h3> + +<p>Security warnings and errors look like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/7107/sec-error-annotated.png" style="display: block; margin-left: auto; margin-right: auto;">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.</p> + +<p>The complete list of security messages is as follows:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <th scope="col">Message</th> + <th scope="col">Details</th> + </tr> + <tr> + <td>Blocked loading mixed active content</td> + <td>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 blocked this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Blocked loading mixed display content</td> + <td>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 blocked this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) active content on a secure page</td> + <td>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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) display content on a secure page</td> + <td>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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>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.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>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.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen.</td> + <td>Pages containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>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.</td> + <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen.</td> + <td>iframes containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>The site specified an invalid Strict-Transport-Security header.</td> + <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td> + </tr> + <tr> + <td> + <p>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.</p> + </td> + <td> + <p>The site uses a certificate whose signature uses the SHA-1 hash algorithm.</p> + + <p>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 <a href="/en-US/docs/Security/Weak_Signature_Algorithm">Weak Signature Algorithm</a> article for more details.</p> + + <p>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.</p> + </td> + </tr> + </tbody> +</table> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> 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.</p> + +<h3 id="Logging">Logging</h3> + +<div class="note"> +<p>Messages logged from <a href="/en-US/docs/Web/API/SharedWorker">Shared Workers</a>, <a href="/en-US/docs/Web/API/ServiceWorker_API">Service Workers</a>, add-ons, and <a href="/en-US/docs/Mozilla/ChromeWorkers">Chrome Workers</a> are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> +</div> + +<p>The Logging category includes messages logged using the <a href="/en-US/docs/Web/API/Console">Console</a> API.<br> + <img alt="" src="https://mdn.mozillademos.org/files/7105/console-api-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The Web console supports the following Console messages:</p> + +<ul> + <li>Error messages + <ul> + <li><a href="/en-US/docs/Web/API/Console.error"><code>error()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.exception"><code>exception()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.assert"><code>assert()</code></a> (when the assertion fails)</li> + </ul> + </li> + <li>Warning messages + <ul> + <li><a href="/en-US/docs/Web/API/Console.warn"><code>warn()</code></a></li> + </ul> + </li> + <li>Informational messages + <ul> + <li><a href="/en-US/docs/Web/API/Console.count"><code>count()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.dir"><code>dir()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.dirxml"><code>dirxml()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.info"><code>info()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.log"><code>log()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.table"><code>table()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.time"><code>time()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.timeEnd"><code>timeEnd()</code></a></li> + <li><a href="/en-US/docs/Web/API/Console.trace"><code>trace()</code></a></li> + </ul> + </li> +</ul> + +<p>The console prints a stack trace for all error messages, like this:</p> + +<pre class="brush: js notranslate">function foo() { + console.error("it explodes"); +} + +function bar() { + foo(); +} + +function doStuff() { + bar(); +} + +doStuff();</pre> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11665/error-stack.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 465px;"></p> + +<h3 id="Server">Server</h3> + +<div class="geckoVersionNote"> +<p>New in Firefox 43</p> +</div> + +<div class="note"> +<p>Server-side log messages are not shown by default. Use the <a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category">filtering</a> feature to show them.</p> +</div> + +<p>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.</p> + +<p>It uses the <a href="https://craig.is/writing/chrome-logger">Chrome Logger</a> protocol. Briefly, the way it works is:</p> + +<ul> + <li>your server-side code - Python, PHP, Node.js, ... - includes a library that provides a console API</li> + <li>your server-side code uses this API to log messages</li> + <li>the server-side library creates JSON objects from the messages and encodes them for transmission</li> + <li>the messages are transmitted to the client as a response header named <code>X-ChromeLogger-Data</code></li> + <li>the Web Console decodes these headers and displays them</li> +</ul> + +<p>To find a suitable library for your server code, see the <a href="https://craig.is/writing/chrome-logger">Chrome Logger documentation</a>.</p> + +<h3 id="Command_line_inputoutput">Command line input/output</h3> + +<p>Commands sent to the browser using the <a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p> + +<h2 id="Filtro_y_búsqueda"><a name="filtering-and-searching">Filtro y búsqueda</a></h2> + +<h3 id="Filtrando_por_categoría">Filtrando por categoría</h3> + +<p>You can use the toolbar along the top to constrain the results displayed.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11667/message-filters.png" style="display: block; height: 335px; margin-left: auto; margin-right: auto; width: 952px;">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:</p> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Category</th> + <th scope="col">Options</th> + </tr> + </thead> + <tbody> + <tr> + <td>Net</td> + <td>Errors<br> + Warnings<br> + XHR<br> + Log</td> + </tr> + <tr> + <td>CSS</td> + <td>Errors<br> + Warnings<br> + Reflows</td> + </tr> + <tr> + <td>JS</td> + <td>Errors<br> + Warnings</td> + </tr> + <tr> + <td>Security</td> + <td>Errors<br> + Warnings</td> + </tr> + <tr> + <td>Logging</td> + <td>Errors<br> + Warnings<br> + Info<br> + Log<br> + Shared Worker<br> + Service Workers<br> + Add-on or Chrome Workers</td> + </tr> + <tr> + <td>Server</td> + <td>Errors<br> + Warnings<br> + Info<br> + Log</td> + </tr> + </tbody> +</table> + +<h3 id="Filtering_by_text">Filtering by text</h3> + +<p>To see only messages that contain a specific string, type in the text box labeled "Filter output".</p> + +<h3 id="Clearing_the_log">Clearing the log</h3> + +<p>Finally, you can use this toolbar to clear the log.</p> 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 +--- +<p>La Consola Web:</p> + +<ol> + <li>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.</li> + <li>te permite interactuar con la pagina ejecutando expresiones Javascript en el contexto de la página.</li> +</ol> + +<p>It's part of the replacement for the old <a href="/en/Error_Console" title="en/Error Console">Error Console</a> 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.</p> + +<p>The other half of the replacement for the Error console is the <a href="/en-US/docs/Tools/Browser_Console" title="/en-US/docs/Tools/Browser_Console">Browser Console</a>, which shows errors, warnings, and messages from the browser's code and from add-ons.</p> + +<p>{{EmbedYouTube("C6Cyrpkb25k")}}</p> + +<h2 id="Abriendo_la_Consola_WEB">Abriendo la Consola WEB</h2> + +<p>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.</p> + +<p>The <a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a> will appear at the bottom of the browser window, with the Web Console activated (it's just called "Console" in the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5581/web-console.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>Underneath the <a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools Window's own toolbar</a>, the Web Console's interface is split into three sections:</p> + +<ul> + <li><a href="#filtering-and-searching" title="#filtering-and-searching">Toolbar</a>: along the top is a toolbar containing buttons with labels like "Net", "CSS", and "JS". This toolbar is used to filter which messages are displayed</li> + <li><a href="#command-line" title="#command-line">Command Line</a>: along the bottom is a command line that you can use to enter JavaScript expressions</li> + <li><a href="#message-display-pane" title="#message-display-pane">Message Display Pane</a>: in between the toolbar and the command line, and occupying most of the window, is the space in which the Web Console displays messages</li> +</ul> + +<h2 id="Message_Display_Pane"><a name="message-display-pane">Message Display Pane</a></h2> + +<p>Most of the Web Console is occupied by the message display pane:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5599/web-console-messages-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<p>The message display pane displays the following sorts of messages:</p> + +<ul> + <li>HTTP requests</li> + <li>Warnings and errors (including JavaScript, CSS, security warnings and errors, and messages explicitly logged by JavaScript code using the <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API)</li> + <li>Input/output messages: commands send to the browser via the Web Console's command line, and the result of executing them.</li> +</ul> + +<p>Each message is displayed as a single row in the pane.</p> + +<h3 id="HTTP_requests">HTTP requests</h3> + +<p>HTTP requests are logged with a line that looks like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5593/web-console-message-request-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<ul> + <li><strong>Time</strong>: the time the message was recorded</li> + <li><strong>Category</strong>: this indicates that the message is an HTTP request</li> + <li><strong>Method</strong>: the specific HTTP request method</li> + <li><strong>URI</strong>: the target URI</li> + <li><strong>Summary</strong>: the HTTP version, status code, and time taken to complete</li> +</ul> + +<p>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".</p> + +<p>If you click on the message, you'll see a window like this, containing more details about the request and response:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/3148/detailspanel.png" style="display: block; height: 502px; margin-left: auto; margin-right: auto; width: 430px;">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.</p> + +<p>Only the first megabyte of data is logged for each request or response body, so very large requests and responses will be truncated.</p> + +<h3 id="Warnings_and_errors">Warnings and errors</h3> + +<p>Warnings and errors are logged with a line looking something like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5585/web-console-message-annotated.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<ul> + <li><strong>Time</strong>: the time the message was recorded. From Firefox 28 onwards this is not shown by default, and you can opt to see timestamps using a <a href="/en-US/docs/Tools_Toolbox#Settings">setting in the Toolbox</a>.</li> + <li><strong>Category</strong>: this indicates what sort of message this is: + <ul style="margin-left: 40px;"> + <li><span style="color: #0099ff;"><strong>Blue</strong></span>: CSS warning/error</li> + <li><strong><span style="color: #ff8c00;">Orange</span></strong>: JavaScript warning/error</li> + <li><span style="color: #ff0000;"><strong>Red</strong></span>: security warning/error</li> + <li><span style="color: #a9a9a9;"><strong>Light Gray</strong></span>: message explicitly logged from JavaScript code using the <a href="/en-US/docs/Web/API/console" title="/en-US/docs/Web/API/console">console</a> API</li> + </ul> + </li> + <li><strong>Type</strong>: an icon indicating whether it is an error(☓) or a warning(⚠).</li> + <li><strong>Message</strong>: the message itself</li> + <li><strong>Number of occurrences</strong>: if a line that generates a warning or error is executed more than once, it is only logged once, and this counter appears to indicate how many times it was encountered.</li> + <li><strong>Filename and line number</strong>: a link to the filename and line number that generated the message</li> +</ul> + +<h4 id="Security_messages">Security messages</h4> + +<p>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.</p> + +<p>The complete list of security messages is as follows:</p> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <th scope="col">Message</th> + <th scope="col">Details</th> + </tr> + <tr> + <td>Blocked loading mixed active content</td> + <td>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 blocked this active content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Blocked loading mixed display content</td> + <td>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 blocked this display content. See <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) active content on a secure page + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>Loading mixed (insecure) display content on a secure page + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>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 <a href="/en-US/docs/Security/MixedContent">Mixed Content</a> for more details.</td> + </tr> + <tr> + <td>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.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>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.</td> + <td>See <a href="/en-US/docs/Security/CSP">Content Security Policy</a> for more details.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) page. This is a security risk that allows user login credentials to be stolen. + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>Pages containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>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. + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>Forms containing password fields must submit them over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>Password fields present on an insecure (http://) iframe. This is a security risk that allows user login credentials to be stolen. + <div class="geckoVersionNote"> + <p>Introduced in Firefox 26</p> + </div> + </td> + <td>iframes containing login forms must be served over HTTPS, not HTTP.</td> + </tr> + <tr> + <td>The site specified an invalid Strict-Transport-Security header.</td> + <td>See <a href="/en-US/docs/Security/HTTP_Strict_Transport_Security">HTTP Strict Transport Security</a> for more details.</td> + </tr> + </tbody> +</table> + +<p><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=863874">Bug 863874</a> 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.</p> + +<h3 id="Reflow_events">Reflow events</h3> + +<div class="geckoVersionNote"> +<p>Reflow events are only logged from Firefox Desktop 27+ and Firefox OS 1.3+.</p> +</div> + +<p>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 <a href="/en-US/docs/Web/CSS/:hover">:hover</a>, or manipulating the DOM in JavaScript.</p> + +<p>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 <a href="#synchronous-and-asynchronous-reflows">synchronous reflows</a> triggered from JavaScript, which code triggered them.</p> + +<p>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 <a href="#filtering-and-searching">toolbar</a> and selecting "Log".</p> + +<p>Each message is labeled "reflow" and shows the time taken to execute the reflow:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6365/web-console-reflow-asynch.png" style="display: block; height: 53px; margin-left: auto; margin-right: auto; width: 554px;">If the reflow is a synchronous reflow triggered from JavaScript, it also shows a link to the line of code that triggered the reflow:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6367/web-console-reflow-synch.png" style="display: block; height: 51px; margin-left: auto; margin-right: auto; width: 554px;">Click the link to open the file in the <a href="/en-US/docs/Tools/Debugger">Debugger</a>.</p> + +<h4 id="Synchronous_and_asynchronous_reflows"><a name="synchronous-and-asynchronous-reflows">Synchronous and asynchronous reflows</a></h4> + +<p>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.</p> + +<p>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 <code>window.getComputedStyle(thing).height</code>:</p> + +<pre class="brush: js">var thing = document.getElementById("the-thing"); +thing.style.display = "inline-block"; +var thingHeight = window.getComputedStyle(thing).height;</pre> + +<p>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.</p> + +<h3 id="Inputoutput_messages">Input/output messages</h3> + +<p>Commands sent to the browser using the <a href="#command-line" title="#command-line">Web Console's command line</a>, and the corresponding responses, are logged using lines like this:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5587/web-console-message-input-output.png" style="display: block; height: 68px; margin-left: auto; margin-right: auto; width: 554px;">The dark gray bar indicates that these are input/output messages, while the direction of the arrow discriminates between input and output.</p> + +<h3 id="Filtering_and_searching"><a name="filtering-and-searching">Filtering and searching</a></h3> + +<p>You can use the toolbar along the top to constrain the results displayed.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5601/web-console-toolbar-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;">You can display only specific types of messages or only message containing specific strings.</p> + +<p>Finally, you can use this toolbar to clear the log.</p> + +<dl> +</dl> + +<h2 id="The_command_line_interpreter"><a name="command-line">The command line interpreter</a></h2> + +<p>You can interpret JavaScript expressions in real time using the command line provided by the Web Console.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5597/web-console-commandline-highlighted.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h3 id="Basic_operation">Basic operation</h3> + +<h4 id="Entering_expressions">Entering expressions</h4> + +<p>To enter expressions just type into the command line and press "Enter". To enter multiline expressions, use "Shift+Enter" instead of "Enter".</p> + +<p>The expression you type is echoed in the message display window, followed by the result:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5615/web-console-commandline-simple.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h4 id="Accessing_variables">Accessing variables</h4> + +<p>You can access variables defined in the page, both built-in variables like <code>window</code> and variables added by JavaScript like <code>jQuery</code>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5609/web-console-commandline-href.png" style="display: block; height: 89px; margin-left: auto; margin-right: auto; width: 632px;"><img alt="" src="https://mdn.mozillademos.org/files/5611/web-console-commandline-jquery.png" style="display: block; height: 92px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h4 id="Autocomplete">Autocomplete</h4> + +<p>The command line has autocomplete: enter the first few letters and a popup appears with possible completions:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5607/web-console-commandline-autocomplete.png" style="display: block; height: 125px; margin-left: auto; margin-right: auto; width: 632px;">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.</p> + +<div class="geckoVersionNote"> +<p>New in Firefox 28</p> +</div> + +<p>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.</p> + +<h4 id="Inspecting_objects">Inspecting objects</h4> + +<p>If the result object is an object it appears in square brackets and is underlined, like this: <code><u>[object Function]</u></code>. Click on it, and you'll see a new panel appear containing details of the object:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5613/web-console-commandline-object-details.png" style="display: block; margin-left: auto; margin-right: auto;">To dismiss this panel press "Escape".</p> + +<h4 id="Defining_variables">Defining variables</h4> + +<p>You can define your own variables, and then access them:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/5605/web-console-commandline-addvariable.png" style="display: block; height: 125px; margin-left: auto; margin-right: auto; width: 632px;"><img alt="" src="https://mdn.mozillademos.org/files/5603/web-console-commandline-addfunction.png" style="display: block; height: 168px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h4 id="Command_history">Command history</h4> + +<p>The command line remembers commands you've typed: to move back and forward through your history, use the up and down arrows.</p> + +<h3 id="Keyboard_shortcuts">Keyboard shortcuts</h3> + +<table class="standard-table" style="width: auto;"> + <tbody> + <tr> + <td class="header">Shortcut</td> + <td class="header">Description</td> + </tr> + <tr> + <td>↑</td> + <td>Moves to the previous entry in the command history, or, if an autocomplete popup is open, highlights the previous suggestion.</td> + </tr> + <tr> + <td>↓</td> + <td>Moves to the next entry in the command history, or, if an autocomplete popup is open, highlights the next suggestion.</td> + </tr> + <tr> + <td>Ctrl-A</td> + <td>Moves the cursor to the beginning of the line. (Note: beginning with Firefox 22, this will select all text on Windows)</td> + </tr> + <tr> + <td>Ctrl-E</td> + <td>Moves the cursor to the end of the line.</td> + </tr> + <tr> + <td>Return</td> + <td>Executes the code typed on the command line, or, if an autocomplete popup is open, chooses the current suggestion.</td> + </tr> + <tr> + <td>Shift-Return</td> + <td>Expands the height of the text input box for the command line by a line.</td> + </tr> + <tr> + <td>Escape</td> + <td>Cancels the autocompletion popup.</td> + </tr> + <tr> + <td>Tab</td> + <td>Generates an autocomplete suggestion and accepts the first one.</td> + </tr> + </tbody> +</table> + +<h3 id="Helper_commands">Helper commands</h3> + +<p>{{ page("/en/Using_the_Web_Console/Helpers", "The commands") }}</p> + +<h2 id="The_split_console">The split console</h2> + +<div class="geckoVersionNote"> +<p>The split console is new in Firefox 28.</p> +</div> + +<p>{{EmbedYouTube("G2hyxhPHyXo")}}</p> + +<p>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 <a href="/en-US/docs/Tools_Toolbox#Toolbar">Toolbar</a>. The toolbox will now appear split, with the original tool above and the web console underneath.</p> + +<p>As usual, <code>$0</code> works as a shorthand for the element currently selected in the Inspector:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6619/web-console-split-inspector.png" style="display: block; margin-left: auto; margin-right: auto;">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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/6621/web-console-split-debugger.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="See_also">See also</h2> + +<ul> + <li><a href="/en/Tools/Web_Console/Helpers" title="en/Using the Web Console/Helpers">Web Console Helpers</a></li> + <li>{{ domxref("console") }}</li> +</ul> + +<p>{{ languages( { "ja": "ja/Tools/Web_Console"} ) }}</p> 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 +--- +<p>Para abrir la Consola Web:</p> + +<ul> + <li>Puedes seleccionar "Consola Web" desde el submenu Desarrollador Web en el menu de Firefox ( o menu Herramientas si despliegas la barra menu o estas utilizando Mac OS X)</li> + <li>o presionando el <kbd>Ctrl</kbd><kbd>Shift</kbd><kbd>K</kbd> (<kbd>Command</kbd><kbd>Option</kbd><kbd>K</kbd> en OS X) atajo de teclado.</li> +</ul> + +<p>La Caja de herramientas (<a href="https://developer.mozilla.org/en-US/docs/Tools/DevTools_Window" title="/en-US/docs/Tools/DevTools_Window">Toolbox</a>) 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 (<a href="/en-US/docs/Tools/DevTools_Window#Toolbar" title="/en-US/docs/Tools/DevTools_Window#Toolbar">DevTools toolbar</a>)):</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/11669/console.png" style="display: block; height: 324px; margin-left: auto; margin-right: auto; width: 952px;"></p> + +<p>La interfaz de la Consola Web esta dividida en tres secciones horizontales que son:</p> + +<ul> + <li>Barra de herramientas (<a href="/en-US/docs/Tools/Web_Console/Console_messages#Filtering_by_category" title="#filtering-and-searching">Toolbar</a>): A lo largo de la parte de arriba esta la barra de herramientas, contiene botones con etiquetas como "Net", "CSS", and "JS". Esta barra de herramientas se usa para filtrar cuales mensajes seran mostrados.</li> + <li>Linea de comando (<a href="/en-US/docs/Tools/Web_Console/The_command_line_interpreter" title="#command-line">Command Line</a>): A lo largo de la parte de abajo esta una linea de comando que se puede utilizar para ingresar expresiones en JavaScript </li> + <li>Panel de Mensaje (<a href="/en-US/docs/Tools/Web_Console/Console_messages" title="#message-display-pane">Message Display Pane</a>): se localiza en medio de la barra de herramientas y la linea de omando, ocupa la mayor parte de la ventana, es el espacio en el cual la Consola Web muestra los mensajes.</li> +</ul> diff --git a/files/es/tools/web_console/la_línea_de_comandos_del_intérprete/index.html b/files/es/tools/web_console/la_línea_de_comandos_del_intérprete/index.html new file mode 100644 index 0000000000..06e5922248 --- /dev/null +++ b/files/es/tools/web_console/la_línea_de_comandos_del_intérprete/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 +--- +<div>{{ToolsSidebar}}</div> + +<p>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.</p> + +<h2 id="Modo_unilínea">Modo unilínea</h2> + +<p>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 <strong>>></strong>.</p> + +<p><img alt="La consola web, mostrando el modo unilínea" src="https://mdn.mozillademos.org/files/16965/web_console_single.png" style="display: block; height: 704px; margin-left: auto; margin-right: auto; width: 1952px;"></p> + +<p>Para ingresar expresiones en el modo unilínea, escribe en el indicador y presiona <kbd>Intro</kbd>. Para ingresar expresiones de varias líneas, presiona <kbd>Mayús</kbd>+<kbd>Intro</kbd> después de escribir cada línea, luego <kbd>Intro</kbd> para ejecutar todas las líneas ingresadas.</p> + +<p>La expresión que escribas se repite debajo de la petición de entrada, seguida del resultado.</p> + +<p>Si tu entrada no parece estar completa cuando presiones <kbd>Intro</kbd>, la consola lo trata como <kbd>Mayús</kbd>+<kbd>Intro</kbd>, lo cual te permite finalizar tu entrada.</p> + +<p>Por ejemplo, si escribes:</p> + +<pre class="brush: js notranslate">function foo() {</pre> + +<p>y luego <kbd>Intro</kbd>, la consola no ejecuta inmediatamente la entrada, pero se comporta como si hubieras presionado <kbd>Mayús</kbd>+<kbd>Intro</kbd>, para que puedas terminar de ingresar la definición de la función.</p> + +<h2 id="Modo_multilínea">Modo multilínea</h2> + +<p>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 <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) o <kbd>Cmd</kbd>+<kbd>B</kbd> (macOS). El panel de edición multilínea se abre en el lado izquierdo de la Consola web.</p> + +<p><img alt="Modo multilínea en la consola web" src="https://mdn.mozillademos.org/files/16966/web_console_multi.png" style="border-style: solid; border-width: 1px; height: 700px; width: 1946px;"></p> + +<p>De manera predeterminada, en este modo puedes ingresar múltiples líneas de JavaScript, presionando <kbd>Intro</kbd> 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 <strong>Ejecutar</strong> o presiona <kbd>Ctrl</kbd>+<kbd>Intro</kbd> (o <kbd>Cmd</kbd>+<kbd>Intro</kbd> 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.</p> + +<p>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.</p> + +<p>Puedes abrir archivos en el modo multilínea y guardar el contenido actual del panel de edición en un archivo.</p> + +<ul> + <li>Para abrir un archivo, presiona <kbd>Ctrl</kbd>+<kbd>O</kbd> (<kbd>Cmd</kbd>+<kbd>O</kbd> en MacOS). Se abre un cuadro de diálogo de archivo para que puedas seleccionar el archivo que deseas abrir.</li> + <li>Para guardar el contenido del panel de edición, presiona <kbd>Ctrl</kbd>+<kbd>S</kbd> (<kbd>Cmd</kbd>+<kbd>S</kbd> en MacOS). Se abre un cuadro de diálogo de archivo para que puedas especificar la ubicación en la que deseas guardar el archivo.</li> +</ul> + +<p>Para volver al modo unilínea, haz clic en el icono <strong>X</strong> en la parte superior del panel de edición multilínea o presiona <kbd>Ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) o <kbd>Cmd</kbd>+<kbd>B</kbd> (MacOS).</p> + +<h2 id="Acceder_a_variables">Acceder a variables</h2> + +<p>Puedes acceder a las variables definidas en la página, tanto variables integradas como <code>window</code> como variables agregadas por bibliotecas de JavaScript como <em>jQuery</em>:</p> + +<p><img alt="Accder a variables" src="https://mdn.mozillademos.org/files/7367/commandline-accessbuiltin.png" style="display: block; margin-left: auto; margin-right: auto;"><img alt="" src="https://mdn.mozillademos.org/files/7369/commandline-accesspageadded.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<h2 id="Autocompletado">Autocompletado</h2> + +<p>El editor tiene autocompletado: ingresa las primeras letras y aparecerá una ventana emergente con posibles terminaciones:</p> + +<p><img alt="Autocompletado" src="https://mdn.mozillademos.org/files/16426/console_autocomplete_cropped.png" style="border: 1px solid black; display: block; height: 299px; margin-left: auto; margin-right: auto; width: 302px;"></p> + +<p>Presiona <kbd>Intro</kbd>, <kbd>Tab</kbd> 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.</p> + +<p>Las sugerencias de autocompletado de la consola no distinguen entre mayúsculas y minúsculas.</p> + +<p>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.</p> + +<p>También obtienes sugerencias de autocompletado para elementos de arreglo:</p> + +<p><img alt="Autocompletado en arreglos" src="https://mdn.mozillademos.org/files/16440/arrayList_autocomplete.png" style="border: 1px solid black; display: block; height: 271px; margin-left: auto; margin-right: auto; width: 800px;"></p> + +<p>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ú <strong>Habilitar autocompletado</strong> 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.</p> + +<h2 id="Evaluación_instantánea">Evaluación instantánea</h2> + +<div class="blockIndicator note"> +<p>Esta característica está disponible en Firefox Nightly, en las versiones etiquetadas con 74 y posteriores.</p> +</div> + +<p>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.</p> + +<p>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 <strong>Evaluación instantánea</strong> 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.</p> + +<h2 id="Contexto_de_ejecución">Contexto de ejecución</h2> + +<p>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 <strong>Ejecutar</strong>, puedes cambiar al modo unilínea y seguir utilizando tu función.</p> + +<h2 id="Resaltado_de_sintaxis">Resaltado de sintaxis</h2> + +<p><img alt="La salida de la consola mostrando la sintaxis resaltada" src="https://mdn.mozillademos.org/files/16470/console_syntaxHighlighting.png" style="border: 1px solid black; display: block; height: 310px; margin-left: auto; margin-right: auto; width: 452px;"></p> + +<p>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".</p> + +<p>La salida también se resalta cuando es apropiado.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> El resaltado de sintaxis no está visible en tu navegador si se han habilitado las funciones de accesibilidad.</p> +</div> + +<h2 id="Historial_de_ejecución">Historial de ejecución</h2> + +<p>El intérprete recuerda las expresiones que has escrito. Para avanzar y retroceder en tu historial:</p> + +<ul> + <li>En el modo unilínea, usa las flechas hacia arriba y hacia abajo.</li> + <li>En el modo multilínea, utiliza los iconos <strong>⋀</strong> y <strong>⋁</strong> de la barra de herramientas del panel de edición.</li> +</ul> + +<p>El historial de expresiones se conserva entre sesiones. Para borrar el historial, usa la <a href="/es/docs/Tools/Web_Console/The_command_line_interpreter#Helper_commands">función auxiliar</a> <code>clearHistory()</code>.</p> + +<p>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 <kbd>F9</kbd>. En Mac, presiona <kbd>Ctrl</kbd>+<kbd>R</kbd> (<strong>Nota:</strong> ¡no <kbd>Cmd</kbd>+<kbd>R</kbd>!) para iniciar la búsqueda inversa.</p> + +<p><img alt="Búsqueda inversa" src="https://mdn.mozillademos.org/files/16468/reverse_search.png" style="border: 1px solid black; display: block; height: 335px; margin: 0px auto; width: 500px;"></p> + +<p>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 <kbd>F9</kbd> repetidamente en Windows y Linux (<kbd>Ctrl</kbd>+<kbd>R</kbd> en Mac), retrocedes por las coincidencias.</p> + +<p><img alt="Ejemplo de búsqueda inversa" src="https://mdn.mozillademos.org/files/16469/reverse_search_example.png" style="border: 1px solid black; display: block; margin: 0 auto;"></p> + +<p>Una vez que hayas iniciado la búsqueda inversa, puedes usar <kbd>Mayús</kbd>+<kbd>F9</kbd> en Windows o Linux (<kbd>Ctrl</kbd>+<kbd>S</kbd> en Mac) para buscar hacia adelante en la lista de coincidencias. También puedes utilizar los iconos <strong>⋀</strong> y <strong>⋁</strong> en la barra de búsqueda de expresiones.</p> + +<p>Cuando encuentres la expresión que deseas, presiona <kbd>Intro</kbd> (<kbd>Intro</kbd>) para ejecutar la instrucción.</p> + +<h2 id="Trabajando_con_iframes">Trabajando con <code>iframe</code>s</h2> + +<p>Si una página contiene <a href="/es/docs/Web/HTML/Element/iframe">iframes</a> incrustados, puedes utilizar la función <code>cd()</code> para cambiar el alcance de la consola a un <code>iframe</code> específico, y luego puedes ejecutar funciones definidas en el documento alojado por ese <code>iframe</code>. Hay tres formas de seleccionar un <code>iframe</code> usando <code>cd()</code>:</p> + +<p>Puedes pasar el elemento <code>iframe</code> del DOM:</p> + +<pre class="brush: js notranslate">var frame = document.getElementById("frame1"); +cd(frame);</pre> + +<p>Puedes pasar un selector de CSS que coincida con el <code>iframe</code>:</p> + +<pre class="brush: js notranslate">cd("#frame1");</pre> + +<p>Puedes pasar el objeto <code>window</code> global del <code>iframe</code>:</p> + +<pre class="brush: js notranslate">var frame = document.getElementById("frame1"); +cd(frame.contentWindow); +</pre> + +<p>Para volver a cambiar el contexto al objeto <code>window</code> de nivel superior, llama a <code>cd()</code> sin argumentos:</p> + +<pre class="brush: js notranslate">cd();</pre> + +<p>Por ejemplo, supongamos que tenemos un documento que incluye un <code>iframe</code>:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + </head> + <body> + <iframe id="frame1" src="static/frame/my-frame1.html"></iframe> + </body> +</html></pre> + +<p>El <code>iframe</code> define una nueva función:</p> + +<pre class="brush: html notranslate"><!DOCTYPE html> +<html> + <head> + <meta charset="UTF-8"> + <script> + function whoAreYou() { + return "Yo soy el frame1"; + } + </script> + </head> + <body> + </body> +</html></pre> + +<p>Puedes cambiar el contexto al <code>iframe</code> de esta manera:</p> + +<pre class="brush: js notranslate">cd("#frame1");</pre> + +<p>Ahora verás que el objeto <code>window</code> global del documento es el <code>iframe</code>:</p> + +<p><img alt="window global del documento" src="https://mdn.mozillademos.org/files/7355/web-console-iframe-document.png" style="display: block; height: 75px; margin-left: auto; margin-right: auto; width: 632px;">Y puedes llamar a la función definida en el <code>iframe</code>:</p> + +<p><img alt="función en la consola web" src="https://mdn.mozillademos.org/files/7357/web-console-iframe-function.png" style="display: block; height: 77px; margin-left: auto; margin-right: auto; width: 632px;"></p> + +<h2 id="Comandos_auxiliares">Comandos auxiliares</h2> + +<p>{{ page("es/docs/Tools/Web_Console/Helpers", "Los comandos") }}</p> 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 +--- +<div class="geckoVersionNote"> +<p>WebIDE está disponible desde Firefox 34 en adelante.</p> + +<p>También puede habilitarlo en Firefox 33, modificando una opción: Visite <a href="http://kb.mozillazine.org/About:config">about:config</a>, encuentre la opción llamada <code>devtools.webide.enabled</code> y cambie su valor a <code>true</code>.</p> +</div> + +<div class="summary"> +<p>WebIDE es el sustituto de <a href="/es/Firefox_OS/Using_the_App_Manager">App Manager</a>. Al igual que App Manager, este permite ejecutar y depurar aplicaciones <a href="/es/Firefox_OS">Firefox OS</a> utilizando el <a href="/es/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> o un dispositivo Firefox OS real.</p> + +<p>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.</p> + +<p>Por último, WebIDE le permite conectarse a <a href="https://developer.mozilla.org/en-US/docs/Tools">Firefox Developer Tools</a> (Herramientas de Desarrollo Firefox) a otros navegadores, incluyendo Firefox para Android, Chrome para Android, y Safari para iOS. Vea la página de<a href="/es/docs/Tools/Remote_Debugging"> </a><a href="https://developer.mozilla.org/en-US/docs/Tools/Remote_Debugging">Remote Debugging</a> (Depuración Remota) para instrucciones de como conectar con un navegador específico.</p> +</div> + +<p>Con WebIDE, primero <a href="/es/docs/Tools/WebIDE#Setting_up_runtimes">configura uno o varios <em>runtimes</em></a>. Un <em>runtime </em>es un entorno en el que podrás ejecutar y depurar la aplicación. Un <em>runtime</em> 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.</p> + +<p>Luego, <a href="/es/docs/Tools/WebIDE#Creating_and_opening_apps">cree una aplicación, o abra una aplicación existente</a>. 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.</p> + +<p>Finalmente, puede <a href="/es/docs/Tools/WebIDE#Running_and_debugging_apps">instalar la aplicción en uno de los <em>runtimes</em> y ejecutarla</a>. Usted puede abrir la suite de herramientas para desarrolladores - el <a href="/es/docs/Tools/Page_Inspector">Inspector</a>, la <a href="/es/docs/Tools/Web_Console">Consola</a>, el <a href="/es/docs/Tools/Debugger">JavaScript Debugger</a> (Depurador de JavaScript), etc. - para examinar y modificar la aplicación en ejecución.</p> + +<h2 id="Requisitos_del_Sistema">Requisitos del Sistema</h2> + +<p>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.<br> + <br> + Sólo se puede utilizar el WebIDE si usted está pensando en Firefox OS 1.2 o posterior.</p> + +<h2 id="Ejecutando_WebIDE">Ejecutando WebIDE</h2> + +<p>Hay tres maneras de abrir WebIDE:</p> + +<ul> + <li>En el menú Web Developer (Desarrollador Web), haga clic en "WebIDE" y éste se abrirá.</li> + <li>Use la combinación de teclas Shift-F8.</li> + <li>Un ícono para tales efectos está disponible en la Barra de Herramientas de Firefox. Este siembre es visible si se está usando <a href="/es/Firefox/Developer_Edition">Firefox Developer Edition</a> (Firefox Edición Desarrollador), y con cualquier Firefox versión 36 o superior aparece después de que haya abierto el WebIDE al menos una vez:</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/9437/webide-icon.png" style="display: block; margin-left: auto; margin-right: auto; width: 897px;"></p> + +<p>Así es como luce WebIDE:<img alt="" src="https://mdn.mozillademos.org/files/8033/webide-initial.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">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 <em>Runtime</em>" (Select Runtime) le permite seleccionar un <em>runtime</em> o configurar uno nuevo.<br> + <br> + 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 <em>runtime</em>.</p> + +<p>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 <code>Command</code> en vez de <code>Control</code> en OS X):</p> + +<ul> + <li><code>Ctrl +</code> aumenta el tamaño de la fuente</li> + <li><code>Ctrl -</code> disminuye el tamaño de la fuente</li> + <li><code>Ctrl 0</code> vuelte el tamaño de la fuente al valor por defecto</li> +</ul> + +<h2 id="Configurando_runtimes">Configurando <em>runtimes</em></h2> + +<p>En el el menú desplegable "Seleccione <em>Runtime</em>", los <em>rumtimes</em> se agrupan en tres tipos:</p> + +<ul> + <li><a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Connecting_a_Firefox_OS_device">Dispositivos USB</a>: Dispositivos con sistema operativo Firefox conectados a través de USB.</li> + <li><a href="/en-US/docs/Tools/WebIDE#Adding_a_Simulator">Simuladores</a>: instancias del simulador Firefox OS que ha instalado.</li> + <li><a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">Personalizado</a>: úselo para conectarse a la WebIDE utilizando un nombre arbitrario y el puerto.</li> +</ul> + +<p>La primera vez que hace clic en el menú desplegable, es posible que no vea los <em>runtimes</em> aquí:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8043/webide-no-runtimes.png" style="display: block; height: 564px; margin-left: auto; margin-right: auto; width: 723px;">El resto de esta sección describe cómo se pueden agregar algunos <em>runtimes</em>.</p> + +<h3 id="Conectando_un_dispositivo_Firefox_OS">Conectando un dispositivo Firefox OS</h3> + +<p>Antes de conectar un dispositivo Firefox OS, algunas configuraciones que debes revisar:</p> + +<ul> + <li><strong>revisar la versión Firefox OS: </strong>asegurar que tu dispositivo tiene Firefox OS 1.2/Boot2Gecko 1.2 o superior. Para revisar la versión, ir a configuracion de app del dispositivo, luego <code>Device Information > Software</code>. Si no tiene la última actualización, busca tu dispositivo en <a href="/en-US/Firefox_OS/Developer_phone_guide">guia del desarrollador</a> y sigue las instrucciones de actualizacion.</li> + <li><strong>habilitar depuracion remota: </strong>en la configuracion de app del dispositivo, ir a <code>Device information > More information > Developer</code>. + <ul> + </ul> + + <ul> + <li>Firefox OS 1.3 y anteriores: "Depuración Remota" es una simple casilla. Confirmalo.</li> + <li>Firefox OS 1.4 y superiores: "Depuración Remota" le pedirá habilitar ADB, o ADB y DevTools. Seleccionar "ADB y DevTools".</li> + </ul> + </li> + <li><strong>deshabilitar el bloqueo de pantalla en el dispositivo:</strong> en la configuracion de app del dispositivo, vaya a <code>Screen Lock</code> y desmarcar el <code>Lock Screen</code> checkbox. es una buena idea porque cuando la pantalla se bloquea, la conexion del teléfono se pierde, esto significa que no esta disponible para depuración.</li> + <li><strong>si tu quieres depurar aplicaciones, incluyendo aplicaciones presintaladas</strong>: revisar la sección <a href="/en-US/docs/Tools/WebIDE#Debugging_certified_apps">depurando apps certificadas </a>.</li> +</ul> + +<div class="note"> +<p><strong>Solo Linux :</strong></p> + +<ul> + <li>agregar archivo de reglas <code>udev</code> , asi como el paso 3 documentado en <a href="http://developer.android.com/tools/device.html#setting-up">configurando un dispositivo Android</a>. El atributo <code>idVendor</code> a utilizar para Geeksphone es"05c6", y <a href="http://developer.android.com/tools/device.html#VendorIds">esta pagina</a> despliega otros valores de <code>idVendor</code>.</li> +</ul> +</div> + +<div class="note"> +<p><strong>Solo Windows:</strong></p> + +<ul> + <li>necesitas instalar drivers, como se documenta en el paso 3 de <a href="http://developer.android.com/tools/device.html#setting-up">configurar un dispositivo Android</a>. Tú puedes encontrar drivers para dispositivos Geeksphone en <a href="http://downloads.geeksphone.com/">sitio web de Geeksphone </a>. Windows 8 por defecto no permite instalar drivers no firmados. Ver el siguiente tutorial en <a class="external external-icon" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Como instalar driver no firmados en Windows 8"</a>.</li> + <li>si el WebIDE no visualiza tu dispositivo después de seguir los pasos, puede que tengas que editar <a class="external external-icon" href="http://blog.fh-kaernten.at/wehr/?p=1182">edit adb_usb.ini</a>.</li> +</ul> +</div> + +<p>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":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8045/webide-select-runtime-keon.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 710px;"></p> + +<p>Si no visualizas el dispositivo, dirigete a la página <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Solucionador de problemas</a>.</p> + +<h3 id="Añadiendo_un_Simulador">Añadiendo un Simulador</h3> + +<p><span style="line-height: 1.5;"><a href="/en-US/docs/Tools/Firefox_OS_Simulator">Firefox OS Simulator</a> es una versión de altas capas de <span style="line-height: 1.5;">Firefox OS</span> que simula un dispositivo Firefox OS, pero se ejecuta runs en el escritorio</span><span style="line-height: 1.5;">. Corre en una ventana del mismo tamaño de un dispositivo</span><span style="line-height: 1.5;"> 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.</span></p> + +<p>Esto significa que en muchos casos, no necesitas un dispositivo real para probar y depurar su app.<span style="line-height: 1.5;"> </span></p> + +<p>El Simulator es grande, tanto que no se desplaza al interior de Firefox sino como un Firefox <a href="/en-US/Add-ons">add-on</a>. 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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8039/webide-install-simulator.png" style="display: block; height: 560px; margin-left: auto; margin-right: auto; width: 720px;">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 <em>runtime</em>.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8047/webide-select-runtime-keon-simulator.png" style="display: block; height: 559px; margin-left: auto; margin-right: auto; width: 712px;">Para aprender más sobre el Simulador, mire <a href="/en-US/docs/Tools/Firefox_OS_Simulator">su página</a> de documentación.</p> + +<h3 id="Runtimes_personalizados"><em>Runtimes</em> personalizados</h3> + +<p>Con un <em>runtime </em>personalizado puede usar on nombre de host un un puerto arbitrario para conectarte a un dispositivo remoto.</p> + +<p>Bajo el capó, los dispositivos con el SO Firefox y Android se conectan al escritorio llamado <em>Android Debug Bridge</em> (Puente de Depuración Android), o <a href="http://developer.android.com/tools/help/adb.html">ADB</a>. Por defecto, el WebIDE usa un complemento llamado <em>ADB Helper</em>: 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.</p> + +<p>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 <a href="http://developer.android.com/tools/help/adb.html#forwardports"><code>adb forward</code></a>.</p> + +<p>Si, entonces, quiere conectar el WebIDE también, debería <a href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons#w_how-to-disable-extensions-and-themes">desactivar el complemento ADB Helper</a> y conectar el WebIDE usando la opción de <em>Runtime</em> personalizado, introduciendo el host y puerto que has pasqdo a <code>adb forward</code>.</p> + +<p>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. <a href="/en-US/docs/Tools/Remote_Debugging/Firefox_for_Android">Ver más sobre conexión a Firefox para Android usando ADB</a>.</p> + +<h2 id="Seleccionando_un_runtime">Seleccionando un <em>runtime</em></h2> + +<p>Una vez haya configurado un <em>runtime</em>, puede seleccionarlo usando el menú <em>"Select Runtime"</em> (Seleccionar <em>runtime</em>).</p> + +<ul> + <li>Si selecciona un Simulador, el WebIDE inicia el Simulador.</li> + <li>Si selecciona un dispositivo con SO Firefox, el WebIDE se conecta al dispositivo. En el dispositivo, un diálogo le preguntará si confirma la conexión: presione "OK".</li> +</ul> + +<p>Ahora el botón <em>"play"</em> en el centro de la barra de herramientas del WebIDE está habilitado: clícalo para instalar y ejecutar la app en el <em>runtime </em>seleccionado.</p> + +<h3 id="Acciones_de_los_runtime">Acciones de los <em>runtime</em></h3> + +<p>Cuando un <em>runtime</em> es seleccionado, el menú desplegable de Runtimes tendrá tres objetos extras:</p> + +<ul> + <li><strong>Información del Runtime</strong>: información del runtime actual.</li> + <li><strong>Tabla de permisos</strong>: una tabla ordenando <a href="/en-US/Apps/Build/App_permissions">permisos de la app</a> para el runtime utilizado, indicando, para cada API y <a href="/en-US/Marketplace/Options/Packaged_apps#Types_of_packaged_apps">tipo de app</a>, si el acceso está permitido (✓), denegado (✗), o si se le pide al usuario (!).</li> + <li><strong>Captura de pantalla</strong>: un comando para sacar captura de pantalla desde el <em>runtime</em>.</li> +</ul> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8147/webide-runtimes-menu.png" style="display: block; height: 596px; margin-left: auto; margin-right: auto; width: 789px;"></p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8145/webide-runtimeinfo.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"><img alt="" src="https://mdn.mozillademos.org/files/8149/webide-permissions.png" style="display: block; height: 593px; margin-left: auto; margin-right: auto; width: 753px;"></p> + +<h2 id="Creando_y_abriendo_apps">Creando y abriendo apps</h2> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8049/webide-open-app-empty.png" style="display: block; height: 562px; margin-left: auto; margin-right: auto; width: 723px;"></p> + +<h3 id="Crear_una_nueva_app">Crear una nueva app</h3> + +<p>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".</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8053/webide-new-app.png" style="display: block; height: 591px; margin-left: auto; margin-right: auto; width: 739px;"></p> + +<p>Ambas plantillas son de la <a href="https://github.com/mozilla/mortar">colección de plantillas para apps</a> 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 <em>cross-origin</em>.</p> + +<p>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 <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">editor de proyectos</a>.</p> + +<h3 id="Abrir_una_app_empaquetada">Abrir una app empaquetada</h3> + +<p>Seleccione "Open a Packaged App..." (Abrir una app empaquetada) para abrir una <a href="/en-US/Marketplace/Options/Packaged_apps">app empaquetada</a>. Deberá seleccionar un directorio que contenga el <a href="/en-US/Apps/Build/Manifest">manifiesto</a> de la app, y esta se abrirá en el <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">editor de proyecto</a>.</p> + +<h3 id="Abrir_una_app_alojada">Abrir una app alojada</h3> + +<p>Seleccione "Open Hosted App..." (Abrir una app alojada) para abrir una app alojada. Deberá introdducir la URL apuntando al <a href="/en-US/Apps/Build/Manifest">manifiesto</a> de la app, y esta se abrirá en el <a href="https://developer.mozilla.org/en-US/docs/Tools/WebIDE#Editing_apps">editor de proyecto</a></p> + +<h2 id="Editando_apps">Editando apps</h2> + +<p>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.</p> + +<h3 id="La_página_sumario_de_la_app">La página sumario de la app</h3> + +<p>Cuando por primera vez abra una app, el panel del editor estará ocupado por la página sumario de la app, mostrada debajo:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8055/webide-new-app-editor.png" style="display: block; height: 625px; margin-left: auto; margin-right: auto; width: 846px;"></p> + +<p>Puede volver siempre a la página de sumario de la app clicando en la raíz del árbol en la izquierda.</p> + +<h3 id="Validación_del_manifiesto">Validación del manifiesto</h3> + +<p>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.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8063/webide-invalid-manifest.png" style="display: block; height: 626px; margin-left: auto; margin-right: auto; width: 847px;"></p> + +<p>Por supuesto, puede editar el archivo <a href="/en-US/Apps/Build/Manifest">manifest.webapp</a> directamente en el editor de proyecto.</p> + +<h3 id="El_editor_fuente">El editor fuente</h3> + +<p>WebIDE usa el editor fuente <a href="http://codemirror.net/">CodeMirror</a>.</p> + +<h4 id="Atajos_de_teclado_del_editor_fuente">Atajos de teclado del editor fuente</h4> + +<p>{{ Page ("en-US/docs/tools/Keyboard_shortcuts", "source-editor") }}</p> + +<h4 id="Autocompletado_de_código">Autocompletado de código</h4> + +<p>Cuando se edite CSS y JavaScript, el editor proporciona sugerencias de autocompletado. El autocompletado en CSS está siempre habilitado:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8057/webide-css-autocomplete.png" style="display: block; height: 628px; margin-left: auto; margin-right: auto; width: 849px;">Para mostrar las sugerencias de autocompletado en JavaScript, pulse Control + Espacio:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8059/webide-js-autocomplete.png" style="display: block; height: 653px; margin-left: auto; margin-right: auto; width: 867px;"></p> + +<h4 id="Documentación_en_línea">Documentación en línea</h4> + +<p>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:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8061/webide-js-inline-docs.png" style="display: block; height: 652px; margin-left: auto; margin-right: auto; width: 872px;"></p> + +<p>Clicando el link <code>[docs]</code> en el popup le llevará a la página MDN para el símbolo.</p> + +<h4 id="Guardando_archivos">Guardando archivos</h4> + +<p>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).</p> + +<h3 id="Borrando_proyectos">Borrando proyectos</h3> + +<p>Para borrar una app del WebIDE, vaya a la <a href="/en-US/docs/Tools/WebIDE#The_app_summary_page">págnia de sumario de la app</a> y clique "Remove Project" (Borrar Proyecto).</p> + +<h2 id="Ejecutando_y_depurando_apps">Ejecutando y depurando apps</h2> + +<p>Cuando esté preparado para ejecutar la app, necesitará <a href="/en-US/docs/Tools/WebIDE#Selecting_a_runtime">seleccionar un <em>runtime</em> del menú desplegable "Select Runtime"</a>. Si no tiene ningún runtime disponible, compruebe cómo se añaden algunos runtimes en <a href="/en-US/docs/Tools/WebIDE#Setting_up_runtimes">Configurando <em>runtimes</em></a>.</p> + +<p>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 <em>runtime </em>seleccionado:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8065/webide-running.png" style="display: block; height: 718px; margin-left: auto; margin-right: auto; width: 1314px;">Para depurar la app, da click en el botón de Pausa y las herramientas de la <a href="/en-US/docs/Tools/Tools_Toolbox">Toolbox</a> de Desarrollador aparecerá, conectada a su app:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8067/webide-debugging.png" style="display: block; height: 688px; margin-left: auto; margin-right: auto; width: 1310px;">Exactamente, cuáles tools herramientas tiene disponibles depende del runtime, pero tendrá al menos las básicas: <a href="/en-US/docs/Tools/Page_Inspector">Inspector</a>, <a href="/en-US/docs/Tools/Web_Console">Console</a>, <a href="/en-US/docs/Tools/Debugger">JavaScript Debugger</a>, <a href="/en-US/docs/Tools/Style_Editor">Style Editor</a>, <a href="/en-US/docs/Tools/Profiler">Profiler</a> y <a href="/en-US/docs/Tools/Scratchpad">Scratchpad</a>. 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.</p> + +<h3 id="Depurando_apps_certificadas">Depurando apps certificadas</h3> + +<p>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 <a href="/en-US/Marketplace/Options/Packaged_apps#Certified_app">apps certificadas</a>:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8069/webide-debugging-builtin.png" style="display: block; height: 681px; margin-left: auto; margin-right: auto; width: 1302px;"></p> + +<p><br> + Pero, para depurar certified apps en un dispositivo real:</p> + +<ul> + <li>el dispositivo debe ejecuta un desarrollo construido de Firefox OS 1.2+</li> + <li>usted debe habilitar la depuración de certified app</li> +</ul> + +<p>Para habilitar la depuración certified app, conéctese al proceso runtime, y entonces, en el menú, vaya a <code>Runtime > Runtime Info</code>. Desde allí, si ve <code>"DevTools restricted privileges: yes</code>", esto significa que las certified apps no pueden ser depuradas. La ruta entonces difiere dependiendo de que depuración usted enfreta:</p> + +<ul> + <li>Dispositivo real + <ul> + <li>Si éste puede ser radicado rooted, clicking oprimiendo <code>"request higher privileges"</code> podrá habilitar la depuración de apps certificadas (Firefox OS reiniciará).</li> + </ul> + </li> + <li>Simulador + <ul> + <li>Los simuladores vienen con la depuración de certificadas, habilitada por defecto.</li> + </ul> + </li> + <li>Escritorio B2G + <ul> + <li>Manualmente edite las <a href="https://developer.mozilla.org/en-US/Firefox_OS/Using_the_App_Manager#Using_the_B2G_desktop_client">preferences</a> del cliente de escritorio B2G desktop client antes de conectarse para habilitar la depuración de app certificadas.</li> + </ul> + </li> +</ul> + +<p>Ahora (o después del reinicio de B2G desktop client) en WebIDE podrá ver todas las certified apps del dispositivo.</p> + +<h2 id="Monitoriando_desempeño">Monitoriando desempeño</h2> + +<p>Si le intereza la ejecución de sus apps, hay maneras de medir su impacto en la ejecución runtime en WebIDE:</p> + +<ul> + <li><a href="/docs/Tools/WebIDE/Monitor">Monitor</a> este panel ofrece una buena perspectiva del desempeño del dispositivo. Este ayuda a detectar problemas, e.g. un súbito, incremento excesivo en el uso de memoria de la app (debilidad).</li> + <li><a href="/docs/Tools/Profiler">Profiler</a> esta herramienta tool le brinda una manera para analizar una simple huella app's footprint con gran detalle. Especialmente útil cuando investiga un problema conocido de ejecución performance.</li> +</ul> + +<h2 id="Corrección_de_problemas">Corrección de problemas</h2> + +<p>Si tiene algunos problemas trabajando con WebIDE, vea la página <a href="/en-US/docs/Tools/WebIDE/Troubleshooting">Troubleshooting</a>.</p> + +<p> </p> + +<p> </p> 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 +--- +<div class="summary"> +<p>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 <a href="https://developer.mozilla.org/en-US/Firefox_OS">Firefox OS</a>.</p> +</div> + +<p><img alt="The WebIDE Monitor" src="https://thefiletree.com/jan/shots/monitor/monitor.png" style="height: 464px; width: 800px;"></p> + +<p>El Monitor es capaz de mostrar gráficos interactivos en tiempo real para visualizar series de tiempo.</p> + +<h2 id="Gráficos_disponibles">Gráficos disponibles</h2> + +<p>El Monitor viene con algunos gráficos diferentes. Ellos se muestran usualmente una vez que el WebIDE es conectado a un Firefox OS runtime.</p> + +<h3 id="Selección_de_medida_única">Selección de medida única</h3> + +<p><img alt="Unique Set Size" src="https://thefiletree.com/jan/shots/monitor/uniquesetsize.png" style="height: 310px; width: 879px;"></p> + +<p>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.</p> + +<h2 id="Mostrando_tus_propios_datos">Mostrando tus propios datos</h2> + +<p>Es relativamente fácil mostrar cualquier tipo de dato en el Monitor, porque acepta actualizaciones de forma-libre desde muchos orígenes diferentes.</p> + +<h3 id="Desde_un_dispositivo_Firefox_OS">Desde un dispositivo Firefox OS</h3> + +<p>Es posible enviar datos desde un dispositivo conectado enviando notificaciones de observación.</p> + +<p>Nota: Si quieres hacer esto en una <a href="https://developer.mozilla.org/Marketplace/Options/Packaged_apps#Certified_app" title="Certified app"> aplicación certificada</a>, por favor sigue <a href="https://developer.mozilla.org/docs/Tools/WebIDE#Debugging_certified_apps" title="Debugging certified apps">las siguientes instrucciones</a>.</p> + +<h4 id="JavaScript">JavaScript</h4> + +<p><code>Services.obs.notifyObservers(null, 'devtools-monitor-update', data);</code></p> + +<p>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:</p> + +<p><code>const Services = require('Services');<br> + <br> + var start = Date.now();<br> + // code to benchmark<br> + var stop = Date.now();<br> + <br> + var data = { graph: 'Performance', myFeature: stop-start, time: stop }</code><code>;<br> + Services.obs.notifyObservers(null, 'devtools-monitor-update', JSON.stringify(data));</code></p> + +<h4 id="C">C++</h4> + +<p><code>observerService->NotifyObservers(nullptr, "devtools-monitor-update", data);</code></p> + +<p>Puedes enviar datos desde cualquier parte en Gecko. Aqui hay un ejemplo completo midiendo el run time de un codigo:</p> + +<p><code>#include <time.h><br> + #include "nsPrintfCString.h"<br> + #include "nsIObserverService.h"<br> + <br> + clock_t start = clock();<br> + // code to benchmark<br> + clock_t stop = clock();<br> + double time = (double)(stop - start) / (CLOCKS_PER_SEC / 1000);<br> + <br> + nsCOMPtr<nsIObserverService> observerService = services::GetObserverService();<br> + if (observerService) {<br> + nsPrintfCString str("{\"graph\":\"Performance\",\"myFeature\":%f}", time);<br> + nsAutoString data = NS_ConvertUTF8toUTF16(str);<br> + observerService->NotifyObservers(nullptr, "devtools-monitor-update", data.get());<br> + }</code></p> + +<h3 id="Desde_el_computador">Desde el computador</h3> + +<p>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..</p> + +<p>Por defecto, el Monitor busca un servidor corriendo en el puerto 9000 de tu computador. Puedes cambiar esto actualizando las preferencias en <code>devtools.webide.monitorWebSocketURL</code>.</p> + +<p>Incluso puedes hacer que acepte datos desde tu red local, o desde cualquier parte de Internet.</p> + +<h4 id="Node.js">Node.js</h4> + +<p><code>TODO</code></p> + +<h4 id="Python">Python</h4> + +<p><code>TODO</code></p> + +<h3 id="Formatos_soportados">Formatos soportados</h3> + +<p>El Monitor acepta datos en formato de objetos JSON que generalmente lucen similares a esto:</p> + +<p><code>{</code><br> + <code> "graph": "myGraph",<br> + "curve": "myCurve",<br> + "value": 42,<br> + "time": 1234567890<br> + }</code></p> + +<p>Ese formato está destinado a ser muy flexible. Si no existe un gráfico o curva especificada , se creará automáticamente.</p> + +<h4 id="Nombres_arbitrarios">Nombres arbitrarios</h4> + +<p>Las entradas no reconocidas serán consideradas como curvas de nombre y valor.</p> + +<p>El paquete de datos más pequeño que puedes enviar es algo como:</p> + +<p><code>{ "myCurve": 42 }</code></p> + +<p>Esto añadirá un punto de datos para "<code>myCurve</code>" en un gráfico sin nombre. El tiempo faltante será por defecto cuando el monitor recibe el paquete .</p> + +<p>Para mayor precisión, es probablemente mejor especificar un <code>timestamp</code> para tus datos:</p> + +<p><code>{<br> + "current": 60,</code><br> + <code> "voltage": 500,<br> + <code>"time": 1234567890</code><br> + }</code></p> + +<h4 id="Multiples_variables">Multiples variables</h4> + +<p>En una simple actualización, puedes enviar datos para multiples curvas:</p> + +<p><code>{<br> + "graph": "myGraph",<br> + "myCurve1": 50,<br> + "myCurve2": 300,<br> + "myCurve3": 9000,<br> + "time": 1234567890<br> + }</code></p> + +<p>O varios puntos de datos para una sola curva:</p> + +<p><code>{<br> + "graph": "myGraph",<br> + "curve": "myCurve",<br> + "values": [<br> + { "time": 1234567890, "value": 42 },<br> + { "time": 1234567981, "value": 51 }<br> + ]<br> + }</code></p> + +<h4 id="Múltiples_actualizaciones">Múltiples actualizaciones</h4> + +<p>Y también puedes enviar multiples actualizaciones de datos en forma de un Array:</p> + +<p><code>[<br> + { "graph": "Memory", "time": 1234567890, "System": 2600, "My App": 1000 },<br> + { "graph": "Power", "time": 1234567890, "current": 60, "voltage": 500 }<br> + ]</code></p> + +<h4 id="Eventos_puntuales">Eventos puntuales</h4> + +<p>Para marcar eventos especiales en un gráfico con una barra vertical, agrega una clave <code>event</code> a tu actualización:</p> + +<p><code>{<br> + "graph": "myGraph",<br> + "event": "myEvent",<br> + "time": 1234567980<br> + }</code></p> 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 +--- +<h2 id="Conectando_un_dispositivo_Firefox_OS">Conectando un dispositivo Firefox OS</h2> +<p>Si estas intentando conectar un dispositivo Firefox OS a WebIDE y no aparece, aquí hay una serie de cosas que puedes probar</p> +<ul> + <li>Revisa la versión de Firefox OS: asegurate que tu dispositivo tiene una versión<strong> Firefox OS 1.2/Boot2Gecko 1.2 o superior</strong>. Para comprobar la versión, accede a los Ajustes de la aplicación en el dispositivo, después accede a<code> Información del dispositivo > Software</code>. Si no posees una versión superior, encuentra tu dispositivo en la <a href="/en-US/Firefox_OS/Developer_phone_guide">guía del desarrollador del teléfono</a> y sigue las instrucciones para actualizar.</li> + <li>Activa la depuración remota: en los Ajustes de aplicación en el dispositivo, dirígete a <code>Información del dispositivo > Más información > Desarrollo</code>. + <ul> + <li>Firefox OS 1.3 o inferior: "Desarrollo remoto" es simplemente una casilla. Activa la casilla.</li> + <li>Firefox OS 1.4 o superior: "Desarrollo remoto" te pregunta si deseas activarlo solo para ADB or para ADB y DevTools. Selecciona "ADB y DevTools".</li> + </ul> + </li> + <li>Desactiva el bloqueo de pantalla en tu dispositivo: en los Ajustes de aplicación en el dispositivo, accede a <code>Bloqueo de pantalla</code> y desactiva la casilla <code>Bloqueo de pantalla</code>. Esto es una buena idea porque cuando se bloquea la pantalla, la conexión con el teléfono se pierde, impidiendo que se pueda usar para desarrollar.</li> + <li>Asegurate que no hayas conectado un teléfono Android al mismo tiempo que un teléfono Firefox OS al ordenador.</li> + <li>Comprueba el cable USB que estas usando: + <ul> + <li>Prueba a desconectar y conectar el cable USB.</li> + <li>Prueba a conectar el cable USB en otro puerto del ordenador. Puede ser que tengas que alternar entre los puertos.</li> + <li>Prueba un cable USB distinto. Los cables que se incluyen con los teléfonos suelen ser de poca calidad y fallan con frecuencia.</li> + <li>Prueba un cable USB mas corto. Los cables USB largos no suelen trabajar tan bien como uno corto.</li> + </ul> + </li> + <li>Intenta descatira y reactivar el Desarrollo Remoto en los Ajustes de aplicación del dispositivo.</li> + <li>Si <a href="/en-US/docs/Tools/WebIDE#Custom_runtimes">tu desactivaste el complemento ADB Helper</a>, ¿has ejecutado correctamente el comando <code>adb forward</code> ?</li> + <li>Si usas Linux, asegurate que has añadido un archivo de reglas a <code>udev</code> , como se detalla en el paso 3 de esta guia para <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up"> configurar un dispositivo Android</a>. El atributo <code>idVendor</code> para usar el Geeksphone es "05c6", y <a class="external external-icon" href="http://developer.android.com/tools/device.html#VendorIds">esta página</a> lista otros valores para <code>idVendor</code> .</li> + <li>Si usas Windows: + <ul> + <li>necesitas instalar drivers, como se detalla en el paso 3 de esta guia para <a class="external external-icon" href="http://developer.android.com/tools/device.html#setting-up">configurar un dispositivo Android</a>. Puedes encontrar drivers para dispositivos Geeksphone en la <a class="external external-icon" href="http://downloads.geeksphone.com/">pagina web Geeksphone</a> y drivers para dispositivos Google en <a href="http://developer.android.com/sdk/win-usb.htm">la página de Google</a>. Windows 8 por defecto no permite instalar drivers no firmados. Mira este tutorial en <a class="external-icon external" href="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html" title="http://www.craftedge.com/tutorials/driver_install_windows8/driver_install_win8.html">"Como instalar drivers no firmados en Windows 8"</a>.</li> + <li>si el WebIDE no puede localizar su dispositivo después de seguir todos los pasos, puede necesitar <a class="external-icon external" href="http://blog.fh-kaernten.at/wehr/?p=1182">editar adb_usb.ini</a>.</li> + </ul> + </li> + <li>Si eres un usuario de EasyTether (OS X), necesitaras desinstalar o desactivar EasyTether: <code>sudo kextunload /System/Library/Extensions/EasyTetherUSBEthernet.kext</code></li> +</ul> +<h3 id="Desarrollo_limitado_(incluyendo_aplicaciones_certificadas_aplicaciones_incorporadas_aplicaciones_ya_instaladas_en_un_dispositivo)">Desarrollo limitado (incluyendo aplicaciones certificadas, aplicaciones incorporadas, aplicaciones ya instaladas en un dispositivo)</h3> +<p>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 <a href="/en-US/docs/Tools/WebIDE#Unrestricted_app_debugging_%28including_certified_apps.2C_main_process.2C_etc.%29">Desarrolo no restringido de aplicaciones (incluyendo aplicaciones certificadas, procesos principales, etc.)</a>.</p> +<h2 id="Conectando_a_otros_navegadores_(Chrome_Safari)">Conectando a otros navegadores (Chrome, Safari)</h2> +<p>WebIDE hace el uso de <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">Valence (Adaptador Formal de Herramientas de Firefox )</a> para comunicarse con otros navegadores, como Chrome and Safari. </p> +<p>Si esta teniendo problemas al conectarse a estos otros navegadores, revisa los pasos de configuración y otras anotaciones para estos navegadores en la <a href="/en-US/docs/Tools/Firefox_Tools_Adapter">página Valence</a>.</p> +<h2 id="Activando_el_log">Activando el log</h2> +<p>También puedes activar el logging para recompilar información de diagnostico:</p> +<ol start="1" style="list-style-type: decimal;"> + <li>accede a <a class="external external-icon" href="http://kb.mozillazine.org/About:config">about:config</a>, y añade una nueva preferencia llamada <span class="message"><span class="content"><code><span class="email">extensions.adbhelper@mozilla.org.sdk</span>.console.logLevel</code>, con el valor de String <code>all, y establece </code></span></span>extensions.adbhelper@mozilla.org.debug<span class="message"><span class="content"><code> a true</code></span></span></li> + <li>En el <a class="external external-icon" href="https://support.mozilla.org/en-US/kb/disable-or-remove-add-ons">Add-ons Manager</a>, desactiva y reactiva el add-on ADB Helper.</li> + <li>Abre la <a href="https://developer.mozilla.org/en-US/docs/Tools/Browser_Console">Consola del navegador</a> y veras mensajes de consola con el prefijo <code>adb</code>. Si el mensaje no te dice nada, <a href="/en-US/docs/Tools/WebIDE/Troubleshooting#Get_help">busca ayuda</a>.</li> +</ol> +<h2 id="Obtén_ayuda">Obtén ayuda</h2> +<p>Accede a <a class="external external-icon" href="https://wiki.mozilla.org/DevTools/GetInvolved#Communication">#devtools cuarto en IRC</a> y nosotros te ayudaremos.</p> 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 +--- +<div class="geckoVersionNote"> +<p>Esta funcionalidad es nueva en Firefox 34.</p> +</div> + +<p>A partir de Firefox 34 en adelante, puedes apuntar las developer tools a un <a href="/en-US/docs/Web/HTML/Element/iframe"><code>iframe</code></a> específico dentro de un documento.</p> + +<p>{{EmbedYouTube("Me9hjqd74m8")}}</p> + +<p>Esta funcionalidad está desabilitada por defecto: para habilitarla, abre las <a href="/en-US/docs/Tools/Tools_Toolbox#Settings">developer tool settings</a> y selectiona "Select an iframe as the currently targeted document":</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8551/frame-selection-setting.png" style="display: block; margin-left: auto; margin-right: auto;">Podrás ver un nuevo botón en la barra de herramientas:</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8547/frame-selection-button.png" style="display: block; margin-left: auto; margin-right: auto;">Haz click en el y verás un popup con una lista de todos los iframes en el documento, además del documento principal.</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/8549/frame-selection-popup.png" style="display: block; margin-left: auto; margin-right: auto;"></p> + +<div class="note"> +<p>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 <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1062233">bug 1062233</a>.</p> +</div> + +<p>Si selecionas una entrada en la lista, todas las herramientas en la barra de herramientas - el<span style="line-height: 1.5;"> </span><a href="/en-US/docs/Tools/Page_Inspector" style="line-height: 1.5;">Inspector</a><span style="line-height: 1.5;">, la </span><a href="/en-US/docs/Tools/Web_Console" style="line-height: 1.5;">Console</a><span style="line-height: 1.5;">, el </span><a href="/en-US/docs/Tools/Debugger" style="line-height: 1.5;">Debugger</a><span style="line-height: 1.5;"> demás - apuntaran ahora al iframe selecionado y se comportaran como si el resto de la pagina no existiese.</span></p> |