이 가이드에서는 Chrome DevTools를 사용하여 웹 SQL 데이터를 검사하는 방법을 설명합니다.
웹 SQL 데이터 보기
소스 탭을 클릭하여 애플리케이션 패널을 엽니다. 웹 SQL 섹션을 펼쳐 데이터베이스와 테이블을 확인합니다. 아래 그림 1에서 html5meetup은 데이터베이스이고 rooms는 테이블입니다.
그림 1. 웹 SQL 창
테이블을 클릭하여 해당 테이블의 데이터를 확인합니다.
그림 2. 객실 웹 SQL 테이블의 데이터를 봅니다.
웹 SQL 데이터 수정
위의 그림 2와 같이 웹 SQL 테이블을 볼 때는 웹 SQL 데이터를 수정할 수 없습니다. 하지만 테이블을 수정하거나 삭제하는 문을 웹 SQL 콘솔에서 실행할 수 있습니다. 웹 SQL 쿼리 실행을 참고하세요.
웹 SQL 쿼리 실행
- 데이터베이스를 클릭하여 해당 데이터베이스의 콘솔을 엽니다.
웹 SQL 문을 입력한 다음 Enter 키를 눌러 실행합니다.
그림 3. 웹 SQL 콘솔을 사용하여 rooms 테이블에서 행을 삭제합니다.
Web SQL 테이블 새로고침
DevTools는 테이블을 실시간으로 업데이트하지 않습니다. 테이블의 데이터를 업데이트하려면 다음 단계를 따르세요.
- Web SQL 테이블의 데이터 보기
- 새로고침
을 클릭합니다.
Web SQL 테이블에서 열 필터링
- Web SQL 테이블의 데이터 보기
표시되는 열 입력란을 사용하여 표시할 열을 지정합니다. 열 이름을 CSV 목록으로 제공합니다.
그림 4. 표시할 열 입력란을 사용하여
room_name
및last_updated
열만 표시합니다.
모든 Web SQL 데이터 삭제
- 저장용량 지우기 창을 엽니다.
웹 SQL 체크박스가 사용 설정되어 있는지 확인합니다.
그림 5. Web SQL 체크박스
사이트 데이터 삭제를 클릭합니다.
그림 6. 사이트 데이터 삭제 버튼