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