วิธีใช้เครื่องมือสำหรับนักพัฒนาเว็บเบราว์เซอร์

นอกเหนือจากผู้ผลิตเบราว์เซอร์ส่วนใหญ่ที่มุ่งเน้นไปที่ผู้ใช้ในชีวิตประจำวันที่ต้องการท่องเว็บแล้วพวกเขายังให้ความสำคัญกับนักพัฒนาเว็บนักออกแบบและผู้เชี่ยวชาญด้านการประกันคุณภาพที่ช่วยสร้างแอปและไซต์ที่ผู้ใช้เหล่านั้นเข้าถึงโดยการรวมเครื่องมือที่มีประสิทธิภาพเข้ากับเบราว์เซอร์ ตัวเอง

เป็นวันที่เครื่องมือการเขียนโปรแกรมและการทดสอบเพียงอย่างเดียวที่พบในเบราว์เซอร์อนุญาตให้คุณดูซอร์สโค้ดของหน้าเว็บและไม่มีอะไรเพิ่มเติม เบราว์เซอร์ในปัจจุบันช่วยให้คุณดำน้ำลึกมากขึ้นโดยทำสิ่งต่างๆเช่นการเรียกใช้และการดีบักข้อมูลโค้ด JavaScript การตรวจสอบและแก้ไของค์ประกอบ DOM การตรวจสอบการรับส่งข้อมูลเครือข่ายแบบเรียลไทม์เมื่อแอปหรือเพจของคุณโหลดเพื่อระบุปัญหาคอขวดวิเคราะห์ประสิทธิภาพ CSS เพื่อให้แน่ใจว่าโค้ดของคุณ ไม่ใช้หน่วยความจำมากเกินไปหรือรอบ CPU มากเกินไปและอื่น ๆ อีกมากมาย

จากมุมมองการทดสอบคุณสามารถจำลองวิธีที่แอปหรือหน้าเว็บจะแสดงผลในเบราว์เซอร์ต่างๆรวมถึงบนอุปกรณ์และแพลตฟอร์มต่างๆผ่านความมหัศจรรย์ของการออกแบบที่ตอบสนองและเครื่องจำลองในตัว ส่วนที่ดีที่สุดคือคุณสามารถทำทั้งหมดนี้ได้โดยไม่ต้องออกจากเบราว์เซอร์!

บทช่วยสอนด้านล่างนี้จะแนะนำวิธีการเข้าถึงเครื่องมือสำหรับนักพัฒนาเหล่านี้ในเว็บเบราว์เซอร์ยอดนิยมต่างๆ

Google Chrome

เครื่องมือสำหรับนักพัฒนาของ Chrome ช่วยให้คุณสามารถแก้ไขและดีบักโค้ดตรวจสอบส่วนประกอบแต่ละส่วนเพื่อเปิดเผยปัญหาด้านประสิทธิภาพจำลองหน้าจออุปกรณ์ต่างๆรวมถึงหน้าจอที่ใช้ Android หรือ iOS และใช้ฟังก์ชันที่มีประโยชน์อื่น ๆ อีกมากมาย

1. เลือก Chrome เมนูหลักโดยมีเส้นแนวนอนสามเส้นและอยู่ที่มุมขวาบนของเบราว์เซอร์

2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้วางเคอร์เซอร์ของเมาส์ไว้เหนือ เครื่องมือเพิ่มเติม ตัวเลือก

   

3. ตอนนี้เมนูย่อยควรปรากฏขึ้น เลือกตัวเลือกที่มีข้อความ เครื่องมือสำหรับนักพัฒนา. คุณยังสามารถใช้แป้นพิมพ์ลัดต่อไปนี้แทนรายการเมนูนี้: Chrome OS / Windows (CTRL + SHIFT + I), Mac OS X (ALT (ตัวเลือก) + คำสั่ง + I)

   

4. ตอนนี้ควรแสดงอินเทอร์เฟซ Chrome Developer Tools ดังที่แสดงในภาพหน้าจอตัวอย่างนี้ เลย์เอาต์เริ่มต้นที่คุณเห็นอาจแตกต่างจาก Chrome ที่นำเสนอนี้เล็กน้อยทั้งนี้ขึ้นอยู่กับเวอร์ชันของ Chrome ศูนย์กลางหลักของเครื่องมือสำหรับนักพัฒนาโดยทั่วไปจะอยู่ที่ด้านล่างหรือด้านขวาของหน้าจอประกอบด้วยแท็บต่อไปนี้

5. นอกเหนือจากส่วนเหล่านี้คุณยังสามารถเข้าถึงเครื่องมือต่อไปนี้ผ่านทางไฟล์ >> ไอคอนซึ่งอยู่ทางด้านขวาของไฟล์ การปฏิบัติ แถบ

   • หน่วยความจำ: ตรวจสอบและบันทึกการใช้หน่วยความจำบนหน้าเว็บ คุณสามารถดูว่า JavaScript บนไซต์ของคุณหนักแค่ไหน
   • ความปลอดภัย: ไฮไลต์ปัญหาใบรับรองและปัญหาเกี่ยวกับความปลอดภัยอื่น ๆ กับหน้าที่ใช้งานอยู่หรือแอปพลิเคชัน
   • การใช้งาน: ตรวจสอบทรัพยากรที่ใช้โดยเว็บแอปพลิเคชัน ดูรายละเอียดทั้งหมดของสิ่งที่ใช้
   • การตรวจสอบ: เสนอวิธีเพิ่มประสิทธิภาพเวลาในการโหลดเพจหรือแอพพลิเคชั่นและประสิทธิภาพทั่วไป

   

6. โหมดอุปกรณ์ ช่วยให้คุณสามารถดูหน้าที่ใช้งานอยู่ในโปรแกรมจำลองซึ่งแสดงผลได้เกือบจะเหมือนกับที่ปรากฏบนอุปกรณ์หนึ่งในโหลรวมถึง Android และ iOS ที่รู้จักกันดีหลายรุ่นเช่น iPad, iPhone และ Samsung Galaxy นอกจากนี้คุณยังได้รับความสามารถในการจำลองความละเอียดหน้าจอที่กำหนดเองเพื่อให้เหมาะกับความต้องการในการพัฒนาหรือการทดสอบของคุณ

   เพื่อสลับ โหมดอุปกรณ์ เปิดและปิดเลือกไฟล์ ไอคอนโทรศัพท์มือถือ อยู่ทางด้านซ้ายของไฟล์ องค์ประกอบ แถบ

   

7. คุณยังสามารถปรับแต่งรูปลักษณ์ของเครื่องมือสำหรับนักพัฒนาของคุณได้โดยเลือกไฟล์ ปุ่มเมนู แสดงโดย จุดที่วางในแนวตั้งสามจุด และอยู่ทางด้านขวามือสุดของแท็บดังกล่าวข้างต้น

   จากในเมนูแบบเลื่อนลงนี้คุณสามารถเปลี่ยนตำแหน่งท่าเรือแสดงหรือซ่อนเครื่องมือต่างๆรวมทั้งเปิดรายการขั้นสูงเพิ่มเติมเช่นตัวตรวจสอบอุปกรณ์ คุณจะพบว่าอินเทอร์เฟซเครื่องมือพัฒนานั้นสามารถปรับแต่งได้อย่างมากผ่านการตั้งค่าที่พบในส่วนนี้

   

Mozilla Firefox

ส่วนนักพัฒนาเว็บของ Firefox มีเครื่องมือสำหรับนักออกแบบนักพัฒนาและผู้ทดสอบเช่นตัวแก้ไขรูปแบบและแว่นตาที่กำหนดเป้าหมายตามพิกเซล 

1. เลือก Firefox เมนูหลัก, แสดงโดย สามเส้นแนวนอน และอยู่ที่มุมขวาบนของหน้าต่างเบราว์เซอร์

2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือก พัฒนาเว็บ.

   

3. แพทเทิร์น เมนูนักพัฒนาเว็บ ตอนนี้ควรจะปรากฏขึ้นโดยมีตัวเลือกต่อไปนี้ คุณจะสังเกตเห็นว่ารายการเมนูส่วนใหญ่มีแป้นพิมพ์ลัดที่เกี่ยวข้อง

   • สลับเครื่องมือ: แสดงหรือซ่อนอินเทอร์เฟซเครื่องมือสำหรับนักพัฒนาโดยทั่วไปจะอยู่ที่ด้านล่างของหน้าต่างเบราว์เซอร์ แป้นพิมพ์ลัด: Mac OS X (ALT (ตัวเลือก) + คำสั่ง + I), Windows (CTRL + SHIFT + I)
   • ผู้ตรวจการ: ช่วยให้คุณตรวจสอบและ / หรือปรับแต่งโค้ด CSS และ HTML ในหน้าที่ใช้งานอยู่รวมทั้งบนอุปกรณ์พกพาผ่านการดีบักระยะไกล แป้นพิมพ์ลัด: Mac OS X (ALT (OPTION) + คำสั่ง + C), Windows (CTRL + SHIFT + C)
   • คอนโซลเว็บ: ช่วยให้คุณสามารถเรียกใช้นิพจน์ JavaScript ภายในเพจที่ใช้งานอยู่ตลอดจนตรวจสอบชุดข้อมูลที่บันทึกไว้ซึ่งรวมถึงคำเตือนด้านความปลอดภัยคำขอเครือข่ายข้อความ CSS และอื่น ๆ แป้นพิมพ์ลัด: Mac OS X (ALT (OPTION) + คำสั่ง + K), Windows (CTRL + SHIFT + K)
   • Debugger: JavaScript Debugger ช่วยให้คุณระบุและแก้ไขข้อบกพร่องโดยการตั้งค่าเบรกพอยต์ตรวจสอบโหนด DOM แหล่งที่มาภายนอกสีดำและอื่น ๆ อีกมากมาย ในกรณีของตัวตรวจสอบคุณสมบัตินี้ยังรองรับการดีบักระยะไกล แป้นพิมพ์ลัด: Mac OS X (ALT (ตัวเลือก) + คำสั่ง + S), Windows (CTRL + SHIFT + S)
   • ตัวแก้ไขสไตล์: ช่วยให้คุณสร้างสไตล์ชีตใหม่และรวมเข้ากับหน้าเว็บที่ใช้งานอยู่หรือแก้ไขแผ่นงานที่มีอยู่และทดสอบว่าการเปลี่ยนแปลงของคุณแสดงผลอย่างไรในเบราว์เซอร์ด้วยการคลิกเพียงครั้งเดียว แป้นพิมพ์ลัด: Mac OS X, Windows (SHIFT + F7)
   • การปฏิบัติ: ให้รายละเอียดโดยละเอียดเกี่ยวกับประสิทธิภาพเครือข่ายของเพจที่ใช้งานอยู่ข้อมูลอัตราเฟรมเวลาและสถานะการดำเนินการของ JavaScript การกะพริบของสีและอื่น ๆ อีกมากมาย แป้นพิมพ์ลัด: Mac OS X, Windows (SHIFT + F5)
   • เครือข่าย: แสดงรายการคำขอเครือข่ายแต่ละรายการที่เริ่มต้นโดยเบราว์เซอร์พร้อมกับวิธีการที่เกี่ยวข้องโดเมนต้นทางประเภทขนาดและเวลาที่ผ่านไป แป้นพิมพ์ลัด: Mac OS X (ALT (ตัวเลือก) + คำสั่ง + Q), Windows (CTRL + SHIFT + Q)
   • ตัวตรวจสอบการจัดเก็บ: ดูแคชและคุกกี้ที่เว็บไซต์จัดเก็บไว้ แป้นพิมพ์ลัด: (SHIFT + F9)
   • แถบเครื่องมือสำหรับนักพัฒนา: เปิดตัวแปลบรรทัดคำสั่งแบบโต้ตอบ ป้อน ช่วย เข้าไปในตัวแปลเพื่อดูรายการคำสั่งที่มีอยู่ทั้งหมดและไวยากรณ์ที่เหมาะสม แป้นพิมพ์ลัด: Mac OS X, Windows (SHIFT + F2)
   • WebIDE: ให้ความสามารถในการสร้างและเรียกใช้งานเว็บแอปผ่านอุปกรณ์จริงที่ใช้ Firefox OS หรือผ่าน Firefox OS Simulator แป้นพิมพ์ลัด: Mac OS X, Windows (SHIFT + F8)
   • คอนโซลเบราว์เซอร์: มีฟังก์ชันการทำงานเช่นเดียวกับ Web Console (ดูด้านบน) อย่างไรก็ตามข้อมูลทั้งหมดที่ส่งคืนเป็นของแอปพลิเคชัน Firefox ทั้งหมด (รวมถึงส่วนขยายและฟังก์ชันระดับเบราว์เซอร์) ซึ่งต่างจากหน้าเว็บที่ใช้งานอยู่ แป้นพิมพ์ลัด: Mac OS X (SHIFT + COMMAND + J), Windows (CTRL + SHIFT + J)
   • มุมมองการออกแบบที่ตอบสนอง: ช่วยให้คุณสามารถดูหน้าเว็บด้วยความละเอียดรูปแบบและขนาดหน้าจอที่แตกต่างกันได้ทันทีเพื่อเลียนแบบอุปกรณ์ต่างๆรวมถึงแท็บเล็ตและสมาร์ทโฟน แป้นพิมพ์ลัด: Mac OS X (ALT (ตัวเลือก) + คำสั่ง + ม), Windows (CTRL + SHIFT + M)
   • Eyedropper: แสดงรหัสสีฐานสิบหกสำหรับพิกเซลที่เลือกทีละรายการ
   • Scratchpad: Scratchpad ช่วยให้คุณสามารถเขียนแก้ไขรวมและเรียกใช้ข้อมูลโค้ด JavaScript จากภายในหน้าต่าง Firefox แบบผุดขึ้น เปิดเอกสาร JavaScript แบบโต้ตอบที่ให้คุณเขียนโค้ดและทดสอบกับเว็บไซต์ แป้นพิมพ์ลัด: (SHIFT + F4)
   • พนักงานบริการ: พนักงานบริการดีบักเว็บแอปพลิเคชันของคุณ รับข้อมูลโดยละเอียดเกี่ยวกับประสิทธิภาพและข้อผิดพลาด
   • ที่มาของหน้า: เครื่องมือสำหรับนักพัฒนาบนเบราว์เซอร์ดั้งเดิมตัวเลือกนี้เพียงแค่แสดงซอร์สโค้ดที่มีอยู่สำหรับหน้าที่ใช้งานอยู่ แป้นพิมพ์ลัด: Mac OS X (คำสั่ง + U), Windows (CTRL + U)
   • รับเครื่องมือเพิ่มเติม: เปิดไฟล์ กล่องเครื่องมือของนักพัฒนาเว็บ คอลเลกชันบนไซต์ส่วนเสริมอย่างเป็นทางการของ Mozilla ซึ่งมีส่วนขยายยอดนิยมประมาณโหลเช่น Firebug และ Greasemonkey

   

Microsoft Edge / Internet Explorer

เรียกกันโดยทั่วไปว่า เครื่องมือสำหรับนักพัฒนา F12เป็นการแสดงความเคารพต่อแป้นพิมพ์ลัดที่เปิดตัวอินเทอร์เฟซตั้งแต่รุ่นก่อนหน้าของ Internet Explorer ชุดเครื่องมือ dev ใน IE11 และ Microsoft Edge มีมานานแล้วนับตั้งแต่เริ่มต้นด้วยการนำเสนอกลุ่มจอภาพตัวดีบั๊กตัวเลียนแบบและบน คอมไพเลอร์ -the-fly

1. เลือก การกระทำอื่น ๆ, แสดงโดย สามจุด และอยู่ที่มุมขวาบนของหน้าต่างเบราว์เซอร์

   

2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือกตัวเลือกที่มีข้อความ เครื่องมือสำหรับนักพัฒนา.

   

3. ตอนนี้ควรแสดงอินเทอร์เฟซการพัฒนาโดยทั่วไปจะอยู่ที่ด้านล่างของหน้าต่างเบราว์เซอร์ มีเครื่องมือต่อไปนี้ซึ่งแต่ละรายการสามารถเข้าถึงได้โดยคลิกที่ส่วนหัวของแท็บที่เกี่ยวข้องหรือใช้แป้นพิมพ์ลัดที่ให้มา

   

   • DOM Explorer: ช่วยให้คุณสามารถแก้ไขสไตล์ชีตและ HTML ในหน้าที่ใช้งานอยู่โดยแสดงผลลัพธ์ที่แก้ไขในขณะที่คุณไป ใช้ฟังก์ชัน IntelliSense ในการเติมรหัสอัตโนมัติหากมี แป้นพิมพ์ลัด: (CTRL + 1)
   • ปลอบใจ: ให้ความสามารถในการส่งข้อมูลการดีบักรวมถึงตัวนับตัวจับเวลาการติดตามและข้อความที่กำหนดเองผ่าน API แบบรวม นอกจากนี้ยังให้คุณฉีดโค้ดลงในหน้าเว็บที่ใช้งานอยู่และแก้ไขค่าที่กำหนดให้กับตัวแปรแต่ละตัวแบบเรียลไทม์ แป้นพิมพ์ลัด: (CTRL + 2)
   • Debugger: ให้คุณตั้งค่าเบรกพอยต์และดีบักโค้ดของคุณในขณะที่รันทีละบรรทัดหากจำเป็น แป้นพิมพ์ลัด: (CTRL + 3)
   • เครือข่าย: แสดงรายการคำขอเครือข่ายแต่ละรายการที่เริ่มต้นโดยเบราว์เซอร์ระหว่างการโหลดหน้าและการดำเนินการรวมถึงรายละเอียดโปรโตคอลประเภทเนื้อหาการใช้แบนด์วิดท์และอื่น ๆ อีกมากมาย แป้นพิมพ์ลัด: (CTRL + 4)
   • การปฏิบัติ: รายละเอียดอัตราเฟรมการใช้งาน CPU และเมตริกอื่น ๆ ที่เกี่ยวข้องกับประสิทธิภาพเพื่อช่วยคุณเร่งเวลาในการโหลดหน้าเว็บและกิจกรรมอื่น ๆ แป้นพิมพ์ลัด: (CTRL + 5)
   • หน่วยความจำ: ช่วยให้คุณแยกและแก้ไขการรั่วไหลของหน่วยความจำที่อาจเกิดขึ้นบนหน้าเว็บปัจจุบันโดยการแสดงไทม์ไลน์การใช้หน่วยความจำพร้อมกับภาพรวมจากช่วงเวลาที่ต่างกัน แป้นพิมพ์ลัด: (CTRL + 6)
   • การจำลอง: แสดงให้คุณเห็นว่าหน้าที่ใช้งานอยู่จะแสดงผลในความละเอียดและขนาดหน้าจอต่างๆการเลียนแบบสมาร์ทโฟนแท็บเล็ตและอุปกรณ์อื่น ๆ นอกจากนี้ยังมีความสามารถในการปรับเปลี่ยนตัวแทนผู้ใช้และการวางแนวหน้ารวมทั้งจำลองตำแหน่งทางภูมิศาสตร์ที่แตกต่างกันโดยการป้อนละติจูดและลองจิจูด แป้นพิมพ์ลัด: (CTRL + 7)

4. เพื่อแสดงไฟล์ ปลอบใจ ในขณะที่อยู่ในเครื่องมืออื่น ๆ ให้กดปุ่ม ปุ่มสี่เหลี่ยม โดยมีวงเล็บด้านขวาอยู่ที่มุมขวาบนของอินเทอร์เฟซเครื่องมือพัฒนา

   

5. หากต้องการปลดล็อกอินเทอร์เฟซเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์เพื่อให้กลายเป็นหน้าต่างแยกต่างหากให้เลือก รูปสี่เหลี่ยมซ้อนกันสองรูป หรือใช้แป้นพิมพ์ลัดต่อไปนี้: CTRL + P. คุณสามารถวางเครื่องมือกลับในตำแหน่งเดิมได้โดยกด CTRL + P ครั้งที่สอง

   

Apple Safari (OS X เท่านั้น)

ชุดเครื่องมือ dev ที่หลากหลายของ Safari สะท้อนให้เห็นถึงชุมชนนักพัฒนาขนาดใหญ่ที่ใช้ Mac สำหรับความต้องการด้านการออกแบบและการเขียนโปรแกรม นอกจากคอนโซลที่มีประสิทธิภาพและคุณสมบัติการบันทึกและการดีบักแบบดั้งเดิมแล้วยังมีโหมดการออกแบบที่ตอบสนองที่ใช้งานง่ายและเครื่องมือสำหรับสร้างส่วนขยายเบราว์เซอร์ของคุณเองอีกด้วย

1. เลือก Safari ในเมนูเบราว์เซอร์ซึ่งอยู่ที่ด้านบนสุดของหน้าจอ เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือก การตั้งค่า. คุณยังสามารถใช้แป้นพิมพ์ลัดต่อไปนี้แทนรายการเมนูนี้ได้: คำสั่ง + COMMA(,)

   

2. Safari ของ การตั้งค่า ตอนนี้ควรแสดงอินเทอร์เฟซซ้อนทับหน้าต่างเบราว์เซอร์ของคุณ เลือกไฟล์ ไอคอนขั้นสูงซึ่งอยู่ทางด้านขวามือสุดของส่วนหัว

   

3. แพทเทิร์น ระดับสูง ค่ากำหนดควรปรากฏให้เห็นแล้ว ที่ด้านล่างของหน้าจอนี้คือตัวเลือกที่มีป้ายกำกับ แสดงเมนูพัฒนา ในแถบเมนูพร้อมด้วยช่องทำเครื่องหมาย หากไม่มีเครื่องหมายถูกแสดงในช่องนี้ให้คลิกหนึ่งครั้งเพื่อวางไว้ที่นั่น

   

4. ปิด การตั้งค่า อินเตอร์เฟซ.

5. ตอนนี้คุณควรสังเกตตัวเลือกใหม่ในเมนูเบราว์เซอร์ที่ชื่อ พัฒนาตั้งอยู่ระหว่าง บุ๊กมาร์กและหน้าต่าง. คลิกที่รายการเมนูนี้ ตอนนี้ควรแสดงเมนูแบบเลื่อนลงซึ่งมีตัวเลือกต่อไปนี้

   • เปิดหน้าด้วย: อนุญาตให้คุณเปิดหน้าเว็บที่ใช้งานอยู่ในเบราว์เซอร์อื่น ๆ ที่ติดตั้งบน Mac ของคุณในปัจจุบัน
   • ตัวแทนผู้ใช้: ให้คุณเลือกค่าตัวแทนผู้ใช้ที่กำหนดไว้ล่วงหน้ามากกว่าโหลรวมถึง Chrome, Firefox และ Internet Explorer หลายเวอร์ชันรวมทั้งกำหนดสตริงที่คุณกำหนดเอง
   • เข้าสู่โหมดการออกแบบที่ตอบสนอง: แสดงหน้าปัจจุบันตามที่จะปรากฏบนอุปกรณ์ต่างๆและที่ความละเอียดหน้าจอต่างกัน
   • แสดงตัวตรวจสอบเว็บ: เปิดตัวอินเทอร์เฟซหลักสำหรับเครื่องมือ dev ของ Safari ซึ่งโดยทั่วไปจะวางไว้ที่ด้านล่างของหน้าจอเบราว์เซอร์ของคุณและประกอบด้วยส่วนต่างๆต่อไปนี้องค์ประกอบเครือข่ายทรัพยากรไทม์ไลน์ดีบักเกอร์ที่เก็บข้อมูลคอนโซล
   • แสดงคอนโซลข้อผิดพลาด: ยังเปิดตัวอินเทอร์เฟซเครื่องมือ dev โดยตรงไปที่ แท็บคอนโซล ซึ่งแสดงข้อผิดพลาดคำเตือนและข้อมูลบันทึกอื่น ๆ ที่ค้นหาได้
   • แสดงที่มาของหน้า: เปิดไฟล์ แท็บทรัพยากรซึ่งจะแสดงซอร์สโค้ดสำหรับหน้าที่ใช้งานอยู่ซึ่งจัดหมวดหมู่ตามเอกสาร
   • แสดงทรัพยากรของเพจ: ทำหน้าที่เดียวกับตัวเลือกแสดงแหล่งที่มาของหน้า
   • แสดง Snippet Editor: เปิดหน้าต่างใหม่ที่คุณสามารถป้อนโค้ด CSS และ HTML ดูตัวอย่างผลลัพธ์ได้ทันที
   • แสดงตัวสร้างส่วนขยาย: ให้ความสามารถในการสร้างหรือแก้ไขส่วนขยาย Safari ด้วย CSS, HTML และ JavaScript
   • แสดงการบันทึกไทม์ไลน์: เปิดแท็บไทม์ไลน์และเริ่มแสดงคำขอเครือข่ายโครงร่างและการแสดงผลข้อมูลตลอดจนการเรียกใช้ JavaScript ในแบบเรียลไทม์
   • แคชว่างเปล่า: ลบแคชทั้งหมดที่กำลังจัดเก็บอยู่ในฮาร์ดไดรฟ์ของคุณ
   • ปิดการใช้งานแคช: หยุด Safari จากการแคชเพื่อให้ดึงเนื้อหาทั้งหมดจากเซิร์ฟเวอร์เมื่อโหลดแต่ละหน้า
   • ปิดการใช้งานรูปภาพ: ป้องกันไม่ให้แสดงภาพบนหน้าเว็บทั้งหมด
   • ปิดการใช้งานสไตล์: ละเว้นคุณสมบัติ CSS เมื่อโหลดเพจ
   • ปิดการใช้งาน JavaScript: จำกัด การเรียกใช้ JavaScript ในทุกเพจ
   • ปิดส่วนขยาย: ห้ามไม่ให้ส่วนขยายที่ติดตั้งทั้งหมดทำงานภายในเบราว์เซอร์
   • ปิดใช้งาน Hacks เฉพาะไซต์: หาก Safari ได้รับการแก้ไขเพื่อจัดการปัญหาเฉพาะสำหรับหน้าเว็บที่ใช้งานอยู่อย่างชัดเจนตัวเลือกนี้จะบล็อกการเปลี่ยนแปลงเหล่านั้นเพื่อให้หน้าเว็บโหลดได้ตามปกติก่อนที่จะมีการแนะนำการแก้ไขเหล่านี้
   • ปิดใช้งานการ จำกัด ไฟล์ในเครื่อง: อนุญาตให้เบราว์เซอร์เข้าถึงไฟล์ในดิสก์ภายในเครื่องของคุณซึ่งเป็นการดำเนินการที่ จำกัด โดยค่าเริ่มต้นเนื่องจากเหตุผลด้านความปลอดภัย
   • ปิดใช้งานข้อ จำกัด ข้ามแหล่งกำเนิด: ข้อ จำกัด เหล่านี้ถูกกำหนดโดยค่าเริ่มต้นเพื่อป้องกัน XSS และอันตรายอื่น ๆ ที่อาจเกิดขึ้น อย่างไรก็ตามมักจะต้องปิดใช้งานชั่วคราวเพื่อวัตถุประสงค์ในการพัฒนา
   • อนุญาต JavaScript จากช่องค้นหาอัจฉริยะ: เมื่อเปิดใช้งานจะให้ความสามารถในการป้อน URL ด้วย javascript: รวมอยู่ในแถบที่อยู่โดยตรง
   • ถือว่าใบรับรอง SHA-1 ไม่ปลอดภัย: ใบรับรอง SSL ที่ใช้อัลกอริทึม SHA-1 ได้รับการพิจารณาอย่างกว้างขวางว่าล้าสมัยและมีช่องโหว่