"เราทุกคนเชื่อมต่อกับอินเทอร์เน็ตแล้ว เหมือนนิวรอนในสมองยักษ์" ~ Stephen Hawking
ค่อนข้างเป็นจริงใช่ไหม? อำนาจของอินเทอร์เน็ตไม่มีใครเทียบได้! เว็บเต็มไปด้วยเว็บไซต์และข้อมูลล้านล้านแห่ง ไม่ว่าคุณจะต้องค้นหาข้อมูลเฉพาะเจาะจงสำหรับการวิจัย หรือแค่เล่นเว็บพอร์ทัลความบันเทิง หรือขุดลึกโซเชียลมีเดีย เว็บไซต์ทำหน้าที่เป็นแหล่งหลักที่ทำให้เราติดอยู่กับอุปกรณ์
แหล่งที่มา: YouTube
คุณเคยได้ยินฟีเจอร์ "Inspect Element" (ตรวจสอบองค์ประกอบ) ขณะใช้เว็บไซต์ใดๆ หรือไม่? Inspect Element เป็นเครื่องมือเบราว์เซอร์ที่ช่วยให้คุณดูและแก้ไขสคริปต์ HTML และ CSS ของหน้าเว็บ ฟีเจอร์นี้มีในเบราว์เซอร์ทุกตัว อย่างไรก็ตาม ชื่อที่ให้อาจแตกต่างกัน เช่น สำหรับ Chrome คือ Developer Mode (โหมดนักพัฒนา) สำหรับ Safari คือ Web Inspector (ตัวตรวจสอบเว็บ) และสำห Firefox คือ Inspect (ตรวจสอบ)
ในโพสต์นี้ เราจะเรียนรู้เกี่ยวกับวิธี Inspect Element บน Mac บนเบราว์เซอร์ต่างๆ รวมถึง Safari, Google Chrome, และ Firefox และก่อนที่เราจะเริ่ม มาเข้าใจแบบรวดเร็วเกี่ยวกับวิธีใช้เครื่องมือ Inspect Element และว่ามันมีประโยชน์อย่างไร
"Inspect Element" คืออะไร?
ทุกครั้งที่คุณคลิกขวาบนเว็บไซต์ใดๆ คุณจะเห็นฟีเจอร์ "Inspect Element" ในเมนูบริบท (context menu) ในทางเทคนิค เครื่องมือ Inspect Element อนุญาตให้ผู้ใช้ดูหรือแก้ไขหน้าเว็บที่ Front-end เครื่องมือ Inspect Element ถูกใช้หลักโดยนักพัฒนา Front-end สำหรับการเล่นกับรูปลักษณ์และความรู้สึกของเว็บไซต์บางเว็บ โดยไม่ต้องกังวลว่าจะทำลายโค้ดที่ใช้งานจริง (live code) มันถูกใช้ในขั้นตอน "Testing" (ทดสอบ) เพื่อ "inspect" (ตรวจสอบ) องค์ประกอบของเว็บไซต์ในโอกาสบางครั้ง
วิธี Inspect Element บน Mac
ฟีเจอร์ Inspect Element มาพร้อมกับเบราว์เซอร์เว็บแต่ละตัว รวมถึง Safari, Chrome, และ Firefox เราจะเรียนรู้เกี่ยวกับวิธีใช้ Inspect Element บน Mac ของแต่ละเบราว์เซอร์เว็บ
Safari:
ก่อนเริ่ม ให้เปิดใช้งานฟีเจอร์ "Inspect Element" บน Safari ก่อน หากมันไม่ได้เปิด ON โดยค่าเริ่มต้น
- เปิด Safari, ไปที่ Preferences (การตั้งค่า)
- สลับไปที่แท็บ "Advanced" (ขั้นสูง) แล้วติ๊กถูกที่ตัวเลือก "Show develop menu in the menu bar" (แสดงเมนู Develop ในแถบเมนู)
ทันทีที่คุณติ๊กตัวเลือกนี้ ตัวเลือก "Develop" ใหม่จะถูกเพิ่มเข้าไปในแถบเมนู
ในการ Inspect Element บน Mac บนเบราว์เซอร์ Safari นี่คือสิ่งที่คุณต้องทำ:
ตัวเลือกที่ 1: วิธีคลิกขวา (Right-click Method)
วิธีเร็วที่สุดในการใช้เครื่องมือ Inspect Element บน Mac คือการใช้วิธีคลิกขวา
ไปที่หน้าเว็บ คลิกขวาที่พื้นที่ว่าง ใดๆ เลือก "Inspect" (ตรวจสอบ)
ตัวเลือกที่ 2: ผ่านเมนู "Develop"
คุณยังสามารถใช้ฟีเจอร์ Inspect Element ผ่านเมนู "Develop" ที่เพิ่งเพิ่มเข้ามา
ไปที่เว็บไซต์ แตะที่ตัวเลือก "Develop" ที่วางไว้บนแถบเมนูด้านบน และเลือก "Show web inspector" (แสดงตัวตรวจสอบเว็บ)
ตัวเลือกที่ 3: ใช้ปุ่มลัด (Shortcut Keys)
ทางเลือกที่สามในการใช้เครื่องมือ Inspect Element บน macOS คือผ่านปุ่มลัด
เพียงกด Command + Option + I เพื่อ Inspect Element ของหน้าเว็บ
Google Chrome:
มี 4 วิธีที่แตกต่างกันในการ Inspect Element บน Mac บนเบราว์เซอร์ Chrome
ตัวเลือกที่ 1: วิธีคลิกขวา
เปิดเบราว์เซอร์ Chrome บน Mac ของคุณ ไปที่เว็บไซต์ที่คุณต้องการตรวจสอบองค์ประกอบ
คลิกขวาที่ใดก็ได้ แล้วเลือก "Inspect" (ตรวจสอบ)
ตัวเลือกที่ 2: ผ่านแถบเมนู (Menu Bar)
เปิด Chrome แตะที่ตัวเลือก "View" ที่วางไว้บนแถบเมนูด้านบน
แหล่งที่มา: Super User
นำทางไป Developer Tools > Developer > Developer Tools
เลือกตัวเลือก "Customize and Control" เพื่อใช้ Inspect Element บน Chrome
ตัวเลือกที่ 3: ใช้ปุ่มลัดคีย์บอร์ด (Keyboard Shortcuts)
กด Command + Option + C เพื่อดูหน้าต่าง "Inspect Element" บน Chrome
ตัวเลือกที่ 4: ผ่าน Settings (การตั้งค่า)
เปิด Google Chrome บน macOS แตะที่ไอคอนสามจุดที่มุมขวาบน
แตะ "More Tools" (เครื่องมือเพิ่มเติม) แล้วเลือก "Developer Tools" (เครื่องมือนักพัฒนา)
Mozilla Firefox:
ในการใช้เครื่องมือ Inspect Element บน Firefox ทำตามขั้นตอนเร็วๆ นี้
ตัวเลือกที่ 1: วิธีคลิกขวา
เปิด Firefox ไปที่เว็บไซต์
คลิกขวาที่หน้าจอ ใดๆ เลือก "Inspect" (ตรวจสอบ)
ตัวเลือกที่ 2: ผ่านเมนู (Menu)
เปิด Firefox บน Mac แตะที่ตัวเลือก "Tools" (เครื่องมือ) ที่วางไว้บนแถบเมนูด้านบน เลือก "Web Developer" (นักพัฒนาเว็บ) แตะ "Inspect" (ตรวจสอบ)
ตัวเลือกที่ 3: ปุ่มลัด (Shortcut Keys)
ปุ่มลัดเพื่อเปิดใช้งาน Inspect Element บน Mac บนเบราว์เซอร์ Firefox สามารถทำได้โดยการกด Command + Option + C
คำถามที่พบบ่อย (FAQs):
Q.1. ฉันจะเปิด Inspect Element บน Mac ได้อย่างไร?
แหล่งที่มา: Zapier
หนึ่งในวิธีที่เร็วที่สุดในการเปิดเครื่องมือ Inspect Element บน Mac คือการคลิกขวาบนเว็บไซต์และเลือกตัวเลือก "Inspect" จากเมนูบริบท
Q.2. ปุ่มลัดสำหรับ Inspect Element บน Mac คืออะไร?
ปุ่มลัดสำหรับ Inspect Element แตกต่างกันในแต่ละเบราว์เซอร์:
- Safari: Command + Option + I
- Chrome: Command + Option + C
- Firefox: Command Option + C
Q.3. ฉันจะเปิด Inspect Element ใน Chrome บน Mac ได้อย่างไร?
ในการใช้ Inspect Element บน Google Chrome คุณสามารถกด Command + Option + C หรือคลิกขวาที่หน้าจอ ใดๆ เลือก "Inspect" เพื่อเปิดหน้าต่าง Inspect Element
คำสุดท้ายเกี่ยวกับวิธี Inspect Element บน Mac
นี่คือคู่มือเร็วเกี่ยวกับวิธีใช้เครื่องมือ Inspect Element บน macOS บนเบราว์เซอร์เว็บต่างๆ รวมถึง Safari, Chrome, และ Firefox ติดตามเราบนโซเชียลมีเดีย – Facebook, Instagram และ YouTube คุณใช้เครื่องมือ Inspect Element บน Mac บ่อยแค่ไหน และเพื่อวัตถุประสงค์อะไร? แชร์ความคิดเห็นกับผู้อ่านของเราได้เลย
