Até agora, aprendemos a salvar dados usando localStorage, sessionStorage e cookies.

Mas surge uma pergunta essencial:

Onde esses dados ficam no navegador? E como podemos visualizá-los?

Nesta aula, vamos aprender a usar o **DevTools do navegador** para inspecionar, editar e limpar dados armazenados.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

  • Acessar o Application Storage no navegador
  • Visualizar localStorage, sessionStorage e cookies
  • Editar dados diretamente no DevTools
  • Limpar dados armazenados
  • Usar o DevTools como ferramenta de debug

O que são DevTools?

DevTools (Developer Tools) são ferramentas embutidas no navegador para desenvolvimento e debug.

Você pode abrir:

  • F12
  • Ctrl + Shift + I
  • Clique com o botão direito → Inspecionar

A aba Application

A aba Application é onde o navegador mostra todos os dados armazenados pelo site.

Ela funciona como um “painel de controle” do armazenamento.

Visualizando o localStorage

Dentro de Application → Storage → Local Storage:

  • Você vê todas as chaves
  • Os valores armazenados
  • Pode editar valores manualmente

Exemplo de dado salvo: 

 localStorage.setItem("tema", "escuro");

Esse valor aparecerá imediatamente no DevTools.

Visualizando o sessionStorage

Em Application → Storage → Session Storage:

  • Os dados existem apenas naquela aba
  • Ao fechar a aba, somem
Ótimo para entender o ciclo de vida da sessão.

Visualizando cookies

Em Application → Storage → Cookies:

  • Nome do cookie
  • Valor
  • Domínio
  • Expiração

Aqui você consegue ver claramente:

  • Quais cookies existem
  • Quais são enviados ao servidor

Editando dados pelo DevTools

Você pode clicar duas vezes em um valor e alterá-lo manualmente.

Isso é muito útil para:

  • Testar estados da aplicação
  • Simular preferências do usuário
  • Depurar bugs sem mexer no código

Limpando dados armazenados

No Application Storage, você pode:

  • Apagar um item específico
  • Limpar todo o storage

Ou via JavaScript: 

 localStorage.clear(); sessionStorage.clear();

Storage como ferramenta de debug

Um erro comum é esquecer que:

Dados antigos no storage podem causar bugs.

Sempre que algo parecer “estranho”, verifique:

  • localStorage
  • sessionStorage
  • Cookies

O Application Storage como mapa mental

  • localStorage → persistente
  • sessionStorage → temporário
  • Cookies → comunicação com servidor

Ver isso visualmente ajuda muito a fixar o conceito.

Todo desenvolvedor frontend vive no DevTools.

Resumo da aula para nunca mais esquecer

  • DevTools mostram todo o armazenamento do site
  • A aba Application centraliza os dados
  • É possível editar e apagar valores
  • Storage é parte essencial do debug
  • Ver dados ajuda a entender aplicações

Na próxima aula, vamos falar sobre Offline Webapps — como aplicações podem funcionar mesmo sem internet.

HARDWARE

Entendendo o seu computador

O que há dentro do meu computador?

Existem alguns componentes fundamentais presentes dentro do seu computador e é muito importante que você conheça um pouco sobre eles, seja para argumentar com algum vendedor durante a compra de um novo PC ou para identificar alguma atitude desleal de algum técnico que esteja te passando um orçamento para reparo. Na seção Raio-X aqui do Contém Bits você pode conhecer e entender mais detalhadamente sobre cada componente, ou também pode clicar abaixo no componente que deseja, para conhecê-lo melhor.

  • Gabinetes

  • Placas-Mãe

  • Processadores

  • Memória

  • Fontes

  • Drives Ópticos

  • Discos Rígidos

  • SSD

  • Placas de Som

  • Placas de Vídeo

Você Sabia?

Ultima Online

Criar um jogo é muito mais complexo do que parece. São milhares, às vezes, milhões de linhas de código. Isso não é exagero! Apenas o jogo Ultima Online possui 6.006.313 linhas de programação, totalizando 25.103.295 palavras

Máquina de Pascal

A Máquina de Pascal, criada em 1642 pelo filósofo, físico e matemático francês Blaise Pascal, é reconhecida como o primeiro computador do mundo e ele foi criado com o objetivo de calcular impostos. Saiba mais.

Space Invaders

O título Space Invaders, lançado em 1980, fez tanto sucesso em todo o mundo que as pessoas compravam o console Atari apenas para poderem jogá-lo em casa. Saiba mais sobre este incrível título clicando aqui.

Civilization

A empresa Take-Two pagou à Infogrames mais de 22 milhões de dólares pelos direitos de Civilization, em novembro de 1994. Ainda sobre este título, Sid Meier, um dos seus fundadores, é o profissional da área dos games mais premiado em todo o mundo.

Nintendo Entertainment System

O console Nintendo Entertainment System (NES), da Nintendo, detém o recorde de videogame mais clonado em todo o mundo. Já foram catalogados mais de 300 aparelhos diferentes capazes de reproduzir seus jogos! Saiba mais sobre ele aqui.