OKdevTV

Chrome DevTools 개발도구 기본 사용법

• https://developers.google.com/web/tools/chrome-devtools
• Inspect(요소 검사) 메뉴로 열기
• Control+Shift+C, Control+Shift+J 단축키

Elements

• 화면 요소 검사
• CSS Style
• 이벤트 리스너

Console

• JavaScript 공간
• JS 함수 내용 확인 가능

Sources

• 실제 서버에서 가져온 소스
• 자바스크립트 디버깅 기능
  • https://okdevtv.com/mib/debug

Network

• 네트워크 상황 기록

Performance

• 부하와 실행시 성능 측정

Memory

• 메모리와 CPU 프로파일링 가능

Application

• 저장된 내용 확인
• 쿠키, 로컬스토리지 등

Security

• 페이지 보안 확인
• https 인증서

Lighthouse

• 페이지 성능 진단

기타

• Esc키로 하단에 Console 패널 토글

What Else?

-50% 할인쿠폰: 15108-f2af1e086101