{"id":4055,"date":"2015-04-01T12:19:15","date_gmt":"2015-04-01T15:19:15","guid":{"rendered":"https:\/\/www.turbosite.com.br\/blog\/?p=4055"},"modified":"2015-04-01T12:19:15","modified_gmt":"2015-04-01T15:19:15","slug":"15-dicas-para-desenvolver-utilizando-o-chrome-devtools","status":"publish","type":"post","link":"https:\/\/www.turbosite.com.br\/blog\/15-dicas-para-desenvolver-utilizando-o-chrome-devtools\/","title":{"rendered":"15 Dicas para desenvolver utilizando o Chrome DevTools"},"content":{"rendered":"<p>Tutorial de como aumentar sua produtividade ao trabalhar com os recursos do Google Chrome DevTools. S\u00e3o 15 dicas que nem todos os desenvolvedores conhecem e que sem d\u00favida, j\u00e1 precisaram em algum momento.\u00a0Este artigo \u00e9 uma tradu\u00e7\u00e3o de\u00a0<strong><a href=\"http:\/\/tutorialzine.com\/2015\/03\/15-must-know-chrome-devtools-tips-tricks\/\">15 Must-Know Chrome DevTools Tips and Tricks<\/a>.<\/strong><\/p>\n<h3>1.<strong>\u00a0Alternar rapidamente entre\u00a0arquivos<\/strong><\/h3>\n<p>Se voc\u00ea j\u00e1 usou Sublime Text, provavelmente voc\u00ea n\u00e3o pode viver sem &#8220;Go to anything&#8221;, este \u00e9 um recurso essencial para alternar entre arquivos com uma simples pesquisa. Para utilizar, basta pressionar Ctrl + P (Cmd + P no Mac) quando DevTools estiver\u00a0aberto, para procurar rapidamente e abrir qualquer arquivo no seu projeto.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5606\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/1.gif\" alt=\"1\" width=\"668\" height=\"329\" \/><\/p>\n<h3>2.\u00a0Pesquisa no c\u00f3digo fonte<\/h3>\n<p>Muitas vezes precisamos pesquisar uma determinada vari\u00e1vel, fun\u00e7\u00e3o ou qualquer outro peda\u00e7o de c\u00f3digo e n\u00e3o sabemos por onde come\u00e7ar. Com este recurso voc\u00ea pesquisar\u00e1 em todos os arquivos carregados de um website. Para pesquisar em todos os arquivos, pressione Ctrl + Shift + F (Cmd + Opt + F no Mac). Uma dica \u00e9 utilizar\u00a0express\u00f5es regulares.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5608\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/2.SearchAll.gif\" alt=\"2.SearchAll\" width=\"668\" height=\"329\" \/><\/p>\n<h3>3.\u00a0Ir para linha desejada<\/h3>\n<p>Depois que voc\u00ea abriu um arquivo na guia Fontes (Sources), voc\u00ea poder\u00e1\u00a0navegar para\u00a0qualquer linha\u00a0pressionando\u00a0Ctrl + G para Windows e Linux, (ou Cmd + L para Mac), depois\u00a0digite o n\u00famero da linha e pressione Enter.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5609\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/3.JumpToLine.gif\" alt=\"3.JumpToLine\" width=\"668\" height=\"329\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Outra maneira de fazer isso \u00e9 pressionar Ctrl + O \u00a0e em vez de procurar um arquivo, digite &#8220;:&#8221;, seguido do n\u00famero da linha desejada.<\/p>\n<h3>4. Selecionando elementos no console<\/h3>\n<p>O console DevTools suporta algumas vari\u00e1veis e fun\u00e7\u00f5es m\u00e1gicas para\u00a0sele\u00e7\u00e3o de elementos DOM:<\/p>\n<ul>\n<li>$() &#8211; Atalho\u00a0para document.querySelector(). Retorna o primeiro elemento, combinando com um seletor CSS (por exemplo $(&#8216;div&#8217;) ir\u00e1 retornar o primeiro elemento div na p\u00e1gina).<\/li>\n<li>$$()\u00a0&#8211; Atalho para\u00a0<strong>document.querySelectorAll()<\/strong>. Retorna um array com todos elementos que condizem com o seletor css.<\/li>\n<li>O\u00a0hist\u00f3rico dos cinco \u00faltimos elementos DOM selecionados\u00a0no painel de elementos, $0 sendo o \u00faltimo acessado.<\/li>\n<\/ul>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5610\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/4.gif\" alt=\"4.$$()\" width=\"668\" height=\"329\" \/><\/p>\n<p>Para aprender um pouco mais sobre os comandos do Console, leia\u00a0<a href=\"https:\/\/developer.chrome.com\/devtools\/docs\/commandline-api\" target=\"_blank\" rel=\"noopener\">Command Line API<\/a>.<\/p>\n<p><strong>5. Utilizando m\u00faltiplas sele\u00e7\u00f5es<\/strong><\/p>\n<p>Outra caracter\u00edstica do Sublime Text que \u00e9 muito \u00fatil aparece novamente. Durante a edi\u00e7\u00e3o de um arquivo voc\u00ea pode definir v\u00e1rios pontos de escrita\/altera\u00e7\u00e3o, segue a tecla Ctrl (Cmd para Mac) e clique\u00a0onde deseja iniciar a escrita, permitindo assim que voc\u00ea escreva em muitos lugares ao mesmo tempo. Tamb\u00e9m \u00e9 poss\u00edvel selecionar textos seguran\u00e7a a tecla Ctrl e depois escrever &#8220;por cima&#8221; de forma que altere v\u00e1rios locais ao mesmo tempo.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5611\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/5.MultipleSelectClick.gif\" alt=\"5.MultipleSelectClick\" width=\"668\" height=\"329\" \/><\/p>\n<h3><strong>6.\u00a0Preservando log<\/strong><\/h3>\n<p>Ao marcar a op\u00e7\u00e3o Preservar Log na guia Console, voc\u00ea pode fazer o DevTools Console persistir o log em vez de limp\u00e1-lo em cada carregamento da p\u00e1gina. Isso \u00e9 \u00fatil quando voc\u00ea quer investigar bugs, que aparecem apenas antes da p\u00e1gina ser descarregada.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5613\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/6.PreserveLog.gif\" alt=\"6.PreserveLog\" width=\"668\" height=\"330\" \/><\/p>\n<h3><strong>7. Formata\u00e7\u00e3o de C\u00f3digo\u00a0{}<\/strong><\/h3>\n<p>DevTools\u00a0tem um built-in de c\u00f3digo &#8220;beautifier&#8221; que ir\u00e1 ajud\u00e1-lo a retornar c\u00f3digo minimizado ao seu formato humanamente leg\u00edvel. O bot\u00e3o &#8220;Pretty Print&#8221; est\u00e1 localizado no canto inferior esquerdo do seu arquivo atualmente aberto na guia Fontes. N\u00e3o \u00e9 necess\u00e1rio instalar nenhum plugin\u00a0para utilizar esta funcionalidade.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5612\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/7.PrettyPrint.gif\" alt=\"7.PrettyPrint\" width=\"668\" height=\"329\" \/><\/p>\n<h3><strong>8.\u00a0Dispositivos m\u00f3veis<\/strong><\/h3>\n<p>DevTools inclui um modo poderoso para o desenvolvimento de p\u00e1ginas para dispositivos m\u00f3veis. Este v\u00eddeo do Google mostra a maioria de suas\u00a0funcionalidades, tais como redimensionamento de tela, emula\u00e7\u00e3o de toque e simulador de problemas de rede.<\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/FrAZWiMWRa4?feature=oembed\" width=\"500\" height=\"281\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h3><strong>9.\u00a0Sensores de emula\u00e7\u00e3o de dispositivo<\/strong><\/h3>\n<p>Outro recurso interessante do modo de\u00a0dispositivos m\u00f3veis\u00a0\u00e9 a op\u00e7\u00e3o para simular sensores, \u00e9 poss\u00edvel simular\u00a0telas sens\u00edveis ao toque e aceler\u00f4metros. Voc\u00ea pode at\u00e9 mesmo falsificar sua localiza\u00e7\u00e3o geogr\u00e1fica. O recurso est\u00e1 localizado na parte inferior da guia Elementos(Elements) em <strong>Emula\u00e7\u00e3o(Emulation) -&gt; Sensores(Sensors)<\/strong>.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5614\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/9.Sensors.gif\" alt=\"9.Sensors\" width=\"668\" height=\"330\" \/><\/p>\n<h3><strong>10. Sele\u00e7\u00e3o de cores<\/strong><\/h3>\n<p>Ao clicar para\u00a0selecionar uma cor no editor de estilos (CSS), ser\u00e1\u00a0aberto uma tela para selecionar a cor, mas, se voc\u00ea passar o mouse sobre a sua p\u00e1gina, o ponteiro do mouse se transformar\u00e1 em uma lupa para selecionar cores com precis\u00e3o de pixels.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5615\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/10.ColorPicker.gif\" alt=\"10.ColorPicker\" width=\"668\" height=\"330\" \/><\/p>\n<h3><strong>11.\u00a0For\u00e7ar um\u00a0estado de elemento<\/strong><\/h3>\n<p>DevTools possui um recurso que simula os estados CSS como :hover, :focus, :visited ou :active, fazendo ser f\u00e1cil a estiliza\u00e7\u00e3o com este recurso. Esta op\u00e7\u00e3o est\u00e1 acess\u00edvel pelo editor CSS do DevTools.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5616\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/11.SimulateHover.gif\" alt=\"11.SimulateHover\" width=\"668\" height=\"329\" \/><\/p>\n<h3><strong>12. Visualize o Shadow DOM<\/strong><\/h3>\n<p>Os navegadores constroem componentes caixas de texto, bot\u00f5es e entradas a partir de outros elementos b\u00e1sicos que s\u00e3o normalmente escondido, um exemplo \u00e9 o elemento Input do tipo Range que cria um item deslizante. Agora ser\u00e1 poss\u00edvel ver o item criado pelo navegador, ser\u00e1 necess\u00e1rio ir a Configura\u00e7\u00f5es(Settings) -&gt; Geral(General) -&gt; Elementos (Elements) e marcar a op\u00e7\u00e3o &#8220;Show user agent shadow DOM&#8221;. Voc\u00ea pode at\u00e9 mesmo estilar os itens, o que lhe tr\u00e1s\u00a0novos recursos de controle CSS.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5617\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/12.ShadowDOM.gif\" alt=\"12.ShadowDOM\" width=\"668\" height=\"329\" \/><\/p>\n<h3>13.\u00a0Selecionar pr\u00f3xima ocorr\u00eancia<\/h3>\n<p>Se voc\u00ea pressionar Ctrl + D (Cmd + D no Mac) durante a edi\u00e7\u00e3o de arquivos na guia Fontes, a pr\u00f3xima ocorr\u00eancia da palavra atual ser\u00e1 selecionada, assim voc\u00ea poder\u00e1 editar v\u00e1rios itens simultaneamente.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5618\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/13.MultiSelect.gif\" alt=\"13.MultiSelect\" width=\"668\" height=\"329\" \/><\/p>\n<h3>14. Alterar formato da cor<\/h3>\n<p>Utlize\u00a0Shift + Clique na visualiza\u00e7\u00e3o de cores para alterar entre RGBA, HSL e formata\u00e7\u00e3o hexadecimal.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-5619\" src=\"https:\/\/www.turbosite.com.br\/blog\/wp-content\/uploads\/2015\/04\/14.ColorFormat.gif\" alt=\"14.ColorFormat\" width=\"668\" height=\"329\" \/><\/p>\n<h3><strong>15.\u00a0Edi\u00e7\u00e3o de arquivos locais atrav\u00e9s de espa\u00e7os de trabalho<\/strong><\/h3>\n<p>Espa\u00e7os de trabalho (Workspaces) \u00e9\u00a0um poderoso recurso do Chrome DevTools \u00a0que o transforma em um IDE em tempo real. Workspaces devem coincidir com os arquivos na guia Fontes a seus arquivos de projetos locais, assim, voc\u00ea poder\u00e1\u00a0editar e salvar diretamente no navegador, sem ter que copiar\/colar as altera\u00e7\u00f5es em um editor de texto externo.<\/p>\n<p>Para configurar, v\u00e1 para a aba Fontes e clique com o bot\u00e3o direito em qualquer lugar no painel esquerdo (onde os fontes est\u00e3o) e escolha &#8220;Adicionar pasta Para Worskpace&#8221;, depois selecione a pasta correspondente, ou, simplesmente arraste e solte a pasta do projeto inteiro em Ferramentas de Desenvolvimento. Agora, selecione a pasta escolhida e entre em seus sub-diret\u00f3rios e todos os arquivos neles estar\u00e1 dispon\u00edvel para edi\u00e7\u00e3o, n\u00e3o importa em que p\u00e1gina voc\u00ea est\u00e1. Para torn\u00e1-lo ainda mais \u00fatil, ent\u00e3o voc\u00ea pode mapear os arquivos em sua pasta aos utilizados pela p\u00e1gina, permitindo a edi\u00e7\u00e3o ao vivo.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Tutorial com 15 dicas de como aumentar sua produtividade ao trabalhar com os recursos do Google Chrome DevTools. Recursos que nem todos desenvolvedores conhecem.<\/p>\n","protected":false},"author":1,"featured_media":4076,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5,6,28],"tags":[],"class_list":["post-4055","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-desenvolvimento","category-dicas","category-tutoriais"],"_links":{"self":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/4055","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/comments?post=4055"}],"version-history":[{"count":0,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/posts\/4055\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media\/4076"}],"wp:attachment":[{"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/media?parent=4055"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/categories?post=4055"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.turbosite.com.br\/blog\/wp-json\/wp\/v2\/tags?post=4055"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}