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 de rede.

O Console pode ser usado para registrar informações como parte do processo de desenvolvimento em 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 fornece a capacidade de escrever, gerenciar e monitorar JavaScript sob demanda.

Este tutorial abordará 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 shell de 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ços.

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

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

Você também pode acessar o 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 com JavaScript dentro dele.

Chrome

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

Isto 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 de teclado CTRL + SHIFT + J no Linux ou Windows, ou COMMAND + OPTION + J no macOS, o que trará o foco imediatamente para o Console.

Agora que você acessou o Console, você 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 você pressionar a tecla ENTER após a sua linha de JavaScript, um alerta aparecerá no seu navegador:

Observe que o Console também imprimirá o resultado da avaliação de uma expressão, que será lido 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 alguns 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 você 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 do JavaScript fornece a você 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 proporciona a você a oportunidade de experimentar código JavaScript dentro do contexto de HTML, CSS e JavaScript existentes.

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

Abra um documento HTML, como o seguinte arquivo index.html, para entender como usar o Console para modificá-lo. No 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 similar a isso:

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> 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ê recarrega a página, ela retornará a 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 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 de Objeto de Documento, ou DOM, da página.

O DOM é uma árvore de Objetos e mostra os elementos HTML dentro de uma visualização hierárquica. A Árvore DOM está disponível para visualização dentro do painel Inspector no Firefox ou do painel Elements 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 dizer se um trecho de texto ou imagem possui um atributo 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á 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 por meio de uma folha de estilo CSS. Por exemplo, observe o que o estilo do corpo da sua página de exemplo inclui 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 transformá-la em uma tag <h2>.

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

Rede

A guia Rede das ferramentas de desenvolvimento integradas do seu navegador pode monitorar e registrar solicitações de rede. Essa guia revela as solicitações de rede que o navegador faz, incluindo quando ele 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 sites são responsivos, eles são projetados e desenvolvidos para ter uma aparência e funcionamento adequados em uma variedade de dispositivos diferentes: telefones celulares, tablets, desktops e laptops. Tamanho de 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 sites estejam totalmente disponíveis para as pessoas, independentemente do dispositivo que elas tenham acesso.

Tanto o Firefox quanto 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 emulam 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 aprender 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 nos navegadores web modernos, bem como 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 os tipos de dados, ou as bibliotecas jQuery ou D3.