चीजें जो मुझे WebKit इंस्पेक्टर के बारे में नहीं पता थीं

लेख पढ़ने के बाद jtaby.com/2012/04/23/modern-web-development-part-1.html मैंने कुछ उपयोगी चीजें सीखीं, मैं उन्हें यहां लिखूंगा ताकि भूल न जाए।

एलिमेंट्स पैनल में ड्रैग एंड ड्रॉप

आप पृष्ठ पर किसी भी HTML तत्व को स्थानांतरित कर सकते हैं, जिससे अन्य तत्वों के सापेक्ष इसकी स्थिति बदल सकती है। यह आपको मजेदार चीजें करने की अनुमति देता है, उदाहरण के लिए:

कंसोल से आइटम के त्वरित लिंक

एलिमेंट्स पैनल में एक आइटम का चयन करें और कंसोल में $0 दर्ज करें। यदि आप jQuery का उपयोग करते हैं, तो आप $($0) प्रिंट कर सकते हैं, जिससे jQuery चयनकर्ता प्राप्त होगा:

नोट: $0 वर्तमान चयनित आइटम है, $1 पिछला चयनित आइटम है, आदि।

डोम परिवर्तन डिबगर

एलिमेंट्स पैनल में एक तत्व पर राइट-क्लिक करें और सबट्री मॉड्यूलेशन पर ब्रेक का चयन करें: हर बार जब इस तत्व के वंशज बदलते हैं, डिबगर स्वचालित रूप से आपको बता देगा कि क्या हुआ था:

शैली बटन

शैलियाँ शीर्षक के ठीक बाद, दो सुपर उपयोगी बटन हैं: एक आपको किसी भी तत्व के लिए एक नई सीएसएस संपत्ति जोड़ने की अनुमति देता है। दूसरा आपको कई राज्यों में एक तत्व की स्थिति को देखने की अनुमति देता है, ताकि आप देख सकें कि तत्व सक्रिय अवस्था में कैसा दिखता है, जब कर्सर इसके ऊपर होता है, फ़ोकस में ।।

निरीक्षक का उपयोग करके संपादित सीएसएस फ़ाइल को सहेजना

संशोधित सीएसएस फ़ाइल के नाम पर क्लिक करें, जो स्रोत पैनल में स्थित है। यहां से आप इसे सेव कर सकते हैं। यह ट्रिक नए चयनकर्ताओं के लिए काम नहीं करता है जो + बटन का उपयोग करके जोड़े गए थे या element.style अंदर जोड़े गए थे, यह केवल परिवर्तित गुणों के लिए काम करेगा जो पहले मौजूद थे।

कंसोल - कई पंक्तियों में कमांड लिखें

कुंजी संयोजन Shift + Enter का उपयोग करके लाइन फ़ीड किया जाता है। Enter का एक नियमित प्रेस स्क्रिप्ट को निष्पादित करता है।

त्वरित कंसोल सफाई के लिए शॉर्टकट

Ctrl + L

बिना अपवाद के ट्रैक करें

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

स्रोत पैनल में ... पर जाएं

कमांड + ओ (विंडोज और लिनक्स के लिए - Ctrl + O ) सभी उपलब्ध फ़ाइलों की एक सूची दिखाता है। कमांड + शिफ्ट + ओ वर्तमान फ़ाइल के सभी कार्यों (वर्गों) की एक सूची दिखाता है। कमांड + L आपको परिभाषित रेखा पर जाने की अनुमति देता है:

"याद रखें" अभिव्यक्ति (चर):

यदि आप डीबगिंग के दौरान एक ही अभिव्यक्ति या चर को कई बार जांचने के लिए मजबूर हैं, तो उन्हें वॉच एक्सप्रेशन सूची में जोड़ें। कोड निष्पादित होने पर अब आप उनका अनुसरण कर सकते हैं:

XHR डिबगिंग

डीबगर में XHR ब्रेकपॉइंट अनुभाग से, आप किसी भी URL (या लिंक का हिस्सा) को निर्दिष्ट कर सकते हैं और यदि XHR अनुरोध निष्पादित होता है जो आपकी आवश्यकताओं को पूरा करता है, तो स्क्रिप्ट XHR अनुरोध भेजने के बिंदु पर बंद हो जाएगी। या आप किसी भी XHR का पालन कर सकते हैं:

किसी अन्य व्यक्ति द्वारा टाइमलाइन पैनल की घटनाओं को लोड करना

मान लीजिए कि आपके कार्य सहयोगी ने कोई समस्या खोज ली है, और आपको एक स्क्रीनशॉट दिखाने के बजाय, वह घटनाओं को बचा सकता है, और आप उन्हें स्थानीय रूप से डाउनलोड कर सकते हैं।