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?

Pac Man

Apenas no ano de 1982, o clássico Pac Man vendeu mais de 400 mil máquinas de fliperama em todo o mundo e recebeu cerca de 7 bilhões de moedas nestas máquinas. Saiba mais.

River Raid

O épico jogo River Raid, do Atari, foi desenhado e boa parte de sua programação foi feita por uma mulher: Carol Shaw, uma excelente programadora e funcionária da Activision em 1982. Saiba mais sobre a história deste incrível jogo, aqui.

PDP-1

O primeiro computador a conseguir rodar o jogo Spacewar era o PDP-1, que custava 120 mil dólares e pertencia ao Massachusetts Institute of Technology. O jogo demorou 200 horas para ser desenvolvido, em 1962, e seu criador foi um cientista da computação chamado Steve Russel.

Donkey Kong

A empresa Universal City Studios, detentora dos direitos autorais do King Kong, processou a Nintendo logo após o lançamento de Donkey Kong, pois segundo ela, o game violava os seus direitos. Ela venceu o processo e recebeu da Nintendo uma indenização de quase 2 milhões de dólares.

Música tema do Blanka

Até a primeira metade dos anos 90 era bastante comum que as trilhas sonoras dos games fossem criadas por mulheres e a responsável pelas músicas do clássico Street Fighter 2 foi Yoko Shimomura. Segundo ela, o ritmo "Tararirarin" da música tema do personagem Blanka, do Brasil, veio à sua cabeça enquanto ela estava no trem a caminho da Capcom.