Chrome console API
you’re probably not using yet
via http://jilles.me/
Agenda
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 ...
Coffee Break
Add Styles to Console Statements
console.log("%c%s",
"color: red; background: yellow; font-size: 24px;",
"WARNING! GJ Is Here!");
El primer argumento es el orden de estilos y mensaje, el segundo es el estilo y el ultimo el mensaje que se va a mostrar
via http://davidwalsh.name/