क्रोम कंसोल में बटन दबाए जाने पर मुझे क्या पता चल सकता है?

Question

मैं खुद को Google क्लोजर जावास्क्रिप्ट लाइब्रेरी सिखाने की कोशिश कर रहा हूं। मैं TreeControl यूआई विजेट की जांच कर रहा हूँ।

मैं क्रोम कंसोल का उपयोग कैसे कर सकता हूं यह जानने के लिए कि जब मैं नीचे दिए गए डेमो में "कट" बटन पर क्लिक करता हूं तो कौन से फ़ंक्शन चलाए जाते हैं? उदाहरण के लिए, क्या मैं किसी भी तरह से ब्रेक पॉइंट सेट कर सकता हूं? मैंने स्रोत देखने और चारों ओर देखने की कोशिश की है, लेकिन मुझे लगता है कि क्रोम कंसोल एक और व्यवस्थित विधि प्रदान कर सकता है।

https://github.com/google/closure-library/blob/master/closure/goog/demos/tree/demo.html

Answer 1

Chrome डेवलपर टूल विंडो खुली के साथ

, "स्रोत" टैब पर क्लिक करें। यदि आपको कुछ भी दिखाई नहीं देता है तो आपको उस टैब के ऊपरी-बाएं कोने में "नेविगेटर दिखाएं" बटन पर क्लिक करना पड़ सकता है। नेविगेटर खोलने के साथ, उस फ़ाइल पर नेविगेट करें जहां cut() फ़ंक्शन परिभाषित किया गया है (आपके मामले में यह demo.html है)। जब आप फ़ाइल को देखने में लाते हैं, तो उस रेखा को खोजें जहां cut() फ़ंक्शन परिभाषित किया गया है और फिर उस फ़ंक्शन के भीतर पहली पंक्ति पर ब्रेकपॉइंट सेट करें। आप बाएं तरफ लाइन नंबर पर क्लिक करके ब्रेकपॉइंट सेट कर सकते हैं।

बार जब आप अपने ब्रेकपाइंट (रों) निर्धारित किया है, पृष्ठ पर कुछ है कि cut() समारोह को ट्रिगर करेगा करते हैं और के रूप में यह प्रवेश करती है cut() समारोह ब्राउज़र जैसे ही स्क्रिप्ट निष्पादन का विश्लेषण करना चाहिए (अपने ब्रेकप्वाइंट संभालने पहली पंक्ति पर है cut() फ़ंक्शन के भीतर)। इस बिंदु से आप कोड के अंदर/बाहर/चारों ओर जाने के लिए टैब के ऊपरी दाएं भाग पर नियंत्रण का उपयोग कर सकते हैं और देख सकते हैं कि क्या हो रहा है।

यहाँ मुझे का एक स्क्रीनशॉट यह कर रहा है: http://www.youtube.com/watch?v=nOEw9iiopwI

Answer 2

बात यह है कि आप के लिए कहा जाता है देख रहे हैं: http://d.pr/i/f6BO

इसके अलावा, यहाँ एक महान वीडियो है कि क्रोम देव उपकरण का उपयोग कर, की स्थापना breakpoints शामिल करने के बारे में बात करती है है 'रूपरेखा'।

यह द्वारा प्राप्त किया जा सकता है:

1. जाओ प्रोफाइल
2. पहला विकल्प चुनने के लिए ('इकट्ठा जावास्क्रिप्ट सीपीयू प्रोफाइल')
3. बटन 'कट'

Answer 3

दबाने से पहले यह शुरू आप डीबगर क्षेत्र के दाईं ओर "ईवेंट श्रोता ब्रेकपॉइंट्स" अनुभाग की तलाश कर रहे हैं। इसे खोलें और "माउस" के नीचे क्लिक ईवेंट का चयन करें। स्क्रीन छवि देखें। फिर ऐप में बटन पर क्लिक करें और आपको तुरंत निष्पादित किए जा रहे कोड पर ले जाया जाएगा।

Answer 4

यह कुछ लोगों के लिए उपयोगी हो सकता है:

आप सही तत्वों टैब पर एक तत्व क्लिक करें और 'पर ब्रेक' का उपयोग उदा पर तोड़ने के लिए कर सकते हैं उप तत्व संशोधन। https://developer.chrome.com/devtools/docs/javascript-debugging