Como gerenciar bugs com um depurador em seu jogo html5
Quando você está escrevendo loops e condições, as coisas podem ir muito mal em seu código HTML jogo e um depurador pode ser necessária. Às vezes é muito difícil dizer o que exatamente está acontecendo. Felizmente, os navegadores modernos têm algumas boas ferramentas que ajudam você a olhar para o seu código com mais cuidado.
UMA depurador é uma ferramenta especial que permite que você executar um programa em “câmera lenta”, movendo uma linha de cada vez para que você possa ver exatamente o que está acontecendo. Google Chrome tem um depurador integrado, então vamos começar com isso.
Para ver como um depurador obras, siga estes passos:
Carregar uma página no Chrome.
Você pode adicionar um depurador para a maioria dos navegadores, mas Chrome tem um construído em, assim que começar com aquele. Você vai carregar o forLoops.html página porque loops são uma fonte comum de bugs.
Abra a janela Developer Tools.
Se você direita; clique em qualquer lugar da página e escolha Inspect Element, você tem uma ferramenta de depuração maravilhoso.
Inspecione a página com a guia Elements.
Video: COMO BUGAR MUITO SEU JOGO!
O guia padrão mostra a página em uma vista de destaques, permitindo que você veja a estrutura de sua página. Se você clicar em qualquer elemento na estrutura de tópicos, você pode ver que os estilos estão associados a esse elemento. O elemento real também é destaque na página principal para que você possa ver exatamente onde está tudo. Isto pode ser muito útil para verificar o seu HTML e CSS.
Olhe para a guia Console.
Toda vez que seu código não está funcionando como esperado, olhe para a guia Console. Muitas vezes, haverá uma mensagem de erro aqui que explica o que está acontecendo de errado.
Mova para a guia Scripts.
A ferramenta de desenvolvedor tem uma guia separada para trabalhar com código javascript. Selecione a guia Scripts para ver seu código inteiro de uma vez. Se a sua página puxa em arquivos javascript externos, você poderá selecioná-los aqui também.
Definir um ponto de interrupção.
Normalmente, você deixar o programa começa em velocidade normal e desacelerar logo antes de você chegar a um ponto de conflito. Neste caso, você está interessado no contagem() função, então clique na primeira linha (17) de que a função na janela de código. (É mais confiável para clicar na primeira linha da função do que a linha que declara-lo, então clique na linha 17 em vez de linha 16.)
Recarregue a página.
No navegador principal, clique no botão Recarregar ou pressione a tecla F5 para atualizar a página. A página pode ser inicialmente em branco. Isso é bom - isso significa que o programa parou quando encontrou a função.
Passo para a próxima linha.
Na ferramenta de desenvolvimento são uma série de botões na parte superior da coluna da direita. Clique no Passo para o botão de linha ao lado, que se parece com uma seta para baixo com um ponto sob ele. Você também pode pressionar a tecla F11 para ativar o comando.
Sua página está agora em execução.
Se você olhar para trás sobre a página principal, você deve ver agora é instalado e funcionando. Nada está acontecendo porque você ainda não tiver ativado qualquer um dos botões.
Clique no botão Count.
O botão de contagem deve ativar o código no contagem função. Clique nesse botão para ver se isso é o que acontece.
Código deve agora ser pausado na linha 17.
Voltar na janela de código, linha 17 é agora ressaltado. Isso significa que o navegador está em pausa, e quando você ativar o botão Step, o código realçado executa.
Passo algumas vezes.
Use a tecla F11 ou a Passo para o botão de linha ao lado um passo à frente algumas vezes. Observe como o destaque move em torno de modo que você pode realmente ver o loop acontecendo. Isto é muito útil quando o código não está se comportando corretamente porque ele permite que você veja exatamente como o processador está se movendo através de seu código.
Pairar sobre a variável Eu em seu código.
Video: GAMES QUE SÃO MELHORES COM BUGS!
Quando você está no modo de depuração, você pode passar o mouse sobre qualquer variável na janela de código, e você vai ver o que o valor atual dessa variável é. Muitas vezes, quando seu código está executando mal, é porque uma variável não está fazendo o que você pensa que é.
Adicionar uma expressão de inspeção para simplificar olhando variáveis.
Se você acha que o circuito não está se comportando, você pode adicionar um assistir expressão para fazer a depuração mais fácil. Direito sob os botões de passo, você verá uma guia chamada assistir expressões. Clique no sinal de mais para adicionar uma nova expressão. Tipo Eu e pressione Enter.
Continue percorrendo o código.
Agora você pode continuar a percorrer o código e ver o que está acontecendo com a variável. Isso é extremamente útil quando o seu código não está funcionando como você quer que seja.
O depurador embutido no Chrome é um dos melhores lá fora, mas não é a única opção. Se você estiver usando o Firefox, o excelente Firebug extensão adiciona a mesma funcionalidade para o Firefox.
Safari tem uma ferramenta Inspector web semelhante construído em, e até mesmo IE9, finalmente, tem um depurador decente chamado F12. Todo o trabalho em aproximadamente da mesma maneira. Normalmente, porém, um erro de javascript trava qualquer navegador, então escolha um que você gosta para o teste inicial e, em seguida, usar outras ferramentas específicas do navegador somente quando necessário.