Chrome Dev साधनांमधील प्रोसारखे डीबग - प्रस्तुत टॅब कसे वापरावे

आपल्या ब्राउझरमध्येही मुद्रण करण्यास वेळ लागतो - अनप्लॅशवर बँक फ्रोमद्वारे फोटो

आज फ्रंटएंड अनुप्रयोग अधिक गुंतागुंतीचे होत आहेत. जेव्हा अ‍ॅप्स मोठे होतात तेव्हा ते हळू होते. हळू अ‍ॅप करण्यामागील मुख्य कारण म्हणजे ब्राउझरमध्ये मोठ्या प्रमाणात रेंडरिंग होते. परंतु समस्या कोठे आहे हे कसे शोधायचे आणि त्याचे निराकरण कसे करावे?

क्रोम डेव टूल्समध्ये हा टॅब रेंडरिंग नावाचा आहे, जो जावास्क्रिप्ट अनुप्रयोगांमध्ये संबंधित समस्यांचे डीबग करण्यासाठी वापरला जातो. त्याची वैशिष्ट्ये दर्शविण्यासाठी, मी एंग्युलर with सह एक छोटासा अनुप्रयोग तयार केला आहे. त्यात प्राण्यांच्या नावांची यादी आहे. बटणावर क्लिक करून एक नवीन यादृच्छिक नाव जोडले जाऊ शकते. या अद्भुत नोड पॅकेजचा वापर करून नावे व्युत्पन्न केली जातात, अद्वितीय नावे जनरेटर (https://www.npmjs.com/package/unique-names-generator)

डेमो अॅप कार्य कसे करते

जरी हा एक छोटासा अनुप्रयोग आहे, तरी दृश्यामागे बरेच बरीच प्रतिसादाने चालत आहेत. काय चालू आहे ते आपण कसे पाहू शकतो?

प्रथम, आम्हाला Chrome Dev साधने (आपल्याला कसे करावे हे माहित आहे) उघडावे लागेल. मग वरच्या उजव्या कोपर्‍यातील तीन ठिपके बटणावर क्लिक करा. नंतर मेनूमध्ये, अधिक साधने -> प्रस्तुत करणे.

प्रस्तुत टॅबवर नेव्हिगेट करा

रेंडरिंग टॅबचे प्रारंभिक दृश्य नमस्कारसारखे दिसते,

प्रस्तुत टॅबचे प्रारंभिक दृश्य

आपण पाहू शकता की यात बरीच वैशिष्ट्ये आहेत. परंतु या लेखात मी फक्त पेंट फ्लॅशिंग आणि स्क्रोलिंग परफॉर्मन्स इश्यूवर लक्ष केंद्रित करत आहे.

प्रथम पेंट फ्लॅशिंग चेकबॉक्सवर टिक करू आणि काय होते ते पाहू.

प्रस्तुत विषय

हे काय आहे

मुळात पेंट फ्लॅश काय करतो ते वेबपेजवरील क्षेत्र हायलाइट करते जे पुन्हा रंगवत आहेत. आमच्या बाबतीत. जेव्हा मी Add New वर क्लिक करा. संपूर्ण नावे यादी पुन्हा रंगत आहे. ज्याचा वेब अनुप्रयोगांच्या कार्यक्षमतेवर परिणाम होतो. आणि स्क्रोलिंग मध्ये देखील, तो नावे संपूर्ण संच प्रस्तुत करतो. जरी हा एक छोटासा अनुप्रयोग आहे. हे वेब अनुप्रयोगांच्या अकार्यक्षमतेचे अनावश्यक प्रदर्शन, अनावश्यक प्रस्तुतीकरण आणि खराब स्क्रोलिंग या सर्वात सामान्य कारणांवर लक्ष देते.

या समस्येवर मात करण्यासाठी आपण काय करू शकतो

वास्तविक समाधान आपल्या स्वतःच्या कोडवर अवलंबून आहे. परंतु या प्रकरणात, मी Angular ngfor मध्ये ट्रॅकबाय जोडून हे सोडवू शकतो. माझ्या मागील लेखात आपण ट्रॅकबाय बद्दल अधिक तपशील शोधू शकता. त्या समस्येचे निराकरण केल्यानंतर. अॅप खालीलप्रमाणे दिसत आहे,

प्रस्तुत समस्येचे निराकरण केल्यानंतर

छान, एखादा नवीन घटक जोडताना यापुढे ती संपूर्ण यादी पुन्हा प्रस्तुत करते.

परंतु अद्याप स्क्रोलिंगचा मुद्दा आहे

प्रस्तुत टॅबमध्ये स्क्रोलिंग परफॉरमन्स इश्यू नावाचा एक चेकबॉक्स आहे. त्यावर क्लिक करून, Chrome स्क्रोलिंग कार्यप्रदर्शन समस्येवर अधिक तपशील देते.

स्क्रोलिंग कामगिरीबद्दल अधिक अंतर्दृष्टी

हे 'स्क्रोल ऑन रिपेन्ट' असे लेबल दर्शविते आणि स्क्रोलिंग क्षेत्र हायलाइट करते. तर आपल्याला 'रिपेन्ट्स ऑन स्क्रोल' इश्यूचे निराकरण करावे लागेल. जेव्हा मला समजले की ते कसे करावे हे मला माहित नव्हते. तर, मी googled . आणि हा लेख सापडला ज्याने त्याचे वर्णन अगदी स्पष्टपणे केले आहे (https://dev.opera.com/articles/css-will- परिवर्तन-property/). सुदैवाने, त्यात सीएसएस मालमत्ता बदलण्याचे एक साधे निराकरण होतेः बदलेल: स्क्रोलिंग कंटेनरमध्ये रूपांतरित करा. आणि नंतर, माझी अंतिम आवृत्ती खालीलप्रमाणे दिसते,

अंतिम ऑप्टिमाइझ केलेली आवृत्ती

आता हे फक्त नवीन जोडलेले आयटम पुन्हा रंगवित आहे आणि तेच आहे. हे स्क्रोलिंगवर पुन्हा रंगत नाही.

हा एक छोटासा अनुप्रयोग असल्याने आम्ही या निराकरणे लागू केल्यानंतर कामगिरीत कोणतीही लक्षणीय सुधारणा पाहू शकत नाही. परंतु जेव्हा आपला अनुप्रयोग मोठा होत जातो तेव्हा या प्रकारच्या समस्यांचा अनुप्रयोग कार्यक्षमतेवर लक्षणीय परिणाम होतो. त्या प्रकरणात, Chrome देव साधने प्रस्तुतीकरण टॅब वापरुन, आपण आपल्या प्रस्तुत कार्यप्रदर्शन समस्येस सहज शोधू आणि निराकरण करू शकता.

मला आशा आहे की या युक्तीने मोठ्या प्रमाणात जावास्क्रिप्ट अनुप्रयोग विकसित करण्यात आपला थोडा वेळ वाचविला आहे. हॅपी कोडिंग

आपण आपल्या ब्राउझरमध्ये हे करून पाहू इच्छित असल्यास, खालील रेपोमध्ये कोड शोधा,

हे देखील पहा

लोक इतक्या लवकर प्रोग्रामिंग कसे शिकतात? संगणक विज्ञान मला प्रोग्रामिंग शिकवत नाही; ते मला गणित शिकवते. प्रोग्रामिंग अ‍ॅप्स इ. वर माझे कोडिंग ज्ञान वापरण्यासाठी मी काय करू शकतो? स्वतःला प्रोग्राममध्ये कसे शिकवायचे याबद्दल काही सूचना? काही उपयुक्त वेबसाइट्स, व्हिडिओ इ.एचटीएमएलमध्ये पुनरावृत्ती करण्यापासून पार्श्वभूमी प्रतिमा कशी थांबवायचीनोकरीच्या मुलाखतींसाठी कोडिंगचा सराव करण्यासाठी काही चांगल्या वेबसाइट्स काय आहेत? मी वेबसाइट अभ्यागतांचा तपशील कसा गोळा करू? मी वेब विकास पार्श्वभूमीवर येत असल्यास Android आणि iOS दोहोंसाठी नेटिव्ह मोबाईल अ‍ॅप विकासासह कसे प्रारंभ करू? अल्गोरिदमनुसार मी वेबसाइट कशी ऑप्टिमाइझ करू? मी वेब विकास सेवा क्लायंट कसे मिळवू?