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

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

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

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

Google Chrome

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

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

Mozilla Firefox

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

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

1. คลิกที่ปุ่มเมนูหลักของ Firefox ซึ่งแสดงโดยสามบรรทัดในแนวนอนและอยู่ที่มุมขวาบนของหน้าต่างเบราเซอร์
2. เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือกไอคอนที่มีข้อความ ผู้พัฒนา . นักพัฒนาเว็บ เมนูควรปรากฏขึ้นซึ่งจะมีตัวเลือกต่อไปนี้คุณจะสังเกตเห็นว่ารายการเมนูส่วนใหญ่มีแป้นพิมพ์ลัดที่เชื่อมโยงอยู่เครื่องมือสลับ: แสดงหรือซ่อนอินเทอร์เฟซเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ซึ่งโดยปกติจะวางตำแหน่งไว้ที่ด้านล่างของหน้าต่างเบราเซอร์ แป้นพิมพ์ลัด: Mac OS X ( ALT (OPTION) + คำสั่ง + ฉัน ), 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 )ดีบักเกอร์: ดีบักเกอร์ JavaScript ช่วยให้คุณสามารถระบุและแก้ไขข้อบกพร่องโดยการตั้งค่าจุดตรวจสอบการตรวจสอบโหนด DOM แหล่งข้อมูลมวยไทยสีดำและอื่น ๆ อีกมากมาย เช่นเดียวกับกรณี ผู้ตรวจการ คุณลักษณะนี้ยังสนับสนุนการดีบักแบบรีโมต แป้นพิมพ์ลัด: Mac OS X ( ALT (OPTION) + คำสั่ง + S ), Windows ( SHIFT + S CTRL +) ตัวแก้ไขลักษณะ: ช่วยให้คุณสามารถสร้าง 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 + คำสั่ง + 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 ( คำสั่ง + U ), Windows ( CTRL + U )รับเครื่องมือเพิ่มเติม: เปิด กล่องเครื่องมือของนักพัฒนาเว็บ ในไซต์ add-on อย่างเป็นทางการของ Mozilla ซึ่งมีส่วนขยายที่เป็นที่รู้จักเช่น Firebug และ Greasemonkey

Microsoft Edge / Internet Explorer

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

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

Apple Safari (เฉพาะ OS X)

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

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