Depurar Javascript Chrome

ast Python module | base64 Python module | code Python module | COM PHP module | Ev PHP module | File handling | gc Python module | html Python module | http Python module | imp Python module | inspect Python module | io Python module | JavaScript | os Python module | PS PHP module | Python Development | Python functions | re Python module | site Python module | StackOverflow | struct Python module | test Python module | time Python module | UI PHP module

Michael Zippo

Mesmo para profissionais, codificar não é fácil. Provavelmente é por isso que os desenvolvedores gastam muito tempo procurando por bugs em seu código. Às vezes, um bug é óbvio, fazendo com que todo o programa falhe de uma só vez. Outras vezes, um bug é muito sutil, produzindo uma saída de boa aparência que sempre contém falhas.

Por mais contra-intuitivo que possa parecer, bugs óbvios são melhores porque são mais fáceis de encontrar. Um bug sorrateiro pode se esconder em softwares comuns por anos.

Pense desta forma: se você estivesse em um prédio que estava se enchendo lentamente de gás venenoso, você gostaria que o gás fosse inodoro , insípido e incolor, ou roxo brilhante e cheirando a pó. canhão?

A depuração é uma etapa crucial no processo de desenvolvimento , existem muitas ferramentas disponíveis para fazer isso. Hoje vamos falar sobre depuração de JavaScript no Chrome. Javascript é de longe uma das linguagens mais populares ‚Äã‚Äão em geral e sem dúvida a linguagem mais popular para desenvolvimento web. Da mesma forma, o Chrome é um dos navegadores da Web mais usados.

Como alguém que em breve será um desenvolvedor da Web em demanda , é uma boa ideia se familiarizar com a depuração de JavaScript com o Chrome. Recomendo que você siga esta página da Web de exemplo elegante > criado especificamente para praticar a depuração.

Usando o painel Origem

O Chrome vem com um conjunto de ferramentas poderosas que permitem aos desenvolvedores inspecionar o código-fonte de um site , incluindo HTML, CSS e Javascript.

Essa é uma ótima maneira de ler o código dos sites que você adora e aprender a depurá-los.

Pegue o tour

A partir de 2019 e da versão mais recente do Chrome, acessar as ferramentas do desenvolvedor é tão fácil quanto ir para View -> developer -> Tools development no menu superior do navegador da tela. Isso abre o Chrome Developers Panel com muitas guias úteis.

A guia "Elementos" permite navegar pelo HTML e JavaScript que compõem a página da web. A guia "Console" oferece espaço para mexer no JavaScript. Abra o console para a página de exemplo vinculada na seção anterior e digite console.log (`hello`). Esse comando JavaScript deve ser executado em seu navegador.

A guia "Fontes" mostra o conteúdo real dos arquivos de origem da página e oferece uma maneira de definir pontos de interrupção e inspecionar a pilha de chamadas.

Pontos de interrupção e depuradores ;

Junto com as instruções de impressão, os pontos de interrupção são uma das técnicas básicas usadas pelos desenvolvedores para depuração.

Definir um encerramento de ponto de interrupção no console do Chrome é simples. basta clicar no número éro Fui da linha que lhe interessa Um ponto de interrupção é um local onde o código pára automaticamente em sua execução. Isso permite que você inspecione tudo o que aconteceu até agora, incluindo coisas como o valor atual de cada variável e quaisquer transformações que ocorreram.

Os pontos de interrupção são uma ótima maneira de verificar o progresso do seu código para ver se algo deu errado.

Podemos obter o mesmo efeito manualmente colocando o depurador; em nosso código onde queremos iniciar o processo de depuração.

Ao definir vários pontos de interrupção, podemos obter uma visão detalhada de tudo o que nosso código está fazendo, facilitando muito a identificação de erros.

Embora isso certamente não seja tudo o que você precisa para dominar a arte da depuração, é uma boa vantagem. A correção de código mais correta é pensar com muita paciência e clareza sobre o que você queria fazer com seu código e compará-lo com o que você realmente disse no seu. . ;