เว็บไซต์สำคัญในยุคนี้ ใช้หาข้อมูลธุรกิจ งาน เรียน เว็บสร้างจากภาษาเขียนโปรแกรมที่เข้าใจยากสำหรับคนทั่วไป
อยากรู้ส่วนประกอบเว็บ ต้องรู้ วิธี Inspect Element บน Mac** ฟีเจอร์นี้ดู/แก้ไข Front-end ของเว็บได้ เหมาะสำหรับอยากสร้างเว็บเองหรือเข้าใจการทำงานของเว็บ
นอกจากตรวจสอบเว็บ ล้างคุกกี้ก็เป็นการทำงานทั่วไป กดลิงก์ดูรายละเอียด
บทความนี้สอน Inspect Element บน Mac อธิบายว่าทำไมบางครั้ง Inspect ไม่ได้ แล้วสอนวิธี Inspect บน Chrome, Safari, Firefox
ส่วนที่ 1: ทำไม Inspect ไม่ได้บน Mac?
Inspect เว็บได้ก็ต่อเมื่อ เปิดใช้งาน Develop Menu บน Safari** ต้องเปิด Develop Menu ก่อน จึงจะใช้ Apple Web Inspector ได้
ขั้นตอนเปิด Develop Menu:
- เปิด Safari
- หา Preferences ในเมนู
- คลิกแท็บ Advanced
- ล่างสุด ติ๊ก "Show Develop Menu In Menu Bar"
- เลือกเมนู Develop
- คลิก Show Web Inspector
ส่วนที่ 2: Inspect Element บนเบราว์เซอร์ Mac ยังไง?
Chrome บน Mac
4 วิธี:
- Right-Click:** คลิกขวาที่หน้า → Inspect (ถ้าคลิกขวาที่ element เฉพาะ จะเปิด element นั้นใน Inspector)
- Menu Bar:** View → Developer → Developer Tools
- Settings Icon:** 3 จุดมุมขวาบน → More Tools → Developer Tools
- Keyboard Shortcut:**
CMD + OPTION + C(macOS) → ย้ายตำแหน่ง Panel ได้ (3 จุด → Dock To Right)
จะเห็นแท็บ: Elements, Sources, Console ฯลฯ ส่วนใหญ่อยู่ที่ Elements tab - ดู/แก้ไขโค้ด ซ่อน/ลบ element แก้ HTML ได้
แท็บ Styles: ดูการจัดรูปแบบ element (เฉพาะข้อความ) Inspect mobile view ได้ - ดีสำหรับนักพัฒนา/เจ้าธุรกิจที่อยากเว็บ Mobile-friendly
Safari บน Mac
ต้องเปิด Developer Tools ก่อน:
- Safari → Preferences
- Advanced
- ติ๊ก "Show Develop Menu In Menu Bar"
- ตรวจสอบว่าเมนูมี Develop
วิธี Inspect:
- Right-Click:** ไปหน้าที่ต้องการ → คลิกขวา → Inspect
- Develop Menu:** Develop → Show Web Inspector
- Shortcut:**
CMD + OPTION + I
ถ้า Safari เปิดช้า ดูวิธีแก้ในลิงก์บทความ
Firefox บน Mac
- Right-Click:** ไปหน้า → คลิกขวา → Inspect Element (หรือคลิกขวาที่ element เฉพาะ → Inspect)
- Tools Menu:** Tools → Web Developer → Inspect
- Shortcut:**
COMMAND + OPTION + C(Mac) / CTRL+SHIFT+C (Windows)
Inspect Element บน Mac โดยไม่ Right-Click
ใช้ Shortcut Keys:
- Safari –
COMMAND + OPTION + I - Chrome –
COMMAND + OPTION + C - Firefox –
COMMAND + OPTION + C
หรือใช้ Preferences/Tools/Menus ของเบราว์เซอร์ทั้ง 3 ตัว (ดูข้างบน)
