このガイドでは、Chrome DevTools を使用して Web SQL データを検査する方法について説明します。
ウェブ SQL データを表示する
[ソース] タブをクリックして [アプリケーション] パネルを開きます。[Web SQL] セクションを開いて、データベースとテーブルを表示します。下の図 1 では、html5meetup がデータベースで、rooms がテーブルです。
![[Web SQL] ペイン。](https://developer.chrome.com/static/docs/devtools/storage/websql/image/the-web-sql-pane-2c792de609ba8.png?authuser=3&hl=ja)
図 1. [Web SQL] ペイン。
テーブルをクリックして、そのテーブルのデータを表示します。

図 2. rooms Web SQL テーブルのデータを表示しています。
ウェブ 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 リストとして指定します。
![[表示列] テキスト ボックスを使用して、表示される列の数を減らす。](https://developer.chrome.com/static/docs/devtools/storage/websql/image/using-visible-columns-te-3201170fac912.png?authuser=3&hl=ja)
図 4. [Visible Columns] テキスト ボックスを使用して、
room_name列とlast_updated列のみを表示します。
Web SQL のデータをすべて削除する
- [ストレージの消去] ペインを開きます。
[Web SQL] チェックボックスがオンになっていることを確認します。

図 5. [Web SQL] チェックボックス。
[サイトデータを消去する] をクリックします。
![[サイトデータを消去] ボタン。](https://developer.chrome.com/static/docs/devtools/storage/websql/image/the-clear-site-data-butto-112c9d28a24d3.png?authuser=3&hl=ja)
図 6. [サイトデータを消去] ボタン。