[intro] HTML - (Ctrl+U: 페이지 소스보기 HTML) vs (F12키: 개발자도구 요소검사 HTML) 차이점 ★★★★★ ※ 개발자모드에서 새로고침할 때 자동으로 element탭에서 sources탭으로 이동하는 경우

1. 소스보기 (Ctrl + U)
2. 개발자도구 (F12)
3. 소스보기 (Ctrl + U) vs. 개발자도구 (F12)
4. F12키 개발자모드에서 새로고침 시, Elements탭에서 Sources탭으로 자동 이동하는 경우

소스보기 (Ctrl + U)

 

서버에서 받은 최초 HTML

(브라우저 로딩 후, JS에 의해 추가/제거/변경 가능.)

 

개발자도구 (F12)

 

JS로 가공한 HTML

 

소스보기 (Ctrl + U) vs. 개발자도구 (F12)

[소스보기엔 있는데 개발자도구엔 없는 경우]

 

JS로 일부 제거된 경우에 해당.

 

---

[소스보기엔 없는데 개발자도구엔 있는 경우]

 

JS로 일부 추가된 경우에 해당.

 

F12키 개발자모드에서 새로고침 시, Elements탭에서 Sources탭으로 자동 이동하는 경우

F12 개발자 도구를 사용하여 웹 페이지를 개발하는 경우, 새로고침할 때 Element 탭에서 Source 탭으로 자동 이동되는 경우는 다음과 같음:

1. 웹 페이지의 구조 또는 속성이 변경될 때
2. 자바스크립트 코드가 실행될 때, 예를 들어 콘솔에서 console.log() 메소드를 호출할 때
3. 웹 페이지에서 디버깅할 때, 중단점이 설정되거나 브레이크포인트를 사용할 때

 

이 기능은 개발자가 웹 페이지에서 무엇이 일어나는지 더 쉽게 파악할 수 있도록 도움이 될 수 있음.