브라우저에서 콘솔 로그를 보고 저장하는 방법

웹 사이트와 상호 작용할 때 보이는 UI 뒤에는 많은 일이 있습니다. 클릭하는 모든 항목에 대해 웹사이트는 서버와 통신하여 원하는 정보를 표시합니다. 웹사이트가 원래대로 응답하지 않으면 무엇이 잘못되었는지 조사해야 하며 살펴보게 될 것 중 하나는 보내고 받은 메시지/요청입니다. 일부 브라우저의 기능인 웹 콘솔을 통해 이 작업을 수행할 수 있습니다. 특히 Chrome 및 Edge 또는 Opera와 같은 다른 모든 Chromium 기반 브라우저 에서 이 작업을 수행할 수 있습니다 . 프로세스는 동일하므로 Chrome에서 수행하는 방법을 보여 드리겠습니다.

콘솔 로그 보기 및 저장

브라우저를 열고 모든 전송/수신 요청을 보려는 웹사이트로 이동합니다. 오류가 발생하거나 '로그인'을 클릭하면 홈 페이지로 이동하는 등 해서는 안 되는 방식으로 반응할 때까지 웹사이트를 사용하십시오.

F12 키를 누르거나 Ctrl+Shift+I 바로 가기 키를 누르거나 브라우저의 설정 메뉴로 이동하여 개발자 도구를 찾습니다. Chrome에서 추가 옵션 버튼을 클릭하고 추가 도구> 개발자 도구로 이동해야 합니다.

도구가 하단 또는 측면에서 열리고 현재 탭을 분할합니다. 개발자 도구에는 작은 탭이 많이 있습니다. 콘솔 탭을 찾아 선택합니다.

로그는 웹 사이트와 통신하는 서버 간에 전송된 모든 요청으로 이미 채워져 있습니다. 모두 저장하기만 하면 됩니다. 콘솔 내부를 마우스 오른쪽 버튼으로 클릭하고 '다른 이름으로 저장' 옵션을 선택합니다. 파일 저장 대화 상자가 열립니다. 파일을 저장할 위치를 선택하면 완료됩니다.

파일의 확장자는 LOG이지만 텍스트 파일이므로 메모장이나 원하는 다른 텍스트 편집기로 볼 수 있습니다. 웹 사이트에서 문제가 발생하는 경우 이 파일이 문제 해결에 도움이 될 수 있습니다. 문제가 브라우저에 특정한 경우(예: 웹사이트가 Firefox에서는 응답하지 않지만 Chrome에서는 제대로 작동하는 경우) 로그를 가져오는 다른 방법이 필요합니다. 많은 사람들이 Charles Proxy라는 유료 도구를 사용합니다. 꽤 오래 전부터 네트워크 트래픽을 보기 위한 필수 도구가 되었습니다. 무료 대안을 찾을 수 있습니다. 무료인 Fiddler가 있습니다. 이러한 도구는 설정하기가 약간 복잡한 경향이 있으므로 브라우저 콘솔이 훨씬 더 좋습니다.