वेब डिजाइनर, डेवलपर्स और परीक्षकों के लिए एकीकृत टूलसेट
वेब ब्राउज़र सर्फ करने वाले रोजमर्रा के उपयोगकर्ता पर ध्यान केंद्रित करने वाले अधिकांश ब्राउज़र निर्माताओं के अलावा, वे वेब डेवलपर्स, डिज़ाइनर और गुणवत्ता आश्वासन पेशेवरों को भी पूरा करते हैं जो उन ऐप्स और साइटों को बनाने में सहायता करते हैं जो वे उपयोगकर्ता ब्राउज़र में शक्तिशाली टूल को एकीकृत करके एक्सेस कर रहे हैं खुद को।
वे दिन हैं जहां ब्राउज़र के भीतर पाए जाने वाले एकमात्र प्रोग्रामिंग और परीक्षण टूल आपको पृष्ठ के स्रोत कोड को देखने की अनुमति देते हैं और कुछ भी नहीं। आज के ब्राउज़र आपको जावास्क्रिप्ट स्निपेट को निष्पादित करने और डीबग करने, डीओएम तत्वों का निरीक्षण और संपादन करने, रीयल-टाइम नेटवर्क यातायात की निगरानी के रूप में आपके ऐप या पेज लोड को बाधाओं की पहचान करने, सीएसएस प्रदर्शन का विश्लेषण करने, यह सुनिश्चित करने के लिए कि आपका कोड है, बहुत अधिक स्मृति या बहुत सी CPU चक्र का उपयोग नहीं करते हैं, और भी बहुत कुछ। एक परीक्षण परिप्रेक्ष्य से, आप पुन: उत्पन्न कर सकते हैं कि विभिन्न ब्राउज़रों के साथ-साथ विभिन्न उपकरणों और प्लेटफॉर्म पर उत्तरदायी डिज़ाइन और अंतर्निर्मित सिमुलेटर के जादू के माध्यम से एक ऐप या वेब पेज कैसे प्रस्तुत किया जाएगा। सबसे अच्छा हिस्सा यह है कि आप अपने ब्राउज़र को छोड़ दिए बिना यह सब कर सकते हैं!
नीचे दिए गए ट्यूटोरियल आपको कई लोकप्रिय वेब ब्राउज़र में इन डेवलपर टूल तक पहुंचने के तरीके के माध्यम से चलते हैं।
गूगल क्रोम
क्रोम के डेवलपर टूल आपको कोड को संपादित और डिबग करने, प्रदर्शन समस्याओं का पर्दाफाश करने के लिए व्यक्तिगत घटकों का ऑडिट करने, एंड्रॉइड या आईओएस चलाने वाले विभिन्न डिवाइस स्क्रीन अनुकरण करने और कई अन्य उपयोगी कार्यों को करने की अनुमति देते हैं।
- क्रोम के मुख्य मेनू बटन पर क्लिक करें, जो तीन क्षैतिज रेखाओं के साथ चिह्नित है और ब्राउज़र के ऊपरी दाएं कोने में स्थित है।
- जब ड्रॉप-डाउन मेनू प्रकट होता है, तो अपने माउस कर्सर को अधिक टूल विकल्प पर होवर करें।
- एक सब-मेन्यू अब दिखाना चाहिए। डेवलपर टूल लेबल वाले विकल्प का चयन करें। आप इस मेनू आइटम के स्थान पर निम्न कीबोर्ड शॉर्टकट का भी उपयोग कर सकते हैं: क्रोम ओएस / विंडोज ( CTRL + SHIFT + I ), मैक ओएस एक्स ( एएलटी (विकल्प) + COMMAND + I )
- क्रोम डेवलपर टूल्स इंटरफेस को अब प्रदर्शित किया जाना चाहिए, जैसा कि इस उदाहरण स्क्रीनशॉट में दिखाया गया है। क्रोम के आपके संस्करण के आधार पर, प्रारंभिक लेआउट जो आप देखते हैं वह यहां प्रस्तुत किए गए से थोड़ा अलग हो सकता है। डेवलपर टूल का मुख्य केंद्र, आमतौर पर स्क्रीन के निचले या दाएं हाथ पर स्थित होता है, इसमें निम्न टैब होते हैं।
तत्व: वास्तविक समय में आपके परिवर्तनों के प्रभाव को देखते हुए, सीएसएस और एचटीएमएल कोड के साथ-साथ सीएसएस ऑन-द-फ्लाई संपादित करने की क्षमता प्रदान करता है।
कंसोल: क्रोम का जावास्क्रिप्ट कंसोल प्रत्यक्ष कमांड एंट्री के साथ-साथ डायग्नोस्टिक डीबगिंग के लिए भी अनुमति देता है।
स्रोत: आपको एक शक्तिशाली ग्राफिकल इंटरफेस के माध्यम से जावास्क्रिप्ट कोड डीबग करने देता है।
नेटवर्क: सक्रिय अनुरोध या पृष्ठ पर प्रत्येक संबंधित ऑपरेशन के बारे में विस्तृत जानकारी को वर्गीकृत और प्रदर्शित करता है, जिसमें पूर्ण अनुरोध और प्रतिक्रिया शीर्षलेख के साथ-साथ उन्नत समय मीट्रिक भी शामिल है।
समयरेखा: जैसे ही पृष्ठ या ऐप लोड अनुरोध शुरू होता है, ब्राउज़र में होने वाली प्रत्येक गतिविधि के गहन विश्लेषण की अनुमति देता है। - इन वर्गों के अलावा, आप टाइमलाइन टैब के दाईं ओर स्थित >> आइकन के माध्यम से निम्न टूल्स तक पहुंच सकते हैं।
प्रोफाइल: सीपीयू प्रोफाइलर और हीप प्रोफाइलर खंडों में टूटा हुआ, सक्रिय अनुप्रयोग या पृष्ठ के व्यापक मेमोरी उपयोग और समग्र निष्पादन समय प्रदान करता है।
सुरक्षा: सक्रिय पृष्ठ या एप्लिकेशन के साथ प्रमाणपत्र समस्याओं और अन्य सुरक्षा-संबंधित मुद्दों पर प्रकाश डाला गया है।
संसाधन: यह वह जगह है जहां आप वर्तमान वेब पेज या एप्लिकेशन द्वारा उपयोग की जाने वाली कुकीज़, स्थानीय संग्रहण, ऐप कैश और अन्य स्थानीय डेटा स्रोतों का निरीक्षण कर सकते हैं।
लेखापरीक्षा: किसी पृष्ठ या एप्लिकेशन के लोड समय और सामान्य प्रदर्शन को अनुकूलित करने के तरीके प्रदान करता है। - डिवाइस मोड आपको एक सिम्युलेटर में सक्रिय पृष्ठ देखने की अनुमति देता है जो इसे लगभग एक दर्जन से अधिक उपकरणों पर प्रदर्शित करता है, जिसमें कई प्रसिद्ध एंड्रॉइड और आईओएस मॉडल जैसे आईपैड, आईफोन और सैमसंग गैलेक्सी शामिल हैं। आपको अपने विशेष विकास या परीक्षण आवश्यकताओं के अनुरूप कस्टम स्क्रीन संकल्पों का अनुकरण करने की क्षमता भी दी जाती है। डिवाइस मोड को चालू और बंद करने के लिए, तत्व टैब के बाईं ओर स्थित मोबाइल फोन आइकन का चयन करें।
- आप अपने डेवलपर टूल के स्वरूप और अनुभव को कस्टमाइज़ कर सकते हैं, पहले तीन लंबवत-स्थित बिंदुओं द्वारा प्रस्तुत मेनू बटन पर क्लिक करके और उपर्युक्त टैब के दाएं हाथ की ओर स्थित है। इस ड्रॉप-डाउन मेनू के भीतर से, आप डॉक को दोबारा बदल सकते हैं, अलग-अलग टूल दिखा सकते हैं या छुपा सकते हैं और डिवाइस इंस्पेक्टर जैसे अधिक उन्नत आइटम लॉन्च कर सकते हैं। आप पाएंगे कि देव उपकरण इंटरफ़ेस स्वयं इस खंड में मिली सेटिंग्स के माध्यम से अत्यधिक अनुकूलन योग्य है।
मोज़िला फ़ायरफ़ॉक्स
फ़ायरफ़ॉक्स के वेब डेवलपर अनुभाग में डिज़ाइनर, डेवलपर्स और टेस्टर्स के लिए टूल स्टाइल एडिटर और पिक्सेल-लक्ष्यीकरण आइड्रॉपर जैसे टूल शामिल हैं।
अनुशंसित पढ़ना: शीर्ष 25 Greasemonkey और Tampermonkey उपयोगकर्ता लिपियों
- फ़ायरफ़ॉक्स के मुख्य मेनू बटन पर क्लिक करें, जो तीन क्षैतिज रेखाओं द्वारा दर्शाया गया है और ब्राउज़र विंडो के ऊपरी दाएं कोने में स्थित है।
- जब ड्रॉप-डाउन मेनू प्रकट होता है, तो डेवलपर लेबल वाले आइकन का चयन करें। वेब डेवलपर मेनू अब प्रदर्शित होना चाहिए, जिसमें निम्नलिखित विकल्प शामिल हैं। आप देखेंगे कि अधिकांश मेनू आइटमों में उनके साथ जुड़े कीबोर्ड शॉर्टकट होते हैं।
टॉगल टूल्स: डेवलपर टूल इंटरफ़ेस को प्रदर्शित या छुपाता है, आमतौर पर ब्राउज़र विंडो के नीचे स्थित होता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + कमांड + आई ), विंडोज़ ( CTRL + SHIFT + I )
इंस्पेक्टर: आपको रिमोट डीबगिंग के माध्यम से सक्रिय पृष्ठ पर और पोर्टेबल डिवाइस पर सीएसएस और एचटीएमएल कोड का निरीक्षण और / या ट्विक करने की अनुमति देता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + कमांड + सी ), विंडोज़ ( CTRL + SHIFT + C )
वेब कंसोल: आपको सक्रिय पृष्ठ के भीतर जावास्क्रिप्ट अभिव्यक्ति निष्पादित करने की अनुमति देता है और साथ ही सुरक्षा चेतावनियों, नेटवर्क अनुरोधों, सीएसएस संदेशों आदि सहित लॉग किए गए डेटा के विविध सेट की समीक्षा भी करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + कमांड + के ), विंडोज़ ( CTRL + SHIFT + K )
डीबगर: जावास्क्रिप्ट डीबगर आपको ब्रेकपॉइंट्स सेट करके, डीओएम नोड्स, ब्लैक मुक्केबाजी बाहरी स्रोतों का निरीक्षण करके और बहुत कुछ करके दोषों को ठीक करने और ठीक करने देता है। इंस्पेक्टर के मामले में, यह सुविधा रिमोट डीबगिंग का भी समर्थन करती है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + कमांड + एस ), विंडोज़ ( CTRL + SHIFT + S)
स्टाइल संपादक: आपको नई स्टाइलशीट बनाने और सक्रिय वेब पेज के साथ शामिल करने, या मौजूदा शीट्स को संपादित करने और परीक्षण में केवल एक क्लिक के साथ ब्राउज़र में आपके बदलावों को प्रस्तुत करने की अनुमति देता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F7 )
प्रदर्शन: सक्रिय पृष्ठ के नेटवर्क प्रदर्शन, फ्रेम दर डेटा, जावास्क्रिप्ट निष्पादन समय और राज्य, पेंट चमकाने, और बहुत कुछ का एक विस्तृत टूटना प्रदान करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F5 )
नेटवर्क: संबंधित विधि, मूल डोमेन, प्रकार, आकार और समय बीतने के साथ ब्राउज़र द्वारा शुरू किए गए प्रत्येक नेटवर्क अनुरोध को सूचीबद्ध करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + कमांड + क्यू ), विंडोज़ ( CTRL + SHIFT + Q )
डेवलपर टूलबार: एक इंटरैक्टिव कमांड लाइन दुभाषिया खोलता है। सभी उपलब्ध आदेशों और उनके उचित वाक्यविन्यास की सूची के लिए दुभाषिया में सहायता दर्ज करें। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F2 )
वेबसाइड: फ़ायरफ़ॉक्स ओएस या फ़ायरफ़ॉक्स ओएस सिम्युलेटर के माध्यम से चल रहे किसी वास्तविक डिवाइस के माध्यम से वेब ऐप्स बनाने और निष्पादित करने की क्षमता प्रदान करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F8 )
ब्राउज़र कंसोल: वेब कंसोल (ऊपर देखें) के समान कार्यक्षमता प्रदान करता है। हालांकि, सभी डेटा लौटाए गए संपूर्ण फ़ायरफ़ॉक्स एप्लिकेशन ( एक्सटेंशन और ब्राउज़र-स्तरीय फ़ंक्शंस सहित) के लिए केवल सक्रिय वेब पेज के विपरीत है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( शिफ्ट + कमांड + जे ), विंडोज़ ( CTRL + SHIFT + J )
उत्तरदायी डिज़ाइन व्यू: टैबलेट और स्मार्टफ़ोन सहित कई डिवाइसों की नकल करने के लिए आपको विभिन्न संकल्पों, लेआउट और स्क्रीन आकारों में तुरंत एक वेब पेज देखने की अनुमति देता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( एएलटी (विकल्प) + कमांड + एम ), विंडोज़ ( CTRL + SHIFT + M )
Eyedropper: अलग-अलग चयनित पिक्सेल के लिए हेक्स रंग कोड प्रदर्शित करता है।
स्क्रैचपैड : आपको पॉप-आउट फ़ायरफ़ॉक्स विंडो के भीतर से जावास्क्रिप्ट कोड के स्निपेट लिखने, संपादित करने, एकीकृत करने और निष्पादित करने देता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स, विंडोज़ ( SHIFT + F4 )
पृष्ठ स्रोत: मूल ब्राउज़र-आधारित डेवलपर टूल, यह विकल्प केवल सक्रिय पृष्ठ के लिए उपलब्ध स्रोत कोड प्रदर्शित करता है। कीबोर्ड शॉर्टकट: मैक ओएस एक्स ( COMMAND + यू ), विंडोज़ ( CTRL + U )
अधिक टूल्स प्राप्त करें: मोज़िला की आधिकारिक ऐड-ऑन साइट पर वेब डेवलपर के टूलबॉक्स संग्रह को खोलता है, जिसमें फायरबग और Greasemonkey जैसे दर्जनों लोकप्रिय एक्सटेंशन शामिल हैं।
माइक्रोसॉफ्ट एज / इंटरनेट एक्सप्लोरर
आमतौर पर एफ 12 डेवलपर टूल्स के रूप में जाना जाता है, कीबोर्ड एक्सप्लोरर के लिए एक श्रद्धांजलि जिसने इंटरनेट एक्सप्लोरर के पुराने संस्करणों के बाद से इंटरफ़ेस लॉन्च किया है, आईई 11 में देव टूलसेट और माइक्रोसॉफ्ट एज का एक बहुत ही आसान समूह पेश करके इसकी शुरुआत के बाद से एक लंबा सफर तय हुआ है मॉनीटर, डिबगर्स, अनुकरणकर्ता, और ऑन-द-फ्लाई कंपाइलर्स।
- अधिक क्रिया मेनू पर क्लिक करें, जो तीन बिंदुओं द्वारा दर्शाया गया है और ब्राउज़र विंडो के ऊपरी दाएं कोने में स्थित है। जब ड्रॉप-डाउन मेनू प्रकट होता है, तो F12 डेवलपर टूल लेबल वाले विकल्प का चयन करें। जैसा कि मैंने पहले ही उल्लेख किया है, आप एफ 12 कीबोर्ड शॉर्टकट के माध्यम से टूल्स तक पहुंच सकते हैं।
- विकास इंटरफ़ेस अब आमतौर पर ब्राउज़र विंडो के नीचे प्रदर्शित किया जाना चाहिए। निम्नलिखित टूल्स उपलब्ध हैं, प्रत्येक अपने संबंधित टैब शीर्षक पर क्लिक करके या साथ ही साथ कुंजीपटल शॉर्टकट का उपयोग करके पहुंच योग्य है।
डोम एक्सप्लोरर: आपको सक्रिय पृष्ठ में स्टाइलशीट्स और HTML को संपादित करने की अनुमति देता है, संशोधित परिणामों को आपके द्वारा प्रदान किए जाने पर प्रस्तुत करता है। लागू होने पर स्वत: पूर्ण कोड करने के लिए IntelliSense कार्यक्षमता का उपयोग करता है। कीबोर्ड शॉर्टकट: (CTRL + 1)
कंसोल: एक एकीकृत एपीआई के माध्यम से काउंटर, टाइमर, निशान, और अनुकूलित संदेशों सहित डिबगिंग जानकारी जमा करने की क्षमता प्रदान करता है। इसके अलावा, आपको एक सक्रिय वेब पेज में कोड इंजेक्ट करने और वास्तविक समय में अलग-अलग चरों को आवंटित मानों को संशोधित करने देता है। कीबोर्ड शॉर्टकट: (CTRL + 2)
डीबगर: आपको ब्रेकपॉइंट्स सेट करने और निष्पादित होने पर अपने कोड को डीबग करने देता है, यदि आवश्यक हो तो लाइन से लाइन करें। कीबोर्ड शॉर्टकट: (CTRL + 3)
नेटवर्क: पृष्ठ लोड और निष्पादन के दौरान ब्राउज़र द्वारा शुरू किए गए प्रत्येक नेटवर्क अनुरोध को सूचीबद्ध करता है जिसमें प्रोटोकॉल विवरण, सामग्री प्रकार, बैंडविड्थ उपयोग, और भी बहुत कुछ शामिल है। कीबोर्ड शॉर्टकट: (CTRL + 4)
प्रदर्शन: पृष्ठ लोड समय और अन्य गतिविधियों को तेज़ करने में आपकी सहायता के लिए विवरण फ्रेम दर, सीपीयू उपयोग, और अन्य प्रदर्शन-संबंधित मीट्रिक। कीबोर्ड शॉर्टकट: (CTRL + 5)
मेमोरी: अलग-अलग समय अंतराल से स्नैपशॉट के साथ मेमोरी उपयोग टाइमलाइन प्रदर्शित करके वर्तमान वेब पेज पर संभावित मेमोरी लीक को अलग और सही करने में आपकी सहायता करता है। कीबोर्ड शॉर्टकट: (CTRL + 6)
अनुकरण: आपको दिखाता है कि कैसे सक्रिय पृष्ठ विभिन्न संकल्पों और स्क्रीन आकारों में प्रस्तुत करेगा, स्मार्टफोन, टैबलेट और अन्य उपकरणों को अनुकरण करते हैं। उपयोगकर्ता एजेंट और पृष्ठ अभिविन्यास को संशोधित करने की क्षमता प्रदान करता है, साथ ही अक्षांश और देशांतर दर्ज करके विभिन्न भूगर्भिक अनुकरण भी प्रदान करता है। कीबोर्ड शॉर्टकट: (CTRL + 7) - किसी भी अन्य उपकरण के भीतर कंसोल प्रदर्शित करने के लिए विकास उपकरण इंटरफ़ेस के ऊपरी दाएं कोने में स्थित, इसके अंदर दाएं ब्रैकेट वाले स्क्वायर बटन पर क्लिक करें।
- डेवलपर टूल्स इंटरफ़ेस को अनदेखा करने के लिए, यह एक अलग विंडो बन जाता है, दो कैस्केडिंग आयतों द्वारा प्रदर्शित बटन पर क्लिक करें या निम्न कीबोर्ड शॉर्टकट का उपयोग करें: CTRL + P। आप दूसरी बार CTRL + P दबाकर टूल को अपने मूल स्थान पर वापस रख सकते हैं।
ऐप्पल सफारी (केवल ओएस एक्स)
सफारी के विविध देव टूलसेट बड़े डेवलपर समुदाय को दर्शाता है जो मैक को उनके डिजाइन और प्रोग्रामिंग आवश्यकताओं के लिए उपयोग करता है। एक शक्तिशाली कंसोल और पारंपरिक लॉगिंग और डिबगिंग सुविधाओं के अलावा, उपयोग में आसान उत्तरदायी डिज़ाइन मोड और आपके ब्राउज़र एक्सटेंशन बनाने के लिए एक टूल भी प्रदान किया जाता है।
- अपनी स्क्रीन के शीर्ष पर स्थित ब्राउज़र मेनू में सफारी पर क्लिक करें। जब ड्रॉप-डाउन मेनू प्रकट होता है, तो प्राथमिकताएं चुनें। आप इस मेनू आइटम के स्थान पर निम्न कीबोर्ड शॉर्टकट का भी उपयोग कर सकते हैं: COMMAND + COMMA (,)
- सफारी के प्राथमिकता इंटरफ़ेस को अब प्रदर्शित किया जाना चाहिए, अपनी ब्राउज़र विंडो को ओवरले करना। हेडर के दाएं हाथ की ओर स्थित उन्नत आइकन पर क्लिक करें।
- उन्नत वरीयताओं को अब दिखाना चाहिए। इस स्क्रीन के निचले हिस्से में मेनू बार में शो डेवलपमेंट मेनू लेबल वाला एक विकल्प है, जिसमें चेक बॉक्स है। यदि बॉक्स में कोई चेक मार्क नहीं दिखाया गया है, तो वहां एक बार रखने के लिए इसे क्लिक करें।
- ऊपरी बाएं कोने में पाए गए लाल 'एक्स' पर क्लिक करके प्राथमिकता इंटरफेस को बंद करें।
- अब आपको बुकमार्क और विंडो के बीच स्थित डेवलपमेंट नामक ब्राउज़र मेनू में एक नया विकल्प नोटिस करना चाहिए। इस मेनू आइटम पर क्लिक करें। एक ड्रॉप-डाउन मेनू अब प्रदर्शित होना चाहिए, जिसमें निम्न विकल्प शामिल हैं।
इसके साथ ओपन पेज: आपको अपने मैक पर वर्तमान में स्थापित अन्य ब्राउज़रों में से एक में सक्रिय वेब पेज खोलने की अनुमति देता है।
उपयोगकर्ता एजेंट: आपको क्रोम, फ़ायरफ़ॉक्स और इंटरनेट एक्सप्लोरर के कई संस्करणों के साथ-साथ अपनी खुद की कस्टम स्ट्रिंग को परिभाषित करने के साथ-साथ एक दर्जन से अधिक पूर्व-परिभाषित उपयोगकर्ता एजेंट मानों में से चुनने देता है।
उत्तरदायी डिजाइन मोड दर्ज करें: वर्तमान पृष्ठ प्रस्तुत करता है क्योंकि यह विभिन्न उपकरणों और विभिन्न स्क्रीन संकल्पों पर दिखाई देगा।
वेब इंस्पेक्टर दिखाएं: सफारी के देव उपकरण के लिए मुख्य इंटरफ़ेस लॉन्च करता है, आमतौर पर आपकी ब्राउज़र स्क्रीन के नीचे रखा जाता है और निम्न अनुभाग होते हैं: तत्व , नेटवर्क , संसाधन , टाइमलाइन , डीबगर , स्टोरेज , कंसोल ।
त्रुटि कंसोल दिखाएं: देव उपकरण इंटरफ़ेस भी सीधे कंसोल टैब पर लॉन्च करता है जो त्रुटियों, चेतावनियों और अन्य खोज योग्य लॉग डेटा प्रदर्शित करता है।
पृष्ठ स्रोत दिखाएं: संसाधन टैब खोलता है, जो दस्तावेज़ द्वारा वर्गीकृत सक्रिय पृष्ठ के लिए स्रोत कोड प्रदर्शित करता है।
पेज संसाधन दिखाएं: शो पृष्ठ स्रोत विकल्प के समान कार्य करता है।
स्निपेट संपादक दिखाएं: एक नई विंडो खोलती है जहां आप सीएसएस और एचटीएमएल कोड दर्ज कर सकते हैं, इसके आउटपुट द फ्लाई का पूर्वावलोकन कर सकते हैं।
एक्सटेंशन बिल्डर दिखाएं: सीएसएस, एचटीएमएल, और जावास्क्रिप्ट के साथ सफारी एक्सटेंशन बनाने या संपादित करने की क्षमता प्रदान करता है।
टाइमलाइन रिकॉर्डिंग दिखाएं: टाइमलाइन टैब खोलता है और वास्तविक समय में नेटवर्क अनुरोध, लेआउट और प्रतिपादन जानकारी के साथ-साथ जावास्क्रिप्ट निष्पादन प्रदर्शित करना शुरू करता है।
खाली कैश: वर्तमान में आपके हार्ड ड्राइव पर संग्रहीत पूरे कैश को हटा देता है।
कैश अक्षम करें: सफारी को कैशिंग से रोकता है ताकि प्रत्येक पृष्ठ लोड पर सर्वर से सभी सामग्री पुनर्प्राप्त की जा सके।
छवियों को अक्षम करें: छवियों को सभी वेब पृष्ठों पर प्रतिपादन से रोकता है।
शैलियों को अक्षम करें: पृष्ठ लोड होने पर सीएसएस गुणों को अनदेखा करता है।
जावास्क्रिप्ट को अक्षम करें: सभी पृष्ठों पर जावास्क्रिप्ट निष्पादन प्रतिबंधित करता है।
एक्सटेंशन अक्षम करें: ब्राउज़र के भीतर चलने से सभी स्थापित एक्सटेंशन प्रतिबंधित करता है।
साइट-विशिष्ट हैक अक्षम करें: यदि सफारी को सक्रिय वेब पेज के लिए विशिष्ट रूप से समस्या (ओं) को स्पष्ट रूप से संभालने के लिए संशोधित किया गया है, तो यह विकल्प उन परिवर्तनों को अवरुद्ध कर देगा ताकि पेज लोड हो सके क्योंकि इन संशोधनों से पहले यह होगा।
स्थानीय फ़ाइल प्रतिबंध अक्षम करें: ब्राउज़र को आपके स्थानीय डिस्क पर फ़ाइलों तक पहुंचने की अनुमति देता है, एक सुरक्षा जो सुरक्षा कारणों से डिफ़ॉल्ट रूप से प्रतिबंधित है।
क्रॉस-उत्पत्ति प्रतिबंधों को अक्षम करें: एक्सएसएस और अन्य संभावित खतरों को रोकने के लिए इन प्रतिबंधों को डिफ़ॉल्ट रूप से रखा जाता है। हालांकि, उन्हें विकास उद्देश्यों के लिए अक्सर अस्थायी रूप से अक्षम करने की आवश्यकता होती है।
स्मार्ट सर्च फ़ील्ड से जावास्क्रिप्ट को अनुमति दें: सक्षम होने पर, जावास्क्रिप्ट के साथ यूआरएल दर्ज करने की क्षमता प्रदान करता है : सीधे पता बार में शामिल किया जाता है।
एसएचए -1 प्रमाणपत्रों को असुरक्षित के रूप में देखें: एसएचए -1 एल्गोरिदम का उपयोग कर एसएसएल प्रमाणपत्र व्यापक रूप से पुराने और कमजोर माना जाता है।