このガイドでは、Chrome DevTools を使用して Web SQL のデータを検査する方法を説明します。
Web SQL データを表示する
[ソース] タブをクリックして、[アプリケーション] パネルを開きます。[Web SQL] セクションを開いて、データベースとテーブルを表示します。以下の図 1 では、html5meetup がデータベース、rooms がテーブルです。
図 1. [Web SQL] ペイン。
表をクリックすると、その表のデータが表示されます。
図 2. rooms Web SQL テーブルのデータの表示。
Web SQL データの編集
上の図 2 のように、Web SQL テーブルを表示している場合、Web SQL データは編集できません。ただし、テーブルを編集または削除するステートメントは Web SQL コンソールから実行できます。Web SQL クエリを実行するをご覧ください。
Web SQL クエリを実行する
- データベースをクリックすると、そのデータベースのコンソールが開きます。
Web SQL ステートメントを入力し、Enter キーを押して実行します。
図 3. Web SQL コンソールを使用して、rooms テーブルから行を削除する。
Web SQL テーブルを更新する
DevTools では、テーブルはリアルタイムで更新されません。テーブルのデータを更新するには:
- Web SQL テーブルのデータを表示する。
- [更新] をクリックします。
Web SQL テーブルの列を除外する
- Web SQL テーブルのデータを表示する。
[使用可能な列] テキスト ボックスで、表示する列を指定します。列名は CSV リストとして指定します。
図 4. [Visible Columns] テキスト ボックスで
room_name
列とlast_updated
列のみを表示する。
すべての Web SQL データを削除する
- [ストレージを消去] ペインを開きます。
[Web SQL] チェックボックスがオンになっていることを確認します。
図 5. [Web SQL] チェックボックスをオンにします。
[サイトデータを消去] をクリックします。
図 6. [サイトデータを消去] ボタン。