hernandezblasantonio/dsos/documentacion/cliente/www/firefoxdevtools

Firefox Developer Tools

Las herramientas para desarrolladores ofrecidas por Firefox están compuestas por una consola web, un inspector de página, un monitor de red, un depurador, entre otras muchas herramientas.

La consola web muestra informacion asociada al documento HTML visualizado en Firefox: solicitudes de red, JavaScript, CSS, errores-advertencias de seguridad, etc. De igual forma permite interactuar con el documento HTML ejecutando expresiones JavaScript en el contexto de dicho documento.

Uso de la consola web

  1. Crea el directorio $HOME/www/firefox01 y en él al archivo index.html con el siguiente contenido:

     <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <title></title>
   </head>
   <body>
     <h1></h1>
     <script>
       "use strict";
       var generar_nuevo_color_css = function() {
         var numero_decena = function() {
           var n = Math.floor(Math.random() * 100);
           if (n < 10) {
             n += 10;
           }
           return n;
         };
         var color = "#" + numero_decena() + numero_decena() + numero_decena();
         return color;
       };
       var título = "firefox01";
       var saludo = "★♞ ¡Hola mundo! ♫☻";
       var título_principal = saludo + " " + Date();
       var mensaje_principal = saludo + " desde index.html";
       var html_title = window.document.getElementsByTagName("title")[0];
       var html_body = window.document.getElementsByTagName("body")[0];
       var html_h1 = window.document.getElementsByTagName("h1")[0];
       html_title.textContent = título;
       html_body.style.width = "960px";
       html_body.style.margin = "10px auto";
       html_body.style.backgroundColor = generar_nuevo_color_css();
       html_h1.textContent = título_principal;
       html_h1.style.margin = "0px";
       html_h1.style.fontSize = "70px";
       html_h1.style.textAlign = "center";
       html_h1.style.textShadow = "2px 2px 2px #ffffff";
       html_h1.style.color = generar_nuevo_color_css();
       html_h1.style.border = "5px solid #ffffff";
       html_h1.style.borderRadius = "50px";
       html_h1.style.backgroundColor = generar_nuevo_color_css();
       console.log(mensaje_principal);
     </script>
   </body>
 </html>

  2. Inicia un servidor web en el anterior directorio:

    Con thttpd:

     alumno@servidor ~ $ cd $HOME/www/firefox01
 alumno@servidor ~/www/firefox01 $ thttpd -D -p 8080 -h 127.0.0.1 -T UTF-8 -l -

    Con darkhttpd:

     alumno@servidor ~ $ cd $HOME/www/firefox01
 alumno@servidor ~/www/firefox01 $ darkhttpd . --port 8080 --addr 127.0.0.1

  3. Accede con Firefox a http://127.0.0.1:8080

  4. Activa la consola web apretando el juego de teclas Ctrl + Shift + K o bien aprieta la tecla F12 y dirígete a la pestaña Console y recarga el documento HTML apretando el juego de teclas Ctrl + F5. Observa que cada vez que recargas el documento HTML su contenido es modificado.

  5. En la parte inferior de la consola web encontrarás un recuadro para introducir texto. Escribe las siguientes expresiones en él y aprieta la tecla Enter por cada uno de ellos:

    • (10 + 20 + 30 + 40 * 50);
    • (window.document.title);
    • (window.document.URL);
    • (window.document.location.reload());
    • console.clear();

Mediante la pestaña Console podrás interactuar con el interprete de JavaScript integrado en Firefox: SpiderMonkey.

Nota que en Console solo puedes ingresar código de JavaScript de una sola línea ya que al apretar la tecla de Enter el código es evaluado inmediatamente. Para poder escribir más líneas de código aprieta el juego de teclas Shift + Enter. Podrás escribir varías líneas de código en un archivo externo con extensión .js y posteriormente enlazarlo al documento HTML para su evaluación por parte del interprete de JavaScript. Otra opción es hacer uso de Scratchpad (Borrador).

Importante: una sesión de Firefox Developer Tools está asociada a una pestaña de Firefox, de tal forma que cada Console corresponde de igual forma a una pestaña.

Otros interpretes de JavaScript o motores de JavaScript (JavaScript engines) son:

  • v8: disponible en Google Chrome/Chromium.
  • JavaScriptCore: disponible en Safari.
  • Nashorn (basado en Rhino): disponible en la Máquina Virtual de Java (JVM) a partir de Java 8.

Enlaces

Configuración de Firefox

Se recomienda modificar las siguientes opciones de configuración de Firefox accediendo a about:config en la barra de direcciones:

  • javascript.options.showInConsole = true
  • javascript.options.strict = true
  • nglayout.debug.disable_xul_cache = true
  • browser.dom.window.dump.enabled = true
  • devtools.chrome.enabled = true
  • devtools.debugger.remote-enabled = true
  • devtools.errorconsole.deprecation_warnings = true
  • extensions.logging.enabled = true
  • dom.report_all_js_exceptions = true
  • dom.moduleScripts.enabled = true
  • dom.webcomponents.enabled = true
  • dom.webcomponents.customelements.enabled = true
  • extensions.sdk.console.logLevel = all
  • devtools.debugger.prompt-connection = false
  • xpinstall.signatures.required = false
  • xpinstall.whitelist.required = false