Skip to content

Latest commit

 

History

History
571 lines (440 loc) · 23.4 KB

clase4.md

File metadata and controls

571 lines (440 loc) · 23.4 KB
Raw

shieldsIO shieldsIO shieldsIO

WideImg

Máster en Programación FullStack con JavaScript y Node.js

JS, Node.js, Frontend, Backend, Firebase, Express, Patrones, HTML5_APIs, Asincronía, Websockets, Testing

Clase 4

Tools for Web Developers

IMG

Recursos

Herramientas principales

  • Canary
  • PageSpeed
  • Lighthouse
  • Puppeteer
  • Workbox
  • Chrome Developer Tools

Canary

PageSpeed

Logo

Doc

Lighthouse

img

Doc

puppeteer

img_logo

Doc

Workbox

img_logo

Doc

ChromeDevTools

img_logo

Recursos

Abrir Chrome DevTools

  • En el Menú de Chrome, selecciona More Tools > Developer Tools.
  • Haz clic con el botón secundario en un elemento de la página y selecciona Inspect.
  • Usa las combinaciones de teclas Ctrl+Mayúscula+I (Windows) o Cmd+Opción+I (Mac).

ChromeDevTools: Paneles

Device Mode

Device Mode Usa Device Mode para desarrollar experiencias web con una completa capacidad de respuestas y que prioricen los dispositivos móviles.

Elements

Panel Elements Usa el panel Elements para iterar la distribución y el diseño de tu sitio mediante la libre manipulación de DOM y CSS.

Console

Panel Console Usa el panel Console para registrar información de diagnóstico durante el desarrollo o úsalo como un shell para interactuar con el código JavaScript en la página.

Sources

Panel Sources Depura tu código JavaScript con puntos de interrupción en el panel Sources o conecta los archivos locales mediante espacios de trabajo para usar el editor en tiempo real de DevTools.

Network

Panel Network Usa el panel Network para obtener información sobre recursos solicitados y descargados, y optimizar el rendimiento de carga de tu página.

Timeline

Panel Timeline Usa el panel Timeline para mejorar el rendimiento del tiempo de ejecución de la página mediante la grabación y la exploración de los diferentes eventos que ocurren durante el ciclo de vida de un sitio.

Profiles

Panel Profiles Usa el panel Profiles si necesitas más información que la que proporciona el panel Timeline; por ejemplo, para rastrear pérdidas de memoria.

Application

Panel Application Usa el panel Resources para inspeccionar todos los recursos que se cargan; entre otros, bases de datos IndexedDB o Web SQL, almacenamiento local y de sesión, cookies, caché de la app, imágenes, fuentes y hojas de estilos.

Security

Usa el panel Security para depurar problemas de contenido mixto, problemas de tu certificado y más.

Extensiones para developers

Básicas

Extras

Extensiones para developers: SAFETY FIRST

IMG

Webs útiles para developers

JSHint

Usando Javascript

  • Embedido en aplicaciones como Photoshop o Google Sheets
  • Usando el sistema operativo o servidor con Nodejs a través de la terminal
  • Como un script en un fichero html
    • Usando la en línea <script>Mi código js</script>
    • Usando ficheros externos: <script src="fichero.js"></script>
  • Usando el panel de consola en Chrome u otros navegadores

Consola

Consola: Assert

Aparece un mensaje de error en la consola si la afirmación es falsa:

 var controlador = false;
 console.assert(controlador, "\"controlador\" es igual a \"false\"");

Consola: Clear

Limpia el historial visible de la consola

 console.clear()

Consola: Dir

Retorna una lista interactiva de las propiedades de un elemento del DOM

 console.dir(document.body);

Consola: Dirxml

Retorna una representación HTML de un elemento del DOM

 console.dirxml(document.body);

Consola: Agrupadores

https://developer.mozilla.org/en-US/docs/Web/API/Console/group https://developer.mozilla.org/en-US/docs/Web/API/console#Using_groups_in_the_console

console.group()

Crea un grupo de mensajes de consola*

     console.group("bucleFor");
     for(var i=100; i>0; i--){
         console.info("Iteración numero %i", i)
     }
     console.groupEnd();

console.groupCollapsed()

Crea un grupo de mensajes de consola minimizados (por defecto)

     console.groupCollapsed("bucleFor");
     for(var i=100; i>0; i--){
         console.info("Iteración numero %i", i)
     }
     console.groupEnd();

console.groupEnd()

Cierra el grupo de mensajes

     console.group("bucleFor");
     for(var i=100; i>0; i--){
         console.info("Iteración numero %i", i)
     }
     console.groupEnd();

Consola: Table

Muestra los datos dentro de una tabla https://developer.mozilla.org/es/docs/Web/API/Console/tabla

 var lenguajes = [
     { nombre: "JavaScript", extension: ".js" },
     { nombre: "TypeScript", extension: ".ts" },
     { nombre: "CoffeeScript", extension: ".coffee" }
 ];
 
console.table(lenguajes);
 
console.table(lenguajes, "extension");

Consola: Gestión del tiempo

console.time()

Inicia un contador en ms

console.timeEnd()

Para el contador y devuelve el resutlado:

  console.time("Medición de miArray");
  var miArray = new Array(1000000);
  for (var i = miArray.length - 1; i >= 0; i--) {    
   miArray[i] = new Object();
  };
  console.timeEnd("Medición de miArray");

Consola: Notificadores

console.log()

Saca un mensaje por consola

  console.log("Hola en formato clásico");

console.info()

Similar a console.log, pero con caracter informativo

  console.info("Hola en formato informativo");

console.warn()

Similar a Console.log, pero con caracter de aviso

  console.warn("Hola en formato alerta");

console.error()

Similar a console.log, pero hace uso del sistema visual de errores del navegador.

  console.error("Hola en formato error");

Consola: Llevar la cuenta

Escribe la cantidad de veces que se ha invocado a count() en la misma línea y con la misma etiqueta.

function login(name) {
  console.count(name + ' logged in');
}
login("Ulises")
login("Fictizia")
login("Ulises")
login("Miranda")

Consola: Perfiles de CPU

Inicia un perfil CPU JavaScript con una etiqueta opcional. Para completar el perfil, llama a console.profileEnd(). Cada perfil se agrega al panel Profiles.

function processPixels() {
  console.profile("processPixels()");
  // later, after processing pixels
  console.profileEnd();
}

Consola: Eventos de Timeline

Agrega un evento a Timeline durante una sesión de grabación.

console.timeStamp('check out this custom timestamp thanks to console.timeStamp()!');

Consola: Siguiendo nuestra pila de ejecución

Emite un seguimiento de pila desde el punto donde se llamó al método.

console.trace();

Consola: Formateadores:

Formato Descripción
%s Cadena
%d o %i Número entero
%f Decimal
%o DOM
%O Objeto js
%c CSS

Ejemplos

  • %o para estrcuturas del DOM
  var parrafos = document.getElementsByTagName("p");
  console.log("DOM: %o", parrafos);
  • %O para objectos JS
  var objeto = {"nombre":"Yo","Apellido":"Mismo"};
  console.log("Objeto: %O", objeto);
  • usando CSS:
  console.log('Esto es aburrido...');
  console.log('%c Pero se puede mejorar fácilmente! ', 'background: #3EBDFF; color: #FFF; font-size:25px;');

Consola: Caracteres especiales:

  • \t Tabulador
  • \' Comillas Simples
  • \" Comillas Dobles
  • \\ **
  • \n Salto de línea
    function caracteresDemo () {
    console.log("Hasta aquí... todo correcto. Ahora vamos a \"tabular\":\tves? Ya estamos más lejos.\n\'Otra linea ;-)\'")
    };
    
    caracteresDemo()

Ejercicios

Recuerda: Utiliza JSHint para detectar errores..

1 - Utiliza .assert para controlar cuando se muestra tu nombre por consola.

 function ejercicio1() {
  var nombre = "pepe";
  var validacion = nombre == "ana";
  // Incorrecto
  console.assert(validacion, "El nombre NO es correcto");
                 
  // Correcto
  nombre = "ana";
  console.assert(nombre == "ana", "El nombre NO es correcto") ;                
}

2 - Crea un script que nos permita calcular el tiempo que se necesita para realizar la siguientes acciones.

  • Especificaciones:
    • Imprimir tu nombre usando console.log, console.info, console.warn
 function ejercicio2() {
  console.time("Medición tiempos");
  console.log("Me llamo Alejandro");
  console.info("Me llamo Alejandro");
  console.warn("Me llamo Alejandro");
  console.timeEnd("Medición tiempos");
}

3 - Partiendo del ejercicio anterior mejora los estilos de cada mensaje usando estilos.

 function ejercicio3() {
  console.time("Medición tiempos");
  console.log("%c Me llamo Pepe",'background: #1E3038; color: #FFF; font-size:20px;');
  console.info("%c Me llamo Pepe",'background: #FFC125; color: #2e292a; font-size:15px; border-style: dotted;');
  console.warn("%cMe llamo Pepe",'background: #FA3C0E; color: #F2F5F5; font-size:15px; border-style: solid;');
  console.timeEnd("Medición tiempos");
}

4 - Agrupa cada tipo de mensaje y añade un contador de tiempo por cada grupo.

 function ejercicio4() {
  console.time("Medición tiempos");
    console.time("Tiempo console log");
        console.group("Console log");
          console.log("%c Me llamo Pepe",'background: #1E3038; color: #FFF; font-size:20px;');
        console.groupEnd();
    console.timeEnd("Tiempo console log");
    console.time("Tiempo console info");
        console.group("Console info");
            console.info("%c Me llamo Pepe",'background: #FFC125; color: #2e292a; font-size:15px; border-style: dotted;');
        console.groupEnd();
    console.timeEnd("Tiempo console info");    
    console.time("Tiempo console warn");
        console.group("Console warn");
            console.warn("%cMe llamo Pepe",'background: #FA3C0E; color: #F2F5F5; font-size:15px; border-style: solid;');
        console.groupEnd();
    console.timeEnd("Tiempo console warn");
  console.timeEnd("Medición tiempos");    
}

5 - Crea una tabla usando la consola para mostrar el nombre de tus compañeros y el puesto que ocupa en la clase.

 function ejercicio5(){
  var clase = [
     { nombre: "Ana", puesto: 1 },
     { nombre: "Luis", puesto: 2 },
     { nombre: "María", puesto: 3 },
     { nombre: "Andrea", puesto: 4 },
     { nombre: "Mario", puesto: 5},
     { nombre: "Pepe", puesto: 6 }
 ];
   console.table(clase);
}

Interacción Básica con el Usuario

  • alert()

    alert("¡Bienvenido a esta web!");

  • confirm()

    https://developer.mozilla.org/es/docs/Web/API/Window/confirm

     confirm("¿Esta seguro que desea abandonar esta web?");
    • Ejemplo Avanzado:
         var respuesta = confirm("presiona un botón!");
     if (respuesta === true) {
         console.log("Has aceptado!");
     } else {
         console.log("Has cancelado");
     }

  • prompt()

https://developer.mozilla.org/es/docs/Web/API/Window/prompt

    prompt("¿Como te llamas?");
  • Registremos los datos en una variable:
    var nombre = prompt("¿Como te llamas?");

Ejercicios: Katas de JS

1 - Prueba a realizar algunas katas en Code Wars: