웹 SQL 데이터 보기

케이스 바스크
케이스 바스크
Twitter GitHub Glitch

이 가이드에서는 Chrome DevTools를 사용하여 웹 SQL 데이터를 검사하는 방법을 설명합니다.

웹 SQL 데이터 보기

  1. Sources(소스) 탭을 클릭하여 Application(애플리케이션) 패널을 엽니다. Web SQL 섹션을 펼쳐 데이터베이스 및 테이블을 확인합니다. 아래 그림 1에서 html5meetup은 데이터베이스이고 rooms는 테이블입니다.

    Web SQL 창

    그림 1. Web SQL 창

  2. 표를 클릭하면 해당 표의 데이터를 볼 수 있습니다.

    Web SQL 테이블의 데이터를 봅니다.

    그림 2. rooms 웹 SQL 테이블의 데이터를 봅니다.

웹 SQL 데이터 수정

위의 그림 2와 같이 웹 SQL 테이블을 볼 때는 웹 SQL 데이터를 수정할 수 없습니다. 하지만 웹 SQL 콘솔에서 테이블을 편집하거나 삭제하는 문을 실행할 수 있습니다. 웹 SQL 쿼리 실행을 참조하세요.

웹 SQL 쿼리 실행

  1. 데이터베이스를 클릭하면 해당 데이터베이스의 콘솔이 열립니다.

  2. 웹 SQL 문을 입력한 다음 Enter 키를 눌러 실행합니다.

    웹 SQL 콘솔을 사용하여 테이블에서 행 삭제

    그림 3. 웹 SQL 콘솔을 사용하여 rooms 테이블에서 행을 삭제합니다.

웹 SQL 표 새로고침

DevTools는 테이블을 실시간으로 업데이트하지 않습니다. 테이블의 데이터를 업데이트하려면 다음 안내를 따르세요.

  1. 웹 SQL 테이블의 데이터 보기
  2. Refresh 새로고침를 클릭합니다.

웹 SQL 테이블에서 열 필터링

  1. 웹 SQL 테이블의 데이터 보기

  2. 표시되는 열 텍스트 상자를 사용하여 표시할 열을 지정합니다. 열 이름을 CSV 목록으로 제공합니다.

    표시되는 열 텍스트 상자를 사용하여 표시되는 열의 수를 줄입니다.

    그림 4. 표시되는 열 텍스트 상자를 사용하여 room_name 및 last_updated 열만 표시합니다.

모든 웹 SQL 데이터 삭제

  1. Clear Storage 창을 엽니다.

  2. 웹 SQL 체크박스가 사용 설정되어 있는지 확인합니다.

    웹 SQL 체크박스

    그림 5. 웹 SQL 체크박스

  3. 사이트 데이터 삭제를 클릭합니다.

    사이트 데이터 삭제 버튼

    그림 6. 사이트 데이터 삭제 버튼