वेब ब्राउज़र डेवलपर उपकरण का उपयोग कैसे करें

वेब ब्राउज़र सर्फ करने वाले रोजमर्रा के उपयोगकर्ता पर ध्यान केंद्रित करने वाले अधिकांश ब्राउज़र निर्माताओं के अलावा, वे वेब डेवलपर्स, डिज़ाइनर और गुणवत्ता आश्वासन पेशेवरों को भी पूरा करते हैं जो उन ऐप्स और साइटों को बनाने में सहायता करते हैं जो वे उपयोगकर्ता ब्राउज़र में शक्तिशाली टूल को एकीकृत करके एक्सेस कर रहे हैं खुद को।

वे दिन हैं जहां ब्राउज़र के भीतर पाए जाने वाले एकमात्र प्रोग्रामिंग और परीक्षण टूल आपको पृष्ठ के स्रोत कोड को देखने की अनुमति देते हैं और कुछ भी नहीं। आज के ब्राउज़र आपको जावास्क्रिप्ट स्निपेट को निष्पादित करने और डीबग करने, डीओएम तत्वों का निरीक्षण और संपादन करने, रीयल-टाइम नेटवर्क यातायात की निगरानी के रूप में आपके ऐप या पेज लोड को बाधाओं की पहचान करने, सीएसएस प्रदर्शन का विश्लेषण करने, यह सुनिश्चित करने के लिए कि आपका कोड है, बहुत अधिक स्मृति या बहुत सी CPU चक्र का उपयोग नहीं करते हैं, और भी बहुत कुछ। एक परीक्षण परिप्रेक्ष्य से, आप पुन: उत्पन्न कर सकते हैं कि विभिन्न ब्राउज़रों के साथ-साथ विभिन्न उपकरणों और प्लेटफॉर्म पर उत्तरदायी डिज़ाइन और अंतर्निर्मित सिमुलेटर के जादू के माध्यम से एक ऐप या वेब पेज कैसे प्रस्तुत किया जाएगा। सबसे अच्छा हिस्सा यह है कि आप अपने ब्राउज़र को छोड़ दिए बिना यह सब कर सकते हैं!

नीचे दिए गए ट्यूटोरियल आपको कई लोकप्रिय वेब ब्राउज़र में इन डेवलपर टूल तक पहुंचने के तरीके के माध्यम से चलते हैं।

गूगल क्रोम

क्रोम के डेवलपर टूल आपको कोड को संपादित और डिबग करने, प्रदर्शन समस्याओं का पर्दाफाश करने के लिए व्यक्तिगत घटकों का ऑडिट करने, एंड्रॉइड या आईओएस चलाने वाले विभिन्न डिवाइस स्क्रीन अनुकरण करने और कई अन्य उपयोगी कार्यों को करने की अनुमति देते हैं।

1. क्रोम के मुख्य मेनू बटन पर क्लिक करें, जो तीन क्षैतिज रेखाओं के साथ चिह्नित है और ब्राउज़र के ऊपरी दाएं कोने में स्थित है।
2. जब ड्रॉप-डाउन मेनू प्रकट होता है, तो अपने माउस कर्सर को होवर करें अधिक उपकरण विकल्प।
3. एक सब-मेन्यू अब दिखाना चाहिए। लेबल किए गए विकल्प का चयन करें डेवलपर उपकरण । आप इस मेनू आइटम के स्थान पर निम्न कीबोर्ड शॉर्टकट का भी उपयोग कर सकते हैं: क्रोम ओएस / विंडोज़ ( Ctrl + SHIFT + मैं ), मैक ओएस एक्स ( एएलटी (विकल्प) + Command + मैं )
4. क्रोम डेवलपर टूल्स इंटरफेस को अब प्रदर्शित किया जाना चाहिए, जैसा कि इस उदाहरण स्क्रीनशॉट में दिखाया गया है। क्रोम के आपके संस्करण के आधार पर, प्रारंभिक लेआउट जो आप देखते हैं वह यहां प्रस्तुत किए गए से थोड़ा अलग हो सकता है। डेवलपर टूल का मुख्य केंद्र, आमतौर पर स्क्रीन के निचले या दाएं हाथ पर स्थित होता है, इसमें निम्न टैब होते हैं।तत्व: वास्तविक समय में आपके परिवर्तनों के प्रभाव को देखते हुए, सीएसएस और एचटीएमएल कोड के साथ-साथ सीएसएस ऑन-द-फ्लाई संपादित करने की क्षमता प्रदान करता है।कंसोल: क्रोम का जावास्क्रिप्ट कंसोल प्रत्यक्ष कमांड एंट्री के साथ-साथ डायग्नोस्टिक डीबगिंग के लिए भी अनुमति देता है।सूत्रों का कहना है: आपको एक शक्तिशाली ग्राफिकल इंटरफेस के माध्यम से जावास्क्रिप्ट कोड डीबग करने देता है।नेटवर्क: सक्रिय अनुरोध या पृष्ठ पर प्रत्येक संबंधित ऑपरेशन के बारे में विस्तृत जानकारी को वर्गीकृत और प्रदर्शित करता है, जिसमें पूर्ण अनुरोध और प्रतिक्रिया शीर्षलेख के साथ-साथ उन्नत समय मीट्रिक भी शामिल है।समयरेखा: जैसे ही पृष्ठ या ऐप लोड अनुरोध शुरू होता है, ब्राउज़र में होने वाली प्रत्येक गतिविधि के गहन विश्लेषण की अनुमति देता है।
5. इन वर्गों के अतिरिक्त, आप निम्न उपकरणों को भी एक्सेस कर सकते हैं >> आइकन, के दाईं ओर स्थित है समय टैब।प्रोफाइल: में टूटा सीपीयू प्रोफाइलर तथा हीप प्रोफाइलर अनुभाग, सक्रिय अनुप्रयोग या पृष्ठ के व्यापक स्मृति उपयोग और समग्र निष्पादन समय प्रदान करता है।सुरक्षा: सक्रिय पृष्ठ या एप्लिकेशन के साथ प्रमाणपत्र समस्याओं और अन्य सुरक्षा-संबंधित मुद्दों को हाइलाइट करता है।संसाधन: यह वह जगह है जहां आप वर्तमान वेब पेज या एप्लिकेशन द्वारा उपयोग की जाने वाली कुकीज़, स्थानीय संग्रहण, ऐप कैश और अन्य स्थानीय डेटा स्रोतों का निरीक्षण कर सकते हैं।ऑडिट: किसी पृष्ठ या एप्लिकेशन के लोड समय और सामान्य प्रदर्शन को अनुकूलित करने के तरीके प्रदान करता है।
6. डिवाइस मोड आपको एक सिम्युलेटर में सक्रिय पृष्ठ देखने की अनुमति देता है जो इसे लगभग एक दर्जन से अधिक उपकरणों पर प्रदर्शित करता है, जिसमें कई प्रसिद्ध एंड्रॉइड और आईओएस मॉडल जैसे आईपैड, आईफोन और सैमसंग गैलेक्सी शामिल हैं। आपको अपने विशेष विकास या परीक्षण आवश्यकताओं के अनुरूप कस्टम स्क्रीन संकल्पों का अनुकरण करने की क्षमता भी दी जाती है। टॉगल करने के लिए डिवाइस मोड चालू और बंद, सीधे बाईं ओर स्थित मोबाइल फोन आइकन का चयन करें तत्वों टैब।
7. आप अपने डेवलपर टूल के स्वरूप और अनुभव को कस्टमाइज़ कर सकते हैं, पहले तीन लंबवत-स्थित बिंदुओं द्वारा प्रस्तुत मेनू बटन पर क्लिक करके और उपर्युक्त टैब के दाएं हाथ की ओर स्थित है। इस ड्रॉप-डाउन मेनू के भीतर से, आप डॉक को दोबारा बदल सकते हैं, अलग-अलग टूल दिखा सकते हैं या छुपा सकते हैं और डिवाइस इंस्पेक्टर जैसे अधिक उन्नत आइटम लॉन्च कर सकते हैं। आप पाएंगे कि देव उपकरण इंटरफ़ेस स्वयं इस खंड में मिली सेटिंग्स के माध्यम से अत्यधिक अनुकूलन योग्य है।

मोज़िला फ़ायरफ़ॉक्स

फ़ायरफ़ॉक्स के वेब डेवलपर अनुभाग में डिज़ाइनर, डेवलपर्स और टेस्टर्स के लिए टूल स्टाइल एडिटर और पिक्सेल-लक्ष्यीकरण आइड्रॉपर जैसे टूल शामिल हैं।

लाइफवायर अनुशंसित पढ़ना:शीर्ष 25 Greasemonkey और Tampermonkey उपयोगकर्ता लिपियों

1. फ़ायरफ़ॉक्स के मुख्य मेनू बटन पर क्लिक करें, जो तीन क्षैतिज रेखाओं द्वारा दर्शाया गया है और ब्राउज़र विंडो के ऊपरी दाएं कोने में स्थित है।
2. जब ड्रॉप-डाउन मेनू प्रकट होता है, लेबल वाले आइकन का चयन करें डेवलपर । वेब डेवलपर मेनू को अब प्रदर्शित किया जाना चाहिए, जिसमें निम्नलिखित विकल्प शामिल हैं।आप देखेंगे कि अधिकांश मेनू आइटमों में उनके साथ जुड़े कीबोर्ड शॉर्टकट होते हैं।टॉगल टूल्स: डेवलपर टूल इंटरफ़ेस को प्रदर्शित या छुपाता है, आमतौर पर ब्राउज़र विंडो के नीचे स्थित होता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + Command + मैं ), विंडोज ( Ctrl + SHIFT + मैं )इंस्पेक्टर: आपको सक्रिय पृष्ठ पर रिमोट डीबगिंग के माध्यम से एक पोर्टेबल डिवाइस पर सीएसएस और एचटीएमएल कोड का निरीक्षण और / या ट्विक करने की अनुमति देता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + Command + C ), विंडोज ( Ctrl + SHIFT + सी )वेब कंसोल: आपको सक्रिय पृष्ठ के भीतर जावास्क्रिप्ट अभिव्यक्तियों को निष्पादित करने की अनुमति देता है साथ ही सुरक्षा चेतावनियों, नेटवर्क अनुरोधों, सीएसएस संदेशों आदि सहित लॉग किए गए डेटा के विविध सेट की समीक्षा भी करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + Command + K ), विंडोज ( Ctrl + SHIFT + K )डीबगर: जावास्क्रिप्ट डीबगर आपको ब्रेकपॉइंट्स सेट करके, डीओएम नोड्स, ब्लैक मुक्केबाजी बाहरी स्रोतों का निरीक्षण करके और बहुत कुछ करके दोषों को ठीक करने और ठीक करने देता है। जैसा मामला है इंस्पेक्टर , यह सुविधा रिमोट डीबगिंग का भी समर्थन करती है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + Command + S ), विंडोज ( Ctrl + Shift + S) स्टाइल संपादक: आपको नई स्टाइलशीट बनाने और सक्रिय वेब पेज के साथ शामिल करने, या मौजूदा शीट्स को संपादित करने और परीक्षण में केवल एक क्लिक के साथ ब्राउज़र में आपके परिवर्तनों को प्रस्तुत करने की अनुमति देता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F7 )प्रदर्शन: सक्रिय पृष्ठ के नेटवर्क प्रदर्शन, फ्रेम दर डेटा, जावास्क्रिप्ट निष्पादन समय और राज्य, पेंट चमकाने, और भी बहुत कुछ का एक विस्तृत टूटना प्रदान करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F5 )नेटवर्क: संबंधित विधि, मूल डोमेन, प्रकार, आकार और समय बीतने के साथ ब्राउज़र द्वारा शुरू किए गए प्रत्येक नेटवर्क अनुरोध को सूचीबद्ध करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + Command + Q ), विंडोज ( CTRL + Shift + Q )डेवलपर टूलबार: एक इंटरैक्टिव कमांड लाइन दुभाषिया खोलता है। दर्ज मदद सभी उपलब्ध आदेशों और उनके उचित वाक्यविन्यास की सूची के लिए दुभाषिया में। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F2 )WebIDE: फ़ायरफ़ॉक्स ओएस या फ़ायरफ़ॉक्स ओएस सिम्युलेटर के माध्यम से चल रहे किसी वास्तविक डिवाइस के माध्यम से वेब ऐप्स बनाने और निष्पादित करने की क्षमता प्रदान करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F8 )ब्राउज़र कंसोल: समान कार्यक्षमता प्रदान करता है वेब कंसोल (ऊपर देखो)। हालांकि, सभी डेटा लौटाए गए संपूर्ण फ़ायरफ़ॉक्स एप्लिकेशन (एक्सटेंशन और ब्राउज़र-स्तरीय फ़ंक्शंस सहित) के लिए केवल सक्रिय वेब पेज के विपरीत है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( Shift + Command + जम्मू ), विंडोज ( Ctrl + SHIFT + जम्मू )उत्तरदायी डिजाइन देखें: टैबलेट और स्मार्टफ़ोन सहित कई डिवाइसों की नकल करने के लिए आपको विभिन्न संकल्पों, लेआउट और स्क्रीन आकारों में तुरंत एक वेब पेज देखने की अनुमति देता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + Command + M ), विंडोज ( Ctrl + SHIFT + M )आँख की ड्रॉपर: अलग-अलग चयनित पिक्सेल के लिए हेक्स रंग कोड प्रदर्शित करता है।स्क्रैचपैड: आपको पॉप-आउट फ़ायरफ़ॉक्स विंडो के भीतर से जावास्क्रिप्ट कोड के स्निपेट लिखने, संपादित करने, एकीकृत करने और निष्पादित करने देता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F4 )पृष्ठ उदगम: मूल ब्राउज़र-आधारित डेवलपर टूल, यह विकल्प केवल सक्रिय पृष्ठ के लिए उपलब्ध स्रोत कोड प्रदर्शित करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( Command + U ), विंडोज ( Ctrl + यू )अधिक उपकरण प्राप्त करें: खुलता है वेब डेवलपर का टूलबॉक्स मोज़िला की आधिकारिक ऐड-ऑन साइट पर संग्रह, जिसमें फायरबग और ग्रीसमोनीकी जैसे दर्जनों लोकप्रिय एक्सटेंशन शामिल हैं।

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

आम तौर पर के रूप में जाना जाता है एफ 12 डेवलपर टूल्स , कीबोर्ड एक्सप्लोरर के लिए एक श्रद्धांजलि जिसने इंटरनेट एक्सप्लोरर के पुराने संस्करणों के बाद से इंटरफ़ेस लॉन्च किया है, आईई 11 में देव टूलसेट और माइक्रोसॉफ्ट एज मॉनीटर, डिबगर्स, अनुकरणकर्ताओं और बहुत ही आसान समूह की पेशकश करके इसकी शुरुआत के बाद से एक लंबा सफर तय कर चुका है द फ्लाई कंपाइलर्स।

1. पर क्लिक करें अधिक कार्रवाई मेनू, तीन बिंदुओं द्वारा दर्शाया गया है और ब्राउज़र विंडो के ऊपरी दाएं कोने में स्थित है। जब ड्रॉप-डाउन मेनू प्रकट होता है, लेबल किए गए विकल्प का चयन करें एफ 12 डेवलपर टूल्स । जैसा कि मैंने पहले ही उल्लेख किया है, आप भी उपकरण के माध्यम से उपयोग कर सकते हैं F12 कुंजीपटल संक्षिप्त रीति।
2. विकास इंटरफ़ेस अब आमतौर पर ब्राउज़र विंडो के नीचे प्रदर्शित किया जाना चाहिए। निम्नलिखित टूल्स उपलब्ध हैं, प्रत्येक अपने संबंधित टैब शीर्षक पर क्लिक करके या साथ ही साथ कुंजीपटल शॉर्टकट का उपयोग करके पहुंच योग्य है।डोम एक्सप्लोरर: सक्रिय पृष्ठ में स्टाइलशीट्स और HTML को संपादित करने की अनुमति देता है, संशोधित परिणामों को आपके द्वारा प्रदान किए जाने पर प्रस्तुत करता है। लागू होने पर स्वत: पूर्ण कोड करने के लिए IntelliSense कार्यक्षमता का उपयोग करता है। कुंजीपटल संक्षिप्त रीति: (Ctrl + 1) कंसोल: एक एकीकृत एपीआई के माध्यम से काउंटर, टाइमर, निशान, और अनुकूलित संदेश सहित डिबगिंग जानकारी जमा करने की क्षमता प्रदान करता है। इसके अलावा, आपको एक सक्रिय वेब पेज में कोड इंजेक्ट करने और वास्तविक समय में अलग-अलग चरों को आवंटित मानों को संशोधित करने देता है। कुंजीपटल संक्षिप्त रीति: (Ctrl + 2) डीबगर: आपको ब्रेकपॉइंट्स सेट करने और निष्पादित होने पर अपने कोड को डीबग करने देता है, यदि आवश्यक हो तो लाइन से लाइन करें। कुंजीपटल संक्षिप्त रीति: (Ctrl + 3) नेटवर्क: पृष्ठ लोड और निष्पादन के दौरान ब्राउज़र द्वारा शुरू किए गए प्रत्येक नेटवर्क अनुरोध को सूचीबद्ध करता है जिसमें प्रोटोकॉल विवरण, सामग्री प्रकार, बैंडविड्थ उपयोग, और भी बहुत कुछ शामिल है। कुंजीपटल संक्षिप्त रीति: (Ctrl + 4) प्रदर्शन: पृष्ठ लोड समय और अन्य गतिविधियों को तेज़ करने में आपकी सहायता के लिए विवरण फ्रेम दर, सीपीयू उपयोग, और अन्य प्रदर्शन-संबंधित मीट्रिक। कुंजीपटल संक्षिप्त रीति: (Ctrl + 5) याद: अलग-अलग समय अंतराल से स्नैपशॉट के साथ मेमोरी उपयोग टाइमलाइन प्रदर्शित करके वर्तमान वेब पेज पर संभावित मेमोरी लीक को अलग और सही करने में आपकी सहायता करता है। कुंजीपटल संक्षिप्त रीति: (Ctrl + 6) अनुकरण: दिखाता है कि कैसे सक्रिय पृष्ठ विभिन्न संकल्पों और स्क्रीन आकारों में प्रस्तुत करेगा, स्मार्टफोन, टैबलेट और अन्य उपकरणों को अनुकरण करते हैं। उपयोगकर्ता एजेंट और पृष्ठ अभिविन्यास को संशोधित करने की क्षमता प्रदान करता है, साथ ही अक्षांश और देशांतर दर्ज करके विभिन्न भूगर्भिक अनुकरण भी प्रदान करता है। कुंजीपटल संक्षिप्त रीति: (Ctrl + 7)
3. प्रदर्शित करने के लिए कंसोल जबकि किसी भी अन्य उपकरण के भीतर विकास उपकरण इंटरफ़ेस के ऊपरी दाएं कोने में स्थित, इसके अंदर दाएं ब्रैकेट के साथ स्क्वायर बटन पर क्लिक करें।
4. डेवलपर टूल्स इंटरफ़ेस को अनदेखा करने के लिए, यह एक अलग विंडो बन जाता है, दो कैस्केडिंग आयतों द्वारा प्रदर्शित बटन पर क्लिक करें या निम्न कीबोर्ड शॉर्टकट का उपयोग करें: CTRL + P । आप दबाने से उपकरण को अपने मूल स्थान पर वापस रख सकते हैं CTRL + P दूसरी बार।

ऐप्पल सफारी (केवल ओएस एक्स)

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

1. पर क्लिक करें सफारी ब्राउज़र स्क्रीन में, आपकी स्क्रीन के शीर्ष पर स्थित है। जब ड्रॉप-डाउन मेनू प्रकट होता है, तो चुनें पसंद । आप इस मेनू आइटम के स्थान पर निम्न कीबोर्ड शॉर्टकट का भी उपयोग कर सकते हैं: COMMAND + अल्पविराम (,)
2. सफारी के पसंद इंटरफ़ेस अब प्रदर्शित होना चाहिए, अपनी ब्राउज़र विंडो को ओवरले करना। पर क्लिक करें उन्नत आइकन, शीर्षलेख के दाएं हाथ की ओर स्थित है।
3. उन्नत वरीयताओं को अब दिखाना चाहिए। इस स्क्रीन के निचले हिस्से में एक विकल्प लेबल किया गया है मेनू बार में डेवलपमेंट मेनू दिखाएं , एक चेक बॉक्स के साथ। यदि बॉक्स में कोई चेक मार्क नहीं दिखाया गया है, तो वहां एक बार रखने के लिए इसे क्लिक करें।
4. बंद करो पसंद ऊपरी बाएं कोने में पाए गए लाल 'एक्स' पर क्लिक करके इंटरफ़ेस।
5. अब आपको नामित ब्राउज़र मेनू में एक नया विकल्प नोटिस करना चाहिए विकसित करना , के बीच स्थित है बुकमार्क तथा खिड़की । इस मेनू आइटम पर क्लिक करें। एक ड्रॉप-डाउन मेनू अब प्रदर्शित होना चाहिए, जिसमें निम्न विकल्प शामिल हैं।इसके साथ खुला पृष्ठ: आपको वर्तमान में अपने मैक पर स्थापित अन्य ब्राउज़रों में से एक में सक्रिय वेब पेज खोलने की अनुमति देता है।उपभोक्ता अभिकर्ता: आपको क्रोम, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर के कई संस्करणों के साथ-साथ अपनी खुद की कस्टम स्ट्रिंग को परिभाषित करने के साथ-साथ दर्जन से अधिक पूर्व परिभाषित उपयोगकर्ता एजेंट मानों में से चुनने देता है।उत्तरदायी डिजाइन मोड दर्ज करें: वर्तमान पृष्ठ प्रस्तुत करता है क्योंकि यह विभिन्न उपकरणों और विभिन्न स्क्रीन संकल्पों पर दिखाई देगा।वेब इंस्पेक्टर दिखाएं: सफारी के देव उपकरण के लिए मुख्य इंटरफ़ेस लॉन्च करता है, आमतौर पर आपकी ब्राउज़र स्क्रीन के नीचे रखा जाता है और निम्न अनुभाग होते हैं: तत्वों , नेटवर्क , साधन , समयसीमा , डीबगर , भंडारण , कंसोल .त्रुटि कंसोल दिखाएं: देव टूल्स इंटरफेस को सीधे लॉन्च करता है कंसोल टैब जो त्रुटियों, चेतावनियों और अन्य खोज योग्य लॉग डेटा प्रदर्शित करता है।पृष्ठ स्रोत दिखाएं: खुलता है साधन टैब, जो दस्तावेज़ द्वारा वर्गीकृत सक्रिय पृष्ठ के लिए स्रोत कोड प्रदर्शित करता है।पेज संसाधन दिखाएं: जैसा ही कार्य करता है पेज स्रोत दिखाएं विकल्प।स्निपेट संपादक दिखाएं: एक नई विंडो खोलती है जहां आप सीएसएस और एचटीएमएल कोड दर्ज कर सकते हैं, इसके आउटपुट द फ्लाई का पूर्वावलोकन कर सकते हैं।एक्सटेंशन बिल्डर दिखाएं: सीएसएस, एचटीएमएल, और जावास्क्रिप्ट के साथ सफारी एक्सटेंशन बनाने या संपादित करने की क्षमता प्रदान करता है।टाइमलाइन रिकॉर्डिंग दिखाएं: खुलता है समयसीमा टैब और वास्तविक समय में नेटवर्क अनुरोध, लेआउट और प्रतिपादन जानकारी के साथ ही जावास्क्रिप्ट निष्पादन प्रदर्शित करना शुरू करता है।खाली कैश: वर्तमान में आपके हार्ड ड्राइव पर संग्रहीत पूरे कैश को हटा देता है।कैश अक्षम करें: सफारी को कैशिंग से रोकता है ताकि प्रत्येक पृष्ठ लोड पर सर्वर से सभी सामग्री पुनर्प्राप्त की जा सके।छवियों को अक्षम करें: छवियों को सभी वेब पृष्ठों पर प्रतिपादन से रोकता है।स्टाइल अक्षम करें: पृष्ठ लोड होने पर सीएसएस गुणों को अनदेखा करता है।जावास्क्रिप्ट निष्क्रिय करें: सभी पृष्ठों पर जावास्क्रिप्ट निष्पादन प्रतिबंधित करता है।एक्सटेंशन अक्षम करें: ब्राउज़र के भीतर चलने से सभी स्थापित एक्सटेंशन को प्रतिबंधित करता है।साइट-विशिष्ट हैक्स अक्षम करें: अगर सफारी को सक्रिय वेब पेज के लिए विशिष्ट मुद्दों (एस) को स्पष्ट रूप से संभालने के लिए संशोधित किया गया है, तो यह विकल्प उन परिवर्तनों को अवरुद्ध कर देगा ताकि पेज लोड हो सके क्योंकि इन संशोधनों को पेश करने से पहले होगा।स्थानीय फ़ाइल प्रतिबंध अक्षम करें: ब्राउज़र को आपके स्थानीय डिस्क पर फ़ाइलों तक पहुंचने की अनुमति देता है, एक सुरक्षा जो सुरक्षा कारणों से डिफ़ॉल्ट रूप से प्रतिबंधित है।क्रॉस-उत्पत्ति प्रतिबंधों को अक्षम करें: एक्सएसएस और अन्य संभावित खतरों को रोकने के लिए इन प्रतिबंधों को डिफ़ॉल्ट रूप से रखा जाता है। हालांकि, उन्हें विकास उद्देश्यों के लिए अक्सर अस्थायी रूप से अक्षम करने की आवश्यकता होती है।स्मार्ट सर्च फ़ील्ड से जावास्क्रिप्ट को अनुमति दें: सक्षम होने पर, यूआरएल दर्ज करने की क्षमता प्रदान करता है जावास्क्रिप्ट: सीधे पता बार में शामिल किया गया।असुरक्षित के रूप में SHA-1 प्रमाण पत्र का इलाज करें: एसएचए -1 एल्गोरिदम का उपयोग कर एसएसएल प्रमाणपत्र व्यापक रूप से पुराने और कमजोर माना जाता है।