क्या यह देखना संभव है कि ब्राउज़र डेवलपर टूल के साथ किसी ब्राउज़र का उपयोग कर रहा है


81

मैं यह देखने की कोशिश कर रहा srcsetहूं कि ब्राउज़र डेवलपर टूल के माध्यम से मेरा ब्राउज़र किस छवि का उपयोग कर रहा है, लेकिन नेटवर्क टैब का उपयोग करने के अलावा यह देखने के लिए कि यह कौन सा चित्र प्राप्त करता है, मैं नहीं बता सकता।

नेटवर्क टैब का उपयोग करना आमतौर पर ठीक होगा, लेकिन कभी-कभी मैंने देखा है कि यह अलग-अलग आकारों में 2 छवि संस्करण लाएगा, ऐसा तब होगा जब एक ब्रेक प्वाइंट 600 पर और दूसरा 900 पर होगा और वर्तमान में ब्राउज़र 750px चौड़ा था।

(मैंने क्रोम और फ़ायरफ़ॉक्स दोनों पर यह कोशिश की, और ऐसा लगता है कि क्रोम कुछ मामलों में दोनों छवियों को नीचे खींच देगा, लेकिन फ़ायरफ़ॉक्स केवल एक को कभी भी खींचता है)

जिस कारण से मैं जानना चाहता हूं, क्या मुझे दिलचस्पी है अगर यह दो छवि srcset खुराक को खींचता है तो यह उन दोनों के बीच स्वचालित रूप से स्वैप करता है जैसे कि मैं ब्राउज़र विंडो को स्केल करता हूं? यह उस तत्व का निरीक्षण करके नहीं बताया जा सकता है जो इसे केवल तत्व का कच्चा html देता है img, न कि img srcsetइसके उपयोग का वास्तविक विकल्प।


छवियों के बीच स्वैपिंग js की तरह थोड़ा सा लगता है। कस्टम js फ़ाइलों की जाँच करने की कोशिश करें जो थोड़ा दर्द हो सकता है। मेरा मानना ​​है कि अगर यह स्क्रीन के आकार के आधार पर दो छवियों की अदला-बदली कर रहा है तो यह संभवत: Jquery या शुद्ध Js है जो उस समय काम कर रहा है। वह वेबसाइट मीडिया के प्रश्नों का भी उपयोग कर सकती है।
कोडिंग सरगना

क्या आप पूछ रहे हैं कि जब पृष्ठ लोड होता है तो यह दोनों छवियों को लोड कर रहा है?
एडम बुकानन स्मिथ

निश्चित रूप से जेएस छवि को लोड नहीं कर रहा है, मैंने पेज को एक सृस्टसेट इमेज टेस्ट के रूप में बनाया है और वास्तव में एक नंगे html संरचना है जिसमें सिर्फ एक छवि टैग है <body>। @AdamBuchananSmith सही है, जब पृष्ठ केवल 1 छवि को लोड करता है, केवल वही उपयोग कर सकता है
सैम

जवाबों:


117

छवि में एक संपत्ति currentSrc है, आप इसे लॉग कर सकते हैं या कई उपकरणों के साथ इसका निरीक्षण कर सकते हैं:

  • क्रोम डेवलपर टूल में तत्व का निरीक्षण करते हैं, फिर गुण टैब पर क्लिक करते हैं।
  • फ़ायरफ़ॉक्स डेवलपर टूल में तत्व का निरीक्षण करें, राइट क्लिक करें और संदर्भ मेनू से DOM चुनें।

आपको currentSrc के लिए एक प्रविष्टि दिखाई देगी: वास्तविक छवि स्रोत के साथ।

यहाँ छवि विवरण दर्ज करें


29
यदि आप स्वयं को ऐसा करते हुए पाते हैं, $0.currentSrcतो DevTools कंसोल में तत्व और प्रकार का चयन करें
Nacho Coloma

3
इंस्पेक्टर में img पर मँडराते हुए अब टूलटिप में currentSrc विशेषता भी प्रदर्शित करनी चाहिए।
Splatbang

@Splatbang हाँ, लेकिन जब url बहुत लंबा होता है, तो यह फसल करता है, इसलिए आप यह नहीं देख सकते कि आप क्या हैं ..
OZZIE

इच्छा फ़ायरफ़ॉक्स कुछ इसी तरह की थी
जॉन z

लंबे URL के लिए भी आसान है, क्लिपबोर्ड पर सीधे कॉपी करना (क्रोम में):copy($0.currentSrc)
ptim

13

मुझे आज इसके साथ समस्या थी और मैंने पाया कि आप चर की निगरानी कर सकते हैं:

  1. कंसोल ड्रावर दिखाएं (आप इसे ESC भी दबा सकते हैं)

यहाँ छवि विवरण दर्ज करें

  1. लाइव अभिव्यक्ति बनाएं (मैंने 2 बनाया, चयनित तत्व और इनरविद की वर्तमान स्थिति)

यहाँ छवि विवरण दर्ज करें

लाइव अभिव्यक्ति चयनित img टैग के वर्तमान srcset को देखता है। यह पिक्चर टैग के अंदर भी img के साथ काम करता है।


1
IMO यह आज (2020) के लिए सबसे अच्छा जवाब है। मुझे स्वीकार किए गए उत्तर के साथ कुछ समस्याएं थीं जहां क्रोम गुण टैब को ठीक से अपडेट या अपडेट नहीं कर रहा था। यह उस मुद्दे को दरकिनार करता है और परिणाम सामने रखता है और .. गलत ... नीचे, मुझे लगता है। : पी
सैंडविच

5

ठीक है, क्रोम में तत्व का निरीक्षण करने के लिए जाओ। नेटवर्क टैब पर क्लिक करें, फिर पृष्ठ को ताज़ा करें।

यह आपको उन छवियों को दिखाएगा जिन्हें लोड किया जा रहा है, वे जो समय लेते हैं और आकार।


@sam यह क्या आप के लिए देख रहे हैं?
एडम बुकानन स्मिथ

इस सवाल का जवाब नहीं है क्योंकि ओपी ने कहा कि सवाल में वह पहले से ही यह कोशिश की।
mik01aj

1

इसी सवाल के साथ आया था। मेरा सरल समाधान सिर्फ राइट क्लिक इमेज और 'न्यू टैब / विंडो पर ओपन इमेज' था।

तेज और आसान समाधान और आप देख सकते हैं कि अलग-अलग ब्रेक बिंदुओं पर क्या छवि लोड की गई है।


0

मुझे इस पर भी आश्चर्य हो रहा था। मुझे लगता है कि मुझे लगा कि बिना किसी डेवलपर टूल का उपयोग किए।

जांच करने के लिए मैंने बस एक राइट-क्लिक किया और यह देखने के लिए कि फ़ाइल का नाम क्या है (और यदि यह मेरी उच्च-रिज़ॉल्यूशन छवि से मेल खाता है या निम्न-रेस एक है)।

आपके प्रश्न के भाग का उत्तर नहीं था, सभी ब्राउज़र स्वचालित रूप से विभिन्न आकार छवि स्रोतों के बीच स्वैप नहीं करते हैं जब आपका ब्राउज़र आकार बदलता है। मैंने अगस्त, 2018 में कई अलग-अलग विंडोज़ डेस्कटॉप ब्राउज़रों के साथ जाँच की। कुछ ने अलग तरह से प्रतिक्रिया दी, लेकिन अधिकांश ने तब तक छवि को स्वैप नहीं किया, जब तक कि आप ताज़ा नहीं हुए।

मैंने सीधे यह जांच नहीं की कि कौन से चित्र वास्तव में डाउनलोड किए जा रहे हैं या यदि एक समय में एक से अधिक थे। मैंने केवल परीक्षण किया कि कौन सी छवि वास्तव में प्रदर्शित की गई थी और यदि वह छवि ब्राउज़र पर बदल जाती है। मैंने परिणामों के आधार पर धारणाएं बनाईं, जो 100% सच हो सकती हैं या नहीं, लेकिन एक त्वरित और गंदी अच्छी शुरुआत की तरह लग रही थीं।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.