웹 SQL 데이터 보기
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
이 가이드에서는 Chrome DevTools를 사용하여 웹 SQL 데이터를 검사하는 방법을 보여줍니다.
웹 SQL 데이터 보기
Sources 탭을 클릭하여 Application 패널을 엽니다. Web SQL 섹션을 펼쳐 데이터베이스와 테이블을 확인합니다. 아래 그림 1에서 html5meetup은 데이터베이스이고 rooms는 테이블입니다.
그림 1. 웹 SQL 창
표를 클릭하면 해당 표의 데이터가 표시됩니다.
그림 2. rooms 웹 SQL 테이블의 데이터 보기
웹 SQL 데이터 수정
위의 그림 2와 같이 Web SQL 테이블을 볼 때는 Web SQL 데이터를 수정할 수 없습니다. 하지만 웹 SQL 콘솔에서 테이블을 편집하거나 삭제하는 문을 실행할 수 있습니다. 웹 SQL 쿼리 실행을 참고하세요.
웹 SQL 쿼리 실행
- 데이터베이스를 클릭하여 해당 데이터베이스의 콘솔을 엽니다.
웹 SQL 문을 입력한 다음 Enter 키를 눌러 실행합니다.
그림 3. 웹 SQL 콘솔을 사용하여 rooms 테이블에서 행을 삭제합니다.
웹 SQL 테이블 새로고침
DevTools는 테이블을 실시간으로 업데이트하지 않습니다. 테이블의 데이터를 업데이트하는 방법은 다음과 같습니다.
- 웹 SQL 테이블의 데이터 보기
- 새로고침 을 클릭합니다.
Web SQL 테이블에서 열 필터링
- 웹 SQL 테이블의 데이터 보기
표시되는 열 텍스트 상자를 사용하여 표시할 열을 지정합니다. 열 이름을 CSV 목록으로 제공합니다.
그림 4. 표시되는 열 텍스트 상자를 사용하여 room_name
및 last_updated
열만 표시
모든 웹 SQL 데이터 삭제
- Clear Storage 창을 엽니다.
웹 SQL 체크박스가 선택되어 있는지 확인합니다.
그림 5. 웹 SQL 체크박스
사이트 데이터 삭제를 클릭합니다.
그림 6. 사이트 데이터 삭제 버튼:
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2019-03-25(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2019-03-25(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2019-03-25(UTC)"],[],[]]