[Tip]Web(Chrome, Whale 등등) 분석 도구 - 개발자 도구

요즘 대부분은 "Web 브라우져" 를 이용하여, 다양하게 활용할 것이다.

특히 솔루션 엔지니어들은 더 다양하게 쓸 것이라고 생각된다.

그러므로, 업무 활용 시 "개발자 도구" 기능을 이용한다면, 좀 더 분석에 활용도를 높일 수 있을 것이다.

개발자들 또한 프론트엔드 개발자 들도 기본적으로 "개발자 도구" 를 이용한 디버깅 작업을 많이 하고 있으니

참고하면 큰 도움이 될 것이다.

 

1. 개발자 도구 실행 방법

- Web 실행 후 "F12" 키보드 key 실행 또는 마우스 우클릭 "검사" 클릭

 

 

- Web 페이지에 대한 "Html 및 css 등 자세한 설정 내용이 보이고, 전체 구성에 대한 부분을 파악"할 수 있다.

 

2. Network 탭을 통한 세부 소스 검색

- 여러 가지 탭이 존재하지만, "Network" 탭 이동 후 "Clear network Log" 버튼 클릭

☞ 원하는 페이지 이동 시 아래 Name 부분에 항목들이 나오게 됩니다. 해당 소스 경로 및 파라미터 인자 등등 

Web 페이지 디버깅이 가능합니다.

 

 

Preview/Response 파라미터 값 확인 및 분석하여 디버깅 활용이 가능합니다.

 

3. 소스 파일에서 해당 소스 경로 및 파일 검색 후 소스 수정 및 빌드  적용

 

 

이에 기본적인 웹 디버깅 방법에 대한 부분에 대한 참고 및 활용해보시면 좋을 것 같네요

조금이나마 도움이 되셨으면 좋겠네요:)

Have a GoodDay!