वेब ब्राउझर विकसक साधने कसे वापरावे

वेब डिझायनर, विकासक आणि परीक्षकांसाठी एकीकृत साधने

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

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

खालील ट्यूटोरियल आपल्याला कित्येक लोकप्रिय वेब ब्राऊझर्समध्ये या विकसक साधनांमध्ये प्रवेश कसा करावा याबद्दल मार्गदर्शन करतात.

गुगल क्रोम

Chrome चे विकसक साधने आपल्याला कोड संपादित आणि डीबग करण्यास परवानगी देतात, कार्यप्रदर्शन समस्यांचे निराकरण करण्यासाठी वैयक्तिक घटकांचे ऑडिट करा, त्यामध्ये Android किंवा iOS चालविणार्या विविध डिव्हाइस स्क्रीनचे अनुकरण करा आणि बरेच उपयोगी कार्य करा.

1. Chrome च्या मुख्य मेनू बटणावर क्लिक करा, तीन क्षैतिज ओळी चिन्हांकित करा आणि ब्राउझरच्या वरील-उजव्या कोपर्यात स्थित करा.
2. जेव्हा ड्रॉप-डाउन मेनू दिसेल, तेव्हा आपला माउस कर्सर अधिक साधने पर्यायावर फिरवा.
3. उप-मेनू आता दिसला पाहिजे. विकासक साधने लेबल केलेल्या पर्याय निवडा. आपण या मेनू आयटमच्या जागी खालील कीबोर्ड शॉर्टकट देखील वापरू शकता: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + COMMAND + I )
4. या उदाहरणात स्क्रीनशॉटप्रमाणे दर्शविलेले Chrome विकसक साधने आता इंटरफेस प्रदर्शित केले जावे. आपल्या Chrome च्या आवृत्तीवर आधारीत, आपण पहात असलेला प्रारंभिक लेआउट जो प्रस्तुत केलेला आहे त्यापेक्षा थोडा वेगळा असू शकतो. विकसक साधनांचा मुख्य केंद्र, विशेषत: स्क्रीनच्या तळाशी किंवा उजव्या बाजूवर स्थित आहे, यात खालील टॅब्ज आहेत
   घटकः सीझस आणि एचटीएमएल कोडची तपासणी करण्याची क्षमता तसेच सीझन ऑन-द-फ्लाची संपादन करण्याची क्षमता प्रदान करते, रिअल टाईम मधील आपल्या बदलांचे परिणाम पाहून.
   कन्सोल: क्रोमचा जावास्क्रिप्ट कन्सोल डायरेक्ट कमांड एन्ट्री तसेच डायग्नोस्टिक डीबगिंगसाठी परवानगी देतो.
   स्त्रोत: एका शक्तिशाली ग्राफिकल इंटरफेसद्वारे तुम्ही जावास्क्रिप्ट कोड डिबग करू शकता.
   नेटवर्क: पूर्ण विनंती आणि प्रतिसाद शीर्षलेखांसह तसेच प्रगत टाइमिंग मेट्रिक्ससह सक्रिय अनुप्रयोग किंवा पृष्ठावर प्रत्येक संबंधित ऑपरेशनची तपशीलवार माहिती श्रेणीबद्ध करते आणि दाखवते.
   टाइमलाइन: जेव्हा पृष्ठ किंवा अॅप लोड विनंती सुरू केली जाते तेव्हा ब्राउझरमध्ये प्रत्येक गतिविधीच्या सखोल विश्लेषण करण्याची अनुमती देते.
5. या विभागांव्यतिरिक्त, आपण टाइमलाइन टॅबच्या उजवीकडे असलेल्या >> आयकॉनद्वारे पुढील साधनांमध्ये देखील प्रवेश करू शकता.
   प्रोफाईल: CPU प्रोफाईलर आणि हीप प्रोफाइलर विभागात तुटलेली, व्यापक मेमरी वापर आणि सक्रिय अनुप्रयोग किंवा पृष्ठाचे एकूण निष्पादन वेळ प्रदान करते.
   सुरक्षा: सक्रिय पृष्ठ किंवा अनुप्रयोगासह प्रमाणपत्र समस्या आणि इतर सुरक्षा-संबंधित समस्या हायलाइट.
   संसाधने: येथे आपण कुकीज, स्थानिक संचयन, अॅप कॅशे आणि वर्तमान वेब पृष्ठ किंवा अनुप्रयोगाद्वारे वापरलेले इतर स्थानिक डेटा स्त्रोत तपासू शकता.
   ऑडिट: एक पृष्ठ किंवा अनुप्रयोगाचे लोड वेळ आणि सामान्य कार्यप्रदर्शन ऑप्टिमाइझ करण्याचे मार्ग ऑफर करते.
6. डिव्हाइस मोड आपल्याला एका सिम्युलेटरमध्ये सक्रिय पृष्ठ पाहण्याची अनुमती देतो जे जवळजवळ एक डझन साधनांपैकी एकवर दिसतो तसा जवळजवळ नक्की करते जे iPad, iPhone आणि Samsung दीर्घिका सारख्या सुप्रसिद्ध Android आणि iOS मॉडेलसह आपल्या विशिष्ट विकासासाठी किंवा चाचणी गरजा फिट करण्यासाठी आपण सानुकूल स्क्रीन रिझोल्यूशनचे अनुकरण करण्याची क्षमता देखील दिली आहे. डिव्हाइस मोड चालू आणि बंद करण्यासाठी, एलेमेंट्स टॅबच्या डावीकडे थेट मोबाइल फोन चिन्ह सिलेक्ट करा.
7. आपण आपल्या विकसक साधनांचे स्वरूप आणि कस्टमाइझ देखील कस्टमाइझ करू शकता, ज्याद्वारे वरील तीन उभी-ठेवलेल्या बिंदू दर्शविलेल्या मेन्यू बटणावर क्लिक करून आणि वरील टॅब्सच्या उजव्या बाजूला असलेल्या बाजूला दिसू शकता. या ड्रॉप-डाउन मेनूमधून, आपण डॉक बदलू शकता, भिन्न साधने दर्शवू किंवा लपवू शकता तसेच डिव्हाइसची निरीक्षक म्हणून आणखी प्रगत आयटम लाँच करू शकता. आपणास असे आढळेल की या विभागात सापडलेल्या सेटिंग्जद्वारे dev tools इंटरफेस स्वतः उच्च अनुकूलनीय आहे

Mozilla Firefox

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

शिफारस वाचन: शीर्ष 25 ग्रेझ्नेकी आणि टॅम्प्रमनिकी वापरकर्ता स्क्रिप्ट

1. फायरफॉक्सच्या मुख्य मेन्यू बटणावर क्लिक करा, तीन क्षैतिज ओळी दर्शवल्या जातात आणि ब्राऊजर खिडकीच्या उजवीकडील कोपर्यात स्थित आहे.
2. जेव्हा ड्रॉप-डाउन मेनू दिसत असेल, तेव्हा विकसक लेबल असलेले चिन्ह निवडा. वेब डेव्हलपर मेनू आता प्रदर्शित केले जावे, ज्यामध्ये खालील पर्याय असतील. आपण लक्षात येईल की बहुतेक मेनू आयटमना त्यांच्याशी संबद्ध कीबोर्ड शॉर्टकट्स आहेत.
   टूल टॉगल करा: विशेषतः ब्राउझर विंडोच्या तळाशी असलेल्या विकासक साधने इंटरफेस प्रदर्शित करते किंवा लपविते. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स ( ALT (ऑप्शन) + COMMAND + I ), विंडोज ( CTRL + SHIFT + I )
   निरीक्षक: आपल्याला सक्रिय पृष्ठावर तसेच पोर्टेबल डिव्हाइसवर रिमोट डीबगिंगद्वारे सीएसएस आणि HTML कोडचे निरीक्षण आणि / किंवा चिमटा करण्याची परवानगी देते. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स ( ALT (ऑप्शन) + कमांड + सी ), विंडोज ( CTRL + SHIFT + C )
   वेब कन्सोल: आपल्याला सक्रिय पृष्ठातील JavaScript एक्सप्रेशन निष्पादित करण्याची तसेच सुरक्षितता इशारे, नेटवर्क विनंत्या, सीएसएस संदेश आणि अधिकसह लॉग केलेल्या डेटाच्या विविध संचाचे पुनरावलोकन करण्याची अनुमती देते. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स ( ALT (ऑप्शन) + COMMAND + K ), विंडोज ( CTRL + SHIFT + K )
   डीबगर: जावास्क्रिप्ट डीबगर आपल्याला डॉट नोड्स, ब्लॅक बॉक्सिंग बाह्य स्त्रोत आणि बरेच काही तपासणे, ब्रेकपॉइंट सेट करून दोष शोधणे आणि त्यांचे निराकरण करण्यास सक्षम करते. इंस्पेक्टरच्या बाबतीतही हे वैशिष्ट्य दूरस्थ डीबगिंगला समर्थन देते. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स ( ALT (ऑप्शन) + कमांड + एस ), विंडोज ( CTRL + SHIFT + S)
   शैली संपादक: आपल्याला नवीन स्टाइलशीट तयार करण्याची आणि सक्रिय वेब पृष्ठासह अंतर्भूत करण्याची अनुमती देते किंवा विद्यमान पत्रक संपादित करा आणि केवळ एका क्लिकसह आपल्या बदलांमध्ये ब्राउझरमध्ये कसे प्रस्तुत केले जातात हे तपासा कीबोर्ड शॉर्टकट: मॅक ओएस एक्स, विंडोज ( SHIFT + F7 )
   कार्यप्रदर्शन: सक्रिय पृष्ठाच्या नेटवर्कवरील कार्यप्रदर्शन, फ्रेम दर डेटा, JavaScript अंमलबजावणी वेळ आणि स्थिती, पेंट फ्लॅशिंग आणि बरेच काही तपशीलवार खंडित करते. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स, विंडोज ( SHIFT + F5 )
   नेटवर्क: संबंधित पद्धतीने, मूळ डोमेन, प्रकार, आकार आणि कालावधी ओलांडून ब्राउझरद्वारे सुरू केलेल्या प्रत्येक नेटवर्क विनंतीची सूची करते कीबोर्ड शॉर्टकट: मॅक ओएस एक्स ( ALT (OPTION) + COMMAND + Q ), विंडोज ( CTRL + SHIFT + Q )
   विकसक टूलबार: इंटरएक्टिव्ह कमांड लाइन इंटरप्रिटर उघडते सर्व उपलब्ध आदेशांची सूची आणि त्यांच्या योग्य सिंटॅक्ससाठी दुभाषा मध्ये मदत प्रविष्ट करा. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स, विंडोज ( SHIFT + F2 )
   वेबइड: फायरफॉक्स ओएस चालविणाऱ्या प्रत्यक्ष यंत्राद्वारे किंवा फायरफॉक्स ओएस सिम्युलेटरद्वारे वेब अॅप्स बनवण्याची व अंमलबजावणी करण्याची क्षमता प्रदान करते. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स, विंडोज ( SHIFT + F8 )
   ब्राऊझर कन्सोलः वेब कन्सोल सारखीच कार्यक्षमता प्रदान करते (वरील पहा). तथापि, दिलेला सर्व डेटा संपूर्ण Firefox अनुप्रयोगांसाठी आहे ( विस्तार आणि ब्राउझर-स्तरीय फंक्शन्ससह) फक्त सक्रिय वेब पेजच्या विरोधात कीबोर्ड शॉर्टकट: मॅक ओएस एक्स ( SHIFT + COMMAND + J ), विंडोज ( CTRL + SHIFT + J )
   प्रतिसाद डिझाईन दृश्य: आपल्याला टॅब्लेट आणि स्मार्टफोनसह अनेक डिव्हाइसेसची नक्कल करण्यासाठी वेगवेगळ्या रिजॉल्यूशन, लेआउट्स आणि स्क्रीन आकारांमध्ये एक वेब पृष्ठ झटपट पहाता येते. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स ( ALT (ऑप्शन) + कमांड + एम ), विंडोज ( CTRL + SHIFT + M )
   Eyedropper: वैयक्तिकरित्या निवडलेले पिक्सेलसाठी हेक्स रंग कोड प्रदर्शित करते.
   स्क्रॅचपॅड : आपल्याला पॉप-आउट फायरफॉक्स विंडोमधून जावास्क्रिप्ट कोडचे स्निपेट लिहू, संपादित, एकत्रीकरण आणि कार्यान्वीत करू देते. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स, विंडोज ( SHIFT + F4 )
   पृष्ठ स्त्रोत: मूळ ब्राउझर-आधारित विकसक साधन, हा पर्याय फक्त सक्रिय पृष्ठासाठी उपलब्ध स्त्रोत कोड प्रदर्शित करतो. कीबोर्ड शॉर्टकट: मॅक ओएस एक्स ( COMMAND + U ), विंडोज ( CTRL + U )
   अधिक साधने मिळवा: मोज़िलाच्या अधिकृत अॅड-ऑन साइटवर वेब डेव्हलपर टूलबॉक्स् संग्रह उघडतो, सुमारे एक डझन लोकप्रिय विस्तार जसे की फायरबग आणि ग्रेझॅमकी.

मायक्रोसॉफ्ट एज / इंटरनेट एक्सप्लोरर

सामान्यतः एफ 12 डेव्हलपर साधने म्हणून संदर्भित, इंटरनेट एक्सप्लोररच्या पूर्वीच्या आवृत्ती पासून इंटरफेस लॉन्च केलेल्या कीबोर्ड शॉर्टकटला श्रद्धांजली, आय ई 11 मध्ये देव टूल्सस आणि मायक्रोसॉफ्ट एज बर्याच सुलभ गटाचा वापर करुन सुरु झाल्यापासून लांब आहे. मॉनिटर्स, डीबगर्स, एमुलेटर आणि ऑन-द फ्लाई कंपाइलर.

1. अधिक क्रिया मेनूवर क्लिक करा, जे तीन बिंदुंनी दर्शविले जाते आणि ब्राउझर विंडोच्या वरच्या उजवीकडील कोपर्यात स्थित आहे. जेव्हा ड्रॉप-डाउन मेनू दिसत असेल, तेव्हा F12 Developer Tools लेबल असलेले पर्याय निवडा. मी आधीच नमूद केल्याप्रमाणे, आपण F12 कीबोर्ड शॉर्टकट मार्गे साधने देखील प्रवेश करू शकता.
2. विकास इंटरफेस आता प्रदर्शित केले जावे, विशेषत: ब्राउझर विंडोच्या तळाशी. खालील साधने उपलब्ध आहेत, प्रत्येक आपापल्या टॅब शीर्षकाखाली क्लिक करून किंवा संबंधित कीबोर्ड शॉर्टकट वापरून प्रत्येक प्रवेशजोगी.
   DOM एक्सप्लोरर: आपल्याला सक्रिय पृष्ठावर स्ट्रीशीट्स आणि HTML चे संपादन करण्याची परवानगी देते, आपण जाताना सुधारित परिणाम प्रस्तुतीकरण करतो. जेथे लागू असेल तेथे कोड स्वयंपूर्ण करण्यासाठी IntelliSense कार्यक्षमता वापरते. कीबोर्ड शॉर्टकट: (CTRL + 1)
   कन्सोल: एकाग्र केलेल्या API द्वारे काउंटर, टाइमर, ट्रेस आणि सानुकूलित संदेशांसह डीबगिंग माहिती सबमिट करण्याची क्षमता प्रदान करते. तसेच, आपण एका सक्रिय वेब पृष्ठामध्ये कोड इंजेक्ट करू शकता आणि रिअल टाईममध्ये स्वतंत्र व्हेरिएन्टला नियुक्त केलेले मूल्य सुधारू शकता. कीबोर्ड शॉर्टकट: (CTRL + 2)
   डीबगर: आपण ब्रेकपॉइंट सेट करू आणि आपला कोड कार्यान्वित करताना डीबग करू, आवश्यक असल्यास ओळद्वारे ओळ. कीबोर्ड शॉर्टकट: (CTRL + 3)
   नेटवर्क: पृष्ठ लोड आणि प्रोटोकॉल तपशील, सामग्री प्रकार, बँडविड्थ वापर आणि बरेच काही यासह अंमलबजावणी दरम्यान ब्राउझरद्वारे सुरू केलेल्या प्रत्येक नेटवर्क विनंतीची सूची करते कीबोर्ड शॉर्टकट: (CTRL + 4)
   कार्यप्रदर्शन: पृष्ठ लोड वेळा आणि इतर उपक्रमांची गती वाढविण्यास मदत करण्यासाठी तपशील फ्रेम दर, CPU वापर आणि इतर कार्यप्रदर्शन-संबंधित मेट्रिक्स. कीबोर्ड शॉर्टकट: (CTRL + 5)
   मेमरी: वेगवेगळ्या वेळ मध्यांतरापासून स्नॅपशॉट्ससह मेमरी वापर टाइमलाइन दाखवून वर्तमान वेब पृष्ठावर संभाव्य मेमरी पाझर अलग ठेवणे आणि सुधारणा करण्यास मदत करते. कीबोर्ड शॉर्टकट: (CTRL + 6)
   इम्यूलेशन: स्मार्टफोन, टॅब्लेट आणि अन्य डिव्हाइसेसच्या अनुकरणाने सक्रिय पृष्ठ विविध ठराव आणि स्क्रीन आकारांमध्ये कसे प्रस्तुत करेल ते दर्शविते. वापरकर्ता एजंट आणि पृष्ठ अभिमुखता सुधारित करण्याची क्षमता देखील प्रदान करते, तसेच अक्षांश आणि रेखांश प्रविष्ट करून वेगवेगळ्या भौगोलिक परिस्थितीचे अनुकरण करणे. कीबोर्ड शॉर्टकट: (CTRL + 7)
3. कन्सोल प्रदर्शित करण्यासाठी इतर कोणत्याही साधनांमध्ये, त्यातील उजव्या ब्रॅकेटच्या चौरस बटणावर क्लिक करा, जे डेव्हलपमेंट टूल्स इंटरफेसच्या उजवीकडील कोपर्यात स्थित आहे.
4. अनडॉक करण्यासाठी, विकसक साधने इंटरफेस जेणेकरून ते स्वतंत्र विंडो बनेल, दोन कॅस्केडिंग आयतद्वारे दर्शवलेल्या बटणावर क्लिक करा किंवा खालील कीबोर्ड शॉर्टकट वापराः CTRL + P आपण CTRL + P दुसर्यांदा दाबून साधने परत त्यांच्या मूळ स्थानात ठेवू शकता.

ऍपल सफारी (फक्त OS X)

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

1. आपल्या स्क्रीनच्या शीर्षस्थानी असलेल्या ब्राउझर मेनूमध्ये Safari वर क्लिक करा. जेव्हा ड्रॉप-डाउन मेनू दिसेल, तर प्राधान्ये निवडा. आपण या मेनू आयटमच्या जागी खालील कीबोर्ड शॉर्टकट देखील वापरू शकता: COMMAND + COMMA (,)
2. आपल्या ब्राऊझर विंडोवर ओव्हरलायड करताना सफारीचे प्राधान्यता इंटरफेस आता प्रदर्शित केले जावे. शीर्षलेखाच्या उजव्या बाजूला असलेल्या प्रगत चिन्हावर क्लिक करा.
3. प्रगत प्राधान्ये आता दृश्यमान असावी. या स्क्रीनच्या तळाशी एक पर्याय आहे लेबल शो विकसक मेनू मेनू बारमध्ये , एक चेक बॉक्ससह. बॉक्समध्ये दाखवलेले कोणतेही चेक मार्क नसल्यास, त्यावर एकदा ठेवण्यासाठी एकदा त्यावर क्लिक करा
4. वरील डाव्या कोपऱ्यात सापडलेल्या लाल 'x' वर क्लिक करून प्राधान्ये इंटरफेस बंद करा.
5. आता आपण बुकमार्क आणि विंडो दरम्यान स्थित विकास नावाचे ब्राउझर मेनूमध्ये एक नवीन पर्याय पहावे. या मेनू आयटमवर क्लिक करा एक ड्रॉप-डाउन मेनू आता प्रदर्शित केले जावे, ज्यामध्ये पुढील पर्याय असतील.
   यासह पृष्ठ उघडा: सध्या आपल्या Mac वर स्थापित केलेल्या अन्य ब्राउझरपैकी एकामध्ये आपण सक्रिय वेब पृष्ठ उघडण्यास अनुमती देते.
   वापरकर्ता एजंट: आपल्याला क्रोम, फायरफॉक्स व इंटरनेट एक्सप्लोररच्या अनेक आवृत्त्यांसह डझनने प्री-डिफिल्ड युझर एजंट व्हॅल्यूमधून निवडता येते, तसेच आपल्या स्वतःच्या सानुकूल स्ट्रिंगची व्याख्या करा.
   प्रतिसाद डिझाईन मोड प्रविष्ट करा: वर्तमान पृष्ठ देते कारण ते विविध डिव्हाइसेसवर आणि भिन्न स्क्रीन रिझोल्युशनवर दिसतील.
   वेब इंस्पेक्टर दर्शवा: Safari च्या dev साधनांसाठी मुख्य इंटरफेस सुरू करतो, विशेषत: आपल्या ब्राउझर स्क्रीनच्या खालच्या बाजूस ठेवलेले आणि खालील विभाग: घटक , नेटवर्क , स्त्रोत , टाइमलाइन , डीबगर , संचयन , कन्सोल .
   त्रुटी कन्सोल दर्शवा: थेट साधन साधने इंटरफेस सुरू करते, थेट कन्सोल टॅबवर जे त्रुटी, इशारे आणि इतर शोध करण्यायोग्य लॉग डेटा दर्शविते.
   पृष्ठ स्त्रोत दर्शवा: स्त्रोत टॅब उघडतो, जे दस्तऐवजाद्वारे श्रेणीबद्ध सक्रिय पृष्ठासाठी स्त्रोत कोड दर्शविते.
   पृष्ठ स्त्रोत दर्शवा: शो स्त्रोत पृष्ठ म्हणून समान कार्य करते.
   स्निपेट एडिटर पहा: एक नवीन विंडो उघडते जेथे आपण सीएसएस आणि एचटीएमएल कोडमध्ये प्रवेश करू शकता, आउट-आउट मधून आउटपुटचे पूर्वावलोकन करू शकता.
   विस्तार बिल्डर दर्शवा: CSS, HTML आणि JavaScript सह Safari विस्तार तयार किंवा संपादित करण्याची क्षमता प्रदान करते.
   टाइमलाइन रेकॉर्डिंग दर्शवा: टाइमलाइन टॅब उघडते आणि वास्तविक वेळेत नेटवर्क विनंत्या, लेआउट आणि रेंडरिंग माहिती तसेच JavaScript अंमलबजावणी प्रदर्शित करणे सुरू होते.
   रिक्त कॅशे: सध्या आपल्या हार्ड ड्राइव्हवर संग्रहित केलेले संपूर्ण कॅशे हटवते.
   कॅशे अक्षम करा: कॅशेिंगपासून सफ़ारी थांबते जेणे करून सर्व सामग्री प्रत्येक पृष्ठ लोडवर सर्व्हरवरून मिळवली जाईल.
   प्रतिमा अक्षम करा: सर्व वेब पृष्ठांवर प्रतिमेतून प्रतिमा प्रतिबंधित करते
   शैली अक्षम करा: पृष्ठ लोड होताना CSS गुणधर्म दुर्लक्ष करते.
   JavaScript अक्षम करा: सर्व पृष्ठांवर JavaScript अंमलबजावणी प्रतिबंधित करते.
   विस्तार अक्षम करा: सर्व स्थापित केलेले विस्तार ब्राउझरमध्ये चालण्यापासून प्रतिबंधित करते.
   साइट-विशिष्ट हॅक अक्षम करा: जर Safari सुधारित केले गेले आहे तर विशिष्ट वेब पृष्ठास विशिष्ट समस्या हाताळण्यासाठी सुधारित केले आहे, तर हा पर्याय त्या बदलांना अवरोधित करेल जेणेकरुन या सुधारणांची अंमलबजावणी करण्याआधी पृष्ठ लोड होईल.
   स्थानिक फाइल निर्बंध अक्षम करा: ब्राउझरला आपल्या स्थानिक डिस्कवर फायलींवर प्रवेश करण्याची अनुमती देते, सुरक्षा कारणास्तव डीफॉल्टद्वारे प्रतिबंधित केलेली क्रिया.
   क्रॉस-ओरिजिन मर्यादा अक्षम करा: XSS आणि इतर संभाव्य धोके टाळण्यासाठी डीफॉल्टनुसार हे प्रतिबंध लागू केले जातात. तथापि, विकासाच्या हेतूने त्यांना तात्पुरते अक्षम करणे आवश्यक असते.
   स्मार्ट शोध फील्ड मधून JavaScript ला अनुमती द्या: सक्षम केले असताना, javascript असलेल्या URL प्रविष्ट करण्याची क्षमता प्रदान करते : थेट अॅड्रेस बारमध्ये नियुक्त केले
   असुरक्षित म्हणून SHA-1 प्रमाणपत्रासह उपचार करा: SHA-1 अल्गोरिदम वापरून SSL प्रमाणपत्र मोठ्या प्रमाणावर कालबाह्य आणि असुरक्षित असल्याचे मानले जाते.