2015-06-17 6 views
27

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

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

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

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

+0

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

+0

क्या आप पूछ रहे हैं कि पृष्ठ लोड होने पर यह दोनों छवियों को लोड कर रहा है? –

+0

निश्चित रूप से जेएस छवि को लोड नहीं कर रहा है, मैंने पृष्ठ को एक स्रोतसेट छवि परीक्षण के रूप में बनाया है और वास्तव में '' में एक छवि टैग के साथ एक नंगे HTML संरचना है। @AdamBuchananmith सही है, जब पृष्ठ केवल 1 छवि लोड करता है, केवल यह – sam

उत्तर

41

क्रोम डेवलपर टूल में तत्व का निरीक्षण करें, फिर गुण टैब पर क्लिक करें। आप मौजूदा एसआरसी के लिए एक प्रविष्टि देखेंगे: वास्तविक छवि स्रोत के साथ।

enter image description here

+1

फ़ायरफ़ॉक्स में फ़ायरबग के साथ ही काम करता है। –

+2

यदि आप इसे अक्सर करते हैं, तो तत्व का चयन करें और DevTools कंसोल –

+0

में '$ 0.currentSrc' टाइप करें इंस्पेक्टर में आईएमजी पर होवरिंग अब टूलटिप में वर्तमान एसआरसी विशेषता प्रदर्शित करना चाहिए। – Splatbang

3

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

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

+0

@sam का उपयोग कर सकता है, यह वह है जिसे आप ढूंढ रहे हैं? –

+0

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

संबंधित मुद्दे