Dicas de ferramentas de desenvolvimento Chrome para Windows

Atualizado em January 2025: Pare de receber mensagens de erro que tornam seu sistema mais lento, utilizando nossa ferramenta de otimização. Faça o download agora neste link aqui.

1. Faça o download e instale a ferramenta de reparo aqui..
2. Deixe o software escanear seu computador.
3. A ferramenta irá então reparar seu computador.

(2)

Dicas de ferramentas de desenvolvimento Chrome



Há muitos truques desconhecidos e ocultos do Chrome Dev Tools e vamos olhar para os truques mais úteis entre eles. Para abrir as ferramentas de desenvolvimento no Chrome, pressione
F12
no seu teclado e experimente os seguintes truques.

1. Encontrar e Abrir qualquer arquivo(Alaska)

Quando estamos a fazer desenvolvimento web lidamos com muitos ficheiros HTML, CSS, JS e outros. Quando queremos depurar qualquer coisa, abrimos as ferramentas do Chrome Dev. Pode procurar e encontrar rapidamente o ficheiro específico para facilitar o seu trabalho. Apenas, pressione
Ctrl + P
e começar a digitar o nome do arquivo. Isso ajuda você a encontrar o arquivo particular na lista de arquivos.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/Find-and-Open-any-file.gif

2. Pesquisar dentro do ficheiro-fonte(Alaska)

No truque anterior, viemos a saber como procurar um ficheiro em particular. Pode mesmo procurar por uma determinada string em todos os ficheiros carregados. Pressione
Ctrl + Shift + F
para procurar por uma string em arquivos. Ele também suporta expressões regulares.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/Search-within-source-file.gif

3. Ir para uma linha particular

Depois de ter aberto qualquer arquivo fonte e quiser mover-se para uma linha particular, então pressione
Ctrl + G
e dê o número da linha e carregue em enter.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/Go-to-particular-line.gif

4. Selecionando elementos DOM na guia Console

Dev Tools também permite que você selecione elementos no console.

• $() –
  Retorna a primeira ocorrência do seletor CSS correspondente.

• $$() –
  Ele retorna a matriz de elementos que coincidem com o seletor CSS dado.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/Selecting-DOM-Elements.gif

Para mais comandos de console, vá até este post.

5. Utilizar vários caretes

Às vezes, você quer definir os vários caretes em lugares diferentes e você pode fazer isso facilmente em ferramentas Chrome Dev, segurando o
Ctrl
e clicando onde você deseja colocá-los. Então comece a escrever e você verá que é colocado em vários lugares selecionados.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/Make-use-of-multiple-carets.gif

6. Conservar Log

Preserve log ajuda você a persistir no log, mesmo que a página seja carregada. Marque a opção ao lado
Conservar o diário de bordo
no log do console e o log é preservado. Isso mostra o log antes da página em descarregado e útil para investigar os bugs.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/preserve-log.gif

7. Usar código incorporado embelezador

Chrome Dev Tools tem o código incorporado beautifier chamado
bonita impressão digital.
A ferramenta Developer mostra o código minimizado e não é tão fácil de ler. Clique no botão de impressão bonita que é mostrado no canto inferior esquerdo do arquivo fonte aberto, para mostrar o arquivo fonte no formato legível por humanos.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/pretty-print-button.gif

8. O seu site é amigável? Confira aqui

Chrome Dev Tools também nos permite verificar se um site é móvel amigável ou não. Você pode verificar a aparência do seu site em vários dispositivos. Vá até as ferramentas do Chrome Dev e vá até
Emulação
você pode arquivar vários dispositivos. Selecione o dispositivo desejado e teste a aparência do seu site nesse dispositivo.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/mobile-friendly.gif

Para mais informações, dê uma olhada no seguinte vídeo.

9. Emular Sensores e Localização Geográfica

Você pode até emular os sensores como tela sensível ao toque e acelerômetros. Você pode até emular a localização geográfica. Para fazer isso, vá até
Emulação -> Sensores.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/emulate-sensors.gif

10. Selecione a próxima ocorrência da palavra atual

Se você quiser substituir a palavra Em toda a sua ocorrência, selecione a palavra e pressione
Ctrl + D
para selecionar a próxima ocorrência da palavra selecionada. O, você pode editar essa palavra em todas as suas ocorrências em uma única foto.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/select-next-occurrence.gif

11. Alterar formato de cor

Apenas usar
Shift + Click
formatação.

https://thewindowsclub-thewindowsclubco.netdna-ssl.com/wp-content/uploads/2015/04/colorformat.gif

12. Adicionar alterações a ficheiros locais através do espaço de trabalho (Alaska)

ferramentas. Para fazer isso, clique com o botão direito do mouse no arquivo fonte do lado esquerdo no
Fontes
e selecione
Adicionar Pasta ao espaço de trabalho.

Para mais informações sobre espaços de trabalho, vá até Chrome.com.

RECOMENDADO: Clique aqui para solucionar erros do Windows e otimizar o desempenho do sistema