Se você está no Chrome 111 ou mais recente, já deve ter notado que mudamos o design da barra lateral do ponto de interrupção. No Chrome 113, a nova barra lateral substitui totalmente o design antigo. Nosso objetivo com a reformulação era melhorar o fluxo de trabalho dos pontos de interrupção:
Fornecer uma visão geral melhor de todos os pontos de interrupção definidos. Fluxos de trabalho comuns do usuário com pontos de interrupção mais fáceis de acessar e mais intuitivos. Tornar os recursos atuais do ponto de interrupção visíveis.
Esta postagem pressupõe que você já esteja familiarizado com a depuração usando pontos de interrupção. Se você nunca usou pontos de interrupção, confira esta visão geral sobre pontos de interrupção e saiba mais sobre como usá-los para depurar seu código.
Agora, vamos dar uma olhada no que o novo design oferece e como você pode usar a nova barra lateral! Observe que o objetivo da reformulação é tornar os recursos existentes mais intuitivos e fáceis de acessar, em vez de adicionar novos.
Pause em 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 as 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. Você pode escolher se deseja pausar em exceções capturadas, exceções não capturadas ou ambos, marcando as caixas de seleção correspondentes na barra lateral.
Gerenciar seus pontos de interrupção: expanda grupos de pontos de interrupção relevantes e recolha outros para se concentrar no que é relevante
Os pontos de interrupção podem estar espalhados em vários arquivos. A barra lateral do ponto de interrupção agrupa os pontos de interrupção de acordo com o arquivo ao qual eles pertencem. Concentre-se apenas nos que importam para sua sessão de depuração atual. Para isso, expanda os grupos de pontos de interrupção relevantes e recolhe os restantes.
Gerencie seus pontos de interrupção: um clique para pular para o código, remover ou ativar/desativar pontos de interrupção
A barra lateral do ponto de interrupção permite realizar tarefas comuns com um clique. Esta é uma visão geral de como você pode ...
Navegue até o local do ponto de interrupção no editor de código. 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 em um só clique. Obviamente, 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 em que parte do código você definiu seu ponto de interrupção e analisar o código circundante? Basta clicar no snippet de código de um ponto de interrupção na barra lateral e ele 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 "Remover"
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 logpoints
Editar condições de ponto de interrupção ou alterar seu registro de logpoint editando um ponto de interrupção
Edite ou registre uma condição de ponto de interrupção passando o cursor sobre um ponto de interrupção e clicando no botão editar que é exibido. Isso abre uma caixa de diálogo para alterar o tipo de ponto de interrupção e os detalhes dele.
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 do logpoint ao passar o cursor sobre o ponto de interrupção na barra lateral:
Conclusão
Nosso objetivo por trás da reformulação da barra lateral do ponto de interrupção era facilitar a depuração com pontos de interrupção. Mais importante ainda, queríamos tornar as coisas mais estruturadas e mais fáceis de acessar e entender. Esperamos que essas melhorias ajudem você na sua próxima sessão de depuração.
Se você tiver sugestões para melhorar ainda mais, registre um bug.
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.
Entrar em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.
- Envie uma sugestão ou feedback em crbug.com.
- Informe um problema do DevTools em Mais opções
> Ajuda > Informar problemas no DevTools. - Envie um tweet em @ChromeDevTools.
- Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.