{"id":3069,"date":"2022-05-04T23:17:12","date_gmt":"2022-05-05T02:17:12","guid":{"rendered":"https:\/\/nearjob.com.br\/?p=3069"},"modified":"2022-05-04T23:17:15","modified_gmt":"2022-05-05T02:17:15","slug":"devtools-13-atalhos-de-teclado-para-desenvolvedores-no-chrome","status":"publish","type":"post","link":"https:\/\/nearjob.com.br\/en\/devtools-13-atalhos-de-teclado-para-desenvolvedores-no-chrome\/","title":{"rendered":"DevTools: 13 atalhos de teclado para desenvolvedores no Chrome"},"content":{"rendered":"<p>Os atalhos de teclado economizam tempo executando determinadas tarefas a partir do teclado, sem precisar clicar v\u00e1rias vezes.&nbsp;Reunimos 13 atalhos de teclado para o DevTools, o conjunto de ferramentas de desenvolvimento web integrado ao Google Chrome.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. Inspecione o elemento<\/h2>\n\n\n\n<p>Para acessar a interface que permite inspecionar o elemento, basta usar os seguintes atalhos:<\/p>\n\n\n\n<ul><li><strong>Ctrl + Cmd + C<\/strong>&nbsp;no macOS<\/li><li><strong>F12 ou Ctrl + Shift + C&nbsp;<\/strong>sur Windows et Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">2. Abra o painel do console<\/h2>\n\n\n\n<p>Para abrir diretamente o painel do console, inicie uma guia do Google Chrome e use os seguintes atalhos:<\/p>\n\n\n\n<ul><li><strong>Ctrl + Cmd + J<\/strong>&nbsp;no macOS<\/li><li><strong>Ctrl + Shift + J<\/strong>&nbsp;no Windows e Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">3. Abra o menu de comando<\/h2>\n\n\n\n<p>O menu de comandos fornece acesso r\u00e1pido a qualquer recurso do DevTools.&nbsp;Para abri-lo diretamente, os atalhos de teclado s\u00e3o:<\/p>\n\n\n\n<ul><li><strong>Cmd + Shift + P&nbsp;<\/strong>&nbsp;no macOS<\/li><li><strong>Ctrl + Shift + P&nbsp;<\/strong>&nbsp;no Windows e Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">4. Visualizar configura\u00e7\u00f5es<\/h2>\n\n\n\n<p>Quando o DevTools est\u00e1 aberto, voc\u00ea pode acessar facilmente as configura\u00e7\u00f5es usando os seguintes atalhos de teclado:<\/p>\n\n\n\n<ul><li><strong>Fn + F1&nbsp;<\/strong>ou<strong>&nbsp;?&nbsp;<\/strong>sur macOS<\/li><li><strong>F1&nbsp;<\/strong>ou&nbsp;<strong>?&nbsp;<\/strong>sur Windows et Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">5. Pain\u00e9is de comuta\u00e7\u00e3o<\/h2>\n\n\n\n<p>Para alternar de um painel do DevTools para outro, existem 2 atalhos de teclado que permitem passar para o pr\u00f3ximo painel ou retornar ao painel anterior:<\/p>\n\n\n\n<ul><li><strong>Cmd\/Ctrl + ]&nbsp;<\/strong>&nbsp;para ir para o pr\u00f3ximo painel<\/li><li><strong>Cmd\/Ctrl + [&nbsp;<\/strong>&nbsp;para retornar ao painel anterior<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">6. Mude para o modo m\u00f3vel<\/h2>\n\n\n\n<p>\u00c9 poss\u00edvel simular pr\u00e9-visualiza\u00e7\u00f5es para diferentes formatos de tela, como celular, desktop ou at\u00e9 mesmo tablet.&nbsp;Para acessar este modo por meio de atalhos de teclado, use:<\/p>\n\n\n\n<ul><li><strong>Cmd + Shift + M&nbsp;<\/strong>&nbsp;no macOS<\/li><li><strong>Ctrl + Shift + M&nbsp;<\/strong>&nbsp;no Windows e Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">7. Mude para o modo HTML<\/h2>\n\n\n\n<p>Ao inspecionar um elemento, se voc\u00ea deseja modificar seus atributos (como classe ou estado, por exemplo), voc\u00ea pode alternar para o modo HTML diretamente do teclado usando os seguintes atalhos:<\/p>\n\n\n\n<ul><li><strong>Fn + F2&nbsp;<\/strong>&nbsp;no macOS<\/li><li><strong>F2<\/strong>&nbsp;no Windows e Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">8. Altere a posi\u00e7\u00e3o do DevTools<\/h2>\n\n\n\n<p>Por padr\u00e3o posicionado \u00e0 direita na janela do Chrome, geralmente usado em uma janela dedicada, \u00e9 poss\u00edvel mover o DevTools para a metade inferior da tela.&nbsp;Para realizar este movimento facilmente, existe um atalho de teclado dedicado:<\/p>\n\n\n\n<ul><li><strong>Cmd + Shift + D<\/strong>&nbsp;no macOS<\/li><li><strong>Ctrl + Shift + D<\/strong>&nbsp;no Windows e Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">9. Abra e feche a gaveta<\/h2>\n\n\n\n<p>A gaveta \u00e9 a pequena janela presente na parte inferior, que cont\u00e9m o console e uma nova aba.&nbsp;Ele pode fechar e abrir rapidamente pressionando&nbsp;<strong>Esc<\/strong>&nbsp;na interface do DevTools.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">10. Texto de pesquisa<\/h2>\n\n\n\n<p>Para pesquisar uma parte espec\u00edfica do texto nos pain\u00e9is (exceto os pain\u00e9is de auditorias, aplicativos e seguran\u00e7a), voc\u00ea pode usar:<\/p>\n\n\n\n<ul><li><strong>Cmd+F&nbsp;<\/strong>&nbsp;no macOS<\/li><li><strong>Ctrl + F&nbsp;<\/strong>&nbsp;no Windows e Linux<\/li><\/ul>\n\n\n\n<p>Como parte de uma pesquisa de texto na gaveta (para pesquisar em todos os recursos carregados), voc\u00ea precisar\u00e1 usar os seguintes atalhos:<\/p>\n\n\n\n<ul><li><strong>Cmd+Option+F<\/strong>&nbsp;no macOS<\/li><li><strong>Ctrl + Shift + F<\/strong>&nbsp;no Windows e Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">11. Abra um arquivo no painel Fontes<\/h2>\n\n\n\n<p>Voc\u00ea pode abrir um arquivo no painel Fontes, usando um dos dois atalhos:<\/p>\n\n\n\n<ul><li><strong>Cmd + O&nbsp;<\/strong>ou&nbsp;<strong>Cmd + P&nbsp;<\/strong>sur macOS<\/li><li><strong>Ctrl + O&nbsp;<\/strong>ou&nbsp;<strong>Ctrl + P&nbsp;<\/strong>sur Windows et Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">12. Zoom e dessomador<\/h2>\n\n\n\n<p>Para usar os recursos de zoom in e out, basta pressionar:<\/p>\n\n\n\n<ul><li><strong>Cmd + +&nbsp;<\/strong>(zoom) ou&nbsp;<strong>Cmd + \u2013&nbsp;<\/strong>(d\u00e9zoom) sur macOS<\/li><li><strong>Ctrl + +&nbsp;<\/strong>(zoom) ou&nbsp;<strong>Ctrl + \u2013&nbsp;<\/strong>(d\u00e9zoom) sur Windows et Linux<\/li><\/ul>\n\n\n\n<p>Se voc\u00ea deseja restaurar o n\u00edvel de zoom padr\u00e3o, use:<\/p>\n\n\n\n<ul><li><strong>Cmd + 0&nbsp;<\/strong>&nbsp;no macOS<\/li><li><strong>Ctrl + 0&nbsp;<\/strong>&nbsp;no Windows e Linux<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">13. Execute um script<\/h2>\n\n\n\n<p>Os snippets de c\u00f3digo JavaScript podem ser usados \u200b\u200bpara identificar problemas em seu c\u00f3digo.&nbsp;Para execut\u00e1-los, pressione&nbsp;<strong>Cmd\/Ctrl + O&nbsp;<\/strong>&nbsp;para abrir o menu de comandos, digite !&nbsp;seguido pelo nome do script e, finalmente, pressione&nbsp;&nbsp;<strong>Enter<\/strong>&nbsp;.<\/p>","protected":false},"excerpt":{"rendered":"<p>Os atalhos de teclado economizam tempo executando determinadas tarefas a partir do teclado, sem precisar clicar v\u00e1rias vezes.&nbsp;Reunimos 13 atalhos de teclado para o DevTools, o conjunto de ferramentas de desenvolvimento web integrado ao Google Chrome. 1. Inspecione o elemento Para acessar a interface que permite inspecionar o elemento, basta usar os seguintes atalhos: Ctrl [&hellip;]<\/p>","protected":false},"author":1,"featured_media":3070,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[325],"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/posts\/3069"}],"collection":[{"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/comments?post=3069"}],"version-history":[{"count":1,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/posts\/3069\/revisions"}],"predecessor-version":[{"id":3071,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/posts\/3069\/revisions\/3071"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/media\/3070"}],"wp:attachment":[{"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/media?parent=3069"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/categories?post=3069"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nearjob.com.br\/en\/wp-json\/wp\/v2\/tags?post=3069"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}