2012-11-11 3 views
27

मैं अपने एंड्रॉइड ब्राउज़र में अपनी वेबसाइट सीएसएस/एचटीएमएल तत्वों का निरीक्षण करना चाहता हूं। हालांकि यह एक स्मार्टफोन या एंड्रॉइड एसडीके पर होगा।मैं एंड्रॉइड ब्राउज़र में तत्व का निरीक्षण कैसे कर सकता हूं?

ऐसा करने का सबसे अच्छा तरीका क्या है?

+0

[एंड्रॉइड में यूआई तत्वों का निरीक्षण करें] के संभावित डुप्लिकेट (http://stackoverflow.com/questions/8304358/inspect-ui-elements-in-android) – rid

उत्तर

11

एंड्रॉइड पर क्रोम एंड्रॉइड डिवाइस पर क्रोम एप्लिकेशन से लोड किए गए एचटीएमएल का निरीक्षण करने के लिए डेस्कटॉप पर क्रोम डेवलपर टूल्स का उपयोग करना संभव बनाता है।

देखें: https://developers.google.com/chrome-developer-tools/docs/remote-debugging

+5

मैं इसके साथ ठीक हूं, हालांकि मैं खुश रहूंगा मैं एंड्रॉइड ब्राउज़र में ऐसा करने में सक्षम था, क्रोम नहीं, मुख्य रूप से क्योंकि क्रोम पहले से ही बहुत अच्छा काम करता है और ... आप जानते हैं, संगतता के मुद्दों ने मुझे सामान को डाउनग्रेड करना है, लेकिन मेरे पास इसका परीक्षण करने का कोई तरीका नहीं है :( – Goodwine

+2

@ गुडविन ले लो https://www.jshybugger.com/ पर एक नज़र डालें। यह वर्तमान में एंड्रॉइड ब्राउज़र को डीबग करने का सबसे अच्छा समाधान है। –

+1

@ पॉलिरीश इस पोस्ट के समय, मैंने देखा, और पाया [weinre] (http: // लोग। apache.org/~pmuellr/weinre/docs/latest/Home।एचटीएमएल), और यह इसे संभालने में सक्षम होने के बाद यह वास्तव में अच्छा काम करता है :) – Goodwine

30

स्थानीय Android ब्राउज़र के लिए एक साइट डिबग करने के लिए था और यहाँ आया था। तो मैंने फ़ायरफ़ॉक्स 30.0 (Weinre क्लाइंट) और एक एंड्रॉइड 4.1.2 (लक्ष्य) के साथ एक ओएस एक्स 10.9 (जैसे वेनर सर्वर) पर weinre की कोशिश की। मैं वास्तव में, वास्तव में परिणाम से हैरान हूँ।

  1. डाउनलोड करें और http://nodejs.org/download/
  2. से नोड क्रम स्थापित स्थापित weinre: sudo npm -g install weinre
  3. सेटिंग्स में अपने वर्तमान IP पते का पता लगाएं> नेटवर्क
  4. सेटअप आपकी मशीन पर एक weinre सर्वर: weinre --boundHost YOUR.IP.ADDRESS.HERE
  5. में अपने ब्राउज़र कॉल: http://YOUR.IP.ADRESS.HERE:8080
  6. आपको एक स्क्रिप्ट स्निपेट दिखाई देगा, इसे अपनी साइट पर रखें: <script src="http://YOUR.IP.ADDRESS.HERE:8080/target/target-script-min.js"></script>
  7. ओपन अपने स्थानीय ब्राउज़र में डिबग ग्राहक: http://YOUR.IP.ADDRESS.HERE:8080/client
  8. अपने Android पर अंत में
  9. : साइट पर आप (स्क्रिप्ट के अंदर के साथ) का निरीक्षण करने और देखते हैं कि वह अपने स्थानीय ब्राउज़र में के रूप में "लक्ष्य" प्रदर्शित हो, कहते हैं। अब आप "एलिमेंट्स" या जो भी चाहें खोल सकते हैं।

शायद 8080 आपका डिफ़ॉल्ट पोर्ट नहीं है। फिर चरण 4 में आपको weinre --httpPort YOURPORT --boundHost YOUR.IP.ADRESS.HERE पर कॉल करना होगा।

और मुझे याद नहीं है कि यह ठीक है, शायद चरण 5 के बाद कहीं, मुझे आने वाले कनेक्शन संकेतों को स्वीकार करना था।

:) हैप्पी डीबगिंग

पीएस मैं अभी भी अभिभूत हूं कि यह कितना अच्छा काम करता है। यहां तक ​​कि तत्व-हाइलाइटिंग कार्य O_O °

+0

बस अद्भुत है। चरण-दर-चरण के लिए धन्यवाद। – rsc

+1

या सभी इंटरफेस – awidgery

+1

से जुड़ने के लिए चरण 4 'Weinre --boundHost -all-'में उपयोग करें, इसके अलावा, मुझे सुरंग को दूरस्थ रूप से बनाने के लिए ngrok का उपयोग करना पड़ा। सुनिश्चित करें कि आप उसी आईपी पते (और स्थानीयहोस्ट नहीं) पर ngrok को बांधें या यह 'ngrok http 192.168.0.104: 8080' काम नहीं करेगा, फिर स्क्रिप्ट टैग में ngrok url का उपयोग करें। –

4

आप Chrome ब्राउज़र का उपयोग करके अपने एंड्रॉइड डिवाइस में किसी वेबसाइट के तत्वों का निरीक्षण कर सकते हैं। अपना क्रोम ब्राउज़र खोलें और जिस वेबसाइट को आप निरीक्षण करना चाहते हैं उसे प्राप्त करें। पता बार पर जाएं और "http" से पहले "व्यू-स्रोत:" टाइप करें और पृष्ठ को फिर से लोड करें। पृष्ठ के पूरे तत्व दिखाए जाएंगे।

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

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