[html] 브라우저 개발자 도구를 사용하여 브라우저가 사용하는 srcset 이미지를 볼 수 있습니까?
srcset브라우저 개발자 도구를 통해 내 브라우저가 어떤 이미지를 사용 하고 있는지 확인하려고 노력 했지만 네트워크 탭을 사용하여 어떤 이미지를 가져 오는지 알 수 없습니다.
일반적으로 네트워크 탭을 사용하는 것이 좋지만 때로는 다른 크기의 이미지 버전 2 개를 가져 오는 것으로 나타났습니다. 중단 점 하나가 600이고 다른 중단 점이 900이고 브라우저가 현재 750px 너비 인 경우 이런 일이 발생합니다.
(나는 이것을 Chrome과 FireFox에서 모두 시도했으며 특정 경우에 크롬이 두 이미지를 모두 끌어 내리는 것처럼 보이지만 FireFox는 하나만 끌어내는 것 같습니다)
내가 알고 싶은 이유는 내가 브라우저 창 크기를 조정할 때 두 이미지 srcset 용량을 자동으로 전환하면 관심이 있다는 것입니다. 이것은 요소를 검사 img하여 실제 img srcset옵션이 아닌 요소 의 원시 html을 제공하므로 알 수 없습니다 .
답변
이미지에는 currentSrc 속성이 있으며이를 기록하거나 여러 도구를 사용하여 검사 할 수 있습니다.
- Chrome 개발자 도구에서 요소를 검사 한 다음 속성 탭을 클릭합니다.
- Firefox 개발자 도구에서 요소를 검사하고 마우스 오른쪽 버튼을 클릭하고 컨텍스트 메뉴에서 DOM을 선택합니다.
실제 이미지 소스와 함께 currentSrc : 항목이 표시됩니다.
답변
오늘이 문제가 발생하여 변수를 모니터링 할 수 있음을 발견했습니다.
- 콘솔 서랍 표시 (ESC 키를 눌러도 가능)
- 라이브 표현식 생성 (선택한 요소의 currentSrc 및 innerWidth 2 개를 생성했습니다)
라이브 표현식은 선택된 img 태그의 현재 srcset을 감시합니다. 그림 태그 내부의 img에서도 작동합니다.
답변
좋습니다. 크롬의 요소 검사로 이동합니다. 네트워크 탭을 클릭 한 다음 페이지를 새로 고칩니다.
로드되는 이미지, 소요 시간 및 크기가 표시됩니다.
답변
같은 질문으로 이것에 대해 왔습니다. 내 간단한 해결책은 이미지를 마우스 오른쪽 버튼으로 클릭하고 ‘새 탭 / 창에서 이미지 열기’였습니다.
빠르고 쉬운 솔루션이며 다른 중단 점에서로드 된 이미지를 볼 수 있습니다.
답변
저도 궁금합니다. 개발자 도구를 사용하지 않고 알아 낸 것 같습니다.
확인하려면 간단히 마우스 오른쪽 버튼을 클릭하고 다른 이름으로 저장하여 어떤 파일 이름이 채워져 있는지 확인했습니다 (내 고해상도 이미지 또는 저해상도 이미지와 일치하는지).
귀하의 질문에 대한 답변은 아니오였습니다. 브라우저 크기를 조정할 때 모든 브라우저가 서로 다른 srcset 이미지 소스간에 자동으로 전환되는 것은 아닙니다. 2018 년 8 월에 여러 다른 Windows 데스크톱 브라우저로 확인했습니다. 일부는 다르게 응답했지만 이후 새로 고침을 누르지 않는 한 대부분은 이미지를 바꾸지 않았습니다.
실제로 어떤 이미지가 다운로드되고 있는지 또는 한 번에 두 개 이상이 있는지 직접 조사하지 않았습니다. 실제로 표시되는 이미지와 브라우저 크기 조정시 해당 이미지가 변경되었는지 테스트했습니다. 나는 결과를 바탕으로 가정을했는데, 이는 100 % 사실 일 수도 있고 아닐 수도 있지만 빠르고 더러운 좋은 시작처럼 보였습니다.
답변
