<div id="readability-page-1" class="page"><article id="mainContent">
              <div>
                <p><a href="/m/category/development"><span>development</span></a></p><h3>Chrome 개발자 도구로 Request 재구성 및 재전송하기</h3>
              </div>
              <p><cite>주먹불끈</cite>
                <span> 2024. 2. 14. 18:44</span>
              </p>
              

<ins data-ad-client="ca-pub-9527582522912841" data-ad-slot="8674651030" data-ad-format="auto" data-full-width-responsive="true" data-ad-type="inventory" data-ad-adfit-unit="DAN-we6apVVPwuoDAazb"></ins>


                <div>
                                <figure data-ke-mobilestyle="widthOrigin" data-filename="DALL&amp;middot;E 2024-02-14 09.43.42 - A minimalist illustration for a blog post, showcasing a developer working with Chrome Developer Tools. The scene is simplified to emphasize clarity an.webp" data-origin-width="1024" data-origin-height="1024">
    <span data-url="https://blog.kakaocdn.net/dn/u8TrO/btsEM0NDy9u/KKP6vpAGQXoxDFgkvOKOQk/img.webp" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/u8TrO/btsEM0NDy9u/KKP6vpAGQXoxDFgkvOKOQk/img.webp" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="509" height="509" data-filename="DALL&amp;middot;E 2024-02-14 09.43.42 - A minimalist illustration for a blog post, showcasing a developer working with Chrome Developer Tools. The scene is simplified to emphasize clarity an.webp" data-origin-width="1024" data-origin-height="1024">
    </span>
    
</figure>

<h2>개요</h2>
<p data-ke-size="size16">백엔드 개발을 하는데 프론트엔드의 요청에 문제가 없는지 확인이 필요했다.</p>
<p data-ke-size="size16">프론트엔드의 요청 내용을 조금씩 수정하여 테스트를 하는 방법을 알아보았다.</p>
<h2>ChatGPT</h2>
<p data-ke-size="size16">크롬 개발자 도구에서는 네트워크 트래픽을 모니터링하고, 특히 Fetch/XHR (XMLHttpRequest) 요청을 포함하여 웹 애플리케이션에서 서버로 전송된 요청을 검사하고 수정할 수 있다.</p>
<ol data-ke-list-type="decimal">
<li><b>개발자 도구 열기</b>: 크롬 브라우저에서 F12 키를 누르거나, 오른쪽 상단의 메뉴 버튼(세로 점 세 개)을 클릭한 후 "더 보기 도구 &gt; 개발자 도구"를 선택하여 개발자 도구를 연다.</li>
<li><b>네트워크 탭으로 이동</b>: 개발자 도구에서 "Network" 탭을 선택한다. 이 탭에서는 브라우저와 서버 간의 모든 네트워크 요청을 볼 수 있다.</li>
<li><b>Fetch/XHR 필터 적용</b>: 네트워크 탭에서 "Fetch/XHR" 옵션을 선택하여 Fetch 또는 XHR 요청만 표시하도록 필터링한다.</li>
<li><b>요청 수정 및 재전송</b>:
<ul data-ke-list-type="disc">
<li>요청을 찾아 클릭하면 요청 세부 정보 패널에서 요청의 헤더, 페이로드(body), 응답 등을 볼 수 있다.</li>
<li>직접적으로 크롬 개발자 도구 내에서 요청을 수정하여 재전송하는 기능은 제한적이기에 요청 세부 정보를 "Copy as cURL" 로 복사하여 curl 명령어 형식으로 변환한 다음 요청을 수정한 후 터미널이나 커맨드 라인에서 재전송할 수 있다. 이 방법을 통해 다양한 파라미터, 헤더 등을 변경하여 테스트할 수 있습니다.</li>
</ul>
</li>
</ol>
<p data-ke-size="size16">직접적으로 크롬 개발자 도구 내에서 요청을 수정하고 재전송하는 기능은 제한적이기에 대부분의 경우 요청 세부 정보를 복사하고 외부 도구(예: curl이나 Postman)를 사용하여 요청을 수정하고 재전송하는 방식으로 작업하는 것이 좋다.</p>
<figure data-ke-mobilestyle="widthOrigin" data-origin-width="1126" data-origin-height="998">
    <span data-url="https://blog.kakaocdn.net/dn/bVqFXH/btsEJcHJlF7/ueAH9aXLMghao1dR1XPiD1/img.png" data-lightbox="lightbox">
        <img src="https://blog.kakaocdn.net/dn/bVqFXH/btsEJcHJlF7/ueAH9aXLMghao1dR1XPiD1/img.png" onerror="this.onerror=null; this.src='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png'; this.srcset='//t1.daumcdn.net/tistory_admin/static/images/no-image-v1.png';" width="738" height="654" data-origin-width="1126" data-origin-height="998">
    </span>
    
</figure>
            
            
                </div>
              

            </article></div>

just_HS

개요
백엔드 개발을 하는데 프론트엔드의 요청에 문제가 없는지 확인이 필요했다.
프론트엔드의 요청 내용을 조금씩 수정하여 테스트를 하는 방법을 알아보았다.
ChatGPT
크롬 개발자 도구에서는 네트워크 트래픽을 모니터링하고, 특히 Fetch/XHR (XMLHttpRequest) 요청을 포함하여 웹 애플리케이션에서 서버로 전송된 요청을 검사하고 수정할 수 있다.
개발자 도구 열기: 크롬 브라우저에서 F12 키를 누르거나, 오른쪽 상단의 메뉴 버튼(세로 점 세 개)을 클릭한 후 "더 보기 도구 > 개발자 도구"를 선택하여 개발자 도구를 연다.
네트워크 탭으로 이동: 개발자 도구에서 "Network" 탭을 선택한다. 이 탭에서는 브라우저와 서버 간의 모든 네트워크 요청을 볼 수 있다.
Fetch/XHR 필터 적용: 네트워크 탭에서 "Fetch/XHR" 옵션을 선택하여 Fetch 또는 XHR 요청만 표시하도록 필터링한다.
요청 수정 및 재전송:
요청을 찾아 클릭하면 요청 세부 정보 패널에서 요청의 헤더, 페이로드(body), 응답 등을 볼 수 있다.
직접적으로 크롬 개발자 도구 내에서 요청을 수정하여 재전송하는 기능은 제한적이기에 요청 세부 정보를 "Copy as cURL" 로 복사하여 curl 명령어 형식으로 변환한 다음 요청을 수정한 후 터미널이나 커맨드 라인에서 재전송할 수 있다. 이 방법을 통해 다양한 파라미터, 헤더 등을 변경하여 테스트할 수 있습니다.
직접적으로 크롬 개발자 도구 내에서 요청을 수정하고 재전송하는 기능은 제한적이기에 대부분의 경우 요청 세부 정보를 복사하고 외부 도구(예: curl이나 Postman)를 사용하여 요청을 수정하고 재전송하는 방식으로 작업하는 것이 좋다.
            
'development' 카테고리의 다른 글
CI/CD 용어 정리 - ChatGPT  (0)
2023.12.25
JWT Token을 Header, Cookie 어디에 두는게 좋을까?  (0)
2023.11.21
상위 1% 엔지니어의 7가지 간단한 습관 - 읽고 생각 정리  (0)
2023.10.24
MacOS에서 단축키로 ChatGPT를 열어보자 - 사파리 웹앱과 레이캐스트 사용  (0)
2023.10.05
MacOS에서 단축키로 ChatGPT를 열어보자  (0)
2023.10.05

Chrome 개발자 도구로 Request 재구성 및 재전송하기

댓글