Inspetor de Armazenamento

O Inspetor de Armazenamento é novo no Firefox 34.

Inspetor de Armazenamento vem desabilitado por padr√£o. Habilite-o nas Configura√ß√Ķes de Ferramentas do Desenvolvedor.

O Inspetor de Armazenamento permite a você inspecionar diversos tipos de armazenamento que uma página na web pode usar. Atualmente ele pode ser usado para inspecionar os seguintes tipos de armazenamento:

  • Cookies - Todos os cookies criados pela p√°gina ou quaisquer iframes dentro da p√°gina. Cookies criados como parte de uma resposta de chamada de rede tamb√©m s√£o listados, mas apenas para chamadas que aconteceram enquanto a ferramenta estava aberta.
  • Local Storage - Todos os itens de armazenamentos locais criados pela p√°gina ou quaisquer iframes dentro da p√°gina.
  • Session Storage - Todas os itens de armazenamento de sess√£o criados pela p√°gina ou quaisquer iframes dentro da p√°gina.
  • IndexedDB - Todos os bancos de dados IndexedDB criados pela p√°gina ou quaisquer iframes dentro da p√°gina, seus Object Stores e os itens armazenados nestes Object Stores.

Pelo tempo presente, o Inspetor de Armazenamento fornece apenas uma vis√£o read-only do armazenamento. Mas estamos trabalhando para permitir a voc√™ editar o conte√ļdo do armazenamento em futuros lan√ßamentos.

Abrindo o Inspetor de Armazenamento

Uma vez habilitado, você poderá abrir o Inspetor de Armazenamento selecionando "Inspetor de Armazenamento" a partir do submenu do Desenvolvedor Web no Painel de Menu do Firefox (ou menu de Ferramentas se você exibir a barra de menu ou estiver no Mac OS X), or pressionando o atalho de teclado Shift + F9.

Caixa de Ferramentas vai aparecer na parte de baixo da janela do navegador, com o Inspetor de Armazenamento ativado. Ele é chamado apenas de "Armazenamento" na Caixa de Ferramentas do Desenvolvedor.

Interface de Usu√°rio do Inspetor de Armazenamento

A UI do Inspetor de Armazenamento é dividida em três componentes principais:

√Ārvore de armazenamento

A √°rvore de armazenamento lista todos os tipos de armazenamentos que o Inspetor de Armazenamento pode inspecionar. Para cada tipo, ele possui uma lista de todas as poss√≠veis origens dispon√≠veis. Uma origem √© um dom√≠nio ou um hostname para diferentes tipos de armazenamento. Para cookies, o protocolo n√£o diferencia a origem. Para indexedDB ou armazenamento local uma origem √© uma combina√ß√£o de protocolo + hostname. Por exemplo, "http://mozilla.org" e "https://mozilla.org" s√£o duas origens diferentes ent√£o itens de armazenamento local n√£o podem ser compartilhados entre eles.

Enquanto cookies, armazenamento local e itens de armazenamento de sess√£o s√£o diretamente associados a uma origem, para indexedDB a hierarquia tem mais n√≠veis. Todos os itens de indexedDB s√£o associados com um objeto de armazenamento que √© ent√£o associado a um banco de dados, e finalmente um banco de dados √© associado a uma origem.

Voc√™ pode clicar em cada item da √°rvore para expandir ou contrair seus filhos. A √°rvore funciona em tempo real, ent√£o se um novo objeto for adicionado (adicionando um iframe, por exemplo), ele vai ser adicionado para cada tipo de armazenamento automaticamente. Clicar nos itens da √°rvore vai mudar os dados de na tabela √† direita. Por exemplo, clicar em uma origem que √© uma filha do tipo armazemento de Cookies  mostrar√° todos os cookies pertencentes √†quele dom√≠nio.

Widget tabela

O widget tabela √© um local onde todos os itens correspondentes ao item da √°rvore selecionada (seja uma origem, ou banco de dados) s√£o listados. Dependendo do tipo de armazenamento  e do item da √°rvore, o n√ļmero de colunas pode variar.

Todas as colunas no Widget Tabela são redimencionáveis e podem ser ocultados via menu de contexto no cabeçalho da tabela até que apenas duas colunas estejam visíveis.

Cookies

When you select an origin inside the Cookies storage type from the storage tree, all the cookies present for that origin will be listed in the table. The table then has the following columns:

  • Name - The name of the cookie
  • Path - The path property of the cookie
  • Domain - The domain of the cookie
  • Expires On - The time when the cookie will expire. If the cookie is a session cookie, the value of this column will be "Session"
  • Created On - When the cookie was created
  • Last Accessed On - When the cookie was last read
  • Value - The value of the cookie
  • isDomain - Is this cookie a domain cookie: that is, the domain value starts with a "."
  • isSecure - Is this cookie a secure cookie
  • isHttpOnly - Is this cookie http only.

Local storage / Session storage

When an origin corresponding to local storage or session storage is selected, the table will list the name and value of all the items corresponding to local storage or session storage.

IndexedDB origin

When you select an origin inside the Indexed DB storage type in the storage tree, the table lists the details of all the databases present for that origin. Databases have the following details:

  • Database Name - The name of the database
  • Origin - Its origin
  • Version - The database version
  • Object Stores - Number of object stores in the database

IndexedDB Database

When an IndexedDB database is selected in the storage tree, details about all the object stores is listed in the table. Any object store has the following details:

  • Object Store Name - The name of the object store
  • Key - The keyPath property of the object store.
  • Auto Increment - Whether auto increment is enabled
  • Indexes - Array of indexes present in the object store as shown below

IndexedDB object store

When an object store is selected in the storage tree, all the items in that object store are listed in the table. All items have a key and a value associated with them.

Quando você seleciona qualquer linha na tabela de ferramentas de armazenamento, a sidebar é mostrada com detalhes sobre a linha selecionada. Se um cookie é selecionado, a sidebar listará todos os detalhes sobre o cookie selecionado.

A sidebar pode analisar o valor do cookie, um ítem do armazenamento local ou um ítem do IndexedDB e covertê-lo em um objeto significante ao invés de apenas uma string. Por exemplo, um JSON convertido como '{"foo": "bar"}' é mostrado como a origem JSON {foo: "bar"}, o valor da chave separado como 1~2~3~4 é mostrado como um array [1, 2, 3, 4]. Abaixo há algumas telas mostrando exemplos de diferentes tipos de valores analisados:

Um JSON convertido em string sendo mostrado como o JSON original na seção parsed value da sidebar

Uma string contendo um par chave-valor sendo mostrada como JSON na seção parsed value da sidebar

Uma string contendo chave e valor separados sendo mostrada como um Array na seção parsed value da sidebar