{"id":553,"date":"2017-04-12T20:47:29","date_gmt":"2017-04-12T23:47:29","guid":{"rendered":"http:\/\/gianfratti.com\/?p=553"},"modified":"2017-04-12T21:21:09","modified_gmt":"2017-04-13T00:21:09","slug":"entendendo-melhor-o-console-do-firebug","status":"publish","type":"post","link":"http:\/\/gianfratti.com\/index.php\/entendendo-melhor-o-console-do-firebug\/","title":{"rendered":"Entendendo melhor o console do Firebug"},"content":{"rendered":"<p>O console do firebug \u00e9 uma poderosa ferramenta que al\u00e9m de mostrar erros de JavaScript, erros 404 e todos os detalhes de uma requisi\u00e7\u00e3o ajax, \u00e9 capaz de interagir com o pr\u00f3prio firebug, inspecionando os nodes HTML.<\/p>\n<p>Mas o uso maior do console, \u00e9 pra debugar javascript mesmo.<\/p>\n<p>Vou listar alguns comandos, funcionam tanto no Firebug pro Firefox, quando no \u201cDeveloper Tools\u201d do Google Chrome<!--more--><\/p>\n<h2>console.log ou console.debug<\/h2>\n<p><strong>Sintaxe:<\/strong> console.log(variaveis);<br \/>\n<strong>Serve para:<\/strong> debugar vari\u00e1veis no javascript ao inv\u00e9s de colocar 300 alerts<\/p>\n<p>At\u00e9 hoje, nunca descobri a diferen\u00e7a (se \u00e9 que existe) entre os dois m\u00e9todos.<br \/>\nUm detalhe que pouca gente sabe, \u00e9 que \u00e9 poss\u00edvel passar infinitos argumentos nessa fun\u00e7\u00e3o.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nvar nome = 'Alex';\r\nvar sobrenome = 'Pimenta';\r\nvar nome_completo = nome+' '+sobrenome;\r\nconsole.log(nome_completo);\r\n\/\/ Alex Pimenta\r\nconsole.log('nome:',nome);\r\n\/\/ nome: Alex\r\nconsole.log('nome:',nome,' e sobrenome: ',sobrenome);\r\n\/\/ nome: Alex sobrenome: Pimenta\r\n<\/pre>\n<h2>console.dir<\/h2>\n<p><strong>Sintaxe:<\/strong> console.dir(objeto);<br \/>\n<strong>Serve para:<\/strong> debugar um objeto, mostrando todos os childs dele<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nvar posicoes = {\r\nleft:10,\r\ntop:50\r\n}\r\nconsole.dir(posicoes);\r\n\/\/ left 10\r\n\/\/ top 50\r\n<\/pre>\n<p>Ou ent\u00e3o:<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\nconsole.dir(document.getElementById(\u2018menu\u2019));\r\n<\/pre>\n<p>retorna tudo sobre o elemento:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"size-full wp-image-555 alignnone\" src=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/FireBug_Console.jpg\" alt=\"\" width=\"460\" height=\"231\" srcset=\"http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/FireBug_Console.jpg 460w, http:\/\/gianfratti.com\/wp-content\/uploads\/2017\/04\/FireBug_Console-300x151.jpg 300w\" sizes=\"auto, (max-width: 460px) 100vw, 460px\" \/><\/p>\n<h2>copy<\/h2>\n<p><strong>Sintaxe:<\/strong> copy(variavel);<br \/>\n<strong>Serve para:<\/strong> copiar uma vari\u00e1vel para a \u00e1rea de transfer\u00eancia do sistema operacional (funciona como um ctrl+c)<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\ncopy(document.getElementById('erro').innerHTML)\r\n<\/pre>\n<h2>$0<\/h2>\n<p><strong>Sintaxe:<\/strong> $0<br \/>\n<strong>Serve para:<\/strong> retornar o objeto selecionado\/inspecionado no pr\u00f3prio firebug.<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n$0.style.display = 'none';\r\n<\/pre>\n<h2>$$<\/h2>\n<p><strong>Sintaxe:<\/strong> $$(expressao)<br \/>\n<strong>Serve para:<\/strong> retornar um ou mais objetos atrav\u00e9s de um seletor.<\/p>\n<p>Funciona como o $ do jQuery. Ent\u00e3o, \u00e9 ideal pra testar em sites que n\u00e3o usam jQuery (sacou? sacou?).<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\n$$('#footer').style.display = 'none';\r\n<\/pre>\n<h2>inspect<\/h2>\n<p><strong>Sintaxe:<\/strong> inspect(elemento)<br \/>\n<strong>Serve para:<\/strong> inspecionar no pr\u00f3prio firebug um elemento HTML.<\/p>\n<p>Funciona como o $ do jQuery. Ent\u00e3o, \u00e9 ideal pra testar em sites que n\u00e3o usam jQuery (sacou? sacou?).<\/p>\n<pre class=\"brush: php; title: ; notranslate\" title=\"\">\r\ninspect($$('#footer'));\r\n<\/pre>\n<p>Acho interessante quem gostou do assunto dar uma olhada num v\u00eddeo do Paul Irish em que ele demonstra essas e outras fun\u00e7\u00f5es do console do firebug.<\/p>\n<div class=\"su-youtube su-u-responsive-media-yes\"><iframe loading=\"lazy\" width=\"600\" height=\"400\" src=\"https:\/\/www.youtube.com\/embed\/4mf_yNLlgic?\" frameborder=\"0\" allowfullscreen allow=\"autoplay; encrypted-media; picture-in-picture\" title=\"\"><\/iframe><\/div>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>O console do firebug \u00e9 uma poderosa ferramenta que al\u00e9m de mostrar erros de JavaScript, erros 404 e todos os detalhes de uma requisi\u00e7\u00e3o ajax, \u00e9 capaz de interagir com o pr\u00f3prio firebug, inspecionando os nodes HTML. Mas o uso maior do console, \u00e9 pra debugar javascript mesmo. Vou listar alguns comandos, funcionam tanto no <span class=\"ellipsis\">&hellip;<\/span> <span class=\"more-link-wrap\"><a href=\"http:\/\/gianfratti.com\/index.php\/entendendo-melhor-o-console-do-firebug\/\" class=\"more-link\"><span>Read More &rarr;<\/span><\/a><\/span><\/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":[],"class_list":["post-553","post","type-post","status-publish","format-standard","hentry","category-dicas"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/553","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=553"}],"version-history":[{"count":4,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/553\/revisions"}],"predecessor-version":[{"id":558,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/posts\/553\/revisions\/558"}],"wp:attachment":[{"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/media?parent=553"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/categories?post=553"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/gianfratti.com\/index.php\/wp-json\/wp\/v2\/tags?post=553"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}