Perfiles

(Profiles)

• Perfilador CPU: Indica el consumo de tiempo en la ejecución de las funciones javascript.
• Más detalle en https://developer.chrome.com/devtools/docs/cpu-profiling
• Perfilador de pila: Muestra el consumo de memoria de los objetos javascript y nodos DOM:
•  Más detalle en https://developer.chrome.com/devtools/docs/heap-profiling

Más detalle:

Perfilador CPU: https://developer.chrome.com/devtools/docs/cpu-profiling

Perfilador de pila: https://developer.chrome.com/devtools/docs/heap-profiling

Recursos

(Resources)

Tipos de recursos:

• Frames
• Web SQL:
• IndexedDB:
• Local Storage:
• Session Storage
• Cookies:
• Application Cache: 

Auditar

(Audits)

• Permite analizar la página a medida que carga. Luego brinda sugerencias y optimización para disminuir el tiempo de carga e incrementar el tiempo de respuesta.
• Utilización de red.
• Desempeño de la página web.

Extensión pageSpeed: https://developers.google.com/speed/pagespeed/

Imagen: http://blog.analytics-toolkit.com/2014/tracking-site-speed-google-analytics-ux-seo/

Consola

(Console)

• Provee dos funcionas básicas:

• Registro y diagnóstico de la aplicación, mediante el uso de métodos que provee el API de la consola, tales como console.log(), console.profile

• Una línea de comandos (CLI) en la cual se pueden ingresar comandos e interactuar con el documento y las herramientas de desarrollo

API de Consola

• console.log();
• console.error()
• console.asser()
• console.group() console.groupEnd()

Sustitución y formato

//String - dígito
console.log("%s tiene %d créditos", "Lucho", 100);

//assert
var debugging=false; 
console.assert(debugging,"No estás depurando"); 

//
var animal = 'sapo';
var count = 4;
console.log("El", animal, "saltó", count, "ramas");

//CSS y Objeto expandible
var object={name:"Diego",apellido:"Montoya"};
console.log("%cGreen text on yellow background. %cItalic. %o", "color:green; background-color:yellow", "font-style: italic", object);

Algunas funciones útiles

• console.dir(): Muestra el DOM

  formateando la salida de la consola con css

• console.time() console.timeEnd();

• console.timeStamp();

Definiendo breakpoints en javascript.

palabra clave debugger;

Más detalle:

https://developer.chrome.com/devtools/docs/console-api

Usando el API de la línea de comandos

• Evaluar expresiones

• Seleccionar elementos

• Inspeccionar elementos DOM y objetos javascript

• Acceder a elementos y objetos recientes

• Monitorear eventos

• Controlar el perfilador de CPU 

document.contentDocument;

$();

Date.now();

//Expresiones de varias lineas con alt+enter

Inspect();

monitorEvent(window,"resize");

monitorEvents(document.body, ["mousedown", "mouseup"]); 

profile();

profileEnd();

Emulación

• Activar modo de dispositivo.
• Seleccionar dispositivo.
• Emulación de pantalla.
  • Resolución.
  • Alternar dimensiones.
  • Pixel ratio del dispositivo.
  • Ajustar a la pantalla.
• Emulación de agente de usuario
• Sensores.

Extensión para ver los media queries

Extensión