|

आधुनिक ब्राउझर JavaScript आणि इतर तंत्रज्ञानासाठी अंगभूत विकास साधने प्रदान करतात. या साधनांमध्ये कन्सोल समाविष्ट आहे, जे शेल इंटरफेस सारखे आहे, तसेच DOM तपासणी, डीबगिंग आणि नेटवर्क क्रियाकलाप विश्लेषणासाठी साधने आहेत.

कन्सोलचा वापर JavaScript विकास प्रक्रियेचा भाग म्हणून माहिती लॉग करण्यासाठी केला जाऊ शकतो. कन्सोल तुम्हाला पृष्ठाच्या संदर्भात JavaScript अभिव्यक्ती कार्यान्वित करून वेब पृष्ठाशी संवाद साधण्याची परवानगी देते. मूलत:, कन्सोल JavaScript कोड लिहिण्याची आणि आवश्यक असल्यास, हाताळण्याची क्षमता प्रदान करते.

हे ट्यूटोरियल तुम्हाला ब्राउझरमध्ये JavaScript कन्सोल कसे वापरायचे ते शिकवेल आणि तुम्हाला उपयुक्त वाटतील अशा इतर अंगभूत विकास साधनांशी तुमची ओळख करून देईल.

ब्राउझरमध्ये JavaScript कन्सोलसह कार्य करणे

एचटीएमएल आणि एक्सएचटीएमएलला सपोर्ट करणारे बहुतांश आधुनिक वेब ब्राउझर डेव्हलपर कन्सोलमध्ये बाय डीफॉल्ट प्रवेश प्रदान करतात, जिथे तुम्ही टर्मिनल शेल सारख्या इंटरफेसमध्ये JavaScript सह कार्य करू शकता. या विभागात, तुम्ही फायरफॉक्स आणि क्रोममधील कन्सोलमध्ये प्रवेश कसा करायचा ते शिकाल.

फायरफॉक्स ब्राउझर

ही साधने तुम्हाला DOM घटकांची तपासणी आणि संपादन करण्याची तसेच विशिष्ट पृष्ठाशी संबंधित HTML वस्तू शोधण्याची परवानगी देतात. DOM मजकूराचा तुकडा किंवा प्रतिमेमध्ये ID विशेषता आहे की नाही हे सूचित करू शकते आणि त्या गुणधर्माचे मूल्य निर्धारित करू शकते.

याव्यतिरिक्त, साइडबारमध्ये किंवा DOM पॅनेलच्या खाली, तुम्ही HTML दस्तऐवज किंवा स्टाइलशीटमध्ये वापरल्या जाणाऱ्या CSS शैली शोधू शकता.

रिअल टाइममध्ये DOM संपादित करण्यासाठी, निवडलेल्या घटकावर डबल-क्लिक करा. उदाहरणार्थ, तुम्ही टॅग फिरवण्याचा प्रयत्न करू शकता

व्ही

.

पुन्हा, अद्यतनित केल्यानंतर पृष्ठ त्याचे पूर्वीचे स्वरूप घेईल.

नेटवर्क टॅब

नेटवर्क टॅब तुम्हाला नेटवर्क विनंत्यांचे निरीक्षण आणि रेकॉर्ड करण्याची परवानगी देतो. हा टॅब ब्राउझरच्या नेटवर्क विनंत्या, पेज लोड करण्याच्या विनंत्या, विनंत्यांची सेवा करण्यासाठी लागणारा वेळ आणि प्रत्येक विनंतीबद्दल माहिती दाखवतो. हा डेटा पृष्ठ लोड कार्यप्रदर्शन आणि डीबग क्वेरी ऑप्टिमाइझ करण्यासाठी वापरला जाऊ शकतो.

तुम्ही JavaScript कन्सोलच्या संयोगाने नेटवर्क टॅब वापरू शकता. उदाहरणार्थ, तुम्ही कन्सोल वापरून पृष्ठ डीबग करणे सुरू करू शकता आणि नंतर नेटवर्क टॅब उघडा आणि पृष्ठ रीलोड न करता नेटवर्क क्रियाकलाप पाहू शकता.

प्रतिसादात्मक डिझाइन

रिस्पॉन्सिव्ह डिझाईन असलेल्या वेबसाइट्स त्यांचे स्वरूप आणि कार्यक्षमता वेगवेगळ्या डिव्हाइसेसमध्ये द्रुतपणे जुळवून घेतात: मोबाइल फोन, टॅब्लेट, डेस्कटॉप संगणक आणि लॅपटॉप. रिस्पॉन्सिव्ह वेबसाइट डिझाइन करताना स्क्रीनचा आकार, पिक्सेल घनता आणि स्पर्श प्रतिसाद हे घटक विचारात घेतले पाहिजेत. वेबसाइट ज्या डिव्हाइसवर उघडली आहे त्याकडे दुर्लक्ष करून ती प्रवेशयोग्य आणि कार्यक्षम आहे याची खात्री करण्यासाठी प्रतिसादात्मक डिझाइनच्या तत्त्वांचा विचार करणे देखील महत्त्वाचे आहे.

आधुनिक ब्राउझर (फायरफॉक्स आणि क्रोमसह) वेबसाइट्स आणि ॲप्लिकेशन्स विकसित करताना प्रतिसादात्मक डिझाइन तत्त्वांचे अनुसरण करण्यासाठी मॉडेल प्रदान करतात. हे मॉडेल एका विशिष्ट उपकरणाच्या वर्तनाचे अनुकरण करतात, जे आपल्याला साइटच्या सर्व कार्यांची चाचणी आणि विश्लेषण करण्यास अनुमती देतात.

आपण ब्राउझर मॅन्युअलमध्ये याबद्दल अधिक शोधू शकता:

• फायरफॉक्समध्ये रिस्पॉन्सिव्ह डिझाईन मोड

निष्कर्ष

हे ट्यूटोरियल आधुनिक वेब ब्राउझरमध्ये JavaScript कन्सोलसह कार्य करण्याचे द्रुत विहंगावलोकन प्रदान करते. तुम्ही इतर उपयुक्त विकास साधनांबद्दल माहिती देखील येथे मिळवू शकता.

सोशल नेटवर्क्ससाठी अनेक भिन्न Java स्क्रिप्ट आमच्या वेबसाइटवर आधीच प्रकाशित केल्या गेल्या आहेत. आणि प्रत्येक स्क्रिप्टच्या वर्णनात, त्यांना सुरू करण्यासाठी तपशीलवार सूचनांचे वर्णन करा... हे निरुपयोगी आहे. आम्ही सर्व ब्राउझरवर स्क्रिप्टच्या स्थापनेचे वर्णन करणारे एक पूर्ण मॅन्युअल लिहिण्याचा निर्णय घेतला आणि एका विशिष्ट ब्राउझरवर अनेक स्थापना पद्धतींची उपस्थिती देखील विचारात घेतली आणि त्या सर्वांचे वर्णन केले.

ब्राउझर कन्सोलद्वारे Java स्क्रिप्ट चालवणे:

आता, जसे तुम्हाला माहिती आहे, कन्सोलद्वारे स्क्रिप्ट्स लाँच करणे हा सर्वात लोकप्रिय आणि सोपा आहे, आणि सर्वात महत्त्वाचे म्हणजे, त्यांचा वापर करण्याचा कार्यरत मार्ग आहे. म्हणून, आम्ही येथूनच प्रारंभ करू - प्रत्येक ब्राउझरसाठी कन्सोलमध्ये जाण्याच्या मार्गांसह.

Mozilla Firefox मध्ये कन्सोल:

Mozilla Firefox ब्राउझरमध्ये वेब कन्सोलवर जाण्याचा सर्वात सोपा मार्ग म्हणजे कीबोर्ड शॉर्टकट वापरणे Ctrl + शिफ्ट + के. क्लिक करा आणि कन्सोल दिसेल.

Google Chrome आणि इतर Chromium-आधारित ब्राउझरमध्ये कन्सोल:

Google Chrome मध्ये, Opera 15+, अमिगो , ऑर्बिटमआणि इतर Chromium-आधारित ब्राउझरमध्ये हॉटकी वापरून वेब कन्सोल लाँच करण्याचा मार्ग देखील आहे. हे करण्यासाठी, आपल्याला एकाच वेळी दाबण्याची आवश्यकता आहे Ctrl + शिफ्ट + जे.

ऑपेरा 12 मधील कन्सोल:

जुन्या पिढीच्या Opera ब्राउझरमध्ये (आवृत्ती 12 पेक्षा जुने नाही) वेब कन्सोल लाँच करण्यासाठी, तुम्हाला कीबोर्ड शॉर्टकट वापरण्याची आवश्यकता आहे. Ctrl + शिफ्ट + आय. हे विकसकांसाठी टूलबार Opera Dragonfly लाँच करेल. ते उघडल्यानंतर, टॅबवर जा कन्सोल.

इंटरनेट एक्सप्लोररमध्ये कन्सोल:

इंटरनेट एक्सप्लोरर वेब ब्राउझरमध्ये कन्सोल उघडण्यासाठी, आपण प्रथम बटणावर क्लिक करणे आवश्यक आहे F12, आणि नंतर संयोजन दाबा Ctrl + 2 (दोघे केंद्रीय पॅनेलवर आहेत, Num विभागात नाहीत).

सफारी कन्सोल:

सफारीमध्ये, कन्सोल उघडण्यापूर्वी, आपण ब्राउझर सेटिंग्ज प्रविष्ट करणे आवश्यक आहे ( गियरवरच्या उजव्या कोपर्यात " सेटिंग्ज… » ॲड-ऑन) आणि पर्याय सक्षम करा मेनू बारमध्ये डेव्हलप मेनू दर्शवा. यानंतर, कन्सोलला कीबोर्ड शॉर्टकटने कॉल केला जाऊ शकतो Ctrl + Alt + सी.

सर्व स्क्रिप्ट्स कन्सोलमध्ये बाण चिन्हाच्या पुढे खास नियुक्त केलेल्या फील्डमध्ये प्रविष्ट केल्या जातात (स्क्रीनशॉट पहा, स्क्रिप्ट प्रविष्ट करण्यासाठी क्षेत्रे लाल फ्रेमने हायलाइट केल्या आहेत). एक बटण दाबून स्क्रिप्ट लाँच केल्या जातात प्रविष्ट करा. कोणतीही स्क्रिप्ट एंटर केल्यानंतर आणि चालवल्यानंतर, ती चालू असताना तुम्हाला कोणत्याही टिप्पण्या किंवा त्रुटी दिसतील.

ब्राउझर ॲड्रेस बारवरून जावा स्क्रिप्ट चालवणे:

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

Mozilla Firefox मध्ये ॲड्रेस बार:

हे दुःखद आहे, परंतु Mozilla Firefox ब्राउझरच्या नवीनतम आवृत्त्यांपैकी कोणतीही आवृत्ती ॲड्रेस बारद्वारे प्रक्रिया स्क्रिप्टला समर्थन देत नाही. जरी पूर्वीच्या आवृत्त्यांमध्ये समान पर्याय उपस्थित होता, आधुनिक फायरफॉक्समध्ये विकसकांनी ते सोडून देण्याचा निर्णय घेतला.

Google Chrome आणि इतर Chromium-आधारित ब्राउझरमधील ॲड्रेस बार:

Google Chrome ब्राउझर आणि त्याच्या स्रोत कोडवर तयार केलेल्या इतर कोणत्याही ब्राउझरमध्ये, जसे की Opera 15+, अमिगो , ऑर्बिटमआणि इतर, तुम्ही ॲड्रेस बारमध्ये स्क्रिप्ट चालवू शकता. परंतु!स्क्रिप्ट टाकल्यानंतर, आपण त्यापूर्वी शब्द जोडणे आवश्यक आहे javascript:(एकत्र कोलनसह), अन्यथा (ऑम्निबॉक्स सारख्या घटनेबद्दल धन्यवाद) स्क्रिप्ट चालवण्याऐवजी, शोध इंजिनवर पुनर्निर्देशन होईल.

ऑपेरा 12 मधील ॲड्रेस बार:

ऑपेरा 12 ब्राउझरमध्ये सर्व काही चांगले आहे. स्क्रिप्ट चालवण्यासाठी, फक्त ॲड्रेस बारमध्ये पेस्ट करा आणि चालवा. यामध्ये कोणतीही अडचण येऊ नये.

इंटरनेट एक्सप्लोररमध्ये ॲड्रेस बार:

या ब्राउझरमध्ये, Google Chrome आणि यासारख्या, ॲड्रेस बारमध्ये स्क्रिप्ट समाविष्ट केल्यानंतर, अगदी सुरुवातीला तुम्हाला जोडणे आवश्यक आहे javascript:(एकत्र कोलनसह), अन्यथा स्क्रिप्ट कार्य करणार नाही.

सफारी मधील ॲड्रेस बार:

ठीक आहे, सफारीमध्ये ऑपेरा 12 प्रमाणेच गोष्टी चांगल्या आहेत. फक्त विद्यमान स्क्रिप्ट ॲड्रेस बारमध्ये पेस्ट करा आणि चालवा.

स्क्रिप्ट संचयित करण्यासाठी आणि चालविण्यासाठी ब्राउझर प्लगइन वापरणे:

स्क्रिप्ट्सचा सतत वापर करणे आवश्यक असल्यास, तुम्हाला त्यांच्याशी टिंकर करणे आवश्यक आहे, त्यांना वेबसाइट किंवा मजकूर फाइलमधून कॉपी करणे आवश्यक आहे, त्यांना प्रत्येक वेळी ॲड्रेस बार किंवा कन्सोलमध्ये पेस्ट करणे आवश्यक आहे. सहमत आहे, हे सोयीचे नाही. म्हणूनच ब्राउझरसाठी विशेष विस्तार (प्लगइन) शोधले गेले, स्क्रिप्ट संचयित करण्यासाठी आणि चालविण्यासाठी डिझाइन केले गेले. आम्ही दोन प्लगइन्सबद्दल बोलू: Mozilla Firefox साठी Greasemonkey आणि Google Chrome साठी Tampermonkey.

Mozilla Firefox साठी Greasemonkey प्लगइन:

Mozilla Firefox साठी Greasemonkey प्लगइन तुम्हाला वापरकर्त्यांनी जोडलेल्या स्क्रिप्ट्स तयार करण्यास, जतन करण्यास आणि चालविण्यास अनुमती देते. काळजी घ्या! एखादी गोष्ट हटवण्यासाठी किंवा बदलण्यासाठी स्क्रिप्ट वापरताना, त्यांना प्लगइनमध्ये जोडल्यानंतर ते आपोआप लॉन्च होतील. आम्ही प्लगइनमध्ये स्क्रिप्ट जोडण्याची जोरदार शिफारस करत नाही, उदाहरणार्थ, व्हीकॉन्टाक्टे पृष्ठ उघडे असताना व्हीकॉन्टाक्टे भिंतीवरील पोस्ट हटवण्यासाठी (तुम्हाला कधीच माहित नाही).

उपयोगकर्ता पुस्तिका:

Google Chrome साठी Tampermonkey प्लगइन:

Tampermonkey प्लगइन हे फायरफॉक्ससाठी ग्रीझमंकी प्लगइनचे एक ॲनालॉग आहे आणि त्याच प्रकारे तुम्हाला सानुकूल स्क्रिप्ट तयार करणे, जतन करणे आणि चालवणे शक्य आहे. काळजी घ्या! एखादी गोष्ट हटवण्यासाठी किंवा बदलण्यासाठी स्क्रिप्ट वापरताना, त्यांना प्लगइनमध्ये जोडल्यानंतर ते आपोआप लॉन्च होतील. आम्ही प्लगइनमध्ये स्क्रिप्ट जोडण्याची जोरदार शिफारस करत नाही, उदाहरणार्थ, व्हीकॉन्टाक्टे पृष्ठ उघडे असताना व्हीकॉन्टाक्टे भिंतीवरील पोस्ट हटवण्यासाठी (तुम्हाला कधीच माहित नाही).

उपयोगकर्ता पुस्तिका:


ग्रीसमंकी आणि टँपरमंकी प्लगइन अशा प्रकारे कार्य करतात. सर्व काही जलद आणि सोपे आहे. जोडलेल्या स्क्रिप्ट कुठेही अदृश्य होत नाहीत; त्या कोणत्याही सोयीस्कर वेळी चालू आणि बंद केल्या जाऊ शकतात.

निष्कर्ष:

लोकप्रिय वेब ब्राउझरच्या नवीनतम आवृत्त्यांसाठी Javascript चालविण्यासाठी सर्व वर्णन केलेल्या पद्धतींचे वर्णन केले आहे. जर तुम्ही वेगळा ब्राउझर किंवा ब्राउझरची जुनी आवृत्ती वापरत असाल आणि त्यामध्ये स्क्रिप्ट चालवण्याच्या पद्धती या लेखात वर्णन केलेल्या पद्धतींपेक्षा वेगळ्या असतील, तर कृपया टिप्पण्यांमध्ये याची तक्रार करा.

Mozilla ब्राउझर काम करण्यासाठी आणि त्याचे कार्यप्रदर्शन सुधारण्यासाठी अनेक भिन्न साधने प्रदान करतो. यापैकी एक सुधारणा संपूर्ण ब्राउझरच्या कन्सोलसह कार्य करणे शक्य करते.

ब्राउझरमध्ये कन्सोल काय आहे

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

हे टूल केवळ वेगळ्या टॅबचीच नाही तर ॲड-ऑनची माहिती तसेच शोध इंजिनचा कोड देखील लॉग करते. मानक वेब डेव्हलपमेंट किटमध्ये उपलब्ध असलेल्या इतर सुधारणा वापरण्यासाठी, तुम्ही टूलबॉक्स वापरण्याचा अवलंब केला पाहिजे. कन्सोल विविध JavaScript अभिव्यक्ती कार्यान्वित करण्यासाठी देखील वापरले जाते.

हे लक्षात घेण्यासारखे आहे की 30 पासून ही फायरफॉक्स लाइन अक्षम केली आहे. Mozilla मध्ये कन्सोल सुरू होण्यासाठी, तुम्हाला about:config – devtools.chrome.enabled या ओळीवर कोड सत्य असाइन करणे आवश्यक आहे. सुधारणा सक्रिय करण्यासाठी तुम्ही दुसरी पद्धत देखील वापरू शकता.

फायरफॉक्स 40 साठी "ब्राउझर क्रोम डीबगिंग टूल्स आणि ॲड-ऑन सक्षम करा" च्या पुढील बॉक्स चेक करणे आवश्यक आहे, या बॉक्सचे नाव थोडे वेगळे असू शकते.

विकसक विंडो उघडल्यानंतर, आपण पाहू शकता की इंटरफेस 3 भागांमध्ये विभागलेला आहे:

वेब डेव्हलपर मोडमध्ये काम करण्याची वैशिष्ट्ये

सर्व सुधारणांचा अधिकाधिक फायदा घेण्यासाठी, आपल्याला केवळ कन्सोल कसे उघडायचे हेच नाही तर त्यासह कार्य करण्याचे काही रहस्य देखील माहित असणे आवश्यक आहे.

एक अतिशय उपयुक्त साधन म्हणजे console.log. हे डीबगिंग आउटपुटसाठी वापरले जाते, परंतु प्रगत वापरकर्ते माहितीसह कार्य करण्याच्या इतर अनेक पद्धतींचा अवलंब करतात. उदाहरणार्थ, console.log च्या ऑपरेशनचे सिद्धांत printf सारखेच आहे.

फायरफॉक्स तुम्हाला स्टाइल फॉरमॅट करताना दुसरा युक्तिवाद लागू करण्यासाठी “%c” पॅटर्न वापरण्याची परवानगी देतो. Mozilla चेतावणी किंवा त्रुटी संदेशांसारख्या माहितीच्या पुढे एक लहान राखाडी चिन्ह प्रदर्शित करेल. याचा अर्थ या सूचनांकडे लक्ष देणे आवश्यक आहे. या शोध इंजिनमध्ये डीबग संदेश सूचित केले जात नाहीत, कारण, विकसकांच्या मते, ते अप्रचलित आहेत आणि त्याऐवजी console.log() वापरले जावे.

हे लक्षात घेण्यासारखे आहे की या शोध इंजिनमध्ये आपण एकाच वेळी अनेक मूल्ये वापरू शकता. हे करण्यासाठी, आपण त्यांना स्वल्पविरामाने वेगळे करणे आवश्यक आहे, जे एका ओळीवर समाविष्ट केल्यावर अतिशय सोयीचे आहे.

टाइमर आणि सेव्हिंग स्टेट वापरणे

विकसक मोड सक्षम म्हणजे तुम्ही टायमर वापरू शकता. हे console.time द्वारे लॉन्च केले जाऊ शकते. टायमर थांबवणे console.timeEnd वापरून केले जाते. वेळ मिलिसेकंदांमध्ये प्रदर्शित होतो.

टाइमर सक्रिय झाल्यापासून काउंटडाउन सुरू होते. याव्यतिरिक्त, तुम्ही टाइमस्टॅम्प तयार करू शकता. कोडचा एक भाग कार्यान्वित करण्यासाठी किती वेळ लागला हे निर्धारित करण्यासाठी ते HTTP रहदारी वेळेसह वापरले जातात.

बऱ्याचदा, माहिती संदर्भासाठी किंवा ट्रॅकिंग लॉगसाठी जतन करणे आवश्यक आहे. तुम्हाला पृष्ठ उघडण्यामध्ये प्रदर्शित झालेला स्टेट किंवा डेटा जतन करण्यासाठी काहीही करण्याची आवश्यकता नाही. फायरफॉक्स ही माहिती आपोआप सेव्ह करेल. तुम्ही वरच्या उजव्या कोपऱ्यातील बटण सक्रिय केल्यानंतर किंवा पॅनेल पुन्हा उघडून देखील संदेश साफ करू शकता.

Mozilla Firefox मध्ये कन्सोल उघडणे अगदी सोपे आहे. हे करण्यासाठी, आपल्याकडे मूलभूत कौशल्ये असणे आवश्यक आहे जे आपल्याला ब्राउझरच्या ऑपरेशनवर नियंत्रण ठेवण्यास आणि आवश्यक असल्यास ते सुधारण्यास मदत करतील.