2010-10-14 9 views
20

मेरी उत्पादन वेबसाइट पर, मैंने जावास्क्रिप्ट संकलित किया है।स्थानीय जावास्क्रिप्ट के साथ उत्पादन वेबसाइट के जावास्क्रिप्ट को कैसे बदलें?

<script src="/js/mycode.min.js"></script> 

यह डिबगिंग के लिए बहुत convient अगर मैं कर सकता है अपने ब्राउज़र की जगह है कि

<script src="http://localhost/js/mycode1.js"></script> 
<script src="http://localhost/js/mycode2.js"></script> 
... 

साथ मैं जानता हूँ कि मैं डोम Greasemonkey userscripts की तरह कुछ का उपयोग कर में हेरफेर कर सकता है हो सकता है, लेकिन मैं नहीं मिले एक समाधान के साथ जो "mycode.min.js" के निष्पादन को रोक देगा।

कोई विचार?

उत्तर

46

तरह से मैं यह कार्य करें:

  1. डाउनलोड करें और Fiddler स्थापित अगर आप खिड़कियों पर कर रहे हैं।
  2. इसे http यातायात को पकड़ने के लिए सक्षम करें [आईई/क्रोम इसे डिफ़ॉल्ट रूप से करता है, फ़ायरफ़ॉक्स - इसे इंस्टॉल करने के माध्यम से इसे सक्षम करता है]
  3. प्रश्न में पृष्ठ को लोड करें।
  4. उस फ़ाइल को खोजें जिसे आप बाईं ओर http ट्रैफ़िक सूची में बदलना चाहते हैं और उस पर क्लिक करें।
  5. दाईं तरफ एक ऑटो रेस्पॉन्डर टैब है। इस पर क्लिक करें। चेकबॉक्स पर
  6. क्लिक करें
  7. क्लिक करें "स्वचालित प्रतिक्रियाओं सक्षम करने के लिए" .. बटन
  8. सही पर 2 लटकती, विकल्प है कि "एक फ़ाइल खोजने" कहते हैं चुनें
  9. संवाद में फ़ाइल ढूंढें और सहेजें पर क्लिक करें
  10. चरण दोहराएं 4-9 जब तक आप सभी फ़ाइलों और अपने नए जे एस फ़ाइलें आप को बदलने के लिए
  11. ब्राउज़र विंडो ताज़ा चाहते की जगह

संस्थान द्वारा चलाए जा रहे जेएस फ़ाइल को बदलने की ईडी, आप एचटीएमएल फाइल को प्रतिस्थापित कर सकते हैं और पेज पर जेएस लिंक बदल सकते हैं।

यदि आप मैक/लिनक्स पर हैं तो आप Charles इंस्टॉल कर सकते हैं। (नि: शुल्क नहीं, परीक्षण है) चरण समान हैं, लेकिन समान नहीं हैं।

यदि आप फ़ाइलों को संपीड़ित करने के लिए Google क्लोजर का उपयोग कर रहे हैं, तो आप source mapping करने के लिए अपने प्लग-इन इंस्टॉल कर सकते हैं।

+0

काम करना चाहिए। लेकिन मैं अन्य प्रॉक्सी समाधानों की तलाश करूंगा जो आसानी से पठनीय और मुफ़्त हैं। क्या कोई लिनक्स/ओएसएक्स के लिए एक अच्छा सुझाव दे सकता है? –

+1

अद्यतन: मैंने खुद को एक छोटी प्रॉक्सी लिखा है जो आगे मेरे उत्पादन सर्वर और स्ट्रिंग से सबकुछ विशिष्ट

5

स्थिर फ़ाइलों (उदा। जेएस फाइल) के लिए http://static.example.com जैसे सबडोमेन का उपयोग करने और होस्टफाइल को बदलने के बारे में क्या?

<script type="text/javascript" src="http://static.example.com/js/mycode.min.js"></script> 

hostfile (लिनक्स के लिए /etc/hosts, C:\WINDOWS\System32\drivers\etc\host) में निम्न पंक्ति जोड़ें:

static.example.com 127.0.0.1 
बेशक

आप http://static.example.com/ से 127.0.0.1 पर फाइलों के साथ एक सर्वर चलाने के लिए है।

एक और समाधान http://example.com/js/ को http://localhost/js/ पर रीडायरेक्ट करने के लिए Privoxy जैसे (स्थानीय) प्रॉक्सी सर्वर का उपयोग कर रहा है।

+0

अगर केवल आईटी विभाग संपादन पहुंच ताला नहीं था th के लिए 'सुरक्षा' कारणों से नरक से कार्यस्थलों में फ़ाइल है। > :) – epascarello

+0

अच्छा विचार। मै वो कर लूंगा। लेकिन इस समाधान में अभी भी एक ही फाइल में सभी जेएस-कोड शामिल हैं। उन्हें सभी अलग करने के लिए सही होगा। –

0

मान लिया जाये कि अपनी स्क्रिप्ट बस उत्पादन फ़ाइल के कच्चे संस्करण हैं, तो आप सिर्फ अपने पसंदीदा डिबगर या जे एस कंसोल खोलें दरार और अपनी स्क्रिप्ट आयात कर सकते हैं:

document.body.appendChild(document.createElement("script")).src = 
    "http://localhost/js/mycode1.js"; 

ऐसा करने से मूल रूप में परिभाषित किया गया कार्य करता है और चर के ऊपर लिख देगा । आपको window.onload मैन्युअल रूप से फिर से चलाने की आवश्यकता होगी। यदि आपके पास ऐसी स्क्रिप्ट है जो तुरंत या लोड पर चलती है जो पृष्ठ पर बहुत अधिक बदलती है, तो आपको मूल स्थिति में वापस लाने के लिए कुछ करने का काम हो सकता है।

शुभकामनाएं!

+1

यदि मूल कोड पृष्ठ का उपयोग करता है या ईवेंट हैंडलर जोड़ता है तो यह एक अच्छा समाधान नहीं है। आप और अधिक समस्याएं पैदा कर देंगे। – epascarello

+0

ज़रूर ... मैंने अपने जवाब में उतना ही कहा। लेकिन अगर आप ऐसा करने के लिए अपना कोड डीबग करते हैं, तो बस इस तकनीक के साथ फ़ंक्शंस को प्रतिस्थापित करना आपके कोड में ब्रेक पॉइंट सेट करने और इसे डीबग करने में सक्षम होने के लिए पर्याप्त है। – gilly3

0

हालांकि एपस्कारेलो का समाधान काम करता है, मिनी फाइलों को डिबगिंग के लिए एक त्वरित समाधान है। JavaScript source maps का उपयोग करने पर विचार करें। आधुनिक फ़ायरफ़ॉक्स और क्रोम उनका समर्थन करता है।

स्रोत मानचित्र का विचार ब्राउज़र कहां है, जहां असीमित संस्करण को ढूंढना है। जब आप अपने ब्राउज़र डेवलपर टूल में डिबगिंग शुरू करते हैं - ब्राउज़र स्क्रिप्ट के असीमित संस्करण को लोड करता है और आपको डीबगर में आसानी से पढ़ने वाली जावास्क्रिप्ट (या जो भी कोड आपने जावास्क्रिप्ट में संकलित किया है) दिखाता है।

+0

बस एक त्वरित टिप्पणी के रूप में यह मुझे स्पष्ट नहीं था: minified संस्करण क्या पार्स किया गया है और निष्पादित संस्करण नहीं निष्पादित किया गया है। –

+0

@DanielSokolowski हाँ, आप सही हैं।ब्राउज़र minified संस्करण निष्पादित करता है, लेकिन आपको DEV उपकरण में मूल (न्यूनतम नहीं) दिखाता है, ताकि आप चरण-दर-चरण निष्पादन निष्पादित कर सकें और चर देख सकें। –

2

एक नई फ़ाइल आप अन्य पोस्ट में से एक की तरह कुछ का उपयोग कर सकते जोड़ने के लिए:

document.body.appendChild(document.createElement("script").src = "http://example.com/addThisJSFile.js"); 

यह tampermonkey स्क्रिप्ट अपने कस्टम एक के साथ एक वेब पेज पर किसी भी जे एस फ़ाइल की जगह ले सकता एक डोमेन से:

// ==UserScript== 
// @name   ReplaceJS 
// @namespace http://example.com/ 
// @version  1.0.0 
// @description Replace javascript files on any webpage! 
// @author  Mr.Sonic Master 
// @match  * 
// @run-at  document-start 
// ==/UserScript== 

var newJSFile = "http://example.com/newJSFile.js"; //The JS file to load in replacment od old JS file 

var oldJSFile = "oldJSFile.replaceThis.js"; //The old JS file as it is named in inspect element (make sure its spelled EXACTLY the same) 

var pattern = new RegExp(oldJSFile, "i"); //Create the RegExp pattern with the /i switch to make it case-insensitive 

function injectScript(originalPage) { //Function injectScript replaces the file 
    console.log('Replace stage 2: Replace text matching', oldJSFile, 'with', newJSFile); 
    var moddedPage = originalPage.replace(pattern, newJSFile); //Modify the HTML code that we got, replacing the old JS file with the new one 
    document.open(); 
    console.log('Replace stage 3: Write new HTML to page...'); 
    document.write(moddedPage); //Write to the page the new HTML code 
    document.close(); 
} 

setTimeout(function() { //Wait a bit for the page's HTML to load... 
    console.log('Replace stage 1: target HTML'); 
    injectScript(document.documentElement.outerHTML); //Run function injectScript with the page's HTML as oldPage in the function 
}, 1111); 
+0

दिलचस्प प्रयास। जब मैं इस कोड को चलाता हूं तो यह चरण 3 तक नहीं पहुंचता है। क्यों कोई विचार? – Clone

+1

क्या यह चरण 2 तक पहुंचता है? –

+0

उत्तर देने के लिए धन्यवाद! हाँ, यह वास्तव में करता है। मैंने वास्तव में इस मुद्दे पर एक धागा बनाया है http://stackoverflow.com/q/43444796/6130540। – Clone

-3

वाई के बीच अंतर करने के लिए अपने यूआरएल में कुछ जोड़ें हमारे देव और प्रोड संदर्भ; उदाहरण: http://url_of_prod.com

http://url_of_dev.com?debug=true

और उसके बाद, जांच करने के लिए कुछ जावास्क्रिप्ट का उपयोग करता है, तो प्राप्त चर डिबग पर है या नहीं या
अगर (window.location.host.indexOf ('url_of_dev साथ URL की जाँच करें ')> -1) ...

तो एक लोड समारोह लोड या अपनी फ़ाइल नहीं करने के लिए, इस उदाहरण में के रूप में उपयोग: http://www.softpeople.fr/replaceswitch-dev-local-production-website-javascript-during-debug/

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