Chrome DevTools는 Google Chrome 브라우저에 직접 내장 된 웹 개발자 도구 모음입니다. 웹 개발자에게 매우 유용 할 수 있습니다.

Chrome DevTools를 사용하여 웹 개발자로서 생산성을 향상 시키는 방법을 알려주는 단기 집중 과정을 방금 게시했습니다. 웹 페이지 문제 해결 및 라이브 편집과 같은 작업을 수행하는 방법을 배웁니다.

Nabheet Madan이이 과정을 만들었습니다. 그는 매우 경험이 풍부한 개발자이며 Chome DevTools를 개발 워크 플로에 통합하는 방법을 가르치는 훌륭한 일을 합니다.

이 과정에서 다루는 섹션은 다음과 같습니다.

• Getting comfortable with the tool
• Elements
• Source
• Console
• Network
• Performance
• Application
• Security
• Memory
• Lighthouse

개발자 도구에 대한 일반적인 개요를 확인한 후 요소 탭에 대해 배웁니다. 이 탭에서 스타일과 HTML을 수정하여 웹 페이지와 상호 작용할 수 있습니다.

다음으로 소스 탭을 사용하여 Javascript 문제를 해결하는 방법을 배웁니다. 다양한 유형의 중단 점, 소스 코드 수정 옵션, 재정의 등을 학습합니다. 그 후에 콘솔에 대해 배웁니다. 콘솔은 코드를 시험해 볼 수 있는 브라우저의 REPL과 같습니다.

네트워크 및 애플리케이션 탭을 사용하여 서버 측 요청 및 로컬 스토리지 문제를 해결하는 방법을 배웁니다. 마지막으로 Lighthouse, 성능, 메모리 및 보안 탭을 사용하여 성능과 보안을 개선하는 방법을 배웁니다.

아래 또는 freeCodeCamp.org YouTube 채널 (1 시간 시청)에서 전체 과정을 시청할 수 있습니다.

https://www.freecodecamp.org/news/learn-how-to-use-the-chrome-devtools-to-troubleshoot-websites/