Se você estiver usando o Chrome 111 ou versões mais recentes, talvez já tenha notado que mudamos o design da barra lateral de pontos de interrupção. Com o Chrome 113, a nova barra lateral substitui totalmente o design antigo. Nosso objetivo com o redesign era melhorar o fluxo de trabalho de pontos de interrupção:
Fornece uma visão geral melhor de todos os pontos de interrupção definidos. Tornar os fluxos de trabalho comuns do usuário com pontos de interrupção mais fáceis de acessar e mais intuitivos. Tornar recursos de ponto de interrupção legais visíveis.
Nesta postagem, presumimos que você já sabe como depurar usando pontos de interrupção. Se você nunca usou pontos de interrupção, acesse esta visão geral sobre pontos de interrupção e saiba mais sobre como usar pontos de interrupção para depurar o código.
Agora, vamos conferir o que o novo design oferece e como você pode usar a nova barra lateral. O objetivo do novo design é tornar os recursos atuais mais intuitivos e fáceis de acessar, em vez de adicionar novos.
Pausar em exceções para investigar por que o código está gerando um erro
Seu código gera uma exceção? Não se preocupe! As Ferramentas do desenvolvedor do Chrome permitem pausar em exceções para interromper a execução no ponto em que a exceção é gerada. Isso pode ajudar a investigar e entender melhor as circunstâncias em que o código gera um erro. Você pode escolher se quer pausar em exceções detectadas, não detectadas ou em ambas, marcando as caixas de seleção correspondentes na barra lateral.
Gerenciar pontos de interrupção: abra grupos de pontos de interrupção relevantes e feche outros para se concentrar no que é importante
Os pontos de interrupção podem ser distribuídos em vários arquivos. A barra lateral de pontos de interrupção agrupa os pontos de acordo com o arquivo a que pertencem. Concentre-se apenas nos pontos de interrupção que importam para sua sessão de depuração atual, expandindo os grupos relevantes e recolhendo os demais.
Gerenciar pontos de interrupção: um clique para pular para o código, remover ou ativar/desativar pontos de interrupção
A barra lateral de pontos de interrupção permite realizar tarefas comuns com um clique. Confira uma visão geral de como você pode ...
Navegue até o local do ponto de interrupção no editor de código. Remova um ponto de interrupção ou todos os pontos de interrupção de um arquivo. Ative ou desative um ou todos os pontos de interrupção em um arquivo.
E tudo isso com um clique! Essas opções também estão disponíveis no menu de contexto:
Ir para o local do ponto de interrupção clicando no snippet de código do ponto de interrupção
Você quer verificar onde você definiu o ponto de interrupção e analisar o código ao redor? Basta clicar no snippet de código de um ponto de interrupção na barra lateral para abrir o local do código no editor.
Remover um único ponto de interrupção ou todos os pontos de interrupção de um arquivo clicando no botão de remoção
Passe o cursor sobre um ponto de interrupção ou um grupo de pontos de interrupção para revelar um botão de remoção que remove um ou todos os pontos de interrupção em um arquivo ao clicar.
Desativar um ou todos os pontos de interrupção em um arquivo
Marque ou desmarque a caixa de seleção ao lado de um ponto de interrupção para ativá-lo ou desativá-lo.
Para ativar ou desativar todos os pontos de interrupção em um arquivo, passe o cursor sobre o grupo de pontos de interrupção e marque ou desmarque a caixa de seleção que aparece ao lado do nome do arquivo.
Use estes recursos de ponto de interrupção menos conhecidos: pontos de interrupção condicionais e pontos de registro
Edite as condições do ponto de interrupção ou mude o registro de logpoint editando um ponto de interrupção
Para editar uma condição ou um registro de ponto de interrupção, passe o cursor sobre um ponto de interrupção e clique no botão editar que aparece. Isso abre uma caixa de diálogo para mudar o tipo e os detalhes do ponto de interrupção.
Como alternativa, selecione a linha do ponto de interrupção no editor de código e digite Control+Alt+b no Linux e Command+Alt+b no Mac para abrir a caixa de diálogo de edição do ponto de interrupção.
Também é possível verificar rapidamente a condição ou o registro de ponto de registro passando o cursor sobre o ponto de interrupção na barra lateral:
Conclusão
Nosso objetivo com a reformulação da barra lateral de pontos de interrupção era facilitar a depuração com pontos de interrupção. O mais importante é que nosso objetivo era deixar as coisas mais estruturadas e fáceis de acessar e entender. Esperamos que essas melhorias ajudem na próxima sessão de depuração.
Se você tiver sugestões de melhorias, registre um bug.
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.
Entre em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.
- Envie feedback e solicitações de recursos para crbug.com.
- Informe um problema do DevTools usando a opção Mais opções > Ajuda > Informar um problema do DevTools no DevTools.
- Envie um tweet para @ChromeDevTools.
- Deixe comentários nos vídeos Novidades do DevTools no YouTube ou Dicas do DevTools no YouTube.