1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
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>
|
