Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. JavaScript
Code

Contato com Depuração Moderna: Parte 1

by
Difficulty:IntermediateLength:LongLanguages:
This post is part of a series called Modern Debugging Experience.
Modern Debugging Experience: Part 2

Portuguese (Português) translation by Erick Patrick (you can also view the original English article)

Nesta série de duas partes, veremos como escrever & depurar códigos JavaScript usando ferramental moderno como as Ferramentas para Desenvolvedores do Chrome.

Nesta parte 1, você verá a introdução aos vários painéis do Ferramentas para Desenvolvedores e para quais fluxos de trabalho eles são adequados. Também haverá um foco na escrita e execução de código JavaScript no próprio navegador ao invés de um editor de código padrão. 

1. O Que São as Ferramentas para Desenvolvedores dos Navegadores?

Ferramentas para Desenvolvedores são funcionalidades providas pelos navegadores que possuem um conjunto de utilitários para inspecionar, interagir e depurar páginas da web. Geralmente, as Ferramentas para Desenvolvedores dos navegadores vêm integradas em todos os navegadores modernos, incluindo o Chrome, Firefox, Safari, Opera e Internet Explorer. Este tutorial focará nas Ferramentas para Desenvolvedores do Chrome Canary, especificamente, mas todas as funcionalidades listadas aqui são prováveis de pertencerem à versão estável do Chrome também.

O Que as Ferramentas para Desenvolvedores Podem Oferecer ao Desenvolvedor JavaScript?

A plataforma aberta da web permite Apertar o Botão Direito > Inspecionar Elemento em qualquer página da web e descobrir do que ela é feita. Porém, o JavaScript sempre esteve um pouco além do nosso alcance que o CSS (Cascading Style Sheets — Folhas de Estilo). Enquanto as Ferramentas para Desenvolvedores apresentam funcionalidades relacionadas à estilização de uma página, também há um conjunto de funcionalidades menos conhecidas, que permite você visualizar, escrever e depurar código JavaScript de diversas maneiras, seja em sua própria página ou em sites de terceiros.

Por Que Usar as Ferramentas para Desenvolvedores em seu Fluxo de Trabalho com JavaScript?

Se você for um desenvolvedor front-end, é recomendável que você, ao menos, esteja a par dos utilitários para JavaScript que as Ferramentas para Desenvolvedores têm a oferecer. As funcionalidades de alto nível inclusas, são:

  • Ao menos dois painéis dedicados, cujos os casos de uso são quase que inteiramente dedicados ao JavaScript
  • Um ambiente de desenvolvimento que é rápido de preparar com uma rápida resposta de retorno
  • Capacidade avançada de depuração com pontos de parada

2. Visão Geral das Ferramentas para Desenvolvedores

Esta seção cobrirá os elementos da interface de usuário das Ferramentas para Desenvolvedores, mais especificamente o Painel Sources e o Painel Console, uma vez que esses dois painéis serão os mais usados no resto deste tutorial.

Interface do Painel Sources

Sources panel interface

Perceba algumas das características de layout deste painel:

  • As Ferramentas para Desenvolvedores está em um estado desencaixado. Você pode preferir encaixá-lo à esquerda, à direita ou na parte inferior da janela principal.
  • A aba Sources no Painel Sources está selecionada na barra lateral esquerda.
  • As abas da barra lateral direita estão em seu estado expandido.

O Painel Sources provê um editor de código que suporta destaque de sintaxe para vários dos principais formatos de arquivos, como o HTML, CSS, JavaScript, LESS e Sass. O editor de código está no painel central. Diretamente acima do painel central você pode ver as abas correspondentes aos arquivos abertos.

Na aba Sources dentro da barra lateral esquerda há uma árvore de arquivos, mostrando os recursos que foram carregados pela página inspecionada. Os recursos são agrupados por domínio, e os diretórios podem estar em estado expandido ou reduzido. Se você der um clique simples em um recurso, ele abrirá no editor de código.

A barra lateral direita contém os controles de depuração para o JavaScript e cada aba pode ser expandida ou reduzida. Vários níveis de retorno são apresentados aqui quando o JavaScript estiver pausado em algum ponto de parada.

Painel Console

Console panel

O Painel Console permite você ver o retorno produzido por algum registro de log de dignóstico (como comandos console.log), mas também permitem escrever e avaliar o JavaScript dentro do contexto da atual página inspecionada. O Painel Console suporta tanto a API de Console quanto a API de Linha de Comando. Eis algumas funções expostas por cada API, assim como uma descrição de seus retornos.

API de Console

consolelog

consoleerror

API de Linha de Comando

command line API

Script

No topo do Painel Console há alguns controles como mostrado abaixo.

Console panel
  • Sem Símbolo (círculo cortado) limpa o console. Isso é útil quando aparecem mais mensagens que desejado e quer removê-las. Você também pode usar o atalho Command/CTRL-K para removê-las, ou executar a função clear(), que faz parte da API de Linha de Comando.
  • Filtro abre uma barra com controles de filtragem, incluindo um campo de dados. Se você só está interessado em encontrar mensagens de erros, selecione a opção de filtro Errors. Alternativamente, digite uma expressão regular para usar como um filtro.
  • O menu Select (<quadro do tipo>) provê opções de contexto alternativas para execução de JavaScript. Use isso quando quiser avaliar seu JavaScript no contexto de um IFrame ou de uma Extensão para Chrome, por exemplo.

O Painel Console é um dos poucos painéis que você pode sobrepor sobre outros painéis nas Ferramentas para Desenvolvedores (Elements, Network, Sources) para prover um fluxo de trabalho aprimorado. Se você se pegar retornando muito ao Painel Console, traga o Console apertando a tecla ESC.

3. Visualizando JavaScript Usando as Ferramentas para Desenvolvedores

Essa seção focará no uso das Ferramentas para Desenvolvedores para ver recursos JavaScript que um site está usando. Antes de continuarmos, é recomendado que você desabilite o cache do navegador através das Ferramentas para Desenvolvedores. Para isso, navegue até Settings > General e marque a caixa intitulada Disable cache (while DevTools is open). Isso garante que você sempre terá uma versão atualizada de um dado recurso.

Fluxo de Trabalhos em Sites de Terceiros

Navegue até o site HTML5Please.com, um site que trata da prontidão das funcionalidades da Plataforma Web. Abra as Ferramentas para Desenvolvedores usando o atalho Command/CTRL-Shift-I ou através da seleção da opção Inspecionar Elemento do menu de contexto da página. Vá até o Painel Sources e veja a estrutura da árvore de arquivos mostrada na barra lateral esquerda. É sabido que sites colocam seus arquivos JavaScripts em pastas como "js" ou "scripts", logo, você já sabe onde procurar. Abra o arquivo script.js do diretório js. Veja algumas das funcionalidades do editor de código que podem ser bem úteis quando visualizar ou editar código JavaScript:

  • Destaque completo de sintaxe
  • Numeração de linha e coluna do curso
  • Nova aba correspondendo ao arquivo aberto
  • Ocorrências das palavras mapeada à seleção atual
  • Colchetes/Chaves correspondentes
  • Go-to
go-to definition

Use a funcionalidade Go-to para encontrar rapidamente ou descobrir métodos e funções JavaScript existentes. Você pode abrir a janela de definições go-to usando o atalho Command/CTRL-Shift-P. Se souber o nome do método ou função que procura, digite-o na caixa de busca; de acordo com que digita, os resultados serão atualizados em tempo real. Cada resultado contém o nome pesquisado (se tiver algum) e o número da linha onde está definido. Aperte o Enter para selecionar um dos resultados e você será levado para a linha de código onde a função está definida.

Agora abra o arquivo modernizr-2.0.min.js no diretório js/libs. Por esse arquivo estar comprimido, torna mais difícil de vê-lo. Selecione a opção Pretty Print para que as Ferramentas para Desenvolvedores apliquem uma formatação mais intuitiva ao arquivo, usando quebra de linhas e indentação. A funcionalidade Pretty Print funciona tanto para CSS quanto para JavaScript.

Salve Arquivos Externos em seu Sistema de Arquivos

Cada arquivo JavaScript na árvore de arquivos tem um menu de contexto, então abra-o clicando com o botão direito. Perceba que há algumas opções úteis para tornar o arquivo off-line para uso posterior.

  • Open link in new tab: use isso se quiser inspecionar a informação de rede em uma aba dedicado (através do Painel Network).
  • Save As: use isso se quiser criar uma cópia off-line do arquivo em seu sistema de arquivos.
  • Copy Link Address: use isso se quiser compartilhar a URL com alguém em outro lugar.

Encontre JavaScript no Painel Network

O Painel Network, além de simplesmente mostrar quais recursos da página foram carregados, também mostrará outras informações e dados.

  • Initiator: aquilo que causou o download do script
  • DOMContentLoaded (azul) e Load events (vermelho): uma representação visual em forma de linha de tempo para quando os eventos foram ativados
  • Size: o tamanho do arquivo, incluindo o tamanho após Gzip

Usando o HTML5Please.com como um site exemplo, siga os passos abaixo:

  1. Navegue até o Painel Network e limpe os registros de log.
  2. Atualize a Página.
  3. Filtre os registros de log, selecionando o filtro Scripts.

O primeiro script, modernizr-2.0.min.js, tem o valor de html5please.com/:17 para seu iniciador. Isso sugere que foi um recurso HTML que iniciou o download do script (ao invés de um carregador de scripts, por exemplo). Clique no instanciador e você será levado até a linha de código no Painel Sources que referencia o arquivo:

No caso do script ser inserido dinamicamente (com um script de carregamento, por exemplo), a coluna do instanciados no Painel Network poderá prover a pilha de chamada JavaScript relacionada às chamadas que ocorreram até o ponto onde o script foi inserido dinamicamente no DOM.

Initiator column in Network Panel

Você pode clicar em cada chamada dentro da pilha para navegar até a parte de código relevante no Painel Sources.

Code in the Sources Panel

4. Escrevendo JavaScript Usando as Ferramentas para Desenvolvedores

NA seção "Visualizando JavaScript Usando as Ferramentas para Desenvolvedores", expliquei como visualizar informações, metadados e o código fonte dos recursos JavaScript. Esta seção mostrará formas de escrever JavaScript usando as Ferramentas para Desenvolvedores.

Painel Console

Use o Painel Console para escrever linhas simples de JavaScript para resultados imediatos. O JavaScript é executado dentro do contexto da atual página inspecionada. Para executar algum JavaScript no Painel Console, basta apertar a tecla Enter após digitar algum código.

Reveja a lista da API de Console e da API de Linha de Comando para uma lista dos métodos e funções disponíveis.

Dicas

Embora o Painel Console seja relativamente simples, há algumas pequenas dicas para aprimorar seu fluxo de trabalho:

  • Use Shift-Enter para digitar uma nova linha—isso habilita a escrita de várias linhas de código.
  • Execute a função keys(window) para detectar as variáveis globais existentes na página atual.
  • Use o utilitário $_ para retornar o resultado do último comando.

Você perceberá que o Painel Console é um ótimo candidato para rápidos experimentos com JavaScript para descobrir quais os resultados de certas expressões. Entretanto, ao começar a escrever código JavaScript mais complexo, você encontrará algumas limitações:

  • Falta de Destaque de Sintaxe pode diminuir a legibilidade.
  • Indentação deve ser feita manualmente, usando caracteres de espaço.
  • Certas funcionalidades faltantes, geralmente, estão presentes em editores de código.

O Painel Console não tem como objetivo ser um substituto ou uma alternativa aos editores de código. Eis uma lista de alguns casos onde o Painel Console pode ser útil:

  • Usar a funcionalidade auto completar para a descoberta de propriedades
  • Descobrir a diferença entre os métodos call() e apply() do JavaScript, executando-os em linha e observando os resultados

Painel Sources

A aba principal do Painel Sources contém um editor de código com capacidade básica de edição.

CodeMirror

O editor de código em si é motorizado pelo CodeMirror, um editor de texto poderoso, implementado em JavaScript. As Ferramentas para Desenvolvedores importam o editor do CodeMirror para dentro da sua própria base de códigos e, seletivamente, habilita várias funcionalidades que, por sua vez, estarão disponíveis para qualquer usuário do Chrome.

Ao editar códigos JavaScript (assim como outras linguagens suportadas), o editor do Painel Sources trará alguns utilitários, como:

  • Sugestões de Auto Completar: Receba sugestões de acordo com que digita alguma palavra. Elas são baseadas em propriedades existentes dentro do próprio arquivo. Por exemplo, document não será sugerida após digitar docu a menos que já exista alguma ocorrência da palavra document no mesmo arquivo.
  • Pesquisar e Substituir: Para abrir a caixa de busca, aperte Command/CTRL-F. Resultados combinantes serão destacados no código em tempo real. Marcando a caixa Replace provê capacidades de busca e substituição.
  • Atalhos de Teclado: Existem vários atalhos, semelhantes àqueles encontrados em editores de código como o Sublime Text. Por exemplo, uso o comando Command/CTRL-/ para comentar ou descomentar algo, Command/CTRL-D para selecionar a próxima ocorrência de uma palavra selecionada, e muito mais coisas, como documentado na página oficial de atalhos das Ferramentas para Desenvolvedores do Chrome.

Edição em Tempo Real do JavaScript

Essa funcionalidade, mais conhecida como Edição em Tempo Real, dá a possibilidade de editar o código JavaScript de uma página através das Ferramentas para Desenvolvedores e, além disso, aplicar as mudanças imediatamente, sem precisar atualizar a página. Não há qualquer interface de usuário em particular para usar essa funcionalidade. Simplesmente, reescreva a parte do código que deseja modificar e pressione Command/CTRL-S para salvá-lo.

O funcionamento disso é explicado mais abaixo, mas, primeiro, considere seguir os seguintes pré-requisitos (eles são independentes da Edição em Tempo Real):

  1. Uma página que usa o arquivo script.js carrega-o no Chrome através de uma página web.
  2. O script.js é analisado, avaliado e compilado em código de máquina através do Motor JavaScript V8.

Eis o que acontece por trás das cotinhas da funcionalidade de Edição em Tempo Real, levando em consideração os pontos anteriores:

  1. Você abre o arquivo script.js no editor de código das Ferramentas para Desenvolvedores. Assuma que há um botão na página atual. Ao clicar no botão, um observador de eventos de clique executa uma função anônima.
  2. Você modifica a função anônima para adicionar um comando console.log e salva o arquivo.
  3. O conteúdo bruto do arquivo script.js é injetado de volta no motor V8 para processamento.
  4. São realizadas comparações entre o novo arquivo script.js e o anterior. Remoções, adições e modificações são guardadas.
  5. O V8 compila o JavaScript modificado e ajusta o arquivo script.js com as mudanças realizadas.

Edição em Tempo Real funciona melhor com pequenas modificações ao invés da criação de arquivos inteiros em JavaScript para seu aplicativo. Cenários de depuração funcionam muito bem com Edições em Tempo Real.

Áreas de Trabalho

As Áreas de Trabalho não são um componente crucial para a depuração de códigos JavaScript através das Ferramentas para Desenvolvedores. Entretanto, dependendo dos seus requerimentos, ela pode acelerar seu fluxo de trabalho de depuração. As áreas de trabalho são uma funcionalidade das Ferramentas para Desenvolvedores que permitem você modificar o conteúdo de um diretório no sistema de arquivos, realizando mudanças em códigos nas Ferramentas para Desenvolvedores.

Se estiver navegando por um projeto que é servido localmente através de um servidor web, como o http://localhost:3000/ e o projeto existe em seu sistema de arquivos local no diretório ~/development/project, por exemplo, você pode dizer às Ferramentas para Desenvolvedores sobre o mapeamento entre os dois e usar a capacidade de Edição em Tempo Real de salvar arquivos em disco. Áreas de trabalham permitem o seguinte fluxo de trabalho:

  1. Após instruir as Ferramentas para Desenvolvedores sobre o mapeamento da página que você está visualizando e o código fonte no sistema de arquivos, você pode ver o código fonte no Painel Sources.
  2. Você encontra um erro enquanto depura algum código JavaScript, você realizará mudanças no Painel Sources.
  3. Você salva suas mudanças pressionando Command/CTRL-S.

No passo 3, o salvamento sobrescreve os arquivos fontes originais.

Source Maps

Source Maps ou Mapas de Código Fonte, solucionam um problema comum ao lidar com código processado ou compilado em algo diferente. Alguns exemplos:

  • Código JavaScript que esteja compactado e concatenado como parte de um sistema de construção
  • Código em EcmaScript 6 que é transformado em código ES5 para que seja compatível com todos os navegadores modernos
  • Código CoffeeScript que é compilado em JavaScript

O problema é o seguinte: ao depurar uma versão processada do seu código, ele pode ser difícil de compreender como ele está interligado ao código original ao depurá-lo. Se você vê um erro no console das Ferramentas para Desenvolvedores de um site em produção, você acabará tendo de depurar a versão compactada e concatenada do código JavaScript, que não lembra quase nada os arquivos fontes que você criou.

Um Mapeamento de Código Fonte é um arquivo gerado produzido como parte do processo de compilação que está disponível para os casos apontados mais acima. As Ferramentas para Desenvolvedores podem ler o Mapeamento de Código Fonte e descobrir como o arquivo compilado mapeia o arquivo original.

Os dois trechos de código abaixo (Source File—app.js e Transpiled file—compiled.js) demonstram o código depurado amigável do Mapeamento.

Exemplo 1. Source File—app.js

Note que o arquivo fonte app.js usar uma funcionalidade compatível com o Ecmascript 6, conhecida como Array iterator (Iterador de Vetores).

Exemplo 2. Transpiled File—compiled.js

Note que o arquivo compiled.js é referenciado por uma tag script em uma página HTML, junto do tempo de execução do Traceur, e finalmente é aberto em um navegador.

compiledjs screenshot

Mesmo o JavaScript compilado tem um comando console.log na linha 6. As Ferramentas para Desenvolvedores permitem mostrar exatamente onde o comando console.log existe no arquivo fonte original (Depuração a partir de Mapeamento de Código Fonte), que fica na linha 2. Pontos de parada também funcionam como esperado. Por trás dos panos, o arquivo JavaScript compilado é avaliado e executado, mas as Ferramentas para Desenvolvedores estão apresentando um recurso diferente no lugar da versão avaliada pelo navegador.

Snippets

A funcionalidade Snippets (Trechos de Código) prove uma forma rápida de escrever e executar códigos JavaScript diversos. Todos os códigos JavaScript executados através dessa funcionalidade roda dentro do contexto da página atual. Executar um Trecho de Código das Ferramentas para Desenvolvedores é equivalente a uma página nos Favoritos. Talvez você prefira escrever certos códigos dentro de Snippets ao invés de escrevê-los dentro do Painel Console por conta de um melhor ambiente de edição de código. Seus trechos de códigos são salvos dentro do Armazenamento Local (Local Storage) das suas Ferramentas para Desenvolvedores.

Para usar os trechos de códigos:

  1. Tenha certeza que a barra lateral esquerda esteja visível no Painel Sources e selecione a aba Snippets (próximo às abas "Sources" e "Content Scripts").
  2. Clique com o botão direito na barra esquerda e selecione New para criar um novo trecho de código.
  3. Dê um nome.
  4. Escreva console.log('Hello'); (ou qualquer outro código) no editor.
  5. Aperte Command/CTRL-Enter e veja o retorno resultando no Painel Console.

Você pode encontrar vários trechos de código já criados nesse Repositório de Snippets da Ferramentas para Desenvolvedores.

E é isso para a Parte 1 do Contato com Depuração Moderna. Na parte 2, veremos algumas funcionalidades de depuração e também veremos algumas extensões que ajudarão nessa tarefa. 

Seja o primeiro a saber sobre novas traduções–siga @tutsplus_pt no Twitter!

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.