웹 프로그래밍 크롬 브라우저 개발자 모드 네트워크 소스 기능 활용
이전에 크롬 브라우저의 개발자 모드를 활용해 콘솔 기능과 네트워크 기능에 대해서 간단히 작성한 적이 있습니다. https://zzarungna.com/1374 크롬 브라우저 웹 프로그래밍을 하다 보면 한눈에 소스가 들어오는 경우도 있지만 어떤 때는 해당 페이지에서 소스는 어떤 것들을 참조해서 가져오는지 소스 코드상에서 한눈에 파악하기 힘든 경우 크롬 브라우저를 활용해 경로가 어디에 있는 파일을 참조하는지 확인하기도 합니다.
웹페이지에 현재 보고 있는 페이지가 어떠한 파일을 참조하는지 확인하시기 위해서는 크롬 브라우저에서 확인하고자 하는 웹페이지를 열어 놓으시고 F12를 눌러 주시면 됩니다. 그럼 아래 이미지와 개발자 창이 추가된 것을 확인하실 수 있으며 개발자 모드 기능에서 작은 색 노란 네모에 표시된 Sources라는 메뉴를 선택하시면 됩니다.
Sources 메뉴를 확인해 보시면 해당 페이지에서 사용하는 파일들이 어떠한 것들이 있는지 확인이 가능하며 경로는 어떻게 되어있는지 한눈에 파악 할 수 있어 편합니다.
현재 페이지에서 사용하고 있는 파일을 선택해 더블클릭으로 소스 파일을 열고 수정한 내용이 브라우저에 바로 적용되기 때문에 테스트를 진행할 때 편했던 기억이 납니다. 매번 웹서버에 있는 소스를 수정하고 브라우저에서 확인할 필요 없이 테스트가 완료되면 해당 코드를 적용하니 테스트해볼 때 편합니다.
Sources 메뉴에서 코드를 작성하고 Ctrl+S를 눌러 저장해 주시면 됩니다. 아래 이미지와 같이 크롬 브라우저에서 적용한 소스 코드 내용이 바로 적용된다는 걸 보여 드리기 위해서 추가로 이미지를 하나 첨부했습니다.
예전에도 크롬 브라우저의 개발자 모드 중 Network 메뉴에 대해 간단히 작성한 적이 있는데 추가로 내용을 작성합니다.
먼저 아래 이미지와 같이 특정 웹페이지를 열어 놓으신 상태에서 Network 메뉴를 들어가신 뒤 기존에 있던 네트워크 내역을 지우기 위해 화살표 방향에 표시된 버튼을 눌러 주시면 기존에 사용하는 Network 내역이 모두 지워집니다.
굳이 지우지 않아도 되지만 웹페이지 상 특정 버튼을 눌렀을 때 어떠한 것들이 적용되는지 확인하기 편해지고자 개인적으로 Network 내용을 지우고 특정 페이지를 호출했을 때 어떠한 것들이 네트워크를 통해 가져오는지 종종 확인합니다.
웹페이지 상 네트워크 전송을 통해 어떠한 것들이 이루어지는지 확인해 보기 위해 웹 페이지에 특정 버튼을 눌러 보니 아래 이미지와 같이 네트워크 메뉴에 실시간으로 그림 파일 하나를 가져온다는 것을 확인할 수 있습니다.
Network를 활용해 굉장히 유용했던 부분은 Ajax를 이용해 페이지 전환없이 가져오는 데이타의 경우 크롬 브라우저의 Networ를 활용한다면 오류 해결이 좀더 빨랐던 기억이 납니다.
아래 이미지와 같이 Ajax를 통해 서버와 데이타를 주고받을때에도 네트워크를 통해 어떠한 것들이 주고 받게 되는지 확인할 수 있고 전송 상태는 어떻게 처리되었는지까지 확인할 수 있다보니 개인적으로 자주 활용하고 있는 기능 입니다.
개인적으로 웹 프로그래밍과 관련되어 일하거나 개인 프로젝트를 만들 때 크롬 브라우저의 개발자 모드를 활용하고 있는 내용에 대해 간단히 정리해 봤습니다.
좀 더 시간이 지나 크롬 브라우저의 개발자 모드를 활용해 더 다양한 기능을 사용하며 유용한 기능을 추가로 발견하게 된다면 나중에 다시 한번 추가로 글을 작성해 보도록 하겠습니다.
