{"id":7401,"date":"2019-08-12T11:42:02","date_gmt":"2019-08-12T11:42:02","guid":{"rendered":"https:\/\/www.jose-aguilar.com\/blog\/?p=7401"},"modified":"2019-08-12T11:52:43","modified_gmt":"2019-08-12T11:52:43","slug":"consola-del-navegador-para-javascript","status":"publish","type":"post","link":"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/","title":{"rendered":"Consola del navegador para JavaScript"},"content":{"rendered":"

Hoy en d\u00eda, la consola del navegador es una herramienta imprescindible para los programadores web ya que te ayuda a encontrar posibles errores que pueda haber en el c\u00f3digo de una p\u00e1gina o aplicaci\u00f3n.<\/p>\n

Directamente, en la consola del navegador tambi\u00e9n puedes hacer operaciones, crear variables, arreglos, objetos o llamar a funciones definidas previamente que est\u00e9n permitidas por el lenguaje de programaci\u00f3n JavaScript<\/strong>.<\/p>\n

Actualmente todos los navegadores incluyen una consola. Para mi gusto la mejor es la que incluye Google Chrome<\/em>.<\/p>\n

Normalmente, puedes acceder a la consola del navegador haciendo clic en el bot\u00f3n derecho del rat\u00f3n en la ventana del navegador y en el men\u00fa que aparece vas a encontrar una opci\u00f3n que dice \u201cInspeccionar\u201d.<\/p>\n

\"Men\u00fa<\/a><\/p>\n

Visualmente la consola del navegador se muestra como lo siguiente:<\/p>\n

\"Consola<\/a><\/p>\n

Por defecto se muestra en la parte de abajo de la p\u00e1gina pero tienes la posibilidad de moverlo f\u00e1cilmente a la izquierda, derecha o posici\u00f3n libre de la pantalla.<\/p>\n

La consola del navegador es un excelente lugar para encontrar errores en el c\u00f3digo y tambi\u00e9n es ideal para probar tu c\u00f3digo JavaScript<\/strong>.<\/p>\n

Tipos de mensajes en la consola del navegador<\/h3>\n

Un detalle muy \u00fatil e importante es la posibilidad de mandar informaci\u00f3n a la consola desde el c\u00f3digo usando el console log<\/em>:<\/p>\n

<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.log<\/span>(<\/span>'Enviando a la consola'<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Obteniendo como resultado:<\/p>\n
\"Enviando<\/a><\/p>\n
En este caso, tan solo estoy enviando un texto simple pero, puedes enviar valores de variables para conocer su valor o realizar cualquier operaci\u00f3n.<\/p>\n
En la misma consola tambi\u00e9n puedes crear peque\u00f1as rutinas con variables y operaciones para ver resultados.<\/p>\n
Esto es ideal para debugar o testear el c\u00f3digo.<\/p>\n
Existen otro tipo de funciones que puedes utilizar para enviar mensajes desde el c\u00f3digo JavaScript<\/strong> y que se pueden filtrar o categorizar seg\u00fan su nivel de gravedad.<\/p>\n
Para mostrar mensajes con formato de error en la consola (en color rojo) puedes usar:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.error<\/span>(<\/span>'Ha habido alg\u00fan error'<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
En la consola lo ver\u00e1s as\u00ed:<\/p>\n
\"Mostrar<\/a><\/p>\n
Para mostrar advertencias puedes usar:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.warn<\/span>(<\/span>'Esto es una advertencia'<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
En la consola lo ver\u00e1s as\u00ed:<\/p>\n
\"Mostrar<\/a><\/p>\n
Para mostrar informaci\u00f3n adicional sobre un suceso puedes utilizar:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.info<\/span>(<\/span>'Esto es un mensaje informativo'<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
Tambi\u00e9n puedes utilizar la consola para controlar el tiempo de ejecuci\u00f3n de tus scripts y poder optimizarlo mediante el uso de console time<\/em>.<\/p>\n
Puedes agregar lo siguiente a tu c\u00f3digo:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
console.time<\/span>(<\/span>'execute_time'<\/span>)<\/span>;<\/span>\n \nfor<\/span> (<\/span>let i =<\/span> 0<\/span>;<\/span> i <<\/span> 100<\/span>;<\/span> i++<\/span>)<\/span> {<\/span>\n    \/\/c\u00f3digo...<\/span>\n}<\/span>\n \nconsole.timeEnd<\/span>(<\/span>'execute_time'<\/span>)<\/span>;<\/span><\/pre><\/div><\/div>\n
El c\u00f3digo anterior es muy simple.<\/p>\n
Tan solo estoy haciendo un ciclo de 100 veces para simular un proceso o ejecuci\u00f3n.<\/p>\n
Antes del proceso, estoy llamando a console.time() y justo despu\u00e9s del proceso estoy llamando a console.timeEnd().<\/p>\n
De esta forma, puedes obtener un resultado como el siguiente en la consola:<\/p>\n
\"Mostrar<\/a><\/p>\n
Con este mensaje puedes interpretar que tu c\u00f3digo ha tardado 0.0087890625 milisegundos en ejecutarse.<\/p>\n
Para imprimir los datos de un arreglo en formato tabla quiz\u00e1 tambi\u00e9n te pueda interesar el uso del console table<\/em>:<\/p>\n
<\/a>Source code<\/a><\/td><\/a> <\/a> <\/a> <\/td><\/tr><\/table><\/div>
let numbers =<\/span> [<\/span>1,<\/span>2,<\/span>3]<\/span>;<\/span>\n \nconsole.table<\/span>(<\/span>numbers)<\/span>;<\/span><\/pre><\/div><\/div>\n
Puedes tener un resultado como el siguiente en la consola:<\/p>\n
\"Mostrar<\/a><\/p>\n
El contenido del arreglo lo puedes ver en formato table con la ventaja de ser mucho m\u00e1s f\u00e1cil de leer.<\/p>\n
La consola es muy \u00fatil. Se utiliza mucho para desarrollar en JavaScript<\/strong> pero tambi\u00e9n se puede utilizar para HTML<\/strong> y CSS<\/strong>.<\/p>\n
Desde la consola puedes inspeccionar todas las etiquetas de marcado HTML<\/strong>\u00a0y sus correspondientes estilos CSS<\/strong> donde es posible editarlo en l\u00ednea para ver los resultados directamente.<\/p>\n
\"Modificar<\/a><\/p>\n
Conclusi\u00f3n<\/h3>\n
Si no tienes instalado Chrome, yo te recomiendo que lo hagas ya que tiene una consola mucho m\u00e1s completa y funcional.<\/p>\n
S\u00e9 que si eres asiduo a un navegador concreto cuesta un tiempo acostumbrarse al cambio. Yo hace varios a\u00f1os siempre usaba Mozilla Firefox y estaba encantado. Desde hace unos a\u00f1os pas\u00e9 a utilizar en segundo plano Google Chrome hasta que actualmente solo uso Google Chrome.<\/p>\n
Bien es cierto que tengo instalado en mi ordenador otros navegadores como Mozilla Firefox, Internet Explorer o Opera pero, solo los uso para probar el funcionamiento de p\u00e1ginas web y aplicaciones.<\/p>\n
Consigue toda la informaci\u00f3n sobre c\u00f3mo funciona la consola de Google Chrome desde el siguiente enlace:<\/p>\n
https:\/\/developers.google.com\/web\/tools\/chrome-devtools\/console\/?hl=es<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
Averigua que \u00e9s y como funciona la consola del navegador. Descubre una herramienta que no puede faltarle a ning\u00fan programador web. Tipos de mensajes…<\/p>\n","protected":false},"author":1,"featured_media":7412,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,13,12,14],"tags":[115],"class_list":["post-7401","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-css","category-herramientas","category-html","category-javascript","tag-alertas"],"yoast_head":"\nConsola del navegador para JavaScript - Jose Aguilar Blog<\/title>\n<meta name=\"description\" content=\"Averigua que \u00e9s y como funciona la consola del navegador. Descubre una herramienta que no puede faltarle a ning\u00fan programador web. Tipos de mensajes...\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Consola del navegador para JavaScript - Jose Aguilar Blog\" \/>\n<meta property=\"og:description\" content=\"Averigua que \u00e9s y como funciona la consola del navegador. Descubre una herramienta que no puede faltarle a ning\u00fan programador web. Tipos de mensajes...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/\" \/>\n<meta property=\"og:site_name\" content=\"Jose Aguilar Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/joseaguilarblog\" \/>\n<meta property=\"article:published_time\" content=\"2019-08-12T11:42:02+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-08-12T11:52:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/console-log-icon.png\" \/>\n\t<meta property=\"og:image:width\" content=\"250\" \/>\n\t<meta property=\"og:image:height\" content=\"250\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Jose Aguilar\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:site\" content=\"@JoseAguilarBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Jose Aguilar\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/\",\"name\":\"Consola del navegador para JavaScript - Jose Aguilar Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/console-log-icon.png\",\"datePublished\":\"2019-08-12T11:42:02+00:00\",\"dateModified\":\"2019-08-12T11:52:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\"},\"description\":\"Averigua que \u00e9s y como funciona la consola del navegador. Descubre una herramienta que no puede faltarle a ning\u00fan programador web. Tipos de mensajes...\",\"breadcrumb\":{\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#primaryimage\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/console-log-icon.png\",\"contentUrl\":\"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/console-log-icon.png\",\"width\":250,\"height\":250},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\/\/www.jose-aguilar.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Consola del navegador para JavaScript\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#website\",\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/\",\"name\":\"Jose Aguilar Blog\",\"description\":\"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11\",\"name\":\"Jose Aguilar\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g\",\"caption\":\"Jose Aguilar\"},\"description\":\"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.\",\"sameAs\":[\"https:\/\/plus.google.com\/114357189801512615537\"],\"url\":\"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Consola del navegador para JavaScript - Jose Aguilar Blog","description":"Averigua que \u00e9s y como funciona la consola del navegador. Descubre una herramienta que no puede faltarle a ning\u00fan programador web. Tipos de mensajes...","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"es_ES","og_type":"article","og_title":"Consola del navegador para JavaScript - Jose Aguilar Blog","og_description":"Averigua que \u00e9s y como funciona la consola del navegador. Descubre una herramienta que no puede faltarle a ning\u00fan programador web. Tipos de mensajes...","og_url":"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/","og_site_name":"Jose Aguilar Blog","article_publisher":"https:\/\/www.facebook.com\/joseaguilarblog","article_published_time":"2019-08-12T11:42:02+00:00","article_modified_time":"2019-08-12T11:52:43+00:00","og_image":[{"width":250,"height":250,"url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/console-log-icon.png","type":"image\/png"}],"author":"Jose Aguilar","twitter_card":"summary_large_image","twitter_creator":"@JoseAguilarBlog","twitter_site":"@JoseAguilarBlog","twitter_misc":{"Escrito por":"Jose Aguilar","Tiempo de lectura":"4 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/","url":"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/","name":"Consola del navegador para JavaScript - Jose Aguilar Blog","isPartOf":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#primaryimage"},"image":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#primaryimage"},"thumbnailUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/console-log-icon.png","datePublished":"2019-08-12T11:42:02+00:00","dateModified":"2019-08-12T11:52:43+00:00","author":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11"},"description":"Averigua que \u00e9s y como funciona la consola del navegador. Descubre una herramienta que no puede faltarle a ning\u00fan programador web. Tipos de mensajes...","breadcrumb":{"@id":"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#primaryimage","url":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/console-log-icon.png","contentUrl":"https:\/\/www.jose-aguilar.com\/blog\/wp-content\/uploads\/2019\/08\/console-log-icon.png","width":250,"height":250},{"@type":"BreadcrumbList","@id":"https:\/\/www.jose-aguilar.com\/blog\/consola-del-navegador-para-javascript\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/www.jose-aguilar.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Consola del navegador para JavaScript"}]},{"@type":"WebSite","@id":"https:\/\/www.jose-aguilar.com\/blog\/#website","url":"https:\/\/www.jose-aguilar.com\/blog\/","name":"Jose Aguilar Blog","description":"Desarrollo Web con PrestaShop, WordPress, PHP, jQuery y Ajax","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jose-aguilar.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Person","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/e6d485db1e1140866e95971d17105d11","name":"Jose Aguilar","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.jose-aguilar.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/abbfef5f1d75260c549d0f2c2842bb697ba1aadff3b2836b39d2590c8a625415?s=96&d=mm&r=g","caption":"Jose Aguilar"},"description":"Director ejecutivo y tecnol\u00f3gico en JA Modules. Experto programador PrestaShop y Experto programador WordPress.","sameAs":["https:\/\/plus.google.com\/114357189801512615537"],"url":"https:\/\/www.jose-aguilar.com\/blog\/author\/josea902\/"}]}},"_links":{"self":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7401","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/comments?post=7401"}],"version-history":[{"count":0,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/posts\/7401\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media\/7412"}],"wp:attachment":[{"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/media?parent=7401"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/categories?post=7401"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jose-aguilar.com\/blog\/wp-json\/wp\/v2\/tags?post=7401"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}