JavaScript डेव्हलपर कन्सोल वापरणे. हँडी क्रोम डेव्हलपर कन्सोल वैशिष्ट्ये ज्याबद्दल तुम्हाला कदाचित माहिती नसेल

Android साठी 01.05.2019
Android साठी

प्रत्येक ब्राउझरचे स्वतःचे असते विकसक साधन- यालाच बरेच लोक "कन्सोल" म्हणतात; क्रोम ब्राउझरमधील कन्सोलचा विचार करा. हे असे दिसते:

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

क्रोम ब्राउझरमध्ये कन्सोल कसे उघडायचे:

- F12 की;

— एकाच वेळी Ctrl + Shift + I की दाबून;

- पृष्ठ घटकावर RMB -> कोड पहा;

- ब्राउझर मेनू -> अतिरिक्त साधने -> विकसक साधने.

हे पृष्ठाच्या तळाशी किंवा बाजूला स्थित असू शकते किंवा वेगळ्या विंडोमध्ये अनपिन केले जाऊ शकते. तर, ओपन कन्सोलच्या प्रत्येक टॅबकडे स्वतंत्रपणे पाहू.

एकूण, यात 8 टॅब आहेत, त्यापैकी प्रत्येक विशिष्ट डेटा प्रदर्शित करतो:

1 – घटक(पृष्ठाचा सर्व html/css कोड समाविष्टीत आहे आणि तुम्हाला संशोधनासाठी घटक निवडण्याची, तसेच त्यांना संपादित करण्याची परवानगी देते)

2 – कन्सोल(कोडमध्ये त्रुटी/इशाऱ्यांची उपस्थिती/अनुपस्थिती दाखवते)

3 – स्रोत(आपल्याला पृष्ठ कोडवर ऑपरेशन्स करण्यास अनुमती देते)

4 – नेटवर्क(विशिष्ट विनंत्या आणि विनंत्यांच्या अंमलबजावणीच्या वेळेचा मागोवा घेतो)

5 – टाइमलाइन(पृष्ठ लोड वेळ मोजते)

6 – प्रोफाइल(तुम्हाला JavaScript, CPU प्रोफाइल तयार करण्याची परवानगी देते)

7 संसाधने (तुम्हाला काही जतन केलेला डेटा पाहण्याची अनुमती देते)

8 – ऑडिट(विशिष्ट पॅरामीटर्स तपासते)

आता त्या प्रत्येकातून स्वतंत्रपणे आणि अधिक तपशीलवार जाऊया:

पॅनल घटक


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

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


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

पॅनल कन्सोल


परीक्षकांसाठी सर्वात लोकप्रिय टॅब, कारण स्क्रिप्ट कार्यान्वित करताना आम्हाला कोडमध्ये त्रुटी आढळतात. हे पॅनेल विविध प्रकारचे इशारे आणि शिफारशी देखील प्रदर्शित करते (वरील चित्राप्रमाणे). टॅबमध्ये प्रदर्शित केलेले सर्व संदेश फिल्टर केले जाऊ शकतात. त्रुटी देखील त्याचे स्थान प्रदर्शित करते आणि त्यावर क्लिक करून तुम्हाला स्त्रोत टॅबवर नेले जाईल, जेथे पृष्ठाच्या सामान्य डिझाइनमध्ये त्रुटी प्रदर्शित केली जाईल.

क्रॉस आउट सर्कल चिन्हावर क्लिक करून तुम्ही कन्सोल टॅब फील्ड साफ करू शकता (मागील त्रुटींबद्दलचे संदेश हटवायचे असल्यास) तुम्ही कन्सोलमधील मेसेजेस प्रकारानुसार फिल्टर करू शकता - त्रुटी, चेतावणी, माहिती, मानक आउटपुट, डीबगर संदेश, निश्चित - उपलब्ध कन्सोल पर्यायांपैकी एक निवडून.

पॅनल स्रोत

नियमानुसार, हा टॅब आहे जिथे प्रोग्रामर कोड डीबग करतात. यात 3 खिडक्या आहेत (डावीकडून उजवीकडे):

  1. स्त्रोत फाइल्स झोन. यात JS/CSS सह पृष्ठाशी कनेक्ट केलेल्या सर्व फायली आहेत.
  2. मजकूर क्षेत्र. त्यात फाईल्सचा मजकूर असतो.
  3. माहिती आणि नियंत्रण क्षेत्र.

स्त्रोत फाइल झोनमध्ये, आवश्यक घटक निवडला जातो, मजकूर झोनमध्ये, तो थेट डीबग केला जातो आणि माहिती आणि नियंत्रण झोनमध्ये, तुम्ही डीबग केलेला कोड सुरू/थांबू शकता.

पॅनल नेटवर्क


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

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

कार्यप्रदर्शन पॅनेल


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


हे पॅनेल वेब ऍप्लिकेशन किंवा पेजचा एक्झिक्यूशन वेळ आणि मेमरी वापर प्रोफाइल करणे शक्य करते, अशा प्रकारे भरपूर संसाधने कोठे खर्च केली जात आहेत आणि कोड कसा ऑप्टिमाइझ केला जाऊ शकतो हे समजण्यास मदत करते.

सीपीयूप्रोफाइलर Javascript कार्यान्वित करण्यात घालवलेल्या वेळेची माहिती देते.

ढीग प्रोफाइलरमेमरी वाटप दाखवते.

JavaScript प्रोफाइलस्क्रिप्ट कार्यान्वित करताना नेमका कुठे वेळ घालवला गेला याचा तपशील.


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

पॅनल ऑडिट


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

सुरक्षा पॅनेल


सुरक्षा पॅनेल प्रत्येक विनंतीबद्दल माहिती दर्शवते आणि त्या हायलाइट करते ज्यामुळे साइटला स्टेटसमध्ये प्रतिष्ठित हिरवा चिन्ह प्राप्त होत नाही.

याव्यतिरिक्त, आपण खालील माहिती मिळवू शकता:

  • प्रमाणपत्र तपासण्याबद्दल, साइटने TLS प्रमाणपत्रासह त्याच्या सत्यतेची पुष्टी केली आहे की नाही;
  • TLS कनेक्शन, तुमची साइट आधुनिक सुरक्षित प्रोटोकॉल वापरते की नाही हे सूचित करते;
  • लोड केलेल्या दुय्यम स्त्रोतांची सुरक्षा.

खरं तर, डेव्हलपर टूल्स (क्रोम ब्राउझरमधील कन्सोल) ही एक अतिशय उपयुक्त गोष्ट आहे जी अनेकदा आमच्या, परीक्षकांसाठी उपयुक्त ठरू शकते. https://developers.google.com/web/tools/chrome-devtools/ वेबसाइटवर आणखी उपयुक्त माहिती

नमस्कार, प्रिय मित्रांनो. ब्राउझरमधील डेव्हलपर पॅनल (कन्सोल) हे प्रत्येक वेबसाइट मालकासाठी एक अपरिहार्य साधन आहे, ज्याद्वारे तुम्ही पृष्ठाचा html कोड आणि css शैली द्रुतपणे पाहू शकता. आणि साइट लोड करताना उद्भवलेल्या त्रुटींबद्दल देखील शोधा आणि अनुकूलतेसाठी साइट तपासा.

आज आपण डेव्हलपर पॅनेलमध्ये html कोड, css शैली आणि अनुकूलता यासह काम करण्याचा विचार करू. ही अशी साधने आहेत जी बहुतेक समस्यांचे निराकरण करण्यासाठी आवश्यक आहेत.

चित्राच्या सामान्य समजासाठी, तुम्हाला डेव्हलपर पॅनेलची आवश्यकता भासेल तेव्हा उदाहरण देऊ.

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

त्यानंतर तुम्ही ब्राउझरमधील डेव्हलपर पॅनलमधून इच्छित घटकाकडे पहा, जिथे तुम्ही त्यासाठी html कोड आणि css शैली पाहू शकता.

पॅनेल वापरण्याचा दुसरा पर्याय म्हणजे जेव्हा तुम्हाला साइटवर काहीतरी करायचे असेल, परंतु ते कसे दिसेल हे अद्याप माहित नाही.

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

वेबमास्टर पॅनेल उघडणे आणि इंटरफेसशी परिचित होणे

डेव्हलपर पॅनल प्रत्येक आधुनिक ब्राउझरमध्ये आहे. ते उघडण्यासाठी, तुम्हाला तुमच्या कीबोर्डवरील F12 की दाबावी लागेल.

पॅनेल इंटरफेस भिन्न ब्राउझरमध्ये भिन्न असेल, परंतु ऑपरेशनची तत्त्वे समान आहेत.

मी फायरफॉक्स ब्राउझरमधील पॅनेलला प्राधान्य देतो.

पॅनेल स्वतःच दोन भागांमध्ये विभागले गेले आहे आणि त्यात कामासाठी टॅब आणि साधने आहेत.

पॅनेलमध्ये तुम्ही पेजचा HTML कोड पाहू शकता आणि तो तिथेच संपादित करू शकता. हे करण्यासाठी, इच्छित घटक निवडा, उजवे-क्लिक करा आणि मेनूमधून निवडा "म्हणून संपादित कराएचटीएमएल (सुधारणेम्हणूनHTML)".


शैलींसह कार्य करण्यासाठी, तुम्हाला CSS पॅनेलच्या विभागात जाण्याची आवश्यकता आहे, जिथे तुम्ही शैली जोडू शकता किंवा त्यांच्या शेजारी असलेला चेकबॉक्स काढून विद्यमान अक्षम करू शकता. सर्व काही बदलले जाऊ शकते.

शैली कोणत्या फाईलमध्ये आहेत आणि कोणत्या ओळीवर आहेत हे येथे आपण शोधू शकता.

वेबसाइटवर एचटीएमएल घटकाचे विश्लेषण कसे करावे आणि त्याची सीएसएस शैली कशी शोधावी

चला माझे उदाहरण पाहू, जे प्रत्येक लेखात आहे.

इच्छित घटकाचे विश्लेषण करण्यासाठी, तुम्हाला त्यावर उजवे-क्लिक करणे आणि मेनू आयटम निवडणे आवश्यक आहे. .


पॅनेलमधील कोडसह कार्य करण्याचे संपूर्ण तत्त्व असे आहे की आपल्याला डाव्या विंडोमध्ये html कोड निवडण्याची आवश्यकता आहे आणि उजवीकडे या घटकासाठी शैली असतील.

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


कॉपी करताना किंवा एडिट करताना, ब्लॉक कुठून सुरू होतो आणि कुठे संपतो हे समजून घेणे आवश्यक आहे. येथे थोडीशी चूक केल्यास साच्याच्या संपूर्ण मांडणीत व्यत्यय येऊ शकतो.

व्हिडिओ ट्यूटोरियलमध्ये मी या मुद्द्यावर तपशीलवार जाईन. आणि जर तुम्हाला html आणि css चे मूलभूत ज्ञान पटकन मिळवायचे असेल तर मी तुम्हाला पृष्ठावर जाण्याचा सल्ला देतो "विनामूल्य"आणि Evgeniy Popov द्वारे अभ्यासक्रम डाउनलोड करा.

पॅनेलवरून साइट फाइल्सवर एचटीएमएल कोड कसा कॉपी करायचा

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

तर, माझ्या ब्लॉगवरून बॅनर कॉपी करून ते दुसऱ्या साइटवर हस्तांतरित करण्याचे उदाहरण पाहू.

हे करण्यासाठी, आपल्याला इच्छित घटकाचे परीक्षण करून विकसक पॅनेल उघडण्याची आवश्यकता आहे. DIV ब्लॉकची सुरूवात निश्चित केल्यावर, समोरच्या दृश्याचे उजवे बटण दाबा आणि मेनू आयटम निवडा "बाह्य कॉपी कराHTML"


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

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

डेव्हलपर पॅनलमधून साइट फाइल्सवर शैली कशी हस्तांतरित करायची

एकदा तुम्ही कोड आणि शैलींवर निर्णय घेतल्यानंतर, तुम्ही त्यांना साइट फायलींमध्ये हस्तांतरित करणे सुरू करू शकता. कारण सध्या हे सर्व बदल फक्त तुम्हाला ब्राउझरमध्ये दिसत आहेत आणि तुम्ही पेज रिफ्रेश केल्यास सर्व बदल अदृश्य होतील.

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

डेव्हलपर पॅनेलमध्ये टेम्पलेट प्रतिसाद कसा तपासायचा

पॅनेलला ॲडॉप्टिव्ह मोडवर स्विच करण्यासाठी, तुम्हाला CTRL+SHIFT+M की संयोजन किंवा डेव्हलपर पॅनेलमधील बटण दाबावे लागेल, जे वेगवेगळ्या ब्राउझरमध्ये वेगळ्या पद्धतीने स्थित आहे.



निष्कर्ष

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

वेबसाइट्स आणि संलग्न प्रोग्रामसह कार्य करताना कोड आणि शैलीसह कार्य करण्यासाठी पॅनेल आणि कौशल्ये वापरणे अपरिहार्य आहे.

साधन सेवेत घ्या, ते तुम्हाला आणखी अनेक वेळा उपयोगी पडेल.

आपल्याकडे काही प्रश्न असल्यास, टिप्पण्यांमध्ये त्यांचे उत्तर देण्यात मला आनंद होईल.

मित्रांनो, मी तुम्हाला यशाची शुभेच्छा देतो. नवीन लेखांमध्ये भेटू.

शुभेच्छा, मॅक्सिम जैत्सेव्ह.

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

हे काय आहे?

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

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

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

ब्राउझरमध्ये कन्सोल कसा उघडायचा?

स्वाभाविकच, आपण त्या क्षणाची वाट पाहत आहात जेव्हा आपण दररोज वापरत असलेल्या इंटरनेट ब्राउझरमध्ये आपल्याला या कन्सोलची आवश्यकता का आहे हे आपण शोधू शकता, परंतु प्रथम आपण ते कसे उघडते याचा अभ्यास केला पाहिजे. असे दिसून आले की ते सर्व ब्राउझरमध्ये उपलब्ध आहे आणि जवळजवळ सर्वत्र त्याच प्रकारे उघडते. हे एकतर Ctrl, Shift आणि I की संयोजन वापरून किंवा फक्त F12 की दाबून केले जाते. आपण स्वतः कन्सोल उघडण्याचा प्रयत्न केला पाहिजे आणि जेव्हा आपण यशस्वी व्हाल तेव्हा आपण लेख वाचणे सुरू ठेवू शकता.

ब्राउझर कन्सोल काय करते?

जेव्हा तुम्ही तुमच्या स्क्रीनवर ब्राउझर कन्सोल आणता, तेव्हा तुम्ही पाहत असलेल्या प्रत्येक गोष्टीने तुम्हाला प्रथम आश्चर्य वाटेल. वस्तुस्थिती अशी आहे की कन्सोल एक अतिशय वैशिष्ट्यपूर्ण साधन आहे आणि आपल्याला विविध प्रकारची कार्ये ऑफर केली जातील. उदाहरणार्थ, तुम्ही पृष्ठाचा संपूर्ण कोड पाहू शकता, प्रत्येक घटक पाहू शकता, त्याची शैली पाहू शकता आणि तुम्हाला स्वारस्य असलेल्या प्रत्येक घटकासाठी वापरलेली JavaScript देखील पाहू शकता. प्रत्येक वेब डेव्हलपर जो किमान दोन महिन्यांपासून वेबसाइट तयार करत आहे त्याला अशा कन्सोलबद्दल माहिती असते आणि ते सक्रियपणे वापरतात, कारण तेथे तुम्ही कोडमधील त्रुटींचा मागोवा घेऊ शकता आणि त्यांचे निराकरण करण्याचा प्रयत्न करू शकता. किंवा तुम्ही शैली आणि सामग्री बदलण्याचा प्रयत्न करू शकता आणि कोणतेही अंतिम बदल करण्यापूर्वी ते कसे दिसते ते पाहू शकता. तथापि, हे कन्सोल त्याच्या अष्टपैलुत्वामुळे सामान्य वापरकर्त्यांसाठी देखील उपयुक्त ठरू शकते, परंतु असे वारंवार होत नाही. कॉम्प्युटर गेम्समध्ये, डेव्हलपर कन्सोल तुमच्यासाठी अधिक वेळा उपयुक्त ठरू शकतो. The Witcher 3, Minecraft, Contra आणि इतर अनेक लोकप्रिय गेममध्ये कन्सोल आहेत जे तुम्ही वापरू शकता आणि याविषयी आम्ही पुढे बोलू.

संगणक गेममध्ये कन्सोल

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

गेममध्ये कन्सोल वापरणे

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

फेरफार

तथापि, सर्व गेम विकसकांना विकासक कन्सोलमध्ये प्रवेश सोडू देत नाहीत. "द विचर (1.31 आवृत्ती) 3" हे सर्वात स्पष्ट उदाहरण आहे की गेम डेव्हलपर्सने, गेमची चाचणी आणि डीबग करण्यासाठी या टूलच्या फंक्शन्सचा वापर करून, त्यात प्रवेश पूर्णपणे अवरोधित केला. सुदैवाने, असे लोक होते जे हा प्रवेश पुनर्संचयित करण्यात सक्षम होते आणि एक विशेष बदल जारी केला, तो आपल्या संगणकावर डाउनलोड आणि स्थापित करून, आपण विकसक कन्सोल वापरण्यास सक्षम असाल, जे आपल्या क्षमतांचा लक्षणीय विस्तार करेल.

डेव्हलपर कन्सोल तुम्हाला तुमचे Android ॲप्लिकेशन Google.Play वर जोडण्याची, त्यांची आकडेवारी ट्रॅक करण्याची, वर्णन बदलण्याची आणि सशुल्क ॲप्लिकेशनच्या विक्रीवर आर्थिक अहवाल प्राप्त करण्यास अनुमती देते. कन्सोल स्वतः https://play.google.com/apps/publish येथे उपलब्ध आहे

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

विकसकाचे नाव हे सार्वजनिक नाव आहे जे Google.Play मधील तुमच्या प्रत्येक अनुप्रयोगाच्या वर्णनात दिसते. जरी ते सहजपणे बदलले जाऊ शकते, परंतु हे नाव जबाबदारीने निवडणे चांगले आहे, बरेच वापरकर्ते विकासकाच्या नावासह अनुप्रयोग संबद्ध करतात.

एक ईमेल पत्ता आणि दूरध्वनी क्रमांक देखील तेथे सूचित करणे आवश्यक आहे. ते प्रकाशित केलेले नाहीत आणि अंतर्गत हेतूंसाठी आवश्यक आहेत.

"खाते आणि प्रवेश अधिकार" विभागात, तुम्ही इतर कितीही विकासकांना आमंत्रित करू शकता आणि त्यांचे अधिकार परिभाषित करू शकता. वापरकर्त्यांना कन्सोलमध्ये साइन इन करण्यासाठी, त्यांच्याकडे Google खाते असणे आवश्यक आहे. क्रियाकलाप लॉग तुम्हाला सर्व वापरकर्त्यांच्या क्रियाकलापांचा मागोवा घेण्याची परवानगी देतो.

आर्थिक अहवाल केवळ सशुल्क अनुप्रयोगांसाठी उपलब्ध आहेत. तुम्ही प्रथम "विक्रेता खाते सेट करा" या दुव्यावर क्लिक करणे आवश्यक आहे, तुमचे पूर्ण नाव आणि बँक खाते किंवा कार्डचे मापदंड सूचित करा जेथे कमावलेले पैसे पाठवले जातील. जमा डॉलरमध्ये होतात आणि जेव्हा $100 चा उंबरठा गाठला जातो तेव्हा हस्तांतरित केला जातो. म्हणून, डॉलर बँक कार्ड घेणे अधिक चांगले आहे, हे कोणत्याही बँकेत केले जाऊ शकते, त्याच बँकेकडून कार्ड तपशील मिळवा आणि ते तुमच्या विक्रेता प्रोफाइलमध्ये सूचित करा. अशा प्रकारे तुम्ही विनिमय दरांवर अवलंबून राहणार नाही आणि Google ने तुमच्याकडे जमा केलेली रक्कम तुम्हाला मिळेल.

रशियासाठी, अर्जाची किमान किंमत 30 रूबल आहे, कमाल 6 हजार रूबल आहे. युक्रेनसाठी, किंमती 8 ते 1650 रिव्निया पर्यंत आहेत. हे देखील लक्षात ठेवा की Google प्रत्येक विक्रीतून 30% कमिशन घेते, म्हणून 30 रूबलच्या स्थापित किमान किंमतीपासून, तुम्हाला प्रत्यक्षात फक्त 21 रूबल मिळतील. नफ्याची गणना करताना हे लक्षात घेतले पाहिजे.

|

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

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

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

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

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

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

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

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

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

व्ही

.

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

नेटवर्क टॅब

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

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

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

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

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

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

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

निष्कर्ष

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



आम्ही वाचण्याची शिफारस करतो

वर