Se você estiver usando o Chrome 111 ou versões mais recentes, talvez já tenha notado que mudamos o design da barra lateral de ponto de interrupção. Com o Chrome 113, a nova barra lateral substitui completamente o design antigo. Nosso objetivo com a reformulação era melhorar o fluxo de trabalho de pontos de interrupção:
Oferecendo uma visão geral melhor de todos os pontos de interrupção definidos. Facilitando o acesso e tornando mais intuitivos os fluxos de trabalho comuns do usuário com pontos de interrupção. Tornar visíveis os recursos legais de ponto de interrupção.
Nesta postagem, presumimos que você já conhece a depuração 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 usá-los para depurar seu código.
Agora, vamos conferir o que o redesign oferece e como você pode usar a nova barra lateral. O novo design se concentra em tornar os recursos atuais mais intuitivos e fáceis de acessar, em vez de adicionar novos recursos.
Faça uma pausa nas exceções para investigar por que seu código está gerando um erro
Seu código gera uma exceção? Não se preocupe! O Chrome DevTools permite pausar em exceções para interromper a execução no ponto em que a exceção é gerada. Isso pode ajudar você a investigar e entender melhor as circunstâncias em que seu código gera um erro. Marque as caixas de seleção correspondentes na barra lateral para escolher se você quer pausar em exceções capturadas, não capturadas ou ambas.
Gerencie seus pontos de interrupção: expanda os grupos relevantes e recolha os outros para se concentrar no que é importante.
Os pontos de interrupção podem ser distribuídos por vários arquivos. A barra lateral de pontos de interrupção agrupa os pontos de interrupção de acordo com o arquivo a que pertencem. Expanda os grupos de pontos de interrupção relevantes e recolha os restantes para se concentrar apenas nos que importam para sua sessão de depuração atual.
Gerencie seus pontos de interrupção: um clique para acessar o código, remover ou ativar/desativar pontos de interrupção
A barra lateral de ponto 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 Code Editor. Remova um ou todos os pontos de interrupção em um arquivo. Ative ou desative um ou todos os pontos de interrupção em um arquivo.
E tudo isso com um clique! É claro que essas opções também estão disponíveis no menu de contexto:
Clique no snippet de código do ponto de interrupção para acessar o local dele.
Você quer verificar em que parte do código 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 de código.
Remova um único ponto de interrupção ou todos os pontos de interrupção em 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 único ponto de interrupção ou todos os pontos de interrupção em um arquivo com um clique.
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 ativar ou desativar.
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 menos conhecidos de pontos de interrupção: pontos de interrupção condicionais e pontos de registro
Editar condições de ponto de interrupção ou mudar o registro do logpoint editando um ponto de interrupção
Para editar uma condição de ponto de interrupção ou um registro, 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.
Você também pode verificar rapidamente sua condição ou o registro do 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, fáceis de acessar e entender. Esperamos que essas melhorias ajudem você na próxima sessão de depuração.
Se você tiver sugestões de melhorias, registre um bug.
Baixar os canais de visualização
Use o Chrome Canary, Dev ou Beta como navegador de desenvolvimento padrão. Esses canais de prévia oferecem acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de ponta e ajudam a encontrar problemas no seu site antes que os usuários o façam.
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.
- Relate um problema do DevTools usando Mais opções > Ajuda > Relatar um problema do DevTools.
- Envie um tweet para @ChromeDevTools.
- Deixe comentários nos vídeos do YouTube sobre novidades do DevTools ou dicas do DevTools.