Curso de Google Chrome Developer Tools

Conheça em detalhes as ferramentas de desenvolvedor do navegador Google Chrome

Nível Intermediário Categoria Desenvolvimento Front-end

  • Curso com 00h53 de videos
  • Certificado com 10 horas
  • 24 exercícios

Sobre o curso

Conheça em detalhes as ferramentas de desenvolvedor do navegador Google Chrome

Antes o desenvolvimento de aplicações web era um pouco obscuro. Se algo dava errado, era difícil descobrir o que estava acontecendo. Hoje em dia os navegadores possuem várias ferramentas para ajudar os desenvolvedores em seu trabalho, aumentando a produtividade e qualidade das páginas web. Isso porque hoje conseguimos verificar o HTML da página e alterá-lo, editar o CSS em tempo real, debugar JavaScript, executar comandos, verificar o que está sendo trafegado na rede, fazer auditoria das páginas para poder ver onde o quê melhorar, verificar onde podemos melhorar nosso código para uma página com melhor performance, emular dispositivos móveis, etc. Neste curso aprenderemos a trabalhar com as ferramentas de desenvolvedor do navegador Google Chrome. Como os navegadores modernos possuem ferramentas parecidas, este curso também vale para outros navegadores além do Chrome.

O que irá aprender?

Neste curso abordaremos tudo o que você precisa aprender para utilizar a DevTools para agilizar o desenvolvimento e melhorar a performance de suas páginas.

Dentre várias outras coisas, você aprenderá os tópicos abaixo:

  • Inspeção de elementos e estilos;
  • Executando comandos com o console;
  • Gerenciamento de arquivos trafegados;
  • Gerenciamento de dados da aplicação;
  • Auditoria para melhorar carregamento da página;
  • Verificar perfil da aplicação para melhorar performance do código;
  • Debugar JavaScript;
  • Emulação de dispositivos móveis;
  • DevTools com dispositivos móveis reais.

Pra quem é esse curso?

Esse curso é destinado a desenvolvedores web que queiram aprender sobre as ferramentas de desenvolvedor dos navegadores, facilitando o seu trabalho e melhorando a qualidade de suas páginas.

Quais os pré-requisitos para esse curso?

Os pré-requisitos não são obrigatórios, são apenas sugestões. Eles dão uma base de parte do conhecimento que é interessante ter para um bom aproveitamento nesse curso.

Metodologia

  • Videoaulas
  • Texto e imagens
  • Início Imediato
  • Testes de aprendizado

Ambiente do curso

  • Google Chrome 56 ou superior

Sobre o professor

Akira Hanashiro

Akira Hanashiro

Professor especialista em Desenvolvimento Front-end na TreinaWeb. Akira, Felipe, Hana, Hanashiro ou Hanakira, é graduado em Análise e Desenvolvimento de Sistemas, pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning, é entusiasta no desenvolvimento de jogos e multi-task. Fala japonês fluente, mas não tem com quem conversar.

Conteúdo programático

  1. Elements

    Aprenda a inspecionar elementos e editar CSS

    5 aulas
    • Elements
    • Styles
    • Outras Abas
    • Inspecionando elementos e mudando sua estilização
    • Questionário
  2. Console

    Veja como executar scripts e aprenda sobre as APIs do console

    3 aulas
    • Console
    • Conhecendo as APIs do Console
    • Questionário
  3. Sources

    Nesta aula veremos como utilizar o Chrome como editor de código e a debugar nosso JavaScript

    5 aulas
    • Sources
    • Workspace
    • Debug
    • Trabalhando com a aba Sources
    • Questionário
  4. Network

    Aprenda a verificar os arquivos trafegados pela rede

    3 aulas
    • Network
    • Aba Network e as informações trafegadas pela rede
    • Questionário
  5. Timeline

    Veja como interpretar a linha do tempo para entender como sua página funciona

    3 aulas
    • Timeline
    • Gravando uma linha do tempo
    • Questionário
  6. Profiles

    Vamos ver como traçar o perfil da página para melhorar a performance do nosso código

    2 aulas
    • Profiles
    • Criando um perfil dos scripts da nossa página
  7. Application

    Veja como funciona a aba Application

    3 aulas
    • Application
    • Para quê serve a aba Application
    • Questionário
  8. Security

    Veja como funciona a aba Security

    2 aulas
    • Security
    • Como funciona a aba Security
  9. Audits

    Aprenda a fazer uma auditoria para saber o que melhorar no carregamento da página

    5 aulas
    • Audits
    • Network Utilization
    • Web Page Performance
    • Aprendendo a melhorar o carregamento de páginas com Auditorias
    • Questionário
  10. Emulation

    Nesta aula veremos como emular dispositivos móveis e como utilizar a DevTools em dispositivos reais.

    4 aulas
    • Emulation
    • Debugando dispositivos móveis reais
    • Emulando dispositivos móveis e conectando a dispositivos reais
    • Questionário
  11. Conclusão

    Conclusão do curso.

    0 aulas
Download da ementa

Cursos relacionados

Utilizada e amada por milhares! Veja mais opiniões reais

  • Muito bom!

    Depoimento - Maria
    Google Chrome Developer Tools
    Maria São Paulo / SP
  • Muito bom curso e bem explicado parabéns

    Depoimento - Diego
    Google Chrome Developer Tools
    Diego Pimenta Bueno / RO
  • Muito bom. Mostrou-me recursos que eu não conhecia.

    Depoimento - Ricardo
    Google Chrome Developer Tools
    Ricardo Juiz de Fora / MG
  • Ótimo curso!

    Depoimento - Carlos
    Google Chrome Developer Tools
    Carlos Brasília / DF
  • Muito bom!

    Depoimento - Daniel
    Google Chrome Developer Tools
    Daniel Serra / ES
  • Muito bom o curso!

    Depoimento - Tavilo
    Google Chrome Developer Tools
    Tavilo Crateús / CE
  • Excelente curso conhecimento incrível adquirido obrigado

    Depoimento - Antônio
    Google Chrome Developer Tools
    Antônio Cuiabá / MT
  • Excelente curso que todo desenvolvedor deveria fazer, pois é uma ferramenta que auxilia na hora de desenvolver sistemas web. Finalmente entendi como utilizar cada aba :)

    Depoimento - Michael
    Google Chrome Developer Tools
    Michael Aparecida / SP
  • O curso ensina desde o básico da utilização já conhecido pela maioria das pessoas, como opções avançadas, que muitas vezes ficam escondidas e em locais de difícil acesso. Inspecionar o código fonte, criar breakpoints, utilizar opções avançadas do console, realizarmos debugs de formas mais efetivas, analisar a segurança da página, performance, entender o fluxo de carregamento de arquivos, criar timeline e fazer testes diretamente no seu dispositivo, obtendo um resultado muito mais fiel quando estamos desenvolvendo um site responsivo por exemplo, ou precisando testar recursos mais avançados, que somente um dispositivo real tem pra oferecer.

    Depoimento - Octávio
    Google Chrome Developer Tools
    Octávio Osasco / SP

Plano de acesso total!

Tenha um ano de acesso completo a todos os cursos da plataforma, incluindo novos lançamentos, mentoria de carreira e suporte direto com os professores!

Um ano de acesso completo

Contrate agora e tenha acesso ilimitado a todo o nosso portfólio. Isso inclui:

  • 1 ano de acesso a todos os cursos
  • Cursos novos toda semana
  • Suporte direto com professores
  • Aplicativos para Android e iOS
  • Plano de carreira personalizado
  • Certificados digitais inclusos
  • Suporte com SLA de 4 horas úteis
  • Acesso offline através dos apps
R$ 97,00 ECONOMIZE R$ 360,00
12x R$ 67,00 ou R$ 804,00 à vista
Matricule-se agora
Garantia incondicional de satisfação
Garantia incondicional de satisfação

Confiamos tanto nos resultados dos nossos cursos, que criamos uma garantia incondicional de satisfação para você, que são 7 dias de teste!