Web SQL データを表示する

Kayce Basques 氏
Kayce Basques

このガイドでは、Chrome DevTools を使用して Web SQL のデータを検査する方法を説明します。

Web SQL データを表示する

  1. [ソース] タブをクリックして、[アプリケーション] パネルを開きます。[Web SQL] セクションを開いて、データベースとテーブルを表示します。以下の図 1 では、html5meetup がデータベース、rooms がテーブルです。

    [Web SQL] ペイン。

    図 1. [Web SQL] ペイン。

  2. 表をクリックすると、その表のデータが表示されます。

    Web SQL テーブルのデータの表示。

    図 2. rooms Web SQL テーブルのデータの表示。

Web SQL データの編集

上の図 2 のように、Web SQL テーブルを表示している場合、Web SQL データは編集できません。ただし、テーブルを編集または削除するステートメントは Web SQL コンソールから実行できます。Web SQL クエリを実行するをご覧ください。

Web SQL クエリを実行する

  1. データベースをクリックすると、そのデータベースのコンソールが開きます。
  2. Web SQL ステートメントを入力し、Enter キーを押して実行します。

    Web SQL コンソールを使用してテーブルから行を削除する。

    図 3. Web SQL コンソールを使用して、rooms テーブルから行を削除する。

Web SQL テーブルを更新する

DevTools では、テーブルはリアルタイムで更新されません。テーブルのデータを更新するには:

  1. Web SQL テーブルのデータを表示する
  2. [更新] 更新 をクリックします。

Web SQL テーブルの列を除外する

  1. Web SQL テーブルのデータを表示する
  2. [使用可能な列] テキスト ボックスで、表示する列を指定します。列名は CSV リストとして指定します。

    [Visible Columns] テキスト ボックスを使用して、表示する列数を削減する。

    図 4. [Visible Columns] テキスト ボックスで room_name 列と last_updated 列のみを表示する。

すべての Web SQL データを削除する

  1. [ストレージを消去] ペインを開きます。
  2. [Web SQL] チェックボックスがオンになっていることを確認します。

    [Web SQL] チェックボックス。

    図 5. [Web SQL] チェックボックスをオンにします。

  3. [サイトデータを消去] をクリックします。

    [サイトデータを消去] ボタン。

    図 6. [サイトデータを消去] ボタン。