ตั้งแต่ Safari รุ่น 9 ใน OS X El Capitan Apple ได้นำเสนอโหมดการออกแบบตอบสนอง (Responsive Design Mode) อินเทอร์เฟซนี้ช่วยให้นักพัฒนาเว็บสามารถออกแบบประสบการณ์เว็บไซต์ให้เหมาะสมกับขนาดหน้าจอ การวางแนว และความละเอียดที่หลากหลาย โหมดการออกแบบตอบสนองช่วยให้นักพัฒนาประเมินได้ว่าเว็บไซต์และแอปของพวกเขารองรับอุปกรณ์และแพลตฟอร์มหลายรูปแบบได้ดีเพียงใด
วิธีเปิดใช้งานโหมดการออกแบบตอบสนองใน Safari
เพื่อเปิดใช้งานโหมดการออกแบบตอบสนองของ Safari พร้อมกับเครื่องมือสำหรับนักพัฒนาอื่นๆ:
ไปที่เมนู Safari และเลือก Preferences (การตั้งค่า)
กดลัด Command + , (คอมมา) เพื่อเข้าถึง Preferences ได้อย่างรวดเร็ว
ในกล่องโต้ตอบ Preferences เลือกแท็บ Advanced (ขั้นสูง)
ที่ด้านล่างของกล่องโต้ตอบ ติ๊กถูกที่ช่อง Show Develop menu in menu bar (แสดงเมนู Develop ในแถบเมนู)
ตอนนี้คุณจะเห็นเมนู Develop ในแถบเมนู Safari ด้านบน
เลือก Develop > Enter Responsive Design Mode ในแถบเครื่องมือ Safari
กดลัด Option + Command + R เพื่อเข้าสู่โหมดการออกแบบตอบสนองได้ทันที
หน้าเว็บที่ใช้งานอยู่จะแสดงในโหมดการออกแบบตอบสนอง ที่ด้านบนของหน้า ให้เลือกอุปกรณ์ iOS หรือความละเอียดหน้าจอ เพื่อดูว่าหน้าจะแสดงผลอย่างไร
หรือสามารถดูการแสดงผลบนแพลตฟอร์มต่างๆ ได้โดยใช้เมนูแบบเลื่อนลง (drop-down menu) เหนือไอคอนความละเอียด
เครื่องมือสำหรับนักพัฒนา Safari
นอกจากโหมดการออกแบบตอบสนองแล้ว เมนู Develop ของ Safari ยังมีตัวเลือกที่มีประโยชน์อีกมากมาย:
Open Page With (เปิดหน้าด้วย)
เปิดหน้าเว็บที่ใช้งานอยู่ในเบราว์เซอร์อื่นที่ติดตั้งอยู่บน Mac
User Agent
เมื่อคุณเปลี่ยน User Agent คุณสามารถหลอกเว็บไซต์ให้คิดว่าคุณใช้เบราว์เซอร์อื่น
Show Web Inspector (แสดง Web Inspector)
แสดงทรัพยากรทั้งหมดของหน้าเว็บ รวมถึงข้อมูล CSS และเมตริก DOM
Show Error Console (แสดงคอนโซลข้อผิดพลาด)
แสดงข้อผิดพลาดและคำเตือนของ JavaScript, HTML และ XML
Show Page Source (แสดงซอร์สโค้ดหน้า)
ดูซอร์สโค้ดของหน้าเว็บที่ใช้งานอยู่และค้นหาเนื้อหาในหน้า
Show Page Resources (แสดงทรัพยากรหน้า)
แสดงเอกสาร สคริป्ट CSS และทรัพยากรอื่นๆ จากหน้าปัจจุบัน
Show Snippet Editor (แสดงตัวแก้ไขสนิปเพท)
แก้ไขและรันส่วนของโค้ด ฟีเจอร์นี้มีประโยชน์ในมุมมองการทดสอบ
Show Extension Builder (แสดงตัวสร้างส่วนขยาย)
ช่วยสร้างส่วนขยาย Safari โดยการแพ็กเกจโค้ดและเพิ่มข้อมูลเมตาให้เหมาะสม
Start Timeline Recording (เริ่มบันทึกไทม์ไลน์)
บันทึกคำขอเครือข่าย การรัน JavaScript การเรนเดอร์หน้า และเหตุการณ์อื่นๆ ภายใน WebKit Inspector
Empty Caches (ล้างแคช)
ลบแคชที่จัดเก็บทั้งหมดภายใน Safari ไม่ใช่แค่ไฟล์แคชเว็บไซต์มาตรฐานเท่านั้น
Disable Caches (ปิดใช้งานแคช)
เมื่อปิดใช้งานแคช ทรัพยากรจะถูกดาวน์โหลดจากเว็บไซต์ทุกครั้งที่มีคำขอเข้าถึง แทนที่จะใช้แคชในเครื่อง
Allow JavaScript from Smart Search Field (อนุญาต JavaScript จากช่องค้นหาอัจฉริยะ)
ปิดใช้งานโดยค่าเริ่มต้นเพื่อเหตุผลด้านความปลอดภัย ฟีเจอร์นี้อนุญาตให้คุณป้อน URL ที่มี JavaScript ลงในแถบที่อยู่ Safari
