การเป็นนักพัฒนาเว็บในโลกปัจจุบันหมายถึงการสนับสนุนฝูงอุปกรณ์และแพลตฟอร์มต่างๆซึ่งบางครั้งอาจพิสูจน์ได้ว่าเป็นงานที่น่ากลัว แม้จะมีโค้ดที่ได้รับการออกแบบมาเป็นอย่างดีซึ่งสอดคล้องกับมาตรฐานเว็บล่าสุดคุณยังคงพบว่าบางส่วนของเว็บไซต์ของคุณอาจดูหรือไม่ทำตามที่คุณต้องการในบางอุปกรณ์หรือความละเอียด เมื่อต้องเผชิญกับความท้าทายในการสนับสนุนสถานการณ์ที่หลากหลายเช่นการมีเครื่องมือจำลองที่เหมาะสมกับคุณอาจเป็นสิ่งล้ำค่า
หากคุณเป็นหนึ่งในโปรแกรมเมอร์จำนวนมากที่ใช้ Mac ชุดเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Safari มีประโยชน์เสมอ ด้วยการเปิดตัว Safari 9 ความกว้างของฟังก์ชันการทำงานนี้ได้ขยายขึ้นอย่างมากส่วนใหญ่มาจากโหมดการออกแบบที่ตอบสนองซึ่งช่วยให้คุณสามารถดูตัวอย่างได้ว่าเว็บไซต์ของคุณจะแสดงผลที่ความละเอียดหน้าจอต่างๆรวมถึงการสร้าง iPad, iPhone และ iPod touch ที่ต่างกัน
รายละเอียดการกวดวิชานี้จะอธิบายวิธีการเปิดใช้งานโหมดการออกแบบที่ตอบสนองต่อการใช้งานรวมถึงวิธีใช้ประโยชน์จากความต้องการในการพัฒนาของคุณ
ค่ากำหนด Safari
ขั้นแรกเปิดเบราเซอร์ Safari ของคุณ
คลิกที่ การแข่งรถวิบาก ในเมนูเบราเซอร์ที่อยู่ด้านบนของหน้าจอ เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือก การตั้งค่า ตัวเลือกล้อมรอบในตัวอย่างที่แสดง
บันทึก: คุณสามารถใช้แป้นพิมพ์ลัดต่อไปนี้แทนรายการเมนูที่กล่าวมาได้: COMMAND + COMMA (,)
02 จาก 05แสดงเมนู Develop Menu
ขณะนี้ควรจะมีหน้าต่างโต้ตอบ Preferences ของ Safari ซ้อนทับหน้าต่างเบราเซอร์ของคุณ ขั้นแรกให้คลิกที่ สูง ไอคอนแสดงด้วยเฟืองและอยู่ที่มุมขวาบนของหน้าต่าง
ขณะนี้ควรตั้งค่ากำหนดขั้นสูงของเบราเซอร์ไว้ ที่ด้านล่างเป็นตัวเลือกพร้อมด้วยช่องทำเครื่องหมายกำกับ แสดงเมนู Develop ในเมนูบาร์ และวงกลมในตัวอย่างข้างต้น คลิกที่ช่องทำเครื่องหมายหนึ่งครั้งเพื่อเปิดใช้งานเมนูนี้
03 จาก 05ป้อนโหมดการออกแบบที่ตอบสนองต่อ
ตอนนี้ตัวเลือกใหม่จะพร้อมใช้งานในเมนู Safari ของคุณซึ่งอยู่ที่ด้านบนของหน้าจอมีข้อความว่า พัฒนา. คลิกที่ตัวเลือกนี้
เมื่อเมนูแบบเลื่อนลงปรากฏขึ้นให้เลือก ป้อนโหมดการออกแบบที่ตอบสนองต่อวงกลมในตัวอย่างที่แสดง
บันทึก: คุณสามารถใช้แป้นพิมพ์ลัดต่อไปนี้แทนรายการเมนูที่กล่าวมาได้:OPTION + COMMAND + R
04 จาก 05โหมดการออกแบบที่ตอบสนองต่อ
ตอนนี้หน้าเว็บที่ใช้งานอยู่ควรปรากฏในโหมดการออกแบบที่ตอบสนองดังที่แสดงไว้ในตัวอย่างข้างต้น การเลือกอุปกรณ์ iOS ที่มีอยู่ในรายการเช่น iPhone 6 หรือความละเอียดหน้าจอที่กำหนดไว้อย่างใดอย่างหนึ่งเช่น 800 x 600 คุณสามารถดูได้ทันทีว่าเพจจะแสดงผลบนอุปกรณ์นั้นหรือในความละเอียดในการแสดงผลดังกล่าว
นอกจากอุปกรณ์และความละเอียดที่แสดงแล้วคุณยังสามารถสั่งให้ Safari จำลองข้อมูลตัวแทนผู้ใช้อื่นได้เช่นจากเบราว์เซอร์อื่นโดยการคลิกที่เมนูแบบเลื่อนลงที่อยู่เหนือไอคอนความละเอียดโดยตรง
05 จาก 05เมนู Develop: ตัวเลือกอื่น ๆ
นอกเหนือจากโหมดการออกแบบที่ปรับเปลี่ยนได้เมนู Safari ของ Safari 9 ยังมีตัวเลือกที่เป็นประโยชน์อื่น ๆ อีกมากมายซึ่งบางรายการมีอยู่ด้านล่าง
- เปิดหน้าด้วย: ช่วยให้คุณสามารถเปิดเว็บเพจที่ใช้งานได้ในเบราว์เซอร์อื่นที่ติดตั้งอยู่ในเครื่อง Mac ของคุณ
- ตัวแทนผู้ใช้: การเปลี่ยน User Agent ทำให้เว็บเซิร์ฟเวอร์ระบุเบราว์เซอร์ของคุณเป็นสิ่งอื่นที่ไม่ใช่ Safari 9
- เชื่อมต่อ Web Inspector: โปรแกรมตรวจสอบเว็บ Safari 9 จะแสดงทรัพยากรทั้งหมดของเว็บเพจโดยให้ความสามารถในการอ่านข้อมูล CSS เมตริก DOM และโครงสร้างตลอดจนรหัสต้นฉบับ
- แสดงข้อผิดพลาด: ตัวเลือกที่ใช้กันอย่างแพร่หลายในเมนู Develop หนึ่งตัวคอนโซลนี้จะแสดงข้อผิดพลาดและคำเตือนเกี่ยวกับ JavaScript, HTML และ XML
- แสดงที่มาของหน้า: ช่วยให้คุณสามารถดูและค้นหาซอร์สโค้ดของเว็บเพจที่ใช้งานได้
- แสดงทรัพยากรของหน้า: การเลือกตัวเลือกนี้จะแสดงเอกสารสคริปต์ CSS และแหล่งข้อมูลอื่น ๆ จากหน้าปัจจุบัน
- แสดงตัวแก้ไขคำอธิบายภาพ: ให้ความสามารถในการแก้ไขและดำเนินการชิ้นส่วนของโค้ดในทางตรงกันข้ามกับหน้าเว็บที่สมบูรณ์ คุณลักษณะนี้มีประโยชน์มากจากมุมมองการทดสอบ
- แสดงส่วนขยายของตัวสร้าง: ช่วยให้คุณสามารถสร้างส่วนขยาย Safari ของคุณเองได้โดยใส่รหัสของคุณตามลำดับและเพิ่มข้อมูลเมตา
- เริ่มบันทึกเส้นเวลา: บันทึกรายการจำนวนมากรวมทั้งคำขอเครือข่ายการเรียกใช้ JavaScript การแสดงผลหน้าเว็บและเหตุการณ์อื่น ๆ ในระยะเวลาที่ผู้ใช้กำหนดเองทั้งหมดที่สามารถดูได้ภายใน WebKit Inspector
- แคชที่ว่างเปล่า: การคลิกตัวเลือกนี้จะลบแคชที่เก็บไว้ทั้งหมดภายใน Safari ไม่ใช่เฉพาะไฟล์แคชของเว็บไซต์มาตรฐานเท่านั้น
- ปิดใช้งานแคช: เมื่อปิดใช้งานแคชแล้วจะมีการดาวน์โหลดทรัพยากรจากเว็บไซต์ทุกครั้งที่มีการร้องขอการเข้าถึงเพื่อใช้แคชภายใน
- อนุญาต JavaScript จากฟิลด์การค้นหาแบบสมาร์ท: ปิดใช้งานโดยค่าเริ่มต้นเนื่องจากเหตุผลด้านความปลอดภัยคุณลักษณะนี้ช่วยให้คุณสามารถป้อน URL ที่มี JavaScript ในแถบที่อยู่ของ Safari
- ปฏิบัติตามใบรับรอง SHA-1 ว่าไม่ปลอดภัย: ย่อมาจาก Secure Hash Algorithm ฟังก์ชันแฮชของ SHA-1 ได้รับการพิสูจน์ว่ามีความปลอดภัยน้อยกว่าที่คิดไว้ แต่เดิมจึงมีการเพิ่มตัวเลือกนี้ใน Safari 9
