ต้องรู้
- เลือก Safari > Preferences > ขั้นสูง > แสดงเมนูพัฒนา ในแถบเมนู.
- หากต้องการใช้ Develop ให้ไปที่เมนู Safari แล้วเลือก Develop ระหว่างที่คั่นหน้าและหน้าต่าง
- ตัวเลือกการพัฒนาที่มีประโยชน์ที่สุด: เปิดหน้าด้วยตัวแทนผู้ใช้และแคชว่างเปล่า
บทความนี้อธิบายวิธีแสดงและใช้เมนูพัฒนาในเว็บเบราว์เซอร์ Safari (เวอร์ชัน 8 ถึง 12)
แสดงเมนูพัฒนาใน Safari
ก่อนที่คุณจะใช้เมนู Develop คุณต้องทำให้เมนูที่ซ่อนอยู่ปรากฏก่อนนี่เป็นงานที่ง่าย ง่ายกว่าการเปิดเผยเมนู Debug ที่ก่อน Safari 4 มีคำสั่งทั้งหมดที่อยู่ในเมนู Develop อย่างไรก็ตาม อย่าคิดว่าเมนู Debug รุ่นเก่าจะไม่เกี่ยวข้องอีกต่อไป มันยังคงมีอยู่และมีเครื่องมือที่มีประโยชน์มากมาย
-
เปิดตัว Safari จาก Dock หรือโฟลเดอร์ Mac Application
Image -
เปิดการตั้งค่าของ Safari โดยคลิก Safari ในแถบเมนูและเลือก Preferences ในเมนูแบบเลื่อนลง
Image -
คลิกแท็บ ขั้นสูง ในหน้าจอการตั้งค่า
Image -
เลือก แสดงเมนูพัฒนาในแถบเมนู.
Image
หากคุณต้องการปิดการใช้งานเมนูนักพัฒนา ให้ลบเครื่องหมายใน Safari > Preferences > ขั้นสูง หน้าจอ
การใช้เมนูพัฒนา
เมนู Develop จะปรากฏบนแถบเมนู Safari ระหว่างรายการเมนูที่คั่นหน้าและหน้าต่าง เมนู Develop มีประโยชน์อย่างยิ่งสำหรับนักพัฒนาเว็บ แต่ผู้ใช้ทั่วไปอาจพบว่ามีประโยชน์เช่นกัน
เมนู Develop บางรายการที่คุณน่าจะพบว่ามีประโยชน์มากที่สุด ได้แก่:
- เปิดหน้าด้วย: ให้คุณเปิดหน้าเว็บปัจจุบันในเบราว์เซอร์ที่คุณติดตั้งบน Mac ของคุณ หากคุณเคยเยี่ยมชมเว็บไซต์ที่ทำงานไม่ถูกต้องกับ Safari ให้ใช้คำสั่งนี้เพื่อปรากฏขึ้นอย่างรวดเร็วไปยังหน้าเว็บเดียวกันในเบราว์เซอร์อื่น
- User Agent: User Agent คือสตริงข้อความที่เบราว์เซอร์ส่งไปยังเว็บเซิร์ฟเวอร์ที่โฮสต์หน้าเว็บหากคุณเคยเข้าชมหน้าเว็บที่ประกาศว่าไม่รองรับ Safari ไซต์จะรู้ว่าคุณใช้เบราว์เซอร์ใดอยู่ ในกรณีส่วนใหญ่ การไม่รองรับเป็นเรื่องไร้สาระ และการใช้รายการเมนูนี้ คุณสามารถเปลี่ยนตัวแทนผู้ใช้เพื่อเลียนแบบจากเบราว์เซอร์อื่นได้ คุณอาจประหลาดใจกับจำนวนครั้งที่หน้าเว็บไม่ทำงานกะทันหัน เพียงแค่เปลี่ยนตัวแทนผู้ใช้
- Empty Caches: Safari เก็บแคชของเว็บไซต์ที่เพิ่งเข้าใช้ ข้อมูลที่เก็บไว้ในแคชนี้รวมถึงองค์ประกอบทั้งหมดของหน้าเว็บ ซึ่งสามารถใช้เพื่อแสดงผลเว็บไซต์ได้อย่างรวดเร็วเมื่อคุณกลับมาที่หน้า บางครั้งแคชอาจเก่าหรือเสียหาย ทำให้หน้าเว็บแสดงอย่างไม่ถูกต้อง การล้างแคชสามารถแก้ไขปัญหาเหล่านี้ได้ และยังช่วยให้ Safari เร็วขึ้นอีกด้วย
พัฒนารายการเมนูเพิ่มเติม
รายการเมนูที่เหลือส่วนใหญ่อาจมีประโยชน์สำหรับนักพัฒนาเว็บมากกว่า แต่ถ้าคุณสนใจเกี่ยวกับวิธีการสร้างเว็บไซต์ รายการต่อไปนี้อาจเป็นที่สนใจ:
- แสดง Web Inspector: เพื่อเปิด Web Inspector ที่ด้านล่างของหน้าปัจจุบัน ด้วย Web Inspector คุณสามารถตรวจสอบองค์ประกอบที่ใช้ในการสร้างเพจได้
- แสดงที่มาของหน้า: นี่จะแสดงโค้ด HTML ของหน้าปัจจุบัน
- แสดงทรัพยากรหน้า: สิ่งนี้จะเปิดแถบด้านข้างตัวตรวจสอบทรัพยากรในตัวตรวจสอบเว็บ ให้วิธีง่ายๆ ในการดูว่ามีการใช้รูปภาพ สคริปต์ สไตล์ชีต และองค์ประกอบอื่นๆ ใดบ้างในหน้าปัจจุบัน
- เริ่มการบันทึกไทม์ไลน์: หากคุณต้องการดูว่าหน้าเว็บโหลดและทำงานอย่างไร ให้ลองใช้ตัวเลือก เริ่มการบันทึกไทม์ไลน์ สิ่งนี้จะสร้างกราฟที่แสดงกิจกรรมเครือข่ายและวิธีโหลดและใช้งานองค์ประกอบของไซต์แต่ละอย่าง ทำให้มีการแสดงผลที่น่าสนใจ แต่อย่าลืมปิดคุณสมบัติโดยเลือก หยุดการบันทึกไทม์ไลน์ มิฉะนั้น คุณกำลังใช้ทรัพยากรของ Mac กับงานที่ไม่ก่อผล เว้นแต่คุณจะเป็นเว็บ นักพัฒนา
- เข้าสู่โหมดการออกแบบที่ตอบสนอง: เครื่องมืออีกตัวสำหรับนักพัฒนาเว็บคือเครื่องมือจำลองในตัวที่ให้คุณดูตัวอย่างว่าหน้าเว็บของคุณจะมีลักษณะเป็นอย่างไรในความละเอียดหน้าจอต่างๆ หรือด้วยอุปกรณ์ต่างๆ เช่น iPad หรือ iPhone เพียงโหลดหน้าเว็บที่คุณสนใจแล้วเลือก เข้าสู่โหมดการออกแบบที่ตอบสนอง เพื่อดูตัวอย่างหน้า คุณสามารถลองแสดงผลหน้าโดยใช้อุปกรณ์ต่างๆ หรือเลือกความละเอียดหน้าจอที่จะใช้ เมื่อเสร็จแล้ว ให้กลับไปที่เมนู Develop แล้วเลือก ออกจากโหมดการออกแบบที่ตอบสนอง
- คุณสมบัติทดลอง: หากคุณกล้าพอ คุณสามารถลองใช้คุณสมบัติบางอย่างที่อาจพบในเบราว์เซอร์ Safari เวอร์ชันต่อๆ ไป
เมื่อเห็นเมนู Develop ให้ลองใช้รายการเมนูต่างๆ คุณอาจจะจบลงด้วยรายการโปรดสองสามรายการที่คุณจะใช้บ่อยๆ
