Ver dados do Web SQL

Kayce Basques
Kayce Basques

Este guia mostra como usar o Chrome DevTools para inspecionar dados do Web SQL.

Ver dados do Web SQL

  1. Clique na guia Sources para abrir o painel Application. Expanda a seção Web SQL para ver bancos de dados e tabelas. Na Figura 1, abaixo de html5meetup, há um banco de dados e rooms é uma tabela.

    Painel SQL da Web.

    Figura 1. Painel SQL da Web.

  2. Clique em uma tabela para visualizar os dados dela.

    Visualizar os dados de uma tabela do Web SQL.

    Figura 2. Visualizar os dados da tabela rooms do Web SQL.

Editar dados do Web SQL

Não é possível editar dados do Web SQL ao visualizar uma tabela do Web SQL, como na Figura 2 acima. No entanto, é possível executar instruções do console do Web SQL que editam ou excluem tabelas. Consulte Executar consultas Web SQL.

Executar consultas na Web SQL

  1. Clique em um banco de dados para abrir um console para ele.
  2. Digite uma instrução SQL da Web e pressione Enter para executá-la.

    Como usar o Console do SQL da Web para excluir uma linha de uma tabela.

    Figura 3. Usando o Console do SQL da Web para excluir uma linha da tabela rooms.

Atualizar uma tabela do Web SQL

O DevTools não atualiza tabelas em tempo real. Para atualizar os dados em uma tabela:

  1. Veja os dados de uma tabela do Web SQL.
  2. Clique em Atualizar Atualizar.

Filtrar colunas em uma tabela do Web SQL

  1. Veja os dados de uma tabela do Web SQL.
  2. Use a caixa de texto Colunas visíveis para especificar quais colunas você quer mostrar. Forneça os nomes das colunas como uma lista CSV.

    Usar a caixa de texto "Colunas visíveis" para reduzir o número de colunas exibidas.

    Figura 4. Use a caixa de texto Colunas visíveis para mostrar apenas as colunas room_name e last_updated.

Excluir todos os dados do Web SQL

  1. Abra o painel Limpar armazenamento.
  2. Verifique se a caixa de seleção Web SQL está ativada.

    A caixa de seleção SQL da Web.

    Figura 5. A caixa de seleção Web SQL.

  3. Clique em Limpar dados do site.

    O botão "Limpar dados do site".

    Figura 6. O botão Limpar dados do site.