วิธีเปิดใช้งานและใช้โหมดการออกแบบที่ตอบสนองใน Safari

เริ่มต้นใน Safari เวอร์ชัน 9 ใน OS X El Capitan Apple ได้เปิดตัวโหมดการออกแบบที่ตอบสนอง อินเทอร์เฟซนี้ช่วยให้นักพัฒนาเว็บออกแบบประสบการณ์เว็บตามขนาดหน้าจอ การวางแนว และความละเอียดต่างๆ การออกแบบที่ตอบสนองตามอุปกรณ์ช่วยให้นักพัฒนาตรวจสอบว่าเว็บไซต์และแอปของตนรองรับอุปกรณ์และแพลตฟอร์มที่หลากหลาย

ต่อไปนี้คือวิธีเปิดใช้โหมดการออกแบบที่ตอบสนองในเว็บเบราว์เซอร์ Safari

ข้อมูลในบทความนี้ใช้กับ Safari 13 ถึง Safari 9 ซึ่งครอบคลุม macOS Catalina ถึง OS X El Capitan โหมดการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์ไม่มีในเวอร์ชัน Windows ของ Safari ซึ่ง Apple ไม่รองรับอีกต่อไป

วิธีเปิดใช้งานโหมดการออกแบบที่ตอบสนองใน Safari

วิธีเปิดใช้งานโหมดการออกแบบที่ตอบสนองของ Safari พร้อมกับเครื่องมือสำหรับนักพัฒนา Safari อื่นๆ:

1. ไปที่ ซาฟารี เมนูและเลือก ค่ากำหนด .

   กดแป้นพิมพ์ลัดคำสั่ง +, (จุลภาค) เพื่อเข้าถึงการตั้งค่าได้อย่างรวดเร็ว

2. ใน ค่ากำหนด กล่องโต้ตอบ เลือก ขั้นสูง แท็บ

   

3. ที่ด้านล่างของกล่องโต้ตอบ ให้เลือกแสดงเมนูพัฒนาในแถบเมนู กล่องกาเครื่องหมาย

   

4. ตอนนี้คุณจะเห็นพัฒนา ในแถบเมนู Safari ด้านบน

   

5. เลือก พัฒนา> เข้าสู่โหมดการออกแบบที่ตอบสนอง ในแถบเครื่องมือ Safari

   กดแป้นพิมพ์ลัด ตัวเลือก +คำสั่ง +ร เพื่อเข้าสู่โหมด Responsive Design อย่างรวดเร็ว

   

6. หน้าเว็บที่ใช้งานอยู่จะแสดงในโหมดการออกแบบที่ตอบสนอง ที่ด้านบนของหน้า ให้เลือกอุปกรณ์ iOS หรือความละเอียดหน้าจอเพื่อดูว่าหน้าจะแสดงผลอย่างไร

   

7. หรือดูว่าหน้าเว็บของคุณจะแสดงผลอย่างไรในแพลตฟอร์มต่างๆ โดยใช้เมนูแบบเลื่อนลงเหนือไอคอนความละเอียด

   

เครื่องมือสำหรับนักพัฒนา Safari

นอกจากโหมดการออกแบบที่ปรับเปลี่ยนตามอุปกรณ์แล้ว เมนู Safari Develop ยังมีตัวเลือกอื่นๆ ที่เป็นประโยชน์อีกด้วย

เปิดหน้าด้วย

เปิดหน้าเว็บที่ใช้งานอยู่ในเบราว์เซอร์ที่ติดตั้งอยู่บน Mac

ตัวแทนผู้ใช้

เมื่อคุณเปลี่ยน User Agent คุณสามารถหลอกเว็บไซต์ให้คิดว่าคุณกำลังใช้เบราว์เซอร์อื่น

แสดงตัวตรวจสอบเว็บ

แสดงทรัพยากรของหน้าเว็บทั้งหมด รวมถึงข้อมูล CSS และตัวชี้วัด DOM

แสดงคอนโซลข้อผิดพลาด

แสดงข้อผิดพลาดและคำเตือน JavaScript, HTML และ XML

แสดงที่มาของหน้า

ให้คุณดูซอร์สโค้ดสำหรับหน้าเว็บที่ใช้งานอยู่และค้นหาเนื้อหาของหน้า

แสดงทรัพยากรของหน้า

แสดงเอกสาร สคริปต์ CSS และทรัพยากรอื่นๆ จากหน้าปัจจุบัน

แสดงตัวแก้ไขตัวอย่าง

ให้คุณแก้ไขและรันโค้ดบางส่วนได้ คุณลักษณะนี้มีประโยชน์จากมุมมองของการทดสอบ

แสดงตัวสร้างส่วนขยาย

ช่วยคุณสร้างส่วนขยาย Safari โดยการบรรจุโค้ดตามนั้นและผนวกข้อมูลเมตาต่อท้าย

เริ่มการบันทึกไทม์ไลน์

ให้คุณบันทึกคำขอเครือข่าย การดำเนินการ JavaScript การแสดงหน้าเว็บ และกิจกรรมอื่นๆ ภายใน WebKit Inspector

แคชว่าง

ลบแคชที่เก็บไว้ทั้งหมดภายใน Safari ไม่ใช่แค่ไฟล์แคชของเว็บไซต์มาตรฐาน

ปิดการใช้งานแคช

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

อนุญาต JavaScript จากช่อง Smart Search

ปิดใช้งานโดยค่าเริ่มต้นเนื่องจากเหตุผลด้านความปลอดภัย ฟีเจอร์นี้ให้คุณป้อน URL ที่มี JavaScript ลงในแถบที่อยู่ของ Safari