Introducción
En ocasiones, mientras estamos desarrollando en Javascript, puede resultar muy útil pintar en la consola del navegador el valor de una variable con la que estamos trabajando. Si el valor de ésta es uno simple, podemos usar simplemente console.log o console.info para ver su contenido.
Sin embargo, cuando se trata de arrays, como suele el caso de las respuestas que obtenemos mientras trabajamos con APIs, podemos necesitar algo más.
Tomemos este ejemplo de array con la lista de todos los países del mundo:
const response = [ "Afghanistan", "Albania", "Algeria", "American Samoa", "Andorra", "Angola", "Anguilla", "Antarctica", "Antigua and Barbuda", "Argentina", "Armenia", "Aruba", "Australia", "Austria", "Azerbaijan", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia and Herzegowina", "Botswana", "Bouvet Island", "Brazil", "British Indian Ocean Territory", "Brunei Darussalam", "Bulgaria", "Burkina Faso", "Burundi", "Cambodia", "Cameroon", "Canada", "Cape Verde", "Cayman Islands", "Central African Republic", "Chad", "Chile", "China", "Christmas Island", "Cocos (Keeling) Islands", "Colombia", "Comoros", "Congo", "Congo, the Democratic Republic of the", "Cook Islands", "Costa Rica", "Cote d'Ivoire", "Croatia (Hrvatska)", "Cuba", "Cyprus", "Czech Republic", "Denmark", "Djibouti", "Dominica", "Dominican Republic", "East Timor", "Ecuador", "Egypt", "El Salvador", "Equatorial Guinea", "Eritrea", "Estonia", "Ethiopia", "Falkland Islands (Malvinas)", "Faroe Islands", "Fiji", "Finland", "France", "France Metropolitan", "French Guiana", "French Polynesia", "French Southern Territories", "Gabon", "Gambia", "Georgia", "Germany", "Ghana", "Gibraltar", "Greece", "Greenland", "Grenada", "Guadeloupe", "Guam", "Guatemala", "Guinea", "Guinea-Bissau", "Guyana", "Haiti", "Heard and Mc Donald Islands", "Holy See (Vatican City State)", "Honduras", "Hong Kong", "Hungary", "Iceland", "India", "Indonesia", "Iran (Islamic Republic of)", "Iraq", "Ireland", "Israel", "Italy", "Jamaica", "Japan", "Jordan", "Kazakhstan", "Kenya", "Kiribati", "Korea, Democratic People's Republic of", "Korea, Republic of", "Kuwait", "Kyrgyzstan", "Lao, People's Democratic Republic", "Latvia", "Lebanon", "Lesotho", "Liberia", "Libyan Arab Jamahiriya", "Liechtenstein", "Lithuania", "Luxembourg", "Macau", "Macedonia, The Former Yugoslav Republic of", "Madagascar", "Malawi", "Malaysia", "Maldives", "Mali", "Malta", "Marshall Islands", "Martinique", "Mauritania", "Mauritius", "Mayotte", "Mexico", "Micronesia, Federated States of", "Moldova, Republic of", "Monaco", "Mongolia", "Montserrat", "Morocco", "Mozambique", "Myanmar", "Namibia", "Nauru", "Nepal", "Netherlands", "Netherlands Antilles", "New Caledonia", "New Zealand", "Nicaragua", "Niger", "Nigeria", "Niue", "Norfolk Island", "Northern Mariana Islands", "Norway", "Oman", "Pakistan", "Palau", "Panama", "Papua New Guinea", "Paraguay", "Peru", "Philippines", "Pitcairn", "Poland", "Portugal", "Puerto Rico", "Qatar", "Reunion", "Romania", "Russian Federation", "Rwanda", "Saint Kitts and Nevis", "Saint Lucia", "Saint Vincent and the Grenadines", "Samoa", "San Marino", "Sao Tome and Principe", "Saudi Arabia", "Senegal", "Seychelles", "Sierra Leone", "Singapore", "Slovakia (Slovak Republic)", "Slovenia", "Solomon Islands", "Somalia", "South Africa", "South Georgia and the South Sandwich Islands", "Spain", "Sri Lanka", "St. Helena", "St. Pierre and Miquelon", "Sudan", "Suriname", "Svalbard and Jan Mayen Islands", "Swaziland", "Sweden", "Switzerland", "Syrian Arab Republic", "Taiwan, Province of China", "Tajikistan", "Tanzania, United Republic of", "Thailand", "Togo", "Tokelau", "Tonga", "Trinidad and Tobago", "Tunisia", "Turkey", "Turkmenistan", "Turks and Caicos Islands", "Tuvalu", "Uganda", "Ukraine", "United Arab Emirates", "United Kingdom", "United States", "United States Minor Outlying Islands", "Uruguay", "Uzbekistan", "Vanuatu", "Venezuela", "Vietnam", "Virgin Islands (British)", "Virgin Islands (U.S.)", "Wallis and Futuna Islands", "Western Sahara", "Yemen", "Yugoslavia", "Zambia", "Zimbabwe" ]; |
(¡Perdón por el pedazo de tabla!) 😀
Si esta fuera la respuesta obtenida tras por ejemplo una petición XHR (Ajax) y quisiéramos verla impresa en nuestra consola, veríamos que con los métodos info o log, no es ni cómodo, ni suficiente:
console.info( response ); |
console.log( response ); |
Como vemos, el valor de nuestro array aparece truncado a la altura de «Iceland» o, lo que es lo mismo, se pintan únicamente los 100 primeros valores.
Es en estos casos cuando podemos echar mano de ese otro método de la consola menos recurrente: console.table.
NOTA: Para un recordatorio de los principales métodos del objeto console, se aconseja leer la guía sobre el Uso de la console de Firebug, en este mismo blog, ya que su API continúa siendo la misma aún hoy.
Presentando los datos de forma tabulada
Gracias al método console.table, podemos obtener una vista precisa de nuestro datos. El problema, es que su uso no es tan intuitivo como debería y difiere entre navegadores.
console.table en Firefox
Si usamos el navegador de Mozilla, su uso es muy natural:
console.table( response ); |
He recortado la imagen anterior pero lo interesante, es que la tabla está completa.
NOTA: Un aspecto interesante de estas tablas es que se pueden re ordenar los datos si pinchamos en las cabeceras de cada columna.
Si lo que buscamos es colocar los elementos de nuestro array en columnas en lugar de filas, solo tenemos que enrollar nuestra variable en un segundo array:
console.table( [ response ] ); |
Aquí ya podemos ver que para navegar con por las columnas, necesitamos echar mano del scroll horizontal, por lo que quizá, no sería de nuevo interesante.
console.table en Chrome
Si bien en Firefox acabamos de ver que el uso de este método de la consola es ‘natural’, en Chrome sin embargo podemos considerar que está roto.
Si tratamos de pintar el contenido de nuestro array directamente, no obtendremos nada:
console.table( response ); // undefined |
La consola no pinta nada. Sin embargo, sí que funciona el truco de ver los datos como columnas si recubrimos nuestra variable con un array:
console.table( [ response ] ); |
¿Cómo conseguimos entonces una vista donde cada dato rellene una fila? Pues a día de hoy, en 2017, necesitamos recurrir a una función que alimente nuestra tabla:
console.table( response.map( item => [ item ] ) ); |
Con esta función, estamos iterando sobre cada elemento de nuestra lista para enviárselo a la tabla como un array independiente. El resultado de estos malabares sintácticos es, ahora sí, el esperado:
¿Y en Microsoft Edge?
Lamentablemente, console.table no está implementado entre las herramientas del último navegador de Microsoft:
console.table( response ); // console.table is not implemented. Please use an alternative mechanism to log. |
NOTA: Como curiosidad, si utilizamos tanto el método console.info como console.log, Edge trunca la lista de resultados en la posición 22 en lugar de la 100.
¿Métodos alternativos?
Si bien las tablas resultan útiles para pintar respuestas de servidor, su sintaxis es inconsistente entre los principales navegadores.
Por supuesto, siempre podemos optar por una salida más tradicional que itere entre nuestros elementos pintándolos uno a uno:
response.map( item => console.info( item ) ); |
Como podemos intuir, un inconveniente de esta fórmula es que perdemos la posibilidad de re ordenar los datos fácilmente como si podemos hacer con las tablas.
Conclusión
Y esto sería todo en cuanto al uso del método console.table: una herramienta nativa de los navegadores, pero inconsistente, que puede resultar muy útil mientras trabajamos con grandes volúmenes de datos en nuestras fases de debug.
Por supuesto, si utilizáis otras formas o métodos para pintar datos en la consola, o usáis otras herramientas o bibliotecas para ello, no dudéis en dejarlo más abajo en los comentarios.
Happy coding!
Buenas, console.log yo lo uso pero con estilos css para diferenciar varias salidas de debug.
Ejemplo: console.log(‘%c objectEdit ‘, ‘border: 1px dotted red; background: #aad4c7; color: #03a8f7’, data);
o
console.log(‘%c data’, ‘background: #00ee15’, data);
y tambien console.warning y console.error