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