1. 패킷 구조 분석, 개발자 모드의 각 ELEMENT에 대해 어떻게 구성된 건지, 어떤 것인지 공부
개발자 모드를 통해 사이트를 들어갔을 때 서버로부터 받아오는 페이지들을 볼 수 있다.
개발자 도구: 웹 페이지의 구조를 파악하기 쉽도록 구조를 보여주는 내장 지원 도구.
(크롬 기준으로 공부)
f12키를 누르면 개발자 도구를 열 수 있다.
제작된 웹페이지의 문제점을 파악할 때 이 기능을 사용할 것이다.
(1). Element
element에서 노란색으로 하이라이트친 부분을 클릭한 후 사이트의 요소를 누르면
다음과 같이 요소의 상세정보를 볼 수 있다. 또한 소스 보기의 해당 위치로 바로 이동할 수 있다.
>> html
f12를 누르고 맨 처음에 보이는 것은 웹사이트를 구성하고 있는 html/css 코드들이다. 이때 신기했던 것은 코드의 소스를 수정할 수 있다는 점이었다. 이후 웹페이지 화면에서도 수정된 것을 확인할 수 있다.
해당 페이지는 happy를 구글 검색창에 쳤을 때 나온 화면이다.
이 곡의 다른 버전이란 텍스트를 하하하로 바꿔보자
엘리먼트 선택을 누르고 텍스트에 마우스 커서를 올리고 소스의 위치를 파악한 뒤
이 곡의 다른 버전 => 하하하로 수정해주었다.
Elements의 기본 기능
- 실시간 수정 가능
- Text
- Attribute
- Style
엔터 버턴을 누르자 수정된 것을 확인했다.
(2). 모바일 모드 토글
노란색으로 하이라이트친 부분을 클릭한 후 사이트의 요소를 누르면 모바일 모드로 해당 페이지를 볼 수 있다.
화면 픽셀 크기는 물론 기기에 따른 레이아웃 변경까지 할 수 있다.
(3) Console
크롬에서 happy를 검색했을 때의 콘솔창
콘솔창은 웹브라우저에서 발생하는 모든 메시지를 표시한다.
웹페이지 로딩 중에 발생한 경고, 에러 메시지가 표시되며, 자바스크립트 실행 오류나 자바스크립트 콘솔 메시지 출력 또한 출력됨. 이것도 수정 가능
=> 가벼운 디버깅 용도로 간단한 표현식을 작성하고 실시간으로 검증할 때 사용
(4) Source
웹페이지에 로드한 모든 리소스를 열어볼 수 있다.
CSS, Javascript 소스 파일은 물론 이미지 동영상 등의 리소스까지 볼 수 있다. 또한 local 파일 디렉토리의 파일을 불러오고 수정한 내용을 저장할 수 있음. IDE 처럼 사용할 수 있는 기능이다. 새로고침을 하더라도 변경된 사항이 유지된다.
OVERRIDE 적용된 리소스와 실제 리소스를 혼동하지 않는 것이 중요.
*Ctrl+P를 통해 원하는 리소스를 빠르게 찾을 수 있다.
(5) Network
웹페이지와 웹페이지에 포함된 리소스들이 로딩되는 시간, 리소스 파일의 크기, 상태 코드, 리소스 타입, 파일 명의 리소스의 네트워크 전송 정보 확인 가능
웹페이지에 포함된 리소스 파일이 존재하지 않으면 status에 에러코드인 404를 표시
*waterfall: 타임라인을 개략적으로 보여준다
개발자들도 유용하게 쓸 수 있음(리소스가 로딩되는 시간을 확인할 수 있어서 크기를 조정하거나 다른 리소스를 쓰는 등의 최적화를 할 수 있음)
(6) Performance
페이지 로딩 성능 측정을 한다. ctrl+E를 누르거나 측정 시작 버튼을 누른다
Ctrl+E를 누르자 다음과 같은 화면이 나온다
측정 분석이 완료되면 시간 그래프로 시간대별 로딩 리소스와 리소스 로딩 시간 정보를 분석한 결과가 나온다.
분석이 끝난 결과다.
(7) Memory
현재 웹 페이지의 메모리 사용량 정보, 사용한 힙 메모리 공간 사용량, 자바 스크립트 vm이 사용하고 있는 메모리 정보를 확인할 수 있음. 또한 자바스크립트가 실시간으로 사용하고 있는 메모리 할당 정보를 모니터링할 수 있음.
자바스크립트 개발할 때 메모리 사용량 측정 가능
Memory를 누르면 다음과 같은 사진이 뜬다.
세 개의 옵션이 있다. 하나씩 설명해보려한다.
Heap snapshot
-페이지의 JavaScript 객체와 관련된 DOM Node 사이의 Memory 분포를 보여줌
-Snapshot끼리 비교 가능
Allocation instrumentation on timeline
-시간의 흐름에 따라 Memory 누수를 동적으로 확인 가능
Allocation sampling
-Memory 공간을 할당한 JavaScript 함수를 보여줌
실시간 용량 변화 확인 가능
(8) Application
크롬 안에서 실행 중인 코드의 프로세스, 스토리지(로컬, 세션, 쿠키), 캐시 사용 정보를 표시. 리소스에 대한 상세 정보를 표시하고 앱 개발시의 세션 스토리지, 쿠키 스토리지를 정리된 형태로 확인할 수 있어서 유용하다.
Clear storage를 통해 스토리지 정보를 삭제할 수 있다. 여기에서 쿠키 스토리지, 세션 스토리지 삭제도 가능.
(9) Security
웹 페이지 도메인 보안 접속 결과를 보여준다. 웹페이지에서 리소스를 가져온 링크 도메인의 보안 접속 여부까지 확인할 수 있음.
왼쪽 도메인 목록엔 웹 페이지의 리소스를 가져온 모든 도메인의 목록이 표시되고, 도메인당 ssl 보안 접속 여부가 표시가 된다.
오른쪽 도메인 목록에서 선택한 도메인의 SSL 연결 프로토콜 및 인증서 정보를 보여준다.
SSL 보안 접속을 하지 않는 웹사이트면 빨강색으로 구분해 문제가 있음을 알려준다
이때 실습에 사용될 웹사이트가 SSL 보안 접속을 하나가 궁금해져서 봤다.
보안이 되어 있지 않다.
(10) Light house
개발자 도구의 리포트 도구다. 현재 웹 페이지에 대한 분석 결과를 리포트로 제공한다.
리포트에는 현재 웹 페이지의 성능, 웹앱, 접근성, SEO 등에 대한 상세 분석 결과를 보여준다.
카테고리는 물론 디바이스까지 설정할 수 있다.
이후 다음과 같은 보고서가 출력된다.
이는 분석 결과는 구글 애널리틱스(Analytics) 에서 분석하는 웹페이지에 대한 성능 측정 결과와 유사한 내용이라 한다.
참고:
https://rlxuc0ppd.toastcdn.net/presentation/%5BNHN%20FORWARD%202020%5D%EC%B2%9C%EC%B2%9C%ED%9E%88%20%EC%9D%BD%EC%96%B4%20%EB%B3%B4%EB%8A%94%20Chrome%20%EA%B0%9C%EB%B0%9C%EC%9E%90%20%EB%8F%84%EA%B5%AC%20%EC%84%A4%EB%AA%85%EC%84%9C.pdf (자세하게 나와 있어서 앞으로 이 문서로 더 공부해볼 예정)
https://blogpack.tistory.com/756
구글 크롬 개발자 도구 사용법
개발자 도구의 필요성 HTML과 CSS, 그리고 자바스크립트를 사용해 제작한 웹페이지는 결과를 확인할 때 웹브라우저를 사용합니다. 최종적으로 웹사이트 방문자가 보게될 실제 결과물과 동일하기
blogpack.tistory.com
'CS' 카테고리의 다른 글
| [보안기술 3주차] (0) | 2021.07.05 |
|---|---|
| OWASP TOP 10, 국정원 8대 취약점 (0) | 2021.06.28 |
| 네트워크 보안 과제[aws] (0) | 2020.11.25 |
| [네트워크 보안] google cloud platform(gcp)에서 instance 만들기 (0) | 2020.11.09 |
| IAT,EAT 로딩 과정 문서화 (0) | 2020.11.02 |
