10 Chrome DevTools Tricks You Didn't Know!
- 디자인 모드 활성화: 페이지 요소를 직접 선택하지 않고도 웹 페이지를 실시간으로 편집할 수 있습니다. ✏️
- DevTools 단축키 (Ctrl+Shift+I): 마우스 우클릭이 비활성화된 페이지에서도 개발자 도구를 빠르게 열 수 있습니다. ⌨️
- 로컬 오버라이드: 네트워크 응답(API 데이터)을 영구적으로 변경하여 페이지를 새로고침해도 수정 사항이 유지되도록 할 수 있습니다. 🔄
- 소스 패널 (Ctrl+P): 웹 페이지의 CSS, JavaScript 파일 등을 빠르게 검색하고 열 수 있습니다. 🔍
- 명령 팔레트 (Ctrl+Shift+P): 다양한 개발자 도구 명령을 실행하여 효율적으로 탐색할 수 있습니다. 🚀
- '페이지 포커스 에뮬레이트' 활성화: 드롭다운 메뉴처럼 포커스를 잃으면 사라지는 요소를 고정시켜 쉽게 검사할 수 있습니다. 👁️
- 노드 스크린샷 캡처: 전체 페이지 또는 특정 HTML 요소의 스크린샷을 개발자 도구에서 직접 찍을 수 있습니다. 📸
- 애니메이션 편집기: 웹 페이지의 애니메이션 시작, 지속 시간, 속도, 이징 등을 시각적으로 조정하고 CSS 코드를 복사할 수 있습니다. 🎬
- 네트워크 스로틀링 및 캐시 비활성화: 느린 네트워크 환경(예: 3G)을 시뮬레이션하고 캐시 없이 웹 앱 성능을 테스트할 수 있습니다. 📶
- 콘솔 로그에 이미지 표시:
console.log에 CSS background-image 속성을 사용하여 이미지를 출력할 수 있습니다. 🖼️
- AI 어시스턴트: 개발자 도구 내에서 AI와 대화하며 파일, CSS 스타일, 성능 등에 대한 디버깅 지원을 받을 수 있습니다. 🤖