{"id":542,"date":"2017-04-12T20:08:08","date_gmt":"2017-04-12T23:08:08","guid":{"rendered":"http:\/\/gianfratti.com\/?p=542"},"modified":"2017-04-12T20:12:40","modified_gmt":"2017-04-12T23:12:40","slug":"depurando-variaveis-complexas-no-javascript-com-console-table","status":"publish","type":"post","link":"http:\/\/gianfratti.com\/index.php\/depurando-variaveis-complexas-no-javascript-com-console-table\/","title":{"rendered":"Depurando vari\u00e1veis complexas no JavaScript com console.table"},"content":{"rendered":"<p>Vamos conhecer um truque <em>n\u00e3o padr\u00e3o<\/em> do JavaScript que ajuda e muito na depura\u00e7\u00e3o de vari\u00e1veis complexas \u2013 o console.table.<!--more--><\/p>\n<p>Como exemplo, vamos imaginar que temos um vetor de objetos complexos:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nvar vetorObjetos = &#x5B;\r\n    {\r\n        nome: &quot;Paulo&quot;,\r\n        idade: 30\r\n    },\r\n    {\r\n        nome: &quot;Cecilia&quot;,\r\n        idade: 55\r\n    }\r\n];\r\n<\/pre>\n<p>Para imprimir o conte\u00fado deste vetor no console do navegador, usamos o bom e velho <strong>console.log<\/strong>, desta forma:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nconsole.log(vetorObjetos);\r\n<\/pre>\n<p>E temos este resultado nos consoles dos navegadores (Firefox e Chrome, respectivamente):<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-546 alignnone\" src=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table01.jpg\" alt=\"\" width=\"720\" height=\"253\" srcset=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table01.jpg 720w, http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table01-300x105.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/center>&nbsp;<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-547 alignnone\" src=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table02.jpg\" alt=\"\" width=\"548\" height=\"480\" srcset=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table02.jpg 548w, http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table02-300x263.jpg 300w\" sizes=\"auto, (max-width: 548px) 100vw, 548px\" \/><\/center>Mas voc\u00ea sabia que h\u00e1 um jeito bem mais simples de ver o conte\u00fado de vari\u00e1veis complexas nestes navegadores? Experimente usar <strong>console.table<\/strong> no lugar de <strong>console.log<\/strong>:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nconsole.table(vetorObjetos);\r\n<\/pre>\n<p>Acredite, este \u00e9 o resultado nos consoles dos navegadores!<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-548 alignnone\" src=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table03.jpg\" alt=\"\" width=\"720\" height=\"212\" srcset=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table03.jpg 720w, http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table03-300x88.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/center><center><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-549 alignnone\" src=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table04.jpg\" alt=\"\" width=\"720\" height=\"245\" srcset=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table04.jpg 720w, http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table04-300x102.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/center>E se os objetos que ser\u00e3o tabulados tiverem muitas propriedades, voc\u00ea ainda pode filtrar o comando para exibir apenas as propriedades desejadas, passando o nome dos par\u00e2metros num vetor, desta forma:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nconsole.table(vetorObjetos, &#x5B;&quot;nome&quot;]);\r\n<\/pre>\n<p>E como resultado, nossa tabela s\u00f3 mostra a propriedade nome dos objetos!<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-550 alignnone\" src=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table05.jpg\" alt=\"\" width=\"720\" height=\"243\" srcset=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table05.jpg 720w, http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table05-300x101.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/center>&nbsp;<\/p>\n<p><center><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-551 alignnone\" src=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table06.jpg\" alt=\"\" width=\"720\" height=\"233\" srcset=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table06.jpg 720w, http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/JS_Table06-300x97.jpg 300w\" sizes=\"auto, (max-width: 720px) 100vw, 720px\" \/><\/center>Assim, conhecemos mais um \u2018truque\u2019 que facilita e muito a depura\u00e7\u00e3o de c\u00f3digo JavaScript (n\u00e3o compat\u00edvel com os navegadores da Microsoft).<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Vamos conhecer um truque n\u00e3o padr\u00e3o do JavaScript que ajuda e muito na depura\u00e7\u00e3o de vari\u00e1veis complexas \u2013 o console.table.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20],"tags":[102],"class_list":["post-542","post","type-post","status-publish","format-standard","hentry","category-dicas","tag-debug"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/542","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/comments?post=542"}],"version-history":[{"count":4,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/542\/revisions"}],"predecessor-version":[{"id":552,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/542\/revisions\/552"}],"wp:attachment":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/media?parent=542"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/categories?post=542"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/tags?post=542"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}