프로덕션 사이트에서 Requestly를 사용한 원격 디버깅

실제로 "프로덕션에 배포"하지 않고 변경 사항이 프로덕션에서 어떻게 작동하는지 알고 싶었던 적이 있습니까?

원격 코드를 편집할 수 있으면 시간을 크게 절약할 수 있으며 이 기사가 그 이유를 이해하는 데 도움이 되기를 바랍니다. Requestly 과 같은 도구를 사용하면 소스 코드가 없는 사이트에서도 디버깅 루틴(콘솔 로그 추가 및 중단점 사용)을 따를 수 있습니다!

모든 설정

먼저 원격 리소스에 대한 요청을 식별합니다. 이를 위해 크롬 네트워크 탭을 사용할 수 있습니다. 디버그하려는 자바스크립트 또는 CSS 파일을 검색합니다. 요청 로그를 클릭하고 요청 URL을 복사하면 나중에 편리하게 사용할 수 있습니다.



Python 서버를 사용하여 로컬에서 제공되는 디버그 버전의 스크립트가 있습니다. 원격 디버깅의 전체 아이디어는 원격 파일을 로컬 파일로 교체하는 것입니다. 나는 t-mobile.com에서 찾은 Adobe 대상에 대한 시작 스크립트를 가지고 있으며 편의를 위해 축소도 해제했습니다.

이제 로컬 서버에서 이 파일을 제공해야 합니다. 파이썬이나 노드로 쉽게 할 수 있습니다. Python을 사용하면 다음 명령을 실행할 수 있습니다.

python3 -m http.server <port> --bind 127.0.0.1

이제 디버깅하려는 리소스의 URL과 해당 리소스의 로컬 복사본을 제공하는 엔드포인트가 있으므로 프로덕션 사이트의 요청을 원래 엔드포인트에서 로컬 엔드포인트로 리디렉션하기만 하면 됩니다.

아직 생성하지 않은 경우 download the Requestly chrome extension 및 Redirect rule의 규칙 생성 버튼에서 dashboard을 생성합니다.

이것은 Requestly에서 간단한 리디렉션 규칙만 있으면 됩니다. 오른쪽 상단의 새 규칙 만들기를 클릭하고 리디렉션 규칙을 선택합니다.

원본 URL에 원본 URL(이전에 복사한 URL)을 붙여넣고 대상에 Python 서버에서 제공되는 로컬 파일의 경로를 입력합니다.



규칙 이름을 지정하고 저장을 클릭합니다.

또한 작은 깔때기 모양 아이콘을 클릭하여 리소스 유형 또는 요청 유형에 따라 호스트 이름 일치 또는 필터링과 같은 적용advanced filters을 할 수 있습니다. 올바르게 수행하면 소스 필드에 파일 이름만 지정하면 됩니다.

디버깅을 시작합니다.

이제 네트워크 탭에서 동일한 요청을 찾으면 다음과 같아야 합니다.



이것은 규칙이 작동했고 이제 해당 파일의 로컬 버전이 제공되고 있음을 보여줍니다. 하지만 이 파일로 사이트 디버깅을 시작하기 전에 간단한 콘솔 로그를 추가하도록 하십시오.



이제 페이지를 새로 고치고 콘솔을 확인하십시오. 또한 규칙이 적용될 때마다 요청 확장 아이콘 색상이 변경되는 것을 확인할 수 있습니다.

결론

이제 중단점 및 스택 추적과 같은 모든 크롬 디버거 도구를 사용하여 이 파일을 디버깅할 수 있습니다.

Requestly를 사용하여 원격으로 디버깅하는 방법에 대해 여전히 혼란스러운 경우 이러한 단계를 실제로 확인하는 데 도움이 되는 비디오가 있습니다.



Requestly 는 redirect routes 그 이상을 수행합니다. modify headers , modify responses 및 심지어 inject scripts .

이것이 유용하다고 생각하셨다면 다음은 Requestly를 사용하여 웹 앱을 디버그할 수 있는 5가지 추가 방법입니다. — https://requestly.io/blog/5-ways-to-make-debugging-easy/

즐거운 디버깅

https://requestly.io에 원래 게시되었습니다.