Chrome 개발자 도구를 사용하여 HTTP 요청

POSTER와 같은 플러그인을 사용하지 않고 Chrome 개발자 도구를 사용하여 HTTP 요청을하는 방법이 있습니까?

때문에 가져 오기 API가 크롬 (대부분의 다른 브라우저) 지원, 그것은 아주 쉽게 HTTP를 DevTools로 콘솔에서 요청을 할 지금이다.

예를 들어 JSON 파일 을 얻는 방법 :

fetch('https://jsonplaceholder.typicode.com/posts/1')
  .then(res => res.json())
  .then(console.log)

또는 새로운 리소스 를 게시 하려면 :

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  body: JSON.stringify({
    title: 'foo',
    body: 'bar',
    userId: 1
  }),
  headers: {
    'Content-type': 'application/json; charset=UTF-8'
  }
})
.then(res => res.json())
.then(console.log)

Chrome Devtools는 실제로 새로운 async / await 구문도 지원합니다 (비록 async는 비동기 함수 내에서만 사용할 수 있음).

const response = await fetch('https://jsonplaceholder.typicode.com/posts/1')
console.log(await response.json())

브라우저의 다른 HTTP 요청과 마찬가지로 요청에 동일한 출처 정책 이 적용 되므로 출처 간 요청을 피하거나 서버가 요청을 허용하는 CORS 헤더를 설정했는지 확인하십시오.

플러그인 사용 (이전 답변)

이전에 게시 한 제안 외에도 Chrome 용 Postman 플러그인이 잘 작동한다는 것을 알았습니다 . 헤더 및 URL 매개 변수를 설정하고 HTTP 인증을 사용하며 자주 실행하는 요청을 저장하는 등의 작업을 수행 할 수 있습니다.

Chrome 개발자 도구의 네트워크 탭에서 캡처 한 요청을 수정하고 다시 발행하려면 다음 단계를 따르십시오.

• Name요청을 마우스 오른쪽 버튼으로 클릭
• 고르다 Copy > Copy as cURL
• 명령 행에 붙여 넣기 (명령에는 쿠키 및 헤더 포함)
• 필요에 따라 요청을 편집하고 실행

나는 오래된 게시물을 알고 있지만 여기에 두는 것이 도움이 될 수 있습니다.

최신 브라우저 는 이제 Fetch API를 지원합니다 .

다음과 같이 사용할 수 있습니다.

fetch("<url>")
    .then(data => data.json()) // could be .text() or .blob() depending on the data you are expecting
    .then(console.log); // print your data

추신 : 개선되었으므로 모든 CORS 검사를 수행합니다 XmlHttpRequest.

웹 페이지에 페이지에 jquery가 있으면 크롬 개발자 콘솔에서 작성할 수 있습니다.

$.get(
    "somepage.php",
    {paramOne : 1, paramX : 'abc'},
    function(data) {
       alert('page content: ' + data);
    }
);

그것을하는 jquery 방법!

@dhfsk 답변에서 확장

여기 내 워크 플로우가 있습니다

1. Chrome DevTools에서 조작하려는 요청을 마우스 오른쪽 단추로 클릭하고> Copy as cURL

2. 우편 배달부 열기

3. Import왼쪽 상단을 클릭 한 다음Paste Raw Text

동일한 도메인에서 POST를 수행하려는 경우 개발자 도구를 사용하여 DOM에 양식을 삽입하고 다음을 제출할 수 있습니다.

위의 두 가지 답변을 결합하여 최고의 행운을 얻었습니다. Chrome에서 사이트로 이동 한 다음 DevTools의 네트워크 탭에서 요청을 찾으십시오. 요청과 복사를 마우스 오른쪽 버튼으로 클릭하고 cURL 대신 가져 오기로 복사하십시오 . 명령 행을 사용하지 않고 페치 코드를 DevTools 콘솔에 직접 붙여넣고 편집 할 수 있습니다.

헤더가있는 요청을 받으려면이 형식을 사용하십시오.

   fetch('http://example.com', {
      method: 'GET',
      headers: new Headers({
               'Content-Type': 'application/json',
               'someheader': 'headervalue'
               })
    })
    .then(res => res.json())
    .then(console.log)

웹 사이트에서 jquery를 사용하면 콘솔과 같은 것을 사용할 수 있습니다

$.post(
    'dom/data-home.php',
    {
    type : "home", id : "0"
    },function(data){
        console.log(data)
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

Chrome 콘솔에서 이미보고있는 페이지와 동일한 브라우징 컨텍스트를 사용하려면 요청을 간단하게 유지하십시오.

window.location="https://www.example.com";