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