Chrome 개발자 도구에서 요청 시간 보기

Chrome 개발자 도구에서 요청 시간 보기

Ajax 개발 중에 Chrome 개발자 툴에서 요청이 전송된 시간을 확인할 수 있는 방법이 종종 필요합니다.절대 시간(3:45:23 PM 등) 또는 상대 시간(페이지 로드 후 4.56초) 중 하나가 좋습니다.

가장 가까운 것은 [네트워크(Network)]탭의 타임라인으로 [시작시간(Start Time)](타임라인 헤더를 클릭하여 표시할 정보를 선택할 수 있습니다)이 표시됩니다만, 대부분의 경우 20초까지 밖에 얻을 수 없습니다.

요청 행을 클릭하기만 하면 됩니다.

Right Click > Copy > Copy All as HAR

그런 다음 HAR 파일을 엽니다.

{
  "log": {
    "version": "1.2",
    "creator": {
      "name": "WebInspector",
      "version": "537.36"
    },
    "pages": [],
    "entries": [
      {
        "startedDateTime": "2018-08-24T18:34:12.564Z",
        "time": 84.96354891383089,

정확한 요청 타이밍 정보가 있습니다.

요청 테이블에 사용자 지정 열을 추가합니다.

1. 요청 목록이 있는 열 머리글을 마우스 오른쪽 버튼으로 클릭합니다.컬럼이 있는 컨텍스트메뉴에서 [Response Headers]=> [ Manage Header Columns ]를 선택합니다.:

2. "날짜" 값이 있는 사용자 지정 열 머리글 추가

3. 결과

이건 크롬 개발의 큰 실수처럼 느껴집니다.절대적인 시작/종료 시간을 제외하고 가능한 모든 타이밍을 제공합니다(그리고 당신과 마찬가지로 페이지 로드 시작 이후 상대적인 타이밍이 좋습니다).

제가 할 수 있는 최선의 방법은 개요 창에서 가능한 한 엄격한 범위를 설정하는 것입니다. 그러면 타이밍이 더 정확하게 표시됩니다.

자세한 내용은 스크린샷을 참조하십시오.

ajax 호출 전에 console.log를 사용할 수 있습니다.

다른 방법으로는 페이지 내의 모든 Ajax 콜을 수신하는Ajax 핸들러를 사용할 수 있습니다.

이것을 실현하는 방법에 대해서는, 여기를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/37699677/see-request-time-in-chrome-developer-tools