Chrome DevTools é um conjunto de ferramentas de desenvolvimento web integradas directamente no navegador GoogleChrome. DevTools pode ajudá-lo a editar páginas em tempo real e diagnosticar problemas rapidamente, o que, em última análise, ajuda a construir melhores websites, mais rapidamente.
Check out the video for live demonstrations of core DevTools workflows, including debugging CSS,prototyping CSS, debugging JavaScript, and analyzing load performance.
Open DevTools
Existem muitas formas de abrir DevTools, porque diferentes utilizadores querem acesso rápido a diferentes partes da UI DevTools.
- Quando quiser trabalhar com o DOM ou CSS, clique com o botão direito do rato num elemento da página e seleccione Inspectar para saltar para o painel de Elementos. Ou prima Command+Option+C (Mac) ou Control+Shift+C (Windows, Linux, Chrome OS).
>li> Quando quiser ver mensagens registadas ou executar JavaScript, prima Command+Option+J(Mac) ou Control+Shift+J (Windows, Linux, Chrome OS) para saltar directamente para o painel Console.
See Open Chrome DevTools para mais detalhes e fluxos de trabalho.
Meter início
Se for um programador web mais experiente, aqui estão os pontos de partida recomendados para aprender comoDevTools pode melhorar a sua produtividade:
- Ver e Alterar o DOM
- Ver e Alterar os Estilos de uma Página (CSS)
- Debugar JavaScript
- Ver Mensagens e Executar JavaScript no Console
- Optimizar a Velocidade do Website
- Inspectar a Actividade da Rede
Descobrir DevTools
O DevTools UI pode ser um pouco avassalador…. há tantos separadores! Mas, se levar algum tempo a familiarizar-se com cada separador para compreender o que é possível, poderá descobrir que o DevToolscan aumenta seriamente a sua produtividade.
Device Mode
Simular dispositivos móveis.
- Device Mode
- Test Responsive and Device-specific Viewports
- Emulate Sensors: Geolocalização & Acelerómetro
Painel de elementos
Ver e alterar o DOM e CSS.
- Pt:Iniciar a Visualização e a Alteração do DOM
- Inspect Animations
- Find Unused CSS
li>Pt:Iniciar a Visualização e a Alteração do CSSli>Inspecta e Ajuste as Suas Páginasli>Editar Estilosli>Editar o DOM
Painel da Consola
p>Ver mensagens e executar JavaScript a partir da Consola.
- Inicie com a Consola
- Utilizar a Consola
- Interagir a partir da Linha de Comando
- Console API Referência
Painel de fontes
Debug JavaScript, persistir com as alterações feitas no DevTools através de recargas de página,guardar e executar trechos de JavaScript, e guardar as alterações que fizer no DevTools em disco.
- Passar o seu código com pontos de interrupção
- Guardar alterações no disco com espaços de trabalho
- Mudanças de PERSISTÊNCIA Através da Página Recarregamentos com Substituições Locais
- Find Unused JavaScript
li>Executar trechos de código de qualquer páginali>JavaScript Debugging Reference
Painel de rede
Ver e depurar a actividade da rede.
>ul>
Painel de desempenho
/p>p>P>Encontrar formas de melhorar o desempenho da carga e do tempo de execução.
- Optimizar a Velocidade do Website
- Comece a Analisar o Desempenho do Tempo de Execução
- Referência da Análise de Desempenho
- Analizar o Desempenho do Tempo de Execução
- Diagnose Forced Synchronous Layouts
Painel de memória
Diagnose Forced Synchronous Layouts
Diagnose Forced Synchronous Layouts
- Problemas de Memória Fixo
- JavaScript CPU Profiler
Painel de aplicação
Inspeccionar todos os recursos que estão carregados, incluindo bases de dados IndexedDB ou Web SQL, armazenamento local e de sessões, cookies, Application Cache, imagens, fontes, e folhas de estilo.
- Debug Progressive Web Apps
- Inspectar e Gerir Armazenamento, Bases de Dados, e Caches
- Inspectar e Apagar Cookies
- Inspectar Recursos
Painel de segurança
p>Debugar questões de conteúdo misto, problemas de certificados, e mais.
- Passuntos de segurança compreensivos
Comunidade
Arquivo de relatórios de bugs e pedidos de características no Crbug, que é o rastreador de bugs da equipa de engenharia.
Crbug
Se quiser alertar-nos para um bug ou pedido de características mas não tiver muito tempo, é bem-vindo a enviar um tweet para @ChromeDevTools. Respondemos e enviamos anúncios da conta regularmente.
Para ajuda na utilização de DevTools, Stack Overflow é o melhor canal.
Stack Overflow
Para arquivar bugs ou pedidos de funcionalidades nos documentos DevTools, abra um problema GitHub no repositório Web Fundamentals.
Docs Issues
DevTools também tem um canal Slack, mas a equipa não o monitoriza de forma consistente.
Slack