Chrome में जावास्क्रिप्ट फ़ंक्शन परिभाषा खोजें

Question

Chrome का डेवलपर टूल रॉक, लेकिन एक चीज़ जो उन्हें प्रतीत नहीं होती है (जो मुझे मिल सकती है) एक जावास्क्रिप्ट फ़ंक्शन की परिभाषा खोजने का एक तरीका है। यह मेरे लिए सुपर आसान होगा क्योंकि मैं एक ऐसी साइट पर काम कर रहा हूं जिसमें कई बाहरी जेएस फाइलें शामिल हैं। निश्चित grep इसे हल करता है लेकिन ब्राउज़र में ज्यादा बेहतर होगा। मेरा मतलब है, ब्राउज़र को यह जानना होगा, इसलिए इसे उजागर क्यों नहीं किया जाए? मुझे उम्मीद थी कि कुछ ऐसा होगा:

• पृष्ठ से 'तत्व का निरीक्षण करें' चुनें, जो एलिमेंट्स टैब में लाइन को हाइलाइट करता है
• लाइन पर राइट-क्लिक करें और 'फ़ंक्शन पर जाएं परिभाषा' का चयन करें
• सही स्क्रिप्ट लिपियों टैब में भरी हुई है और यह फ़ंक्शन परिभाषा में कूद जाती है

सबसे पहले, क्या यह कार्यक्षमता मौजूद है और मैं इसे याद कर रहा हूं?

और अगर ऐसा नहीं होता है, तो मैं अनुमान लगा रहा हूं कि यह WebKit से आएगा, लेकिन डेवलपर टूल सुविधा अनुरोधों या WebKit के Bugzilla के लिए कुछ भी नहीं पा सकता है ।

Comments

एक खोज पट्टी है जो लिपियों टैब में वर्तमान फ़ाइल को पकड़ती है और आप इसे मुद्रित करके किसी फ़ंक्शन की सामग्री को देख सकते हैं। लेकिन मैं अब

— उत्सुक

Google Chrome डेवलपर टूल के साथ, "स्रोत" टैप -> सही विंडो पर आपको "इवेंट ब्रेकप्वाइंट" सेट करने की संभावना है।

मेरे मामले में मेरे पास एक अज्ञात फ़ंक्शन के लिए एक चर सेट था। मैंने myvar.toString () किया और इसे मुद्रित किया: "फ़ंक्शन ऑब्जेक्ट () {[मूल कोड]}" जो मुझे जानना आवश्यक है।

— रिंग

Answer 1

आओ हम कहते हैं कि हम फ़ंक्शन की तलाश कर रहे हैं foo:

1. (क्रोम क्रोम उपकरण खोलें),
2. विंडोज: ctrl+ shift+ F, या macOS: cmd+ optn+ F। यह सभी लिपियों को खोजने के लिए एक विंडो खोलता है।
3. "नियमित अभिव्यक्ति" चेकबॉक्स चेक करें,
4. के लिए खोज foo\s*=\s*function( foo = functionउन तीन टोकन के बीच किसी भी स्थान की संख्या के लिए खोज ),
5. लौटे परिणाम पर दबाएँ।

समारोह परिभाषा के लिए एक और प्रकार है function\s*foo\s*\(के लिए function foo(उन तीन टोकन के बीच रिक्त स्थान के किसी भी संख्या के साथ।

Comments

अब यही मैं बात कर रहा हूँ! मुझे नहीं पता था कि फलक भी अस्तित्व में है - और आप कैसे होंगे?

— रयान ड्यूवल

OSX पर cmd + विकल्प + F

— Stiggler

यह केवल एक फ़ंक्शन को परिभाषित करने का एक तरीका है foo। और भी हैं। क्या होगा यदि हमारा कार्य उदाहरण के लिए है bar['foo']? (उस सवाल का कोई अच्छा जवाब नहीं है, जहां तक ​​मुझे पता है --- यह अनिवार्य रूप से "जटिल कोड नहीं लिखता है")

— स्टीवन लू

मुझे चयनित उत्तर का उपयोग करके "फ़ंक्शन परिभाषा" नहीं मिली। मैंने Google पर खोज की है और कोई मदद नहीं मिली। (क्रोम संस्करण 41.0.2272.118 मीटर का उपयोग करना)

— Web_Developer

और फिर आप फ़ंक्शन घोषणाओं, गतिशील रूप से उत्पन्न फ़ंक्शन अभिव्यक्तियों और अनाम (अनाम) फ़ंक्शनों को खोजने में विफल रहते हैं। मैं फ़ायरफ़ॉक्स जैसा कुछ चाहूंगा: घड़ी पैनल में फ़ंक्शन संदर्भ पर क्लिक करें -> फ़ंक्शन संदर्भ पर जाएं।

— फागनर ब्रैक

Answer 2

यह 2012-08-26 में क्रोम में उतरा था , सटीक संस्करण के बारे में निश्चित नहीं है, मैंने इसे क्रोम 24 में देखा था।

एक स्क्रीनशॉट एक लाख शब्दों के लायक है:

मैं कंसोल में विधियों के साथ एक ऑब्जेक्ट का निरीक्षण कर रहा हूं। "शो फ़ंक्शन परिभाषा" पर क्लिक करने से मुझे स्रोत कोड में उस स्थान पर ले जाता है जहां फ़ंक्शन परिभाषित होता है। या मैं बस पर मँडरा कर सकते हैंfunction () { टूलटिप में फ़ंक्शन बॉडी देखने के शब्द । आप आसानी से इस तरह पूरे प्रोटोटाइप श्रृंखला का निरीक्षण कर सकते हैं! सीडीटी निश्चित रूप से रॉक !!!

आशा है कि आप सभी इसे उपयोगी पाएंगे!

Comments

क्या कोई शॉर्टकट या एक फ़ंक्शन है जो फ़ंक्शन संदर्भ द्वारा खोज करने की अनुमति देता है? जैसे "> निरीक्षण (document.body)"। अभी के लिए मुझे d> tmp = {a: myFunc}; > tmp, इसके बाद "शो फंक्शन डेफिनिशन"

— डेनिस सी

मुझे लगता है कि आप कर सकते हैंdir(myFunc)

— दिमित्री पश्केविच

dir (myFunc) ज्यादा बेहतर है, लेकिन फिर भी दो क्लिक और माउस की जरूरत है

— डेनिस C

ओह, आपका मतलब है कि क्या आप इसे पूरी तरह से कीबोर्ड से कर सकते हैं? कुछ पसंद है findDefinition(myFunc)? AFAIK जो अभी तक मौजूद नहीं है ...

— दिमित्री पश्केविच

यदि आपके पास फ़ंक्शन वाली कोई ऑब्जेक्ट नहीं है, तो आप इसके चारों ओर एक ऑब्जेक्ट बना सकते हैं और यह अभी भी काम करेगा। जैसे कंसोल प्रकार:, ({1:somefunction})और फिर मुद्रित ऑब्जेक्ट के अंदर फ़ंक्शन पर राइट क्लिक करें।

— रक्षक एक

Answer 3

आप कंसोल में इसके नाम का मूल्यांकन करके फ़ंक्शन को प्रिंट कर सकते हैं, जैसे

> unknownFunc
function unknownFunc(unknown) {
    alert('unknown seems to be ' + unknown);
}

यह अंतर्निहित कार्यों के लिए काम नहीं करेगा, वे केवल [native code]स्रोत कोड के बजाय प्रदर्शित करेंगे ।

EDIT : इसका मतलब है कि फ़ंक्शन को वर्तमान दायरे में परिभाषित किया गया है।

Comments

यह मेरे लिए काम नहीं करता है (यहां तक ​​कि पेज के भीतर भी w / फ़ंक्शन परिभाषित):> toggle_search संदर्भError: toggle_search परिभाषित नहीं है

— रयान

आह, मेरा संपादन देखें। अन्य, खोज फ़ंक्शन का उपयोग करने से आपको मदद मिलेगी। Chrome DevTools नहीं एक IDE, यह एक डिबगर :) है है

— Joar

यह वर्तमान में फ़ंक्शन की सक्रिय परिभाषा खोजने के लिए काम करता है।

— पैट्रिक

यह वास्तव में तात्पर्य है कि फ़ंक्शन को वर्तमान दायरे में परिभाषित किया गया है ।

— जोनाथन

@ कम से कम क्रोम 45 में, यह फिर से काम करता है। मुझे पता है कि जब यह पोस्ट किया गया था और अब कुछ चीजें बदल गई हैं। विशेष रूप से, यह फिर से काम करने लगता है।

— जौहर

Answer 4

2016 अपडेट : क्रोम संस्करण में 51.0.2704.103

एक Go to memberशॉर्टकट (सूचीबद्ध settings > shortcut > Text Editor) है। अपने फ़ंक्शन ( sourcesDevTools के पैनल में) वाली फ़ाइल खोलें और दबाएँ:

ctrl+ shift+O

या OS X में:

⌘+ shift+O

यह वर्तमान फ़ाइल के सदस्यों को सूचीबद्ध करने और उन तक पहुंचने में सक्षम बनाता है।

Comments

ठीक है, जो ऐसा लगता है वह एक मनमाना फ़ंक्शन कॉल की "परिभाषा पर जाएं" नहीं है, लेकिन "आपको वर्तमान फ़ाइल में सभी फ़ंक्शन नाम दिखाता है और आपको उनके पास जाने देता है" - जो थोड़े उपयोगी भी है।

— स्कॉट वीवर

यह वही है जो मैं देख रहा था, फ़ायरफ़ॉक्स के समान एक सुविधा! फ़ायरफ़ॉक्स में आप बस देव टूल्स को खोल सकते हैं, Ctrl + f को हिट कर सकते हैं, और यह सभी पैन (HTML / CSS / Javascript / etc) में JS फ़ंक्शन को खोजेगा। यह ऐसा करता है, अन्य उत्तरों में उल्लिखित रेगेक्स सुविधाओं के विपरीत।

— javaBean007

@ कैंडी, क्रोम के किस संस्करण पर? कौन सा ओएस? मैं ओएस एक्स पर क्रोम संस्करण 59.0.3071.115 का उपयोग करता हूं और यह ठीक काम करता है।

— arthur.sw

@ arthur.sw क्षमा करें, मुझे नहीं पता था कि आपको काम करने के लिए स्रोतों में होना चाहिए। मुझे उम्मीद थी कि यह कंसोल में भी काम करेगा।

— रैंडी

मेरे लिए एक क्रोम मेनू खुलता है अगर मैं उस कुंजी संयोजन को देव कंसोल में दबाता हूं।

— ब्लैक

Answer 5

फ़ंक्शन परिभाषा के स्थान पर नेविगेट करने का एक और तरीका डिबगर में टूट जाएगा कहीं आप फ़ंक्शन तक पहुंच सकते हैं और कंसोल में पूरी तरह से योग्य नाम फ़ंक्शन को दर्ज कर सकते हैं। यह कंसोल में फ़ंक्शन की परिभाषा को प्रिंट करेगा और एक लिंक देगा जो क्लिक करने पर स्क्रिप्ट स्थान खोलता है जहां फ़ंक्शन परिभाषित है।

Answer 6

अलग-अलग ब्राउज़र इसे अलग तरह से करते हैं।

1. पृष्ठ पर दाईं ओर क्लिक करके और "निरीक्षण तत्व" का चयन करके, या हिट करके पहले कंसोल विंडो खोलें F12।

2. कंसोल में, टाइप करें ...

   • फ़ायरफ़ॉक्स

     functionName.toSource()

   • क्रोम

     functionName

Comments

जिस फ़ंक्शन के लिए मैं खोज कर रहा हूं वह स्टॉप () है और इसे onmouseover = "this.stop ();" जब मैं आप जो कहता हूं, वह लौटता है: रुकें () {[देशी कोड]} तो अब क्या करें?

— तारिक

functionName.toSource()नवीनतम क्रोम संस्करणों पर भी काम करता है।

— सौरव घोष

@ तारिक बिलिन के लिए ऑनलाइन दस्तावेज़ देखें stop।

— निधि मोनिका का मुकदमा

@QPaysTaxes धन्यवाद, अब मैं समझता हूं कि जब यह वापस लौटे: स्टॉप () {[मूल कोड]} वहां का मूल कोड का अर्थ है कि यह एक निजी कार्य नहीं है, यह आंतरिक कार्य है और मुझे फ़ंक्शन के ऑनलाइन दस्तावेज़ की तलाश करनी चाहिए।

— तारिक

Answer 7

क्रोम कंसोल में:

debug(MyFunction)
MyFunction()

Comments

मुझे वह पसंद है। ध्यान देने योग्य: undebug(MyFunction)ब्रेकपॉइंट को फिर से हटाने के लिए एक करें (आपके द्वारा विधि लागू होने के बाद)

— एंड्रियास डॉक

Answer 8

मैं एक वैश्विक समारोह का पता लगाने का सबसे आसान तरीका है:

1. चुनें सूत्रों का कहना है टैब।
2. में घड़ी फलक क्लिक + और प्रकार खिड़की
3. आपके वैश्विक फ़ंक्शन संदर्भ पहले सूचीबद्ध होते हैं, वर्णानुक्रम में।
4. उस फ़ंक्शन को राइट-क्लिक करें जिसमें आप रुचि रखते हैं।
5. पॉपअप मेनू में शो फ़ंक्शन की परिभाषा चुनें ।
6. स्रोत कोड फलक उस फ़ंक्शन परिभाषा पर स्विच करता है।

Answer 9

Google क्रोम में, तत्व तत्व का निरीक्षण करें आप किसी भी जावास्क्रिप्ट फ़ंक्शन की परिभाषा देख सकते हैं।

1. स्रोत टैब पर क्लिक करें। फिर इंडेक्स पेज को चुनें। फ़ंक्शन के लिए खोजें।

2. फ़ंक्शन का चयन करें फिर फ़ंक्शन पर राइट-क्लिक करें और "कंसोल में चयनित पाठ का मूल्यांकन करें" चुनें।

Answer 10

यदि आप पहले से ही डीबगिंग कर रहे हैं, तो आप फ़ंक्शन पर होवर कर सकते हैं और टूलटिप आपको फ़ंक्शन की परिभाषा में सीधे नेविगेट करने की अनुमति देगा:

आगे पढ़ना :

• Chrome DevTools> जावास्क्रिप्ट डिबगिंग संदर्भ

Answer 11

मुझे एक वस्तु की विधि का स्रोत खोजने में इसी तरह की समस्या थी। वस्तु नाम था myTreeऔर इसकी विधि थी load। मैंने उस लाइन पर एक ब्रेकपॉइंट लगाया, जिसे विधि कहा जाता था। पृष्ठ को पुनः लोड करके, निष्पादन उस बिंदु पर बंद हो गया। फिर DevTools कंसोल पर, मैंने ऑब्जेक्ट को मेथड नाम के साथ टाइप किया, यानी myTree.loadएंटर मारा। विधि की परिभाषा कंसोल पर मुद्रित की गई थी:

इसके अलावा, परिभाषा पर राइट क्लिक करके, आप स्रोत कोड में इसकी परिभाषा पर जा सकते हैं: