DevTools 주요 기능 정리와 Console 패널 실습

Tools: Browser DevTools | Dreamhack

로그인 | Dreamhack

---

개발자 도구(DevTools)란?

• 웹 브라우저에 내장된 도구 모음으로, 웹 개발자가 웹 페이지의 디버깅, 검사, 수정, 프로파일링 등을 실시간으로 수행할 수 있도록 도와주는 강력한 도구
• 주요 기능
  • Elements (요소): 웹 페이지의 HTML(DOM 구조)을 확인하고, 실시간으로 CSS 스타일을 검사하고 수정할 수 있음. 레이아웃과 디자인 문제를 디버깅하는 데 핵심적.
  • Console (콘솔): JavaScript 코드를 실행하거나, console.log() 등으로 출력된 메시지, 경고, 에러 등을 확인하여 JavaScript 관련 문제를 디버깅할 때 사용.
  • Sources (소스): 페이지에 로드된 모든 소스 파일 (HTML, CSS, JavaScript 등)을 확인하고, 중단점(Breakpoint)을 설정하여 JavaScript 코드를 단계별로 실행하며 디버깅 가능하게 함.
  • Network (네트워크): 웹 페이지가 로드될 때 발생하는 모든 네트워크 요청 (API 호출, 이미지, CSS, JS 파일 로드 등)의 상태, 크기, 소요 시간 등을 분석하여 성능 문제를 진단함.
  • Application (애플리케이션): 로컬 저장소(LocalStorage), 세션 저장소(SessionStorage), 쿠키(Cookies) 등 브라우저 저장소의 데이터를 확인하고 수정할 수 있음.

 

Console 패널 실습

실습에는 워게임 풀이 때 사용한 사이트 이용하겠습니다

[드림핵] devtools-sources

[드림핵] devtools-sources

 

f12로 devtool 접속

 

간단한 자바 코드 입력해서 출력이 잘 반영되는지 확인해봤다

 

배경색을 회색으로 바꾸는 코드 콘솔창에 입력

배경색 바뀐모습