WebSocket API के माध्यम से Google Chrome का इंस्ट्रूमेंटेशन

ब्राउज़रों के साथ बातचीत करना दिल के बेहोश करने का काम कभी नहीं रहा है: लगभग आधा दर्जन अलग-अलग एपीआई, विभिन्न आईपीसी तंत्र और विभिन्न विक्रेताओं की अलग-अलग क्षमताएं। WebDriver जैसे प्रोजेक्ट इस जटिलता को अनदेखा करने की कोशिश कर रहे हैं, इसके अलावा, WebKit या अन्य इंजनों का उपयोग करने वाले दर्जनों अन्य "हेडलेस" ड्राइवर वेब पर पाए जा सकते हैं। वर्तमान में, वेबड्राइवर के लिए W3C विनिर्देश भी काम करता है।

इंस्ट्रूमेंटेशन गूगल क्रोम

हालाँकि, एक सामान्य समाधान बनाते समय यह एक जटिल कार्य है, यह पता चला है कि Chrome को इंस्ट्रूमेंट करना बहुत सरल है - जैसा कि मैंने हाल ही में नेटवर्क लेटेंसी से संबंधित कुछ मुद्दों की खोज करते समय खोजा था। संस्करण 18 से शुरू होकर, क्रोम अब दूरस्थ डिबगिंग प्रोटोकॉल v1.0 का समर्थन करता है , जो एक नियमित वेबस्केट का उपयोग करके ब्राउज़र की सभी सुविधाएँ प्रदान करता है!

/Applications/Path To/Google Chrome --remote-debugging-port=9222 # OSX $> curl localhost:9222/json 

 [ { "devtoolsFrontendUrl": "/devtools/devtools.html?host=localhost:9222&page=1", "faviconUrl": "", "thumbnailUrl": "/thumb/chrome://newtab/", "title": "New Tab", "url": "chrome://newtab/", "webSocketDebuggerUrl": "ws://localhost:9222/devtools/page/1" } ] 

सबसे पहले, हम Chrome में दूरस्थ डिबगिंग सक्षम करते हैं (डिफ़ॉल्ट रूप से अक्षम)। अब से, Chrome एक HTTP सर्वर प्रदान करता है जो आपको सभी खुले टैब को नियंत्रित करने की अनुमति देता है। प्रत्येक टैब एक अलग-थलग प्रक्रिया है और इसलिए, अपने स्वयं के WebSocket के साथ काम करता है, जो पथ WebSocketDebuggerUrl विशेषता के माध्यम से सुलभ है। आइए इसके साथ कुछ करने की कोशिश करें (अनुवादक का ध्यान दें: रूबी में कोडिंग कोड, लेकिन यह अप्रकाशित है):

 require 'em-http' require 'faye/websocket' require 'json' EM.run do # Chrome runs an HTTP handler listing available tabs conn = EM::HttpRequest.new('http://localhost:9222/json').get conn.callback do resp = JSON.parse(conn.response) puts "#{resp.size} available tabs, Chrome response: \n#{resp}" # connect to first tab via the WS debug URL ws = Faye::WebSocket::Client.new(resp.first['webSocketDebuggerUrl']) ws.onopen = lambda do |event| # once connected, enable network tracking ws.send JSON.dump({id: 1, method: 'Network.enable'}) # tell Chrome to navigate to twitter.com and look for "chrome" tweets ws.send JSON.dump({ id: 2, method: 'Page.navigate', params: {url: 'http://twitter.com/#!/search/chrome?q=chrome&' + rand(100).to_s} }) end ws.onmessage = lambda do |event| # print event notifications from Chrome to the console p [:new_message, JSON.parse(event.data)] end end end 

इस उदाहरण में, हम Chrome को ट्रैकिंग और नेटवर्क ट्रैफ़िक की सूचना को सक्षम करने के लिए कहते हैं, और फिर उसे Twitter खोज करने के लिए कहते हैं। इस स्थिति में, Chrome हमें दर्जनों नेटवर्क सूचनाएं भेजेगा: प्रारंभिक पृष्ठ लाने, प्रत्येक उप-संसाधन, XHR के लिए सूचनाएं, और इसी तरह (उदाहरण के लिए, Network.responseReceived ईवेंट )। वास्तव में, यदि आप वेब पेज को खुला छोड़ देते हैं, तो आप नए ट्वीट प्राप्त करने के लिए उत्पन्न लंबी मतदान घटनाओं को भी देखेंगे। जानकारी के टन , सब कुछ अपने निपटान में है।

Chrome के साथ दूरस्थ डिबगिंग (और अधिक)

उपरोक्त उदाहरण नेटवर्क एपीआई के साथ एक बहुत ही सरल बातचीत दिखाता है, लेकिन प्रोटोकॉल बहुत अधिक सुविधाएँ प्रदान करता है। आप जावास्क्रिप्ट डीबगर के साथ काम कर सकते हैं, V8 वर्चुअल मशीन का प्रबंधन कर सकते हैं, DOM को संशोधित कर सकते हैं और सीख सकते हैं, साथ ही साथ घटनाओं के कालक्रम को ट्रैक कर सकते हैं, और आधा दर्जन से अधिक अन्य सुविधाओं को भी । अंत में, हालाँकि यह डेस्कटॉप ब्राउज़र को प्रबंधित करने के लिए अच्छा है, आपके फ़ोन पर ब्राउज़र को प्रबंधित करना और भी अच्छा है: Android के लिए Chrome सभी समान सुविधाएँ प्रदान करता है ।