{"id":3464,"date":"2015-12-24T11:23:04","date_gmt":"2015-12-24T13:23:04","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=3464"},"modified":"2015-12-24T11:31:43","modified_gmt":"2015-12-24T13:31:43","slug":"dicas-e-segredos-do-chrome-devtools","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools","title":{"rendered":"Dicas e Segredos do Chrome DevTools"},"content":{"rendered":"

O DevTools do Chrome disponibiliza aos desenvolvedores uma completa ferramenta para an\u00e1lise de p\u00e1gina e c\u00f3digo. Mesmo que voc\u00ea j\u00e1 use a DevTools recomendo dar uma olhada nessas 10 dicas a seguir. Com certeza voc\u00ea vai encontrar alguma novidade, algum segredo da DevTools que n\u00e3o conhecia<\/strong>, quer apostar?<\/p>\n

<\/p>\n

N\u00e3o deixe de ler tamb\u00e9m o artigo: 18 Dicas R\u00e1pidas para Google Chrome<\/a>.<\/p>\n

1. Identar a marca\u00e7\u00e3o HTML<\/h2>\n

Se estiver inspecionando algum elemento e quiser deixar o c\u00f3digo mais organizado fa\u00e7a o seguinte: Com o trecho do seu HTML selecionado pressione Shift + Tab<\/strong>.
\n

\"Estruturar<\/a>
Estruturar o c\u00f3digo<\/figcaption><\/figure><\/p>\n

2. Convertendo o modo de cores<\/h2>\n

Usando Shift + Clique<\/strong> voc\u00ea pode converter os c\u00f3digos de cores para Hexadecimal, RGB e HSL.
\n

\"Alterar<\/a>
Alterar cores para Hexadecimal para RGB e HSL<\/figcaption><\/figure><\/p>\n

3. Fazendo do seu Chrome um colorpicker<\/h2>\n

Capturar cores com o navegador o Chrome \u00e9 uma das coisas mais \u00fateis para um desenvolvedor. Um seletor de cores \u00e9 exibido ao clicar no quadrado de visualiza\u00e7\u00e3o de cor. Essa \u00e9 uma das melhores dicas do Chrome, poucos sabem.
\n

\"Usando<\/a>
Usando o Colorpicker do Chrome<\/figcaption><\/figure><\/p>\n

4. Sele\u00e7\u00e3o M\u00faltipla com o Teclado<\/h2>\n

Digamos que no seu arquivo de CSS voc\u00ea quer buscar o termo “src”<\/em>. Para isso basta ir at\u00e9 a aba Sources do seu navegador, escolher um arquivo JS ou CSS. Depois disso \u00e9 s\u00f3 clicar sobre uma ocorr\u00eancia e pressionar Ctrl \/ Cmd + D<\/strong> para ir selecionando a pr\u00f3xima ocorr\u00eancia dentro do arquivo.
\n

\"Sele\u00e7\u00e3o<\/a>
Selecionando pelo teclado<\/figcaption><\/figure><\/p>\n

5. Acesso r\u00e1pido aos seletores do CSS ou fun\u00e7\u00f5es JS<\/h2>\n

Voc\u00ea quer pesquisar por um seletor no seu CSS, ou uma fun\u00e7\u00e3o no seu arquivo de JavaScript. Uma forma de pesquisar e ir fazendo filtros nos resultados encontrados. A dica \u00e9 a seguinte: v\u00e1 at\u00e9 a aba Sources, e usando a tecla de atalho Ctrl \/ Cmd + Shift + P<\/strong> o Chrome mostra uma janela de acesso r\u00e1pido a todos seletores ou fun\u00e7\u00f5es do seu arquivo, permitindo que voc\u00ea filtre os termos.
\n

\"Filtro<\/a>
Filtro de regras CSS e fun\u00e7\u00f5es JS<\/figcaption><\/figure><\/p>\n

6. Adicione estilos para o seu log de console<\/h2>\n

Voc\u00ea pode estilizar o console do Chorme utilizando CSS via %c<\/p>\n

Exemplo:<\/p>\n

\r\nconsole.log("%OMG, this is red!", "color: red;");\r\nconsole.log('%cBlue! %cRed!', 'color: blue;', 'color: red;');\r\n<\/pre>\n
\"Adicionando<\/a>
Adicionando estilos para o console<\/figcaption><\/figure>\n
7. Obter dados tabulados no console<\/h2>\n
Use console.table()<\/em> para ter seus arrays ou objetos formatados em tabela.<\/p>\n
\r\nvar ThisIsSomeData = [];\r\nThisIsSomeData.push({ foo:"bar", morefoo:"morebar", bar:"foo"  });\r\nThisIsSomeData.push({ foo:"bar0",  bar:"foo0"  });\r\nconsole.table(ThisIsSomeData);\r\n<\/pre>\n
\"Dados<\/a>
Dados em tabelas no console<\/figcaption><\/figure>\n
8. Use multiplos cursores e sele\u00e7\u00f5es nos seus arquivos<\/h2>\n
Na aba Sources com algum arquivo aberto (CSS ou JS) use Ctrl \/ Cmd + Click para fazer m\u00faltiplas se\u00e7\u00e3o.
\n
\"M\u00faltiplos<\/a>
M\u00faltiplos cursores e sele\u00e7\u00f5es<\/figcaption><\/figure><\/p>\n
9. Facilitando a leitura de JavaScript ou CSS<\/h2>\n
Visando melhorar a performace do nosso site, normalmente minificamos nossos estilos CSS e Scrips JS. Caso queira deixar o c\u00f3digo de uma forma mais leg\u00edvel para ler no seu navegador v\u00e1 at\u00e9 a aba Sources escolha seu arquivo e clique sobre o icone das {} (chaves) na parte inferior da janela DevTools do Chrome
\n
\"C\u00f3digo<\/a>
C\u00f3digo CSS ou JS minificado<\/figcaption><\/figure><\/p>\n
10. Revelar a sele\u00e7\u00e3o feita no console<\/h2>\n
Voc\u00ea pode clicar em qualquer elemento de sa\u00edda, de uma fun\u00e7\u00e3o executada no console, e clicar em “Reveal in Elements Panel” para encontr\u00e1-lo no DOM.
\n
\"Inspecionar<\/a>
Inspecionar elementos clicados no console<\/figcaption><\/figure><\/p>\n
Fonte: Chrome devtools tips and tricks<\/a> <\/p>\n
Curta a p\u00e1gina do blog kadunew<\/a> no Facebook. Siga-me no Twitter: @kadunew<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"
O DevTools do Chrome disponibiliza aos desenvolvedores uma completa ferramenta para an\u00e1lise de p\u00e1gina e c\u00f3digo. Mesmo que voc\u00ea j\u00e1 use a DevTools recomendo dar uma olhada nessas 10 dicas a seguir. Com certeza voc\u00ea vai encontrar alguma novidade, algum segredo da DevTools que n\u00e3o conhecia, quer apostar?<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"class_list":["post-3464","post","type-post","status-publish","format-standard","hentry","category-browsers"],"yoast_head":"\nDicas e Ferramentas do Chrome para Desenvolvedores<\/title>\n<meta name=\"description\" content=\"Artigo r\u00e1pido mostrando 10 dicas de como usar as ferramentas do Chrome de forma mais eficiente. Confira Dicas e segredos da DevTools.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Dicas e Ferramentas do Chrome para Desenvolvedores\" \/>\n<meta property=\"og:description\" content=\"Artigo r\u00e1pido mostrando 10 dicas de como usar as ferramentas do Chrome de forma mais eficiente. Confira Dicas e segredos da DevTools.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-24T13:23:04+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-12-24T13:31:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/dica-1-chrome-identar.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"600\" \/>\n\t<meta property=\"og:image:height\" content=\"600\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Kadu Oliveira\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kadu Oliveira\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. tempo de leitura\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools\",\"url\":\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools\",\"name\":\"Dicas e Ferramentas do Chrome para Desenvolvedores\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/dica-1-chrome-identar.gif\",\"datePublished\":\"2015-12-24T13:23:04+00:00\",\"dateModified\":\"2015-12-24T13:31:43+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Artigo r\u00e1pido mostrando 10 dicas de como usar as ferramentas do Chrome de forma mais eficiente. Confira Dicas e segredos da DevTools.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/dica-1-chrome-identar.gif\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/dica-1-chrome-identar.gif\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.kadunew.com\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Browsers\",\"item\":\"https:\/\/www.kadunew.com\/blog\/category\/browsers\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Dicas e Segredos do Chrome DevTools\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\",\"url\":\"https:\/\/www.kadunew.com\/blog\/\",\"name\":\"KADUNEW\",\"description\":\"Artigos sobre Front-End e Programa\u00e7\u00e3o web\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"pt-BR\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\",\"name\":\"Kadu Oliveira\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g\",\"caption\":\"Kadu Oliveira\"},\"sameAs\":[\"https:\/\/www.kadunew.com\/blog\"],\"url\":\"https:\/\/www.kadunew.com\/blog\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Dicas e Ferramentas do Chrome para Desenvolvedores","description":"Artigo r\u00e1pido mostrando 10 dicas de como usar as ferramentas do Chrome de forma mais eficiente. Confira Dicas e segredos da DevTools.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools","og_locale":"pt_BR","og_type":"article","og_title":"Dicas e Ferramentas do Chrome para Desenvolvedores","og_description":"Artigo r\u00e1pido mostrando 10 dicas de como usar as ferramentas do Chrome de forma mais eficiente. Confira Dicas e segredos da DevTools.","og_url":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools","og_site_name":"KADUNEW","article_published_time":"2015-12-24T13:23:04+00:00","article_modified_time":"2015-12-24T13:31:43+00:00","og_image":[{"width":600,"height":600,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/dica-1-chrome-identar.gif","type":"image\/gif"}],"author":"Kadu Oliveira","twitter_misc":{"Escrito por":"Kadu Oliveira","Est. tempo de leitura":"3 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools","url":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools","name":"Dicas e Ferramentas do Chrome para Desenvolvedores","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/dica-1-chrome-identar.gif","datePublished":"2015-12-24T13:23:04+00:00","dateModified":"2015-12-24T13:31:43+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Artigo r\u00e1pido mostrando 10 dicas de como usar as ferramentas do Chrome de forma mais eficiente. Confira Dicas e segredos da DevTools.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/dica-1-chrome-identar.gif","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2015\/04\/dica-1-chrome-identar.gif"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/browsers\/dicas-e-segredos-do-chrome-devtools#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kadunew.com\/blog"},{"@type":"ListItem","position":2,"name":"Browsers","item":"https:\/\/www.kadunew.com\/blog\/category\/browsers"},{"@type":"ListItem","position":3,"name":"Dicas e Segredos do Chrome DevTools"}]},{"@type":"WebSite","@id":"https:\/\/www.kadunew.com\/blog\/#website","url":"https:\/\/www.kadunew.com\/blog\/","name":"KADUNEW","description":"Artigos sobre Front-End e Programa\u00e7\u00e3o web","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kadunew.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"pt-BR"},{"@type":"Person","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05","name":"Kadu Oliveira","image":{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/780660fded589936b30467c54c99d51a?s=96&r=g","caption":"Kadu Oliveira"},"sameAs":["https:\/\/www.kadunew.com\/blog"],"url":"https:\/\/www.kadunew.com\/blog\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3464"}],"collection":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/comments?post=3464"}],"version-history":[{"count":17,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3464\/revisions"}],"predecessor-version":[{"id":4004,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/3464\/revisions\/4004"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=3464"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=3464"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=3464"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}