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?

Ábaco

O ábaco é o dispositivo de cálculo mais antigo construído e conhecido pelo homem. Suas formas mais primitivas datam de 400 a.C. e eles foram encontrados na China e na Babilônia. Para saber mais sobre a história dos computadores, clique aqui.

Final Fantasy X

O jogo Final Fantasy X para o Sony Playstation 2 vendeu, apenas no dia do seu lançamento, 1.455.732 cópias, estabelecendo um recorde de vendagem para as primeiras 24 horas de um game. Méritos da SquareSoft, que desenvolveu um excelente produto!

Tetris

O título Tetris detém o recorde de jogo mais adaptado de todos os tempos. No total foram mais de 60 plataformas diferentes que receberam alguma versão do quebra-cabeças criado por Alexey Pajitnov. Conheça mais sobre este incrível jogo clicando aqui.

Duck Hunt

Ao completar o nível 99 do jogo Duck Hunt, para Nintendo, o jogo retorna ao primeiro nível, mas um bug impede que se acerte os patos neste recomeço. Este é um exemplo do que é chamado no mundo dos games de "Kill Screen".

Final Fantasy

O famoso título Final Fantasy, da Square Enix, tem este nome exatamente porque se tratava da última esperança da empresa, que estava à beira da falência quando o lançou. Clique aqui e conheça detalhes dessa história.