Tools:Browser DevTools

해당 포스팅은 https://dreamhack.io/lecture/roadmaps/1?obj=3를 참고하여 작성하였으며 공부 목적으로 작성하였습니다.

개발자 도구

---

크롬 브라우저에서 F12를 누를 경우 개발자 도구로 진입할 수 있다. 개발자도구 레이아웃에 대한 구체적인 설명은 다음과 같다.

개발자 도구(F12)

1️⃣	요소 검사(Inspect) 및 디바이스 툴바(Device Toolbar)
2️⃣	기능을 선택하는 패널로 다음과 같은 기능들을 사용할 수 있다. • Elements: 페이지를 구성하는 HTML 검사 • Console: 자바 스크립트를 실행하고 결과를 확인 • Sources: HTML, CSS, JS 등 페이지를 구성하는 리소스를 확인하고 디버깅 가능 • Network: 서버와 오가는 데이터를 확인 가능 • Performance • Memory • Application: 쿠키를 포함하여 웹 어플리케이션과 관련된 데이터를 확인가능 • Security • Lighthouse
3️⃣	현재 페이지에서 발생한 에러 및 경고 메시지
4️⃣	개발자 도구 설정

[요소 검사]

요소 검사 시 다음과 같은 특정 요소에 대한 개괄적인 정보를 확인할 수 있으며 그에 해당하는 코드 또한 쉽게 찾을 수 있다.

요소 검사

[디바이스 툴바]

디바이스 툴바를 활용할 경우 현재 브라우저의 화면 비율 및 User- Agent를 원하는 값으로 변경할 수 있다.

디바이스 툴바

[Elements]

위에서 설명한 것과 동일하게 현재 페이지를 구성하는 HTML 코드를 읽을 수 있다.

Elements

코드 중 수정하고 싶은 부분이 존재한다면 F2를 누르거나 더블 클릭하여 수정할 수 있다.

[Console]

콘솔은 프론트엔드의 자바스크립트 코드에서 발생한 각종 메세지를 출력하고, 이용자가 입력한 자바스크립트 코드 를 실행해주는 도구이다.

만약 특정 변수를 출력하고 싶을 경우 console.log를 사용해서 출력할 수 있다.

[Sources]

현재 페이지를 구성하는 웹 리소스들을 확인할 수 있다.

[Sources:Debug]

Sources 에서는 BP설정 및 디버깅이 가능하기 때문에 다음과 같이 if (name == 'dreamhack') 구문에 BP를 걸고 값을 입력할 시 할당된 변수의 값을 확인할 수 있다.

Sources:Debug(출처 : dreamhack)

[Network]

서버와 오가는 데이터를 확인할 수 있다.

Network

Secret browsing mode

시크릿 모드로 새로운 브라우저 세션을 오픈할 경우 방문 기록, 쿠키 및 사이트 데이터, 양식에 입력한 정보, 웹사이트에 부여된 권한과 같은 항목이 저장되지 않는다.

Tools:Browser DevTools

Uploaded by N2T