MacOS: เปิดใช้งาน Web Inspector ใน Safari

หากคุณต้องการดูซิปโค้ดของหน้าเว็บใน Apple Safari สำหรับ macOS Sierra คุณจะต้องเปิดใช้งานเครื่องมือ Safari Web Inspector โดยใช้วิธีการต่อไปนี้

ผู้พัฒนาเว็บเบราว์เซอร์ เช่น Apple, Google, เป็นต้น ได้จัดเตรียมเครื่องมือที่ใช้ดูซิปโค้ดพื้นฐานไว้ให้แบบสำเร็จรูป ผู้พัฒนามักใช้เครื่องมือนี้เพื่อดีบักและแสดงการเปลี่ยนแปลงที่เกิดขึ้นในเว็บไซต์แบบสดโดยไม่รบกวนโค้ดจริงในเซิร์ฟเวอร์ อย่างไรก็ตาม เครื่องมือนี้ได้กลายเป็นที่นิยมในหมู่ผู้สร้างเนื้อหาและผู้ใช้ที่มีความรู้เทคโนโลยีที่ต้องการแก้ไขเว็บไซต์สดเพื่อจุดประสงค์ส่วนตัวหรือมืออาชีพ หากคุณเป็นหนึ่งในนั้น กรุณาอ่านบทความจนจบเพื่อทราบทุกอย่างเกี่ยวกับ Safari Web Inspector และ วิธีการตรวจสอบองค์ประกอบ.

สารบัญ

1. 1 Safari Web Inspector คืออะไร?
2. 2 วิธีเปิดใช้งาน Safari Web Inspector ใน Safari 10 ขึ้นไป
3. 3 วิธีการใช้ Safari Web Inspector บน macOS
4. 4 วิธีเปิด Safari Web Inspector ในเวอร์ชันเก่าของ macOS
   • 4.1 Safari Web Inspector: คำพูดสุดท้าย

Safari Web Inspector คืออะไร?

Web Inspector เป็นส่วนหนึ่งของชุดเครื่องมือพัฒนาที่ Apple เสนอให้แก่ผู้พัฒนาเว็บไซต์และแอปพลิเคชันทั่วโลก เครื่องมือนี้มีให้ใช้งานทั้งบน macOS และอุปกรณ์ iOS ผู้พัฒนาสามารถปรับแต่ง ปรับปรุง และดีบักเว็บไซต์เพื่อให้ได้ประสิทธิภาพสูงสุดสำหรับทรัพย์สินออนไลน์ของพวกเขา

เครื่องมือ Web Inspector บน Safari นำทรัพยากรเว็บไซต์ส่วนใหญ่ให้อยู่ภายใต้การใช้งานที่เรียบง่าย เครื่องมือยังแยกทรัพยากรและพารามิเตอร์ของพวกเขาออกเป็นแท็บเฉพาะ เพื่อให้คุณไม่รู้สึกท่วมท้นกับโค้ดและตัวเลือกมากมาย Web Inspector ยังให้คุณมุมมองแบบไทม์ไลน์เกี่ยวกับหน่วยความจำของเว็บไซต์ ดังนั้นคุณจึงสามารถดีบักหน่วยความจำได้อย่างง่ายดาย นอกจากนี้ในฐานะผู้พัฒนา คุณสามารถปรับแต่งและเพิ่มประสิทธิภาพคุณสมบัติ CSS ที่เป็นที่นิยมมากกว่า 150 รายการที่คุณต้องการในการพัฒนาเว็บไซต์ที่ใช้งานได้

ในเครื่องมือ Web Inspector คุณจะได้แท็บต่อไปนี้สำหรับทรัพยากรเว็บไซต์:

• Elements
• Console
• Sources
• Network
• Timelines
• Storage
• Graphics
• Layers
• Audit

วิธีเปิดใช้งาน Safari Web Inspector ใน Safari 10 ขึ้นไป

โดยค่าเริ่มต้น Apple Mac จะปิดใช้งาน Web Inspector ใน Safari เพื่อป้องกันความยุ่งเหยิงที่ไม่จำเป็นในอินเตอร์เฟซผู้ใช้ (UI) ของเว็บเบราว์เซอร์ อย่างไรก็ตาม หากคุณเป็นนักพัฒนา ผู้สร้างเนื้อหา และผู้ใช้ Mac ที่เชี่ยวชาญ คุณอาจต้องการเปิดใช้ฟีเจอร์นี้โดยทำตามขั้นตอนดังนี้:

• เปิดแอป Safari บน MacBook หรือ iMac ของคุณ
• ตรวจสอบให้แน่ใจว่าคุณได้คลิกเบราว์เซอร์เพื่อให้ไอคอน Safari ปรากฏบนแถบเครื่องมือของ Mac

• คลิก Safari ที่มุมซ้ายบนและเลือก Preferences.
• หรือคุณสามารถใช้ปุ่มลัด Command + , เพื่อแสดงเมนู Preferences
• ในขณะที่อยู่ในเมนู Preferences คุณต้องอยู่ในแท็บ General.

• ไปที่แท็บ Advanced.
• ด้านล่างตัวเลือก Proxies คุณควรเห็นช่องทำเครื่องหมายสำหรับ Show Develop menu in menu bar. ให้ทำเครื่องหมายในช่องนั้น.

• ตอนนี้ เมนู Develop ใน Safari จะแสดงขึ้นบนแถบเครื่องมือ Mac

นี่คือวิธีการเปิดใช้งานฟีเจอร์ Web Inspector บนเบราว์เซอร์ Safari ของคุณ ขั้นตอนจะคล้ายกันสำหรับ macOS รุ่นล่าสุด Ventura และรุ่นก่อนหน้าเช่น Monterey, Big Sur, Catalina, เป็นต้น จนกระทั่ง Jaguar

อ่านเพิ่มเติม: Html 4.01

จนถึงตอนนี้ คุณได้เรียนรู้วิธีการเปิดใช้งานฟีเจอร์ Web Inspector บนแอป Safari ของ Mac แล้ว เรียนรู้ด้านล่างนี้วิธีใช้มันใน Safari สำหรับเว็บไซต์สด:

วิธีการใช้ Safari Web Inspector บน macOS

ด้านล่างนี้เป็นขั้นตอนในการเรียกใช้เครื่องมือ Web Inspector สำหรับการพัฒนาเว็บ การสร้างเนื้อหา หรือวัตถุประสงค์อื่น ๆ ในบทความนี้ ฉันจะแสดงขั้นตอนโดยใช้ระบบปฏิบัติการ macOS Monterey แต่ขั้นตอนค่อนข้างคล้ายกันตั้งแต่ macOS Jaguar ถึง Venture

• เปิด Safari และไปที่เว็บไซต์ใดเว็บไซต์หนึ่งที่คุณต้องการตรวจสอบ
• มีวิธีการสองวิธีในการตรวจสอบซิปโค้ด HTML/CSS พื้นฐานของเว็บไซต์หรือทำการเปลี่ยนแปลงโดยใช้เครื่องมือของผู้พัฒนา Apple Web Inspector ดังนี้:
  • Develop > Show Web Inspector.
  • คลิกขวา > Inspect Element.
• เพื่อที่จะใช้วิธีแรก ให้ไปที่แถบเครื่องมือ Mac สำหรับเบราว์เซอร์ Safari แล้วคลิกที่เมนู Develop.

• ในเมนูบริบทที่ปรากฏขึ้น ให้คลิก Show Web Inspector. ปุ่มลัดสำหรับการทำงานนี้คือ Option + Command + I.

• นี่จะเปิดเครื่องมือ Web Inspector ในครึ่งล่างของเว็บเบราว์เซอร์ โค้ดที่คุณเห็นจะเป็นโค้ดสำหรับ URL ทั้งหมดหรือหน้าเว็บที่คุณเข้าใช้งาน
• หากคุณต้องการดูซิปโค้ดที่อยู่เบื้องหลังสำหรับองค์ประกอบเฉพาะบนหน้าเว็บโดยไม่ต้องเปิดโค้ดสำหรับทั้งหน้าเว็บ ให้เลือกองค์ประกอบที่คุณต้องการตรวจสอบ

• คลิกขวา และเลือก Inspect Element ในเมนูบริบทที่เปิดขึ้น
• Web Inspector ของ Safari จะเปิดขึ้น

• แต่ครั้งนี้ Safari จะพาคุณไปยังซิปโค้ด HTML หรือ CSS ที่คุณกำลังตรวจสอบโดยตรง
• ในเครื่องมือนี้ คุณจะเห็นโค้ด HTML และ CSS ขององค์ประกอบบนหน้าเว็บที่คุณกำลังตรวจสอบ

อ่านเพิ่มเติม: Technipages อธิบาย CSS

วิธีเปิด Safari Web Inspector ในเวอร์ชันเก่าของ macOS

สมมติว่าคุณอยู่ใน Mac ที่เก่ากว่า Jaguar และต้องการใช้เครื่องมือ Web Inspector หากคุณไม่พบขั้นตอนด้านบนใน Mac นั้น คุณสามารถดำเนินการรหัสง่าย ๆ เพื่อเปิดใช้งาน Web Inspector นี่คือวิธีการ:

• เปิด Applications และไปที่โฟลเดอร์ Utilities
• ภายใน Utility คุณควรพบ Terminal. นี่คือคอมมานด์พรอมต์สำหรับคอมพิวเตอร์ macOS
• ตอนนี้ เปิดอินเตอร์เฟซบรรทัดคำสั่ง Terminal และพิมพ์คำสั่งง่าย ๆ ดังต่อไปนี้:

defaults write com.apple.Safari WebKitDeveloperExtras -bool true

• กด Return เพื่อดำเนินการคำสั่ง
• ตอนนี้คุณสามารถเปิดหน้าเว็บใน Safari และคลิกขวาหรือกดค้างปุ่มเมาส์ของคุณที่ใดก็ได้บนหน้าเว็บจนกว่าจะมีเมนูบริบทปรากฏขึ้น
• จากนั้น คลิกที่ตัวเลือก Inspect Element เพื่อดูซิปโค้ด CSS และ HTML ของเว็บไซต์

Safari Web Inspector: คำพูดสุดท้าย

นี่คือวิธีการเปิดใช้งาน Web Inspector ใน Safari อย่างง่ายดาย คุณสามารถทำตามขั้นตอนเหล่านี้เองและเริ่มต้นกับการพัฒนาหรือการสร้างเนื้อหาในไม่กี่นาที คุณได้เรียนรู้วิธีการเปิดใช้งาน Inspect Element บน Safari สำหรับทั้ง macOS ใหม่และเวอร์ชันเก่า หากฉันพลาดวิธีใดที่สามารถเปิดและใช้งาน Web Inspector ได้ อย่าลังเลที่จะบอกฉันด้วยการแสดงความคิดเห็นด้านล่าง

ต่อไปนี้คือลิงค์ไปยัง แอพอัดโค้ดที่ดีที่สุดสำหรับ iPad.