Console para hombres hombres

Chrome console API

you’re probably not using yet

via http://jilles.me/

Agenda

• Chrome Console API
• Coffee Break
• Bonus Stage

console.count

Este es muy útil cuando trabajamos con loops o funciones recursivas, permite agregar un label, for ejemplo el nombre de la función o una descripción y este se mostrará cuántas veces se repita el ciclo o se llame la función

for (var i = 0; i < 5; i++) {
	console.count("loop🔃");
}

console.assert

Si usamos algo como esto:

if (!condition){
	console.error("It went wrong! ❌");
}

Entonces deberíamos usar console.assert. Esto toma 2 parámetros, el primero es la expresión y el segundo el objeto que queremos mostrar en consola:

console.assert(condition, ‘it went wrong!’);

console.time[End]

Es esencialmente dos métodos con el mismo parámetro: un label. La etiqueta es lo que te permite establecer el mayor número de temporizadores sin que interfieran entre sí:

console.time('setTimeout');
setTimeout(function(){
    console.timeEnd('setTimeout');
},350);

Nota: usar este método para chequear el rendimiento de funciones de pequeño o mediano tamaño, ya que muchos consideran que esta no una forma correcta de mirar el rendimiento.

console.dir

Este es un salvavidas cuando trabajamos con elementos HTML, este permite mostrar todas las propiedades DOM del elemento y sus valores. Observa el siguiente ejemplo de esta etiqueta P: <p id="test"> Hola! soy un párrafo</p> y el siguiente código:

console.dir(document.querySelector('p#test'));

console.trace

Es un método que se explica por si solo, si lo llamas en cualquier parte del código este imprimirá en la consola una pila de seguimiento o stack trace similar a cuando cuando tenemos un error y hacemos click en el  > frente de este 

function sayHi() {  
    console.log('Hello im GJ');
    askAboutDay();
}

function askAboutDay() {  
    console.log('How was your day?');
    sayBye();
}

function sayBye() {  
    console.log('Good, cya!');
    console.trace();
}

sayHi(); 

console.table

Es muy util cuando tenemos arreglos de objetos y no queremos expandir uno por uno

var movies = [  
    { 
        name: 'Inception',
        imdbId: 'tt1375666',
        rating: 8.8
    },
    { 
        name: 'Avengers',
        imdbId: 'tt0848228',
        rating: 8.2
    },
    { 
        name: 'Horrible Bosses',
        imdbId: 'tt1499658',
        rating: 6.9
    }
];

console.table(movies);

copy

Copy copia un objeto especificado al clipboard copy(obj)

Cansado de copiar un elemento seleccionando el texto directamente desde la consola?

En lugar de eso puedes usar:

copy($0)

Donde $0 es el ultimo elemento seleccionado, y lo tendrás en la consola

Mas sobre Chrome console API ...

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

Coffee Break