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

toolsets แบบบูรณาการสำหรับนักออกแบบเว็บนักพัฒนาซอฟต์แวร์และนักทดสอบ

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

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

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

Google Chrome

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

1. คลิกที่ปุ่มเมนูหลักของ Chrome ซึ่งทำเครื่องหมายสามเส้นในแนวนอนและอยู่ที่มุมขวาบนของเบราว์เซอร์
2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลื่อนเมาส์ไปวางเหนือตัวเลือก เครื่องมือเพิ่มเติม
3. ตอนนี้เมนูย่อยควรปรากฏขึ้น เลือกตัวเลือกที่มีป้ายกำกับ เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ คุณยังสามารถใช้แป้นพิมพ์ลัดต่อไปนี้แทนรายการเมนูนี้: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT (OPTION) + คำสั่ง + I )
4. ตอนนี้ควรจะแสดงส่วนติดต่อเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome ดังที่แสดงในภาพหน้าจอตัวอย่างนี้ รูปแบบเริ่มต้นที่คุณเห็นอาจแตกต่างจากที่แสดงในที่นี้เล็กน้อยทั้งนี้ขึ้นอยู่กับรุ่นของ Chrome ศูนย์กลางหลักของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ซึ่งโดยทั่วไปจะอยู่ที่ด้านล่างหรือด้านขวาของหน้าจอมีแท็บต่อไปนี้
   องค์ประกอบ: ให้ความสามารถในการตรวจสอบ CSS และโค้ด HTML รวมทั้งแก้ไข CSS แบบทันทีโดยดูผลกระทบจากการเปลี่ยนแปลงของคุณแบบเรียลไทม์
   คอนโซล: คอนโซล JavaScript ของ Chrome อนุญาตให้เข้าสู่คำสั่งโดยตรงรวมถึงการแก้จุดบกพร่องในการวินิจฉัย
   แหล่งที่มา: ช่วยให้คุณสามารถแก้ปัญหาโค้ด JavaScript ผ่านทางส่วนติดต่อแบบกราฟิกที่มีประสิทธิภาพ
   เครือข่าย: จัด หมวดหมู่และแสดงข้อมูลโดยละเอียดเกี่ยวกับการดำเนินการที่เกี่ยวข้องแต่ละรายการในแอ็พพลิเคชันหรือเพจที่มีการใช้งานรวมทั้งส่วนหัวคำขอและการตอบสนองที่สมบูรณ์รวมทั้งเมตริกวัดเวลาขั้นสูง
   เส้นเวลา: อนุญาตให้มีการวิเคราะห์เชิงลึกเกี่ยวกับกิจกรรมทุกอย่างที่เกิดขึ้นภายในเบราว์เซอร์ทันทีที่มีการเริ่มต้นโหลดหน้าเว็บหรือคำขอ
5. นอกเหนือจากส่วนเหล่านี้แล้วคุณยังสามารถเข้าถึงเครื่องมือต่อไปนี้ได้ผ่านไอคอน >> ที่ อยู่ทางด้านขวาของแท็บ ไทม์ไลน์
   Profile: Broken down ลงใน Profiler CPU และส่วน Heap Profiler ให้การใช้หน่วยความจำที่ครอบคลุมและเวลาในการดำเนินการโดยรวมของแอพพลิเคชันหรือเพจที่ใช้งานอยู่
   การรักษาความปลอดภัย: เน้นปัญหาเกี่ยวกับใบรับรองและปัญหาด้านความปลอดภัยอื่น ๆ ที่มีอยู่กับแอคทีฟเพจหรือแอพพลิเคชัน
   ทรัพยากร: นี่คือที่ที่คุณสามารถตรวจสอบคุกกี้ที่เก็บข้อมูลในเครื่องแคชของแอปและแหล่งข้อมูลท้องถิ่นอื่น ๆ ที่ใช้โดยเว็บเพจหรือแอพพลิเคชันปัจจุบัน
   การตรวจสอบ: เสนอวิธีเพิ่มประสิทธิภาพหน้าหรือเวลาในการโหลดของแอปพลิเคชันและประสิทธิภาพโดยรวม
6. โหมดอุปกรณ์ ช่วยให้คุณสามารถดูหน้าเว็บที่ใช้งานอยู่ในเครื่องมือจำลองซึ่งทำให้เกือบทุกอย่างที่ปรากฏในอุปกรณ์มากกว่าหนึ่งโหลรวมทั้งรูปแบบ Android และ iOS ที่รู้จักกันดีเช่น iPad iPhone และ Samsung Galaxy คุณยังมีความสามารถในการเลียนแบบความละเอียดหน้าจอที่กำหนดเองเพื่อให้พอดีกับการพัฒนาหรือความต้องการการทดสอบของคุณ หากต้องการเปิดหรือปิด โหมดอุปกรณ์ ให้เลือกไอคอนโทรศัพท์มือถือที่อยู่ด้านซ้ายของแท็บ Elements
7. นอกจากนี้คุณยังสามารถปรับแต่งรูปลักษณ์ของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ด้วยการคลิกที่ปุ่มเมนูที่แสดงโดยจุดที่ตั้งไว้ 3 จุดและอยู่ที่ด้านขวาสุดของแท็บที่กล่าวมา จากภายในเมนูแบบเลื่อนลงนี้คุณสามารถวางตำแหน่งท่าเทียบเรือแสดงหรือซ่อนเครื่องมือต่างๆรวมทั้งเปิดรายการขั้นสูงเพิ่มเติมได้เช่นอุปกรณ์ตรวจสอบ คุณจะพบว่าส่วนติดต่อผู้ใช้ dev นั้นมีการปรับแต่งเองโดยใช้การตั้งค่าที่พบในส่วนนี้

Mozilla Firefox

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

การอ่านแนะนำ: สคริปต์ผู้ใช้ Greasemonkey และ Tampermonkey 25 อันดับแรก

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

Microsoft Edge / Internet Explorer

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

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

Apple Safari (เฉพาะ OS X)

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

1. คลิกที่ Safari ในเมนูเบราเซอร์ซึ่งอยู่ที่ด้านบนของหน้าจอ เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือก Preferences นอกจากนี้คุณยังสามารถใช้แป้นพิมพ์ลัดต่อไปนี้แทนรายการเมนูนี้: COMMAND + COMMA (,)
2. อินเตอร์เฟซ Preferences ของ Safari ควรถูกแสดงซ้อนทับหน้าต่างเบราเซอร์ของคุณ คลิกที่ไอคอน ขั้นสูง ซึ่งอยู่ทางด้านขวามือของส่วนหัว
3. การตั้งค่า ขั้นสูง ควรปรากฏให้เห็นแล้ว ที่ด้านล่างของหน้าจอนี้เป็นตัวเลือก แสดงเมนู Show Develop ในแถบเมนู พร้อมด้วยกล่องกาเครื่องหมาย หากไม่มีเครื่องหมายถูกปรากฏในกล่องให้คลิกที่ไอคอนนี้เพื่อวางไว้ในช่อง
4. ปิดอินเทอร์เฟซการกำหนด ลักษณะ โดยคลิกที่เครื่องหมาย 'x' สีแดงที่มุมซ้ายบน
5. ตอนนี้คุณควรสังเกตตัวเลือกใหม่ในเมนูเบราเซอร์ชื่อ Develop ซึ่งอยู่ระหว่าง บุ๊กมาร์ก และ หน้าต่าง คลิกที่รายการเมนูนี้ ขณะนี้เมนูแบบเลื่อนลงจะปรากฏขึ้นโดยมีตัวเลือกต่อไปนี้
   เปิดเพจด้วย: ให้คุณเปิดเว็บเพจที่ใช้งานได้ในเบราว์เซอร์อื่นที่ติดตั้งอยู่ในเครื่อง Mac ของคุณ
   User Agent: ช่วยให้คุณสามารถเลือกค่าตัวแทนผู้ใช้ที่ระบุไว้ล่วงหน้าได้หลายโหลรวมทั้ง Chrome, Firefox และ Internet Explorer หลายเวอร์ชันรวมทั้งกำหนดสตริงที่กำหนดเองของคุณเอง
   ป้อน โหมดการออกแบบที่ตอบสนอง : แสดงหน้าปัจจุบันที่ปรากฏบนอุปกรณ์ต่างๆและใช้ความละเอียดหน้าจอที่แตกต่างกัน
   แสดง Web Inspector: เปิดตัวส่วนติดต่อหลักสำหรับเครื่องมือ dev ของ Safari โดยทั่วไปจะอยู่ที่ด้านล่างของหน้าจอเบราเซอร์และประกอบด้วยส่วนต่อไปนี้: องค์ประกอบ เครือข่าย ทรัพยากร ไทม์ไลน์ ดีบักเกอร์ สตอเรจ คอนโซล
   แสดงข้อผิดพลาดของคอนโซล: เปิดตัวส่วนติดต่อเครื่องมือ dev โดยตรงไปยังแท็บ Console ซึ่งจะแสดงข้อผิดพลาดคำเตือนและข้อมูลบันทึกอื่น ๆ ที่สามารถค้นหาได้
   แสดงแหล่งที่มาของหน้าเว็บ: เปิดแท็บ ทรัพยากร ซึ่งจะแสดงรหัสต้นฉบับสำหรับเพจที่มีการใช้งานอยู่โดยจัดประเภทตามเอกสาร
   แสดงรีซอร์สของเพจ: ทำหน้าที่เดียวกับตัวเลือก แหล่งที่มาของหน้าแสดง
   แสดงตัวแก้ไขสเปรดชีต: เปิดหน้าต่างใหม่ที่คุณสามารถป้อนโค้ด CSS และ HTML ดูตัวอย่างผลลัพธ์ในทันที
   แสดงส่วนขยายของ Builder: ให้ความสามารถในการสร้างหรือแก้ไขส่วนขยาย Safari ด้วย CSS, HTML และ JavaScript
   แสดงการบันทึก Timeline: เปิดแท็บ Timelines และเริ่มแสดงคำขอเครือข่ายข้อมูลเค้าโครงและการแสดงผลตลอดจนการเรียกใช้ JavaScript ในแบบเรียลไทม์
   แคชที่ว่างเปล่า: ลบแคชทั้งหมดที่กำลังเก็บอยู่ในฮาร์ดไดรฟ์ของคุณ
   ปิดใช้งานแคช: หยุด Safari จากแคชเพื่อให้เนื้อหาทั้งหมดถูกเรียกค้นจากเซิร์ฟเวอร์เมื่อโหลดแต่ละหน้า
   ปิดใช้งานรูปภาพ: ป้องกันภาพจากการแสดงผลบนเว็บเพจทั้งหมด
   ปิดใช้รูปแบบ: ละเว้นคุณสมบัติ CSS เมื่อโหลดหน้าเว็บ
   ปิดการใช้งาน JavaScript: จำกัด การเรียกใช้ JavaScript ในทุกหน้า
   ปิดใช้งานส่วนขยาย: ห้าม ใช้ส่วนขยายที่ ติดตั้งไว้ทั้งหมดจากการทำงานภายในเบราว์เซอร์
   ปิดการใช้งาน Hacks เฉพาะไซต์: หาก Safari ได้รับการแก้ไขเพื่อจัดการกับปัญหาเฉพาะสำหรับเว็บเพจที่ใช้งานอยู่ตัวเลือกนี้จะบล็อกการเปลี่ยนแปลงเหล่านั้นเพื่อให้หน้านี้โหลดเหมือนเดิมก่อนที่จะมีการปรับเปลี่ยนเหล่านี้
   ปิดใช้งานข้อ จำกัด ไฟล์ท้องถิ่น: อนุญาตให้เบราว์เซอร์เข้าถึงไฟล์ในดิสก์ภายในเครื่องซึ่งเป็นการกระทำที่ถูก จำกัด โดยค่าเริ่มต้นเนื่องจากเหตุผลด้านความปลอดภัย
   ปิดการใช้งานข้อ จำกัด เกี่ยวกับการข้ามแหล่งกำเนิด: ข้อ จำกัด เหล่านี้ถูกกำหนดไว้เป็นค่าเริ่มต้นเพื่อป้องกัน XSS และอันตรายที่อาจเกิดขึ้นอื่น ๆ อย่างไรก็ตามพวกเขามักต้องการปิดใช้งานชั่วคราวเพื่อวัตถุประสงค์ในการพัฒนา
   อนุญาต JavaScript จากฟิลด์การค้นหาแบบสมาร์ท: เมื่อเปิดใช้งานจะมีความสามารถในการป้อน URL ด้วย javascript: รวมอยู่ในแถบที่อยู่โดยตรง
   รักษาใบรับรอง SHA-1 เป็นความไม่ปลอดภัย: ใบรับรอง SSL ที่ใช้ อัลกอริธึม SHA-1 จะถือว่าล้าสมัยและมีช่องโหว่