{"id":2943,"date":"2014-07-15T23:27:59","date_gmt":"2014-07-16T01:27:59","guid":{"rendered":"https:\/\/www.kadunew.com\/blog\/?p=2943"},"modified":"2014-12-09T13:12:23","modified_gmt":"2014-12-09T15:12:23","slug":"devtools-ferramentas-do-seu-navegador-dicas-e-macetes","status":"publish","type":"post","link":"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes","title":{"rendered":"DevTools, ferramentas do seu navegador – Dicas e macetes"},"content":{"rendered":"

O Desenvolvimento de um site sempre nos exige um n\u00famero grande de ferramentas para facilitar nossas vidas. Dessa forma apresento algumas dicas de uma ferramenta que est\u00e1 no seu navegador Chrome. Se voc\u00ea \u00e9 um desenvolvedor web certamente j\u00e1 usou a Dev Tools. Mas tenho certeza que ao menos duas das dicas abaixo voc\u00ea n\u00e3o conhece.
\n<\/p>\n

Editando seu CSS diretamente no navegador<\/h2>\n

Voc\u00ea certamente j\u00e1 editou seu HTML e CSS na guia Elements<\/em>. Atrav\u00e9s dessa guia voc\u00ea s\u00f3 consegue alterar os valores individualmente dos elementos. Outra alternativa \u00e9 voc\u00ea editar seu CSS pela guia Sources<\/em> como se estivesse em um editor.<\/p>\n

\"Editando<\/p>\n

For\u00e7ando o estado de um elemento<\/h2>\n

No Chrome \u00e9 poss\u00edvel for\u00e7ar os seguintes estados: active, focus, hover ou visited.<\/p>\n

Imagine a seguinte situa\u00e7\u00e3o: voc\u00ea quer inspecionar um elemento para ver as regras CSS que est\u00e3o associadas a esse elemento, por\u00e9m essas regras s\u00f3 aparecem no estado hover<\/em> do elemento. Como voc\u00ea pode passar o mouse sobre um elemento e ao mesmo tempo estar interagindo com a ferramenta do desenvolvedor(Dev Tools)?<\/p>\n

Isso \u00e9 poss\u00edvel fazer da seguinte forma: Inspecione o elemento; na aba Elements<\/em> perceba que \u00e0 direita voc\u00ea tem uma guia chamada de Styles<\/em>. Clique no \u00edcone da pequena seta no interior de uma caixa tracejada (Veja imagem abaixo). Agora escolha o estado que deseja inspecionar.<\/p>\n

\"For\u00e7ando<\/p>\n

Pesquisa em todos os arquivos carregados<\/h2>\n

Dica de ouro… CTRL + SHIFT + F<\/strong><\/p>\n

Esta dica \u00e9 para fazer uma pesquisa nos arquivos HTML , CSS e JS carregados pelo site (at\u00e9 os que foram carregados em tempo de execu\u00e7\u00e3o). Por exemplo: digamos que voc\u00ea quer encontrar uma fun\u00e7\u00e3o JavaScript, por\u00e9m voc\u00ea n\u00e3o sabe em qual arquivo externo a fun\u00e7\u00e3o est\u00e1. Ao inv\u00e9s de abrir esses arquivos e procurar a fun\u00e7\u00e3o manualmente use a pesquisa Global. Todos os arquivos que foram baixados juntos \u00e0 p\u00e1gina atual aberta ser\u00e3o pesquisados.<\/p>\n

\"Pesquisar<\/p>\n

Analisar carregamento da p\u00e1gina<\/h2>\n

Na aba Audits<\/em> voc\u00ea pode analisar como uma p\u00e1gina \u00e9 carrega. A ferramenta fornece sugest\u00f5es de otimiza\u00e7\u00f5es para diminuir o tempo de download da sua p\u00e1gina. Ele ir\u00e1 gerar um relat\u00f3rio mostrando que parte do seu site deve ser otimizado.<\/p>\n

Para uma vis\u00e3o mais aprofundada, recomendo a instala\u00e7\u00e3o da extens\u00e3o feita pelo Google PageSpeed Insights<\/a>.<\/p>\n

\"Analisar<\/p>\n

CSS e Javascript Minificado<\/h2>\n

Pretty print<\/em> CSS e JavaScript permite que voc\u00ea converta aquele c\u00f3digo JavaScript ou CSS minificado a partir de uma p\u00e1gina da web em uma forma mais leg\u00edvel de entender. <\/p>\n

Caso queira tamb\u00e9m pode salvar o arquivo modificado em seu computador. \u00c9 s\u00f3 clicar com o bot\u00e3o direito sobre o arquivo modificado e ir em Save As<\/em>…<\/p>\n

\"codigo<\/p>\n

Quebra de linha no console<\/h2>\n

Pressionando CTRL + SHIFT<\/strong> no console do Chrome voc\u00ea apenas far\u00e1 uma quebra de linha. Diferentemente de pressionar somente o enter, este executa algum comando ou fun\u00e7\u00f5es no console. Uma vez que voc\u00ea digitou um bloco de texto, pressione a tecla Enter no final do comando e ele \u00e9 executado.<\/p>\n

\"Inserindo<\/p>\n

Guarde seus Snippets no navegador<\/h2>\n

Pensando em guardar algum trecho de c\u00f3digo usado com frequ\u00eancia?, No chrome isso \u00e9 poss\u00edvel. V\u00e1 at\u00e9 a guia Sources<\/em> e depois em Snippets<\/em>.<\/p>\n

No lado esquerdo voc\u00ea cria seus arquivos e no lado direito voc\u00ea escreve seus c\u00f3digos. Para fazer seu c\u00f3digo ser executado clique com o bot\u00e3o direito sobre o arquivo e v\u00e1 em run<\/em>. A fun\u00e7\u00e3o do exemplo abaixo ao ser executada mostra a largura e a altura do viewPort<\/em> da janela do navegador.<\/p>\n

\"Rodando<\/p>\n

ALT + Clique<\/h2>\n

Esta dica \u00e9 interessante quando voc\u00ea for inspecionar o c\u00f3digo HTML. Pressione ALT<\/strong> e clique ao mesmo tempo sobre a seta de uma div ou seta de um elemento HTML , isso vai expandir todos os seus elementos filhos.<\/p>\n

\"Expandir<\/p>\n

Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":"

O Desenvolvimento de um site sempre nos exige um n\u00famero grande de ferramentas para facilitar nossas vidas. Dessa forma apresento algumas dicas de uma ferramenta que est\u00e1 no seu navegador Chrome. Se voc\u00ea \u00e9 um desenvolvedor web certamente j\u00e1 usou a Dev Tools. Mas tenho certeza que ao menos duas das dicas abaixo voc\u00ea n\u00e3o […]<\/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-2943","post","type-post","status-publish","format-standard","hentry","category-browsers"],"yoast_head":"\nDevTools, ferramentas do seu navegador - Dicas e macetes<\/title>\n<meta name=\"description\" content=\"Conhe\u00e7a um conjunto de ferramentas de depura\u00e7\u00e3o incorporadas ao Google Chrome que v\u00e3o facilitar o seu trabalho na an\u00e1lise e no desenvolvimento de sites.\" \/>\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\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes\" \/>\n<meta property=\"og:locale\" content=\"pt_BR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"DevTools, ferramentas do seu navegador - Dicas e macetes\" \/>\n<meta property=\"og:description\" content=\"Conhe\u00e7a um conjunto de ferramentas de depura\u00e7\u00e3o incorporadas ao Google Chrome que v\u00e3o facilitar o seu trabalho na an\u00e1lise e no desenvolvimento de sites.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes\" \/>\n<meta property=\"og:site_name\" content=\"KADUNEW\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-16T01:27:59+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-12-09T15:12:23+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/07\/guia-sources-chrome.png\" \/>\n\t<meta property=\"og:image:width\" content=\"482\" \/>\n\t<meta property=\"og:image:height\" content=\"219\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\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\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes\",\"url\":\"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes\",\"name\":\"DevTools, ferramentas do seu navegador - Dicas e macetes\",\"isPartOf\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/07\/guia-sources-chrome.png\",\"datePublished\":\"2014-07-16T01:27:59+00:00\",\"dateModified\":\"2014-12-09T15:12:23+00:00\",\"author\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05\"},\"description\":\"Conhe\u00e7a um conjunto de ferramentas de depura\u00e7\u00e3o incorporadas ao Google Chrome que v\u00e3o facilitar o seu trabalho na an\u00e1lise e no desenvolvimento de sites.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#breadcrumb\"},\"inLanguage\":\"pt-BR\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"pt-BR\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#primaryimage\",\"url\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/07\/guia-sources-chrome.png\",\"contentUrl\":\"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/07\/guia-sources-chrome.png\",\"width\":482,\"height\":219,\"caption\":\"Editando seu arquivo de CSS pelo chrome\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#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\":\"DevTools, ferramentas do seu navegador – Dicas e macetes\"}]},{\"@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":"DevTools, ferramentas do seu navegador - Dicas e macetes","description":"Conhe\u00e7a um conjunto de ferramentas de depura\u00e7\u00e3o incorporadas ao Google Chrome que v\u00e3o facilitar o seu trabalho na an\u00e1lise e no desenvolvimento de sites.","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\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes","og_locale":"pt_BR","og_type":"article","og_title":"DevTools, ferramentas do seu navegador - Dicas e macetes","og_description":"Conhe\u00e7a um conjunto de ferramentas de depura\u00e7\u00e3o incorporadas ao Google Chrome que v\u00e3o facilitar o seu trabalho na an\u00e1lise e no desenvolvimento de sites.","og_url":"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes","og_site_name":"KADUNEW","article_published_time":"2014-07-16T01:27:59+00:00","article_modified_time":"2014-12-09T15:12:23+00:00","og_image":[{"width":482,"height":219,"url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/07\/guia-sources-chrome.png","type":"image\/png"}],"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\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes","url":"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes","name":"DevTools, ferramentas do seu navegador - Dicas e macetes","isPartOf":{"@id":"https:\/\/www.kadunew.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#primaryimage"},"image":{"@id":"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#primaryimage"},"thumbnailUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/07\/guia-sources-chrome.png","datePublished":"2014-07-16T01:27:59+00:00","dateModified":"2014-12-09T15:12:23+00:00","author":{"@id":"https:\/\/www.kadunew.com\/blog\/#\/schema\/person\/07b2297c4825efbd1e9f2a1018926b05"},"description":"Conhe\u00e7a um conjunto de ferramentas de depura\u00e7\u00e3o incorporadas ao Google Chrome que v\u00e3o facilitar o seu trabalho na an\u00e1lise e no desenvolvimento de sites.","breadcrumb":{"@id":"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#breadcrumb"},"inLanguage":"pt-BR","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes"]}]},{"@type":"ImageObject","inLanguage":"pt-BR","@id":"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#primaryimage","url":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/07\/guia-sources-chrome.png","contentUrl":"https:\/\/www.kadunew.com\/blog\/wp-content\/uploads\/2014\/07\/guia-sources-chrome.png","width":482,"height":219,"caption":"Editando seu arquivo de CSS pelo chrome"},{"@type":"BreadcrumbList","@id":"https:\/\/www.kadunew.com\/blog\/browsers\/devtools-ferramentas-do-seu-navegador-dicas-e-macetes#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":"DevTools, ferramentas do seu navegador – Dicas e macetes"}]},{"@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\/2943"}],"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=2943"}],"version-history":[{"count":13,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2943\/revisions"}],"predecessor-version":[{"id":2994,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/posts\/2943\/revisions\/2994"}],"wp:attachment":[{"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/media?parent=2943"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/categories?post=2943"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kadunew.com\/blog\/wp-json\/wp\/v2\/tags?post=2943"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}