‫Instrutor: Neste vídeo, vamos
‫aprender sobre como depurar o Node. JS porque, vamos enfrentá-lo, sempre
‫haverá alguns bugs em nosso código, não importa
‫o quão cuidadosos sejamos.
‫E por isso é bom ter uma ferramenta para nos
‫ajudar a depurar nosso código.
‫Bem, não se trata realmente de tratamento de erros com o
‫Express, mas achei que esse era um bom
‫ponto do curso para apresentar a você
‫uma ferramenta de depuração que poderíamos usar no restante do curso.
‫E existem diferentes maneiras de depurar o Node. Código JS.
‫Por exemplo, podemos usar o código VS para isso.
‫Mas, na verdade, o Google lançou recentemente uma ferramenta
‫incrível que podemos usar para depurar que se chama NDB, certo?
‫Então, vamos passar para o nosso outro terminal aqui
‫e depois instalar o NDB.
‫E NDB, que significa Node debugger, é na
‫verdade apenas um pacote NPM.
‫Portanto, o NPM instala o NDB.
‫Tudo bem, e
‫você deve então instalá-lo como um pacote global, certo?
‫E se você estiver em um Mac, pode precisar de permissões globais.
‫Então, basta escrever sudo aqui na frente.
‫Ou se você não for capaz de instalá-lo globalmente,
‫pode apenas instalá-lo localmente como uma
‫dependência mortal.
‫Então, assim, certo?
‫De qualquer forma, vá em frente e instale esta ferramenta agora.
‫Não vou
‫fazer isso porque pode ser um download bem pesado
‫e isso está demorando muito agora.
‫De qualquer forma, assim que você tiver a ferramenta instalada, vamos
‫direto ao pacote. Jason e
‫adicione um novo script aqui, certo?
‫E vou chamá-lo de depuração.
‫OK?
‫E então o comando que queremos
‫executar aqui é simplesmente NDB, então o depurador de
‫notas e, novamente, nosso ponto de
‫entrada, então, servidor. js ok?
‫E agora isso vai funcionar, não importa
‫se você instalou o NDB local ou globalmente.
‫Tudo bem, vamos agora executar o script.
‫E para que isso
‫funcione, na verdade precisamos terminar este processo
‫porque ele basicamente irá iniciar
‫o servidor também e então ele tentará fazê-lo
‫na mesma porta e é
‫claro que não vai funcionar.
‫Portanto, precisamos terminar o que está em execução
‫no momento e, a partir daqui, podemos executar o NPM, executar
‫a depuração.
‫Tudo bem,
‫e agora uma nova janela do
‫Chrome deve ser aberta, o que
‫é chamado de Chrome sem cabeça, mas
‫não é um Chrome real.
‫Você verá o ícone do Chrome aqui embaixo
‫e também aqui na barra de
‫menus, mas na verdade este é apenas o depurador de notas.
‫Então, o que temos aqui?
‫Bem, do lado esquerdo, temos nosso sistema de arquivos completo.
‫Também temos acesso aos nossos scripts NPM aqui,
‫que podem ser executados a partir daqui.
‫Também temos um console e aqui temos
‫nossas saídas usuais com o aplicativo em execução e
‫a conexão do banco
‫de dados e também temos as guias de desempenho
‫e memória, que não vamos usar.
‫Certo, agora se você está familiarizado
‫com o processo de depuração
‫geral, então tudo isso será bem familiar para você.
‫Tudo bem, mas se não, não se
‫preocupe, vou mostrar algumas técnicas
‫ao longo deste vídeo.
‫Certo, de qualquer maneira, vamos abrir nosso servidor. js.
‫E uma coisa que é
‫realmente incrível é que podemos editar nossos arquivos
‫aqui, bem neste depurador.
‫Então, por exemplo, digamos que encontramos um
‫bug e queremos consertá-lo imediatamente.
‫Podemos fazer isso aqui mesmo no depurador
‫e ele atualizará o código original.
‫Então, apenas para
‫testar, vamos adicionar um comentário aqui.
‫Então, teste e aperte command ou control s para salvar e então quando
‫voltarmos ao nosso código e abrirmos
‫o servidor. js aí
‫você vai ver que o comentário está mesmo aqui.
‫OK?
‫E se agora o
‫excluirmos daqui, salve-o
‫e volte para o
‫depurador, então ele irá embora daqui também.
‫Ok, mas agora sobre a própria depuração.
‫Eu diria que o aspecto
‫fundamental da depuração é definir pontos de interrupção.
‫Portanto, os pontos de interrupção são basicamente pontos em nosso
‫código que podemos definir aqui no
‫depurador, onde nosso código parará de ser executado.
‫Basicamente, ele congelará no tempo e
‫podemos então dar uma olhada em todas as nossas variáveis.
‫Ok, então isso será extremamente útil para
‫encontrar alguns bugs.
‫Agora, agora não há nenhum bug
‫aqui, mas ainda vamos adicionar um ponto de interrupção.
‫E vou adicionar esse ponto de interrupção aqui na linha 21.
‫Então eu clico aqui nesta
‫linha e você vê esse marcador verde, ok?
‫E isso significa que o código irá parar
‫neste ponto quando o executarmos, certo?
‫E você também pode ver
‫isso aqui no lado direito da guia dos pontos de interrupção.
‫Agora, nosso aplicativo já está
‫em execução neste
‫ponto e basicamente aguardando a chegada de solicitações.
‫E então o que precisamos
‫fazer aqui é clicar com o botão direito e clicar em executar este script.
‫Ok, então basicamente executará o
‫script aqui novamente.
‫Tudo bem?
‫E aqui vamos nós.
‫Então você vê aqui no lado
‫direito, que diz pausado no ponto de interrupção
‫e todo o código que está acima deste ponto de
‫interrupção aqui já foi executado neste ponto.
‫E agora podemos dar uma olhada nas variáveis.
‫Por exemplo, podemos passar o mouse sobre essa variável
‫de porta e ver que ela está definida como 3.000.
‫E também acerte este lugar aqui
‫no código aqui, certo.
‫E então a terceira maneira de ver isso
‫está aqui do lado direito.
‫Portanto, temos basicamente algumas guias aqui, para processos de
‫nó, o relógio, a pilha de chamadas, o que
‫não é realmente importante por enquanto.
‫O escopo, e então o escopo é onde todas
‫as nossas variáveis estão, certo?
‫E aqui novamente, você tem a porta definida para 3.000.
‫Ok, e aqui você também pode
‫ver as cinco variáveis às quais temos acesso
‫em todos os módulos.
‫Lembra da aula de modelos?
‫Portanto, temos o nome do
‫diretório, temos o nome do arquivo, temos a função require,
‫temos o módulo e temos a exportação.
‫Portanto, lembre-se de que essas são
‫as cinco variáveis disponíveis em cada módulo.
‫E, na verdade, quando executamos um
‫código como este no depurador, podemos ver que todo o nosso
‫código está de fato envolvido nesta função.
‫Direito?
‫Portanto, esta função de invólucro que
‫nos dá acesso a essas cinco variáveis.
‫Tudo bem, a seguir também quero dar uma olhada
‫em nossa variável de aplicativo, basicamente, o aplicativo
‫Express que exportamos do aplicativo. js, lembre-se disso.
‫E aqui está realmente um monte de
‫coisas, mas o que acho
‫interessante é dar uma olhada neste roteador aqui.
‫Ok, então no roteador temos pilha.
‫Ok, vamos abrir isso um pouco e
‫essa pilha aqui é
‫basicamente a pilha de middleware que temos em nosso aplicativo.
‫Ok, por exemplo, temos nosso jsonParser aqui,
‫temos o código que serve os arquivos estáticos.
‫Dê uma olhada nisso aqui no aplicativo. js então esta
‫expresso. estático.
‫Também temos o logger
‫aqui, que vem do Morgan.
‫Então você tem essas duas próximas funções
‫de middleware,
‫então essas duas aqui, que são anônimas, então essa e essa e
‫talvez possamos dar uma olhada nelas.
‫Mas não realmente.
‫Ok, isso não importa.
‫Isso é apenas por curiosidade e
‫mostra que podemos
‫dar uma olhada em nossa pilha de middleware, certo?
‫Então, finalmente, temos nossos dois roteadores.
‫OK?
‫Portanto, temos o roteador, e você vê aqui realmente a rota
‫para a qual ele se aplica.
‫Então api / v1 / tours certo e acho isso realmente interessante.
‫Claro que ainda temos os usuários aqui também.
‫E assim, podemos realmente dar uma olhada em como
‫o aplicativo Express funciona nos bastidores.
‫OK?
‫Então, vamos encerrar tudo isso.
‫E a outra coisa que gostaria de
‫mostrar a vocês está aqui
‫nas variáveis globais porque aqui temos a variável de processo ou
‫pelo menos deveríamos tê-la em algum lugar aqui.
‫Sim, então aqui está.
‫Portanto, aqui temos a variável de processo
‫que deve ser lembrada, disponível em todos os lugares.
‫E é por isso que é chamado aqui de variável global.
‫Então aí temos o processo. env e
‫lembrar que é aqui que
‫todas as nossas variáveis de ambiente são armazenadas.
‫E, de fato, aqui temos nossa string de banco
‫de dados, temos o banco de dados local, a senha e,
‫na verdade, todas as outras variáveis de ambiente
‫que definimos em nossa configuração. n arquivo.
‫Tudo bem?
‫Coisas muito interessantes que podemos dar uma olhada aqui.
‫Mas agora vamos continuar com nossa depuração.
‫OK?
‫Então, paramos o código, o congelamos
‫no tempo aqui neste ponto, portanto, na linha 21.
‫Ok, agora podemos clicar aqui neste botão, a fim
‫de realmente continuar executando o código.
‫E como não temos mais
‫pontos de interrupção, o código não
‫será mais interrompido e basicamente terminará a execução.
‫Então vamos fazer isso.
‫E agora nosso aplicativo está realmente em execução.
‫Vamos dar uma olhada nisso.
‫No console, ok?
‫Portanto, o aplicativo está sendo executado na porta 3.000 e a
‫conexão com o banco de dados foi bem-sucedida, é claro.
‫O que aconteceu aqui?
‫Agora, tudo bem,
‫então vamos rapidamente fazer uma solicitação aqui.
‫Então, basta um para / tours e
‫agora temos todo esse
‫lixo aqui e vou cuidar disso em um segundo.
‫Tudo bem, e se você voltar ao nosso console
‫aqui, então é claro que temos todo o código que tínhamos antes.
‫Olá do middleware
‫e como a consulta demorou realmente.
‫Tudo bem, e agora, antes de fazermos
‫qualquer outra coisa, vamos nos livrar dessas viagens inúteis.
‫Vou recarregá-lo aqui e
‫acho que estará em algum lugar aqui no final.
‫Então, teste tudo aqui.
‫Então, vamos nos livrar disso.
‫Esta é a turnê secreta e eu realmente quero mantê-la aqui.
‫Mas tudo daqui em diante não queremos mais.
‫E então
‫sim, agora estamos de volta a ter apenas
‫10 turnês, como antes.
‫De qualquer forma, vamos agora definir um ponto de
‫interrupção na função que trata esta rota.
‫Ok, então chegamos à nossa pasta de controladores e
‫aí temos o controlador de tour.
‫OK?
‫E a função de manipulador é obter todos os tours.
‫Portanto, por enquanto, tudo
‫que eu queria fazer é apenas definir um
‫ponto de interrupção aqui para que possamos dar uma olhada na
‫aparência dessas variáveis depois que a consulta já estiver concluída.
‫Portanto, este código aqui obterá nossos tours e,
‫em seguida, pararemos
‫o código basicamente antes de enviá-lo como uma resposta.
‫Ok, então tudo o que precisamos fazer é realmente fazer a
‫solicitação, porque isso acionará essa função.
‫Direito?
‫E assim, como temos um ponto de interrupção, voltamos
‫automaticamente para esta janela aqui e para o ponto
‫onde o código foi interrompido.
‫Então, que tipo de variáveis temos aqui?
‫Então você vê que temos a solicitação e uma
‫resposta, e também a variável
‫features, e os passeios, é claro.
‫Portanto, vamos primeiro dar uma olhada na solicitação.
‫E aqui novamente, você vê que realmente temos todos os
‫tipos de coisas.
‫Então temos, baseurl, temos o método, temos por
‫exemplo, request. consulta, que agora está
‫vazia porque não passamos nenhuma string
‫de consulta,
‫mas você vê que realmente já está aqui.
‫Ok, então você começa a ver agora
‫como isso pode ser útil para depurar nosso código.
‫Então, basicamente, para congelar nosso código a tempo, em vez de ter
‫que fazer tudo isso no console. logs que costumávamos fazer
‫até este ponto.
‫Normalmente, quando queríamos dar uma olhada na consulta, por exemplo,
‫faríamos um monte de console. logs e use-os para
‫descobrir um bug no caso de algo não
‫estar funcionando.
‫Certo, mas agora temos essa ferramenta incrível que pode nos
‫ajudar a evitar todos esses console. logs por
‫exemplo.
‫Então também temos a resposta, é claro.
‫E novamente você vê todas essas propriedades e métodos que estão lá,
‫e eles não são realmente interessantes para
‫nós agora.
‫O que eu queria mostrar a vocês é claro
‫que neste momento já temos os tours, ok?
‫Portanto, temos nove tours, vamos dar uma olhada neles.
‫E parece meio estranho aqui, então para obter
‫acesso aos valores reais, precisamos clicar aqui, ok, isso é
‫um pouco estranho.
‫Mas funciona, é claro.
‫E então você vê que de fato nossos tours já
‫estão aqui e claro os recursos também.
‫Portanto, você vê aqui que os recursos são uma
‫instância da classe de recursos da API exatamente como a definimos.
‫E aí temos a consulta e a string de consulta.
‫Ótimo, então é assim que examinamos todas as variáveis.
‫E é assim que funcionam as partes
‫mais importantes do depurador.
‫Agora, para aprender um pouco sobre o próprio processo de
‫depuração, vamos introduzir um pequeno bug em nosso código e, em seguida,
‫dar uma olhada em como podemos usar essas ferramentas
‫que temos aqui para basicamente dar uma olhada mais
‫profunda em nosso código.
‫Portanto, não vou retomar a
‫execução ignorada para executar basicamente o restante do código, certo?
‫Portanto, isso deve ser feito agora.
‫Portanto, agora aqui temos todas as respostas.
‫Então você vê que demorou todo esse tempo aqui,
‫então três minutos e 29 segundos, mas isso
‫é só porque nós pausamos a execução por
‫muito tempo.
‫OK.
‫Agora vamos ao nosso código aqui.
‫Vamos fechar o que não precisamos mais.
‫Então, na verdade, em nosso arquivo de recursos da API, quero
‫apresentar um pequeno bug aqui nos campos de limite.
‫Digamos que estivéssemos tentando implementar esse método
‫aqui, mas em vez de unir com um espaço
‫aqui, esquecemos de colocá-lo aqui.
‫E então vamos apenas dizer que nos juntamos
‫sem nenhum espaço, e isso nos daria um resultado estranho, certo?
‫Então, vamos realmente testá-lo.
‫Então, digamos
‫campos e que queríamos apenas
‫o nome e a duração, certo?
‫Agora, antes que eu possa realmente enviar essa solicitação, vamos remover
‫o ponto de interrupção aqui.
‫OK?
‫Enviou a solicitação e agora não conseguimos o
‫nome e a duração.
‫Então, vamos fingir que esse é o
‫nosso bug agora e estamos tentando descobrir por que isso não está funcionando.
‫OK?
‫Então, vamos ao nosso depurador.
‫E sabemos que o erro provavelmente deve
‫estar em algum lugar em nosso método de campos de limite.
‫E então vamos basicamente parar a execução do
‫código neste ponto, ok?
‫Porque é aqui que esse método será realmente chamado e,
‫a partir daqui, podemos inserir essa função para
‫esse método.
‫OK?
‫Então, vamos disparar essa solicitação
‫agora, e agora vamos voltar ao nosso depurador automaticamente.
‫Então, neste ponto, esta linha e esta linha e
‫esta linha de código já foram executadas, então vamos agora
‫usar a ferramenta step, ok?
‫A etapa que fará é basicamente executar a
‫próxima linha de código.
‫E neste caso isso estará dentro do
‫método de limites de campos.
‫Então dê um passo, e então ele se moverá direto para essa função.
‫Ok, então vamos dar uma olhada no que temos aqui.
‫Por exemplo, isso. string de consulta tem duração de
‫vírgula de nome, então isso está correto, certo?
‫Ok, então vamos passar para a próxima linha.
‫Tudo bem e então é aqui que esta
‫operação está realmente acontecendo.
‫Então o próximo.
‫Vamos dar uma olhada em nossas variáveis aqui.
‫E aqui agora vemos o campo, e aqui temos nosso bug.
‫OK?
‫Portanto, o problema é que não temos espaço
‫entre o nome e a duração.
‫E é por isso que não está funcionando.
‫Portanto, os campos são obviamente definidos aqui,
‫e assim podemos encontrar nosso bug e corrigi-lo imediatamente.
‫Portanto, lembre-se de que as etapas
‫adicionadas que fazemos aqui são refletidas imediatamente no código.
‫Portanto,
‫salve-o e ele fará de novo.
‫Então eu posso continuar pisando.
‫E agora os campos estão corretos.
‫Portanto, nomeie a duração do espaço.
‫Em seguida, a próxima linha de código.
‫E agora entramos no método select na consulta.
‫Mas não estamos interessados nisso de forma alguma, então
‫podemos dizer "saia da função atual. " OK?
‫Então aquele select que pensávamos estar rodando
‫essa função aqui, ok?
‫Mas é claro que não estávamos interessados
‫nisso, então simplesmente desistimos e passamos para a próxima linha.
‫Portanto, agora temos
‫que retornar esta, a próxima linha e novamente.
‫Então, agora estamos de volta a onde estávamos, mas na próxima linha.
‫Então, vamos continuar fazendo isso.
‫Agora estamos na página
‫oito, mas não estamos realmente interessados
‫nesta, então vamos sair da função atual novamente.
‫E agora estamos aqui na definição dos passeios.
‫Que neste ponto ainda não está feito.
‫E então vamos dizer novamente passo.
‫E agora, neste ponto, nossos roteiros devem ser definidos.
‫Tudo bem, então temos nossos nove tours aqui.
‫Vamos dar uma olhada neles
‫e aqui estão.
‫E, na verdade, eles têm
‫todos os dados, não apenas aquele que definimos, mas,
‫na verdade, não tem.
‫Portanto, temos apenas o nome e a duração, portanto,
‫a duração, o nome e todos os
‫outros são indefinidos.
‫Então, isso é porque limitamos uma consulta a apenas
‫esses dois campos, lembra?
‫Agora o que eu também queria mostrar a vocês
‫está aqui nos recursos, podemos dar uma olhada em nossa consulta e aqui temos
‫a propriedade fields por exemplo, onde vemos a duração definida
‫como um e o nome definido como um.
‫E esses são exatamente os dois nomes que selecionamos.
‫Também temos essas opções
‫aqui, que neste ponto estão definidas para criá-lo menos um.
‫E isso está vindo daqui.
‫Então, isso aqui.
‫Então, basicamente o que esse método aqui, esse
‫método de classificação fará é adicionar essa propriedade de classificação aqui
‫a essas opções, certo?
‫E também temos o limite e o salto, que obviamente vêm aqui
‫a partir da página oito.
‫OK?
‫Então eu pensei que isso também era
‫interessante e sim, nosso código agora está realmente corrigido e vamos continuar executando
‫isso.
‫E agora devemos ter nosso resultado correto.
‫Agora aqui está escrito que não conseguimos nenhuma resposta,
‫e isso é porque demoramos muito para consertar nosso código.
‫Portanto, ocorreu um erro ao conectar.
‫Mas se agora o enviarmos de
‫novo, e agora o fizermos mais rápido.
‫Ou, na verdade, poderíamos remover nosso ponto de interrupção totalmente.
‫Então, vamos mantê-lo
‫funcionando, vamos voltar e agora realmente temos a
‫duração e o nome também.
‫Isso porque acabamos de consertar nosso
‫código usando o depurador NDB.
‫Tão bom.
‫Essa é uma ferramenta realmente incrível e útil
‫que continuaremos usando durante o resto
‫do curso.
‫Talvez nem sempre, às vezes é mais rápido apenas inserir
‫um log de saída do console.
‫Mas realmente, em alguns casos mais complicados, gosto de
‫usar esse tipo de ferramenta.