Como Usar o Console do Desenvolvedor JavaScript

Introdução

Os navegadores modernos possuem ferramentas de desenvolvimento integradas para trabalhar com JavaScript e outras tecnologias web. Essas ferramentas incluem o Console, que é semelhante a uma interface de shell, juntamente com ferramentas para inspecionar o DOM, depurar e analisar a atividade da rede.

O Console pode ser usado para registrar informações como parte do processo de desenvolvimento do JavaScript, além de permitir que você interaja com uma página da web executando expressões JavaScript dentro do contexto da página. Essencialmente, o Console oferece a capacidade de escrever, gerenciar e monitorar JavaScript conforme necessário.

Este tutorial explicará como trabalhar com o Console e JavaScript no contexto de um navegador, e fornecerá uma visão geral de outras ferramentas de desenvolvimento integradas que você pode usar como parte do seu processo de desenvolvimento web.

Trabalhando com o Console em um Navegador

A maioria dos navegadores da web modernos que suportam HTML e XHTML baseados em padrões fornecerão acesso a um Console de Desenvolvedor, onde você pode trabalhar com JavaScript em uma interface semelhante a um terminal. Esta seção descreve como acessar o Console no Firefox e no Chrome.

Firefox

Para abrir o Console da Web no Firefox, navegue até o menu ☰ no canto superior direito ao lado da barra de endereço.

Selecione Mais Ferramentas. Com isso aberto, clique no item Ferramentas de Desenvolvedor da Web.

Ao fazer isso, uma bandeja se abrirá na parte inferior da janela do seu navegador:

Você também pode entrar no Console da Web com o atalho de teclado CTRL + SHIFT + K no Linux e Windows, ou COMMAND + OPTION + K no macOS.

Agora que você acessou o Console, pode começar a trabalhar dentro dele em JavaScript.

Chrome

Para abrir o Console JavaScript no Chrome, você pode navegar até o menu no canto superior direito da janela do seu navegador, indicado por três pontos verticais. A partir daí, você pode selecionar Mais Ferramentas e então Ferramentas do Desenvolvedor.

Isso abrirá um painel onde você pode clicar em Console na barra de menu superior para trazer o Console JavaScript se ele ainda não estiver destacado:

Você também pode acessar o Console JavaScript usando o atalho do teclado CTRL + SHIFT + J no Linux ou Windows, ou COMMAND + OPTION + J no macOS, que trará o foco imediatamente para o Console.

Agora que você acessou o Console, pode começar a trabalhar nele com JavaScript.

Trabalhando no Console

No Console, você pode digitar e executar código JavaScript.

Comece com um alerta que imprime a string Olá, Mundo!:

alert("Hello, World!");

Assim que pressionar a tecla ENTER após sua linha de JavaScript, um popup de alerta aparecerá em seu navegador:

Observe que o Console também imprimirá o resultado da avaliação de uma expressão, que será exibido como undefined quando a expressão não retornar explicitamente algo.

Em vez de ter alertas pop-up que você precisa clicar para fechar, você pode trabalhar com JavaScript registrando-o no Console com console.log.

Para imprimir a string Olá, mundo!, digite o seguinte no Console:

console.log("Hello, World!");

Dentro do console, você receberá a seguinte saída:

Output
Hello, World!

Você também pode realizar cálculos no Console:

console.log(2 + 6);

Output
8

Você também pode tentar cálculos mais complicados:

console.log(34348.2342343403285953845 * 4310.23409128534);

Output
148048930.17230788

Além disso, você pode trabalhar em várias linhas com variáveis:

let today = new Date();
console.log("Today's date is " + today);

Output
Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)

Se precisar modificar um comando que passou pelo Console, pode digitar a seta para cima (↑) no seu teclado para recuperar o comando anterior. Isso permitirá que você edite o comando e o envie novamente.

O Console JavaScript fornece um espaço para experimentar código JavaScript em tempo real, permitindo que você use um ambiente semelhante a uma interface de shell de terminal.

Trabalhando com um Arquivo HTML

Você pode trabalhar dentro do contexto de um arquivo HTML ou de uma página renderizada dinamicamente no Console. Isso lhe proporciona a oportunidade de experimentar código JavaScript dentro do contexto de HTML, CSS e JavaScript existentes.

Tenha em mente que assim que recarregar uma página após modificá-la dentro do Console, ela retornará ao seu estado anterior à modificação do documento. Certifique-se de salvar quaisquer alterações que deseja manter em outro lugar.

Pegue um documento HTML, como o seguinte arquivo index.html, para entender como usar o Console para modificá-lo. Em seu editor de texto favorito, crie um arquivo index.html e adicione as seguintes linhas de HTML:

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>

<body>

</body>

</html>

Se você salvar o arquivo HTML acima e carregá-lo no navegador de sua escolha, uma página em branco com o título de Data de Hoje será renderizada no navegador.

Abra o Console e comece a trabalhar com JavaScript para modificar a página. Comece usando JavaScript para inserir um cabeçalho no HTML.

let today = new Date();
document.body.innerHTML = "<h1>Today's date is " + today + "</h1>"

Você receberá a seguinte saída no Console:

Output
"<h1>Today's date is Wed May 18 2022 15:06:51 GMT-0500 (Central Daylight Time)</h1>"

Sua página deve ser semelhante ao seguinte:

Você pode modificar o estilo da página, como a cor de fundo:

document.body.style.backgroundColor = "lightblue";

Output
"lightblue"

Bem como a cor do texto na página:

document.body.style.color = "white";

Output
"white"

Agora sua página deve revelar algo semelhante a isto:

A partir daqui, você pode criar um elemento de parágrafo <p>:

let p = document.createElement("P");

Com este elemento criado, você pode então criar um nó de texto que pode ser adicionado ao parágrafo:

let t = document.createTextNode("Paragraph text.");

Adicione o nó de texto anexando-o à variável p:

p.appendChild(t);

E finalmente anexe p com seu parágrafo <p> elemento e nó de texto anexado ao documento:

document.body.appendChild(p);

Depois de concluir essas etapas, sua página HTML index.html incluirá os seguintes elementos:

O Console fornece um espaço para você experimentar modificando páginas HTML, mas é importante ter em mente que você não está alterando o próprio documento HTML quando faz coisas no Console. Uma vez que você recarregar a página, ela voltará a ser um documento em branco.

Entendendo Outras Ferramentas de Desenvolvimento

Dependendo das ferramentas de desenvolvimento do navegador que você usa, você poderá usar outras ferramentas para ajudar no seu fluxo de trabalho de desenvolvimento web.

DOM — Modelo de Objeto de Documento

Cada vez que uma página da web é carregada, o navegador cria um Modelo Objeto Documento, ou DOM, da página.

O DOM é uma árvore de Objetos e mostra os elementos HTML em uma visualização hierárquica. A Árvore DOM está disponível para visualização dentro do painel Inspector no Firefox ou no painel Elementos no Chrome.

Essas ferramentas permitem que você inspecione e edite elementos do DOM e também permitem que você identifique o HTML relacionado a um aspecto específico de uma página. O DOM pode informar se um trecho de texto ou imagem possui um atributo de ID e pode ajudá-lo a determinar qual é o valor desse atributo.

A página que você modificou acima teria uma visualização do DOM semelhante a esta antes de recarregar a página:

Além disso, você verá os estilos CSS em um painel lateral ou abaixo do painel DOM, permitindo que você veja quais estilos estão sendo empregados dentro do documento HTML ou através de uma folha de estilo CSS. Por exemplo, observe o que inclui o estilo do corpo da sua página de exemplo no Inspetor do Firefox:

Para editar ao vivo um nó do DOM, clique duas vezes em um elemento selecionado e faça as alterações. Por exemplo, você pode modificar uma tag <h1> e torná-la uma tag <h2>.

Assim como acontece com o Console, se você recarregar a página, retornará ao estado original salvo do documento HTML.

Rede

A guia Rede das ferramentas de desenvolvimento integradas do seu navegador pode monitorar e gravar solicitações de rede. Essa guia revela as solicitações de rede que o navegador faz, incluindo quando carrega uma página, quanto tempo cada solicitação leva e fornece os detalhes de cada uma dessas solicitações. Isso pode ser usado para otimizar o desempenho do carregamento da página e depurar problemas de solicitação.

Você pode usar a guia Rede junto com o Console JavaScript. Ou seja, você pode começar a depurar uma página com o Console e depois alternar para a guia Rede para ver a atividade de rede sem recarregar a página.

Para saber mais sobre como usar a guia Rede, você pode ler sobre como trabalhar com o Monitor de Rede do Firefox ou como começar a analisar o desempenho da Rede com as Ferramentas de Desenvolvedor do Chrome.

Design Responsivo

Quando os websites são responsivos, eles são projetados e desenvolvidos para aparecer e funcionar corretamente em uma variedade de dispositivos diferentes: telefones celulares, tablets, desktops e laptops. Tamanho da tela, densidade de pixels e suporte ao toque são fatores a serem considerados ao desenvolver para diferentes dispositivos. Como desenvolvedor web, é importante manter os princípios de design responsivo em mente para que seus websites estejam totalmente disponíveis para as pessoas, independentemente do dispositivo que elas utilizem.

Ambos o Firefox e o Chrome oferecem modos para garantir que os princípios de design responsivo recebam atenção enquanto você cria e desenvolve sites e aplicativos para a web. Esses modos irão simular diferentes dispositivos que você pode investigar e analisar como parte do seu processo de desenvolvimento.

Saiba mais sobre o Modo de Design Responsivo do Firefox ou o Modo de Dispositivo do Chrome para entender como aproveitar essas ferramentas para garantir um acesso mais equitativo às tecnologias web.

Conclusão

Este tutorial forneceu uma visão geral de como trabalhar com um Console JavaScript em navegadores web modernos, além de algumas informações sobre outras ferramentas de desenvolvimento que você pode usar em seu fluxo de trabalho.

Para saber mais sobre JavaScript, você pode ler sobre tipos de dados, ou as bibliotecas jQuery ou D3.