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

เนื้อหา

• เข้าถึงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเว็บเบราว์เซอร์ของ Apple
• วิธีเปิดใช้งานโหมดตอบสนองการออกแบบใน Safari
• เครื่องมือสำหรับนักพัฒนา Safari

เข้าถึงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ในเว็บเบราว์เซอร์ของ Apple

ตรวจสอบให้แน่ใจว่าเว็บไซต์และแอพพลิเคชั่นเว็บรองรับกลุ่มอุปกรณ์และแพลตฟอร์มเป็นงานสำคัญสำหรับนักพัฒนาเว็บ เว็บเบราว์เซอร์ Safari ของ Apple มีโหมดตอบสนองการออกแบบที่ให้คุณแสดงตัวอย่างว่าไซต์ของคุณจะแสดงผลอย่างไรที่ความละเอียดหน้าจอที่หลากหลายและบน iPad, iPhone และ iPod touch

คำแนะนำในบทความนี้ใช้กับ Safari 13 สำหรับ macOS โหมดตอบสนองการออกแบบไม่พร้อมใช้งานในรุ่น Windows

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

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

1. เลือก การแข่งรถวิบาก > การตั้งค่า ในแถบเครื่องมือ Safari

   

   
   

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

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

   

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

   

   
   

   คุณสามารถใช้แป้นพิมพ์ลัด ตัวเลือก+คำสั่ง+R เพื่อเข้าสู่โหมดตอบสนองการออกแบบ

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

   

นอกจากนี้คุณยังสามารถสั่งให้ Safari จำลองตัวแทนผู้ใช้ต่าง ๆ โดยใช้เมนูแบบเลื่อนลงเหนือไอคอนความละเอียด

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

นอกเหนือจากโหมดการตอบสนองการออกแบบเมนูพัฒนาของ Safari ยังมีตัวเลือกที่มีประโยชน์มากมายรวมถึง:

• เปิดหน้าด้วย: เปิดหน้าเว็บที่ใช้งานในเบราว์เซอร์อื่นที่ติดตั้งบน Mac ของคุณ
• ตัวแทนผู้ใช้: การเปลี่ยนตัวแทนผู้ใช้ทำให้เว็บเซิร์ฟเวอร์ระบุเบราว์เซอร์ของคุณเป็นอย่างอื่นนอกเหนือจาก Safari
• เชื่อมต่อตัวตรวจสอบเว็บ: แสดงทรัพยากรทั้งหมดของหน้าเว็บรวมถึงข้อมูล CSS และเมตริก DOM
• แสดงคอนโซลข้อผิดพลาด: แสดงข้อผิดพลาดและคำเตือนของ JavaScript, HTML และ XML
• แสดงที่มาของหน้า: ดูและค้นหาซอร์สโค้ดของเว็บเพจที่ใช้งานอยู่
• แสดงทรัพยากรหน้า: แสดงเอกสารสคริปต์ CSS และแหล่งข้อมูลอื่น ๆ จากหน้าปัจจุบัน
• แสดงตัวอย่างเครื่องมือแก้ไข: แก้ไขและดำเนินการส่วนของรหัส คุณลักษณะนี้มีประโยชน์มากจากมุมมองการทดสอบ
• แสดงตัวสร้างส่วนขยาย: สร้างส่วนขยาย Safari ของคุณเองโดยการบรรจุรหัสของคุณตามนั้นและผนวกข้อมูลเมตา
• เริ่มการบันทึกเส้นเวลา: บันทึกคำขอเครือข่ายการเรียกใช้ JavaScript การแสดงหน้าและกิจกรรมอื่น ๆ ภายใน WebKit Inspector
• แคชว่างเปล่า: ลบแคชที่เก็บไว้ทั้งหมดใน Safari ไม่ใช่เฉพาะไฟล์แคชของเว็บไซต์มาตรฐาน
• ปิดการใช้งานแคช: เมื่อปิดการใช้งานแคชทรัพยากรจะถูกดาวน์โหลดจากเว็บไซต์ทุกครั้งที่มีการร้องขอการเข้าถึงซึ่งต่างจากการใช้แคชในเครื่อง
• อนุญาต JavaScript จากช่องค้นหาอัจฉริยะ: ปิดใช้งานโดยค่าเริ่มต้นด้วยเหตุผลด้านความปลอดภัยคุณลักษณะนี้ช่วยให้คุณป้อน URL ที่มี JavaScript ในแถบที่อยู่ของ Safari
• ปฏิบัติกับใบรับรอง SHA-1 ในแบบที่ไม่ปลอดภัย: ย่อมาจากคำว่า Secure Hash Algorithm ฟังก์ชั่นแฮช SHA-1 ได้รับการพิสูจน์แล้วว่าปลอดภัยน้อยกว่าที่คิดไว้เดิมดังนั้นการเพิ่มตัวเลือกนี้ใน Safari