Dale St. Marthe
Chrome DevTools는 웹 애플리케이션을 심층적으로 검사하고 개선하는 데 도움이 되는 강력한 도구를 많이 제공합니다.
다음 동영상에서는 검사 버튼과 기기 모드를 비롯하여 요소, 콘솔, 소스, 네트워크 패널 등 6가지 기본 도구를 간략히 설명합니다. 또한 스타일 탭과 DevTools를 맞춤설정하는 방법을 알아봅니다.
동영상을 시청하여 다음 작업을 수행하는 방법을 알아보세요.
- DOM 요소 검사 및 수정
- 상자 모델을 사용하여 요소의 크기를 시각화하고 변경합니다.
- 휴대기기에서 페이지가 어떻게 표시되는지 확인합니다.
- 콘솔 패널을 사용하여 JavaScript 오류를 식별합니다.
- 소스 패널에서 breakpoints을 사용하여 JavaScript를 디버그합니다.
- 네트워크 패널에서 네트워크 활동을 분석하고 필터링합니다.
- 연결 속도를 느리게 시뮬레이션합니다.
- DevTools 맞춤설정
자세한 개요는 DevTools 개요를 참고하세요.