도구
Chrome DevTools 빠른 참조
Chrome DevTools 빠른 참조용 인쇄 가능한 치트시트로, 빠른 조회와 학습, 책상 옆 참고용으로 정리되었습니다
미리보기
이 치트시트에 포함된 내용
- Elements
- Console
- Network
- Sources
- Performance
- Application
- Lighthouse
- 단축키
- 모바일 디버그
- 일반 패턴
검사 & 편집
Right-click -> Inspect | 요소의 Elements 패널 열기 |
Double-click tag/attribute | HTML 인라인 편집 |
Delete key | 선택한 노드 삭제 |
Ctrl+Z | DOM 변경 실행 취소 |
H key | 선택한 요소 표시/숨기기 토글 |
Drag node | DOM 트리에서 요소 이동 |
Styles 패널
element.style {} | 요소에 인라인 스타일 추가 |
Click property value | CSS 값 라이브 편집 |
Checkbox next to rule | CSS 속성 켜기/끄기 |
:hov button | 요소 의사 클래스 강제 적용 (:hover, :focus) |
.cls button | CSS 클래스 추가/제거 |
Color swatch | 색상 선택기 열기 |
Computed tab | 최종 계산된 CSS 값 보기 |
모든 섹션이 포함된 인쇄용 치트시트 다운로드
PDF 다운로드다운로드
