Google DevTools e suas funcionalidades \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 08 Horas 

 42 Min 

 55 Seg 

   Tempo restante da oferta: 08 42 55 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Google DevTools e suas funcionalidades  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) [ Ferramentas ](https://www.treinaweb.com.br/blog/categoria/ferramentas) 

# Google DevTools e suas funcionalidades

 Neste artigo, veremos algumas maneiras pelas quais o Google DevTools pode ser usado para melhorar o desenvolvimento dos nossos projetos.

 [ Rafael Oliveira ](https://www.treinaweb.com.br/blog/autor/rafael-oliveira) 4 anos atrás

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/google-devtools.jpg)  

De fato, o desenvolvimento web é uma atividade complexa, que exige muita atenção aos detalhes, e uma boa habilidade técnica com as tecnologias e linguagens utilizadas durante o desenvolvimento do projeto.

Tendo em vista que, um dos maiores desafios enfrentados pelos desenvolvedores é garantir que seus sites funcionem corretamente em todos os navegadores e dispositivos. Para simplificar esse processo, a Google criou o [DevTools](https://developer.chrome.com/docs/devtools/).

## O que é?

[  ![Google Chrome Developer Tools](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/chrome-developer-tools.svg)   Curso Google Chrome Developer Tools Conhecer o curso ](https://www.treinaweb.com.br/curso/google-chrome-developer-tools)

Certamente, o [Google DevTools](http://developer.chrome.com/docs/devtools/ "Google DevTools") é uma ferramenta desenvolvida pela Google, que é amplamente usada por desenvolvedores web para ajudá-los a depurar e otimizar o código de seus sites.

Assim, com o DevTools, os desenvolvedores podem visualizar e editar o HTML, CSS e JavaScript de um site em tempo real e, solucionar problemas de desempenho e compatibilidade com facilidade.

## Como acessar?

O DevTools é acessível a partir do navegador e é fácil de usar. Quando visitamos um site, podemos abrir o DevTools clicando com o botão direito do mouse em qualquer parte da página e, em seguida, selecionamos a opção “Inspecionar elemento”.

Como resultado, teremos a ferramenta aberta na parte inferior da tela, mostrando o código HTML da página que está sendo visitada, ficando dessa forma:

![imagem da página da TreinaWeb mostrando o Google DevTools ](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/google-devtools.png)

## Funcionalidades

Como dito anteriormente, o Google DevTools é uma ferramente que auxilia diretamente o desenvolvedor Front-end. Tendo isso em vista, veremos algumas de suas funcionalidades que ajudam durante o desenvolvimento de sites.

### Inspeção de elementos

Em primeiro lugar, uma das características mais úteis do DevTools é a capacidade de editar o código HTML e CSS em tempo real. Isso permite que você experimente diferentes estilos e layouts em um site antes de fazer alterações permanentes no código.

![Imagem mostrando o Google DevTools na aba de inspeção de código HTML e CSS](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/inspecionamento.png)

### Depuração de JavaScript

Oferece recursos avançados para depurar o código JavaScript, como a criação de pontos de interrupção, monitoramento de variáveis e execução de código linha a linha.

![Imagem mostrando o DevTools na aba de inspeção de código JavaScript ](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/javaScript-GoogleDevTools.png)

[  ![HTML5 + CSS3 - Web design responsivo](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/html5-css3.svg)   Curso HTML5 + CSS3 - Web design responsivo Conhecer o curso ](https://www.treinaweb.com.br/curso/html5-css3-web-design-responsivo)

### Emulação de dispositivos

Além disso, permite que você visualize seu site em diferentes tamanhos de tela e ajuste o layout, para garantir que ele funcione bem em dispositivos móveis e, desktops.

### Análise de desempenho

Por fim, oferece recursos para medir a performance do site, incluindo tempo de carregamento, uso de recursos e consumo de memória.

![imagem mostrando aba do Google DevTools realizando o monitoramento de rede](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/04/network-GoogleDevTools.png)

Portanto, essas são apenas algumas das funcionalidades oferecidas pelo Google DevTools. A ferramenta é altamente personalizável e pode ser estendida por meio de extensões, permitindo que os desenvolvedores personalizem sua experiência de desenvolvimento web de acordo com suas necessidades específicas.

## Conclusão

Em conclusão, o Google DevTools é uma ótima ferramenta para testar o desempenho do site. Ele oferece informações detalhadas sobre o tempo de carregamento, o uso de memória, o desempenho da rede e outros fatores que afetam a experiência do usuário.

[  ![JavaScript - Fundamentos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/javascript.svg)   Curso JavaScript - Fundamentos Conhecer o curso ](https://www.treinaweb.com.br/curso/javascript-fundamentos)

Sendo assim, se você é um desenvolvedor web, certamente deve considerar o uso desta ferramenta para melhorar suas habilidades, e garantir que seus sites estejam sempre em sua melhor forma.

Caso queira aprender mais sobre o [Google DevTools](http://www.treinaweb.com.br/curso/google-chrome-developer-tools) e seus diversos recursos, saiba que aqui na TreinaWeb temos o curso completo, desde o básico ao avançado, que possui 6 horas de vídeo e um total de 15 exercícios.

Durante este curso, você irá aprender:

- Inspeção de elementos e estilos;
- Executando comandos com o console;
- Gerenciamento de arquivos trafegados;
- Gerenciamento de dados da aplicação;
- Verificar perfil da aplicação para melhorar performance do código;
- Emulação de dispositivos móveis;

- [ #Programação ](https://www.treinaweb.com.br/blog/tag/programacao)
- [ #desenvolvimento web ](https://www.treinaweb.com.br/blog/tag/desenvolvimento-web)
- [ #Google DevTools ](https://www.treinaweb.com.br/blog/tag/google-devtools)

Autor

 ![Rafael Oliveira](//secure.gravatar.com/avatar/3dea81057f4d44ce6041d633799ba1a2?d=mm)

## Rafael Oliveira

 Estudante de programação, atualmente me especializando no Front End. Faço curso de Desenvolvimento de Sistemas na Escola Tecnica Estadual Doutora Ruth Cardoso e o meu principal objetivo é me tornar um Full Stack. Nas horas vagas costumo cozinhar, pois sou apaixonado pela área da culinária. 

 [Todos os artigos](https://www.treinaweb.com.br/blog/autor/rafael-oliveira)  

## Continue estudando

 Transforme leitura em prática com os cursos e formações da TreinaWeb.

 [Ver cursos](https://www.treinaweb.com.br/cursos)   

  Continue lendo

## Artigos relacionados

- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/08/MEDIA-QUERIES-2-400x280.png)  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 

     4 anos atrás

    ##  [ Media Query. Colocando em prática seu uso. ](https://www.treinaweb.com.br/blog/media-query-colocando-em-pratica-seu-uso) 

     Neste artigo, nós iremos aprender sobre o uso de Media Query no CSS3, na prática aprendendo como utilizar na criação de cards responsivos.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/android-studio-400x280.png)  [ Android ](https://www.treinaweb.com.br/blog/categoria/android) 

     10 anos atrás

    ##  [ Google lança o Android Studio 2.3 ](https://www.treinaweb.com.br/blog/google-lanca-o-android-studio-2-3) 

     O Google lançou a nova versão do Android Studio, baseada na correção de bugs e estabilidade, além de incluir novos recursos.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/google-400x280.jpg)  [ Bancos de Dados ](https://www.treinaweb.com.br/blog/categoria/bancos-de-dados) 

     10 anos atrás

    ##  [ Google na .NET Foundation? SQL Server para Linux? Visual Studio para MacOS? Saiba como foi o Connect() ](https://www.treinaweb.com.br/blog/google-na-net-foundation-sql-server-para-linux-visual-studio-para-macos-saiba-como-foi-o-connect) 

     Não conseguiu acompanhar a Connect() 2016 da Microsoft? Não tem problema, aqui no TreinaWeb te trazemos todas as incríveis novidade que foram apresentadas!

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/08/18151850/serviços-gratuitos-google-cloud-400x280.png)  [ Google Cloud Platform (GCP) ](https://www.treinaweb.com.br/blog/categoria/google-cloud-platform-gcp) 

     8 anos atrás

    ##  [ Serviços gratuitos do Google Cloud Platform ](https://www.treinaweb.com.br/blog/servicos-gratuitos-do-google-cloud-platform) 

     Conheça os principais serviços gratuitos do Google Cloud Platform e seus limites de uso.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/05153646/capa-chrome-400x280.jpg)  [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 

     9 anos atrás

    ##  [ Atalhos do Google Chrome que você precisa conhecer ](https://www.treinaweb.com.br/blog/atalhos-do-google-chrome-que-voce-precisa-conhecer) 

     Veja nesse artigo alguns atalhos do Google Chrome que podem te ajudar no dia a dia.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/16144257/conheca-o-google-cloud-platform-400x280.png)  [ Google Cloud Platform (GCP) ](https://www.treinaweb.com.br/blog/categoria/google-cloud-platform-gcp) 

     9 anos atrás

    ##  [ Conheça o Google Cloud Platform ](https://www.treinaweb.com.br/blog/conheca-o-google-cloud-platform) 

     O Google Cloud Platform é o serviço de computação em nuvem do Google. Ele possui uma quantidade enorme de serviços para as mais diversas áreas. Veja seus principais conceitos e como testá-lo gratuitamente.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/03/25165946/GOOGLE-STADIA-400x280.png)  [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 

     8 anos atrás

    ##  [ Stadia: Plataforma de Games por Streaming da Google ](https://www.treinaweb.com.br/blog/stadia-plataforma-de-games-por-streaming-da-google) 

     Quer jogar aquele jogo novo, mas não tem hardware para isso? Bom, segundo a Google, esses dias estão contados.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/10/16095951/project-stream-400x280.png)  [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 

     8 anos atrás

    ##  [ Project Stream: Netflix de jogos da Google ](https://www.treinaweb.com.br/blog/project-stream-netflix-de-jogos-da-google) 

     Veja neste artigo o que é o Project Stream da Google, a Netflix dos jogos.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/04/03142818/GOOGLE-COMPUTE-ENGINE-400x280.png)  [ Google Cloud Platform (GCP) ](https://www.treinaweb.com.br/blog/categoria/google-cloud-platform-gcp) 

     9 anos atrás

    ##  [ Criando instâncias de VM no Google Cloud Platform ](https://www.treinaweb.com.br/blog/criando-instancias-de-vm-no-google-cloud-platform) 

     Conheça o compute engine e veja como criar novas instâncias de VM no Google Cloud Platform.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/google2-400x280.jpg)  [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 

     10 anos atrás

    ##  [ Aprenda a melhorar suas buscas no Google ](https://www.treinaweb.com.br/blog/aprenda-a-melhorar-suas-buscas-no-google) 

     Conheça os recursos que o Google disponibiliza para aperfeiçoar os resultados das buscas e torná-las mais específicas.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/novidades-do-android-o-para-desenvolvedores-400x280.png)  [ Android ](https://www.treinaweb.com.br/blog/categoria/android) 

     10 anos atrás

    ##  [ Novidades do Android O para desenvolvedores ](https://www.treinaweb.com.br/blog/novidades-do-android-o-para-desenvolvedores) 

     O Google está a todo vapor para lançar o Android O. Porém, antes mesmo do lançamento oficial, já é possível conferir as novidades.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/04/17120810/Fuchsia-400x280.png)  [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 

     7 anos atrás

    ##  [ O que é o Fuchsia? ](https://www.treinaweb.com.br/blog/o-que-e-o-fuchsia) 

     Veja neste artigo o que é o Fuchsia, novo sistema operacional da Google.

     Ler artigo

## Um ano de acesso total para você viver de programação.

 Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.

- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**

    **Garantia incondicional de satisfação** 

 Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

### Acesso completo a todos os cursos e dezenas de Formações.

 12 meses 

  Economize R$ 840,00  54% OFF 

 de 12x R$ 129,00 por apenas

 12x  R$ 59,00

 sem juros no cartão de crédito ou R$ 599,00 à vista

  Oferta termina em  **08h 42min 55s**

- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!

 [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)

     [                ](https://www.treinaweb.com.br)

 Escola online de programação, tecnologia e IA.

- [  ](https://www.facebook.com/TreinaWeb/)
- [  ](https://www.instagram.com/treinaweb/)
- [  ](https://www.youtube.com/user/TreinaWeb)
- [  ](https://twitter.com/treinaweb)
- [  ](https://www.linkedin.com/company/treinaweb)
- [  ](https://github.com/treinaweb)

## Inscreva-se em nossa newsletter

Receba lançamentos, promoções e novidades.

   Seu nome     Seu WhatsApp     Seu melhor e-mail   Inscrever-se 

## Cursos

- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)

## Conteúdo

- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)

## A empresa

- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)

## Baixe nosso aplicativo

 [   Disponível na **App Store**  ](https://apps.apple.com/us/app/treinaweb/id1322729447) [   Disponível no **Google Play**  ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) 

  Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200   © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58