"ตอนนี้เราทุกคนเชื่อมต่อกับอินเทอร์เน็ต เหมือนเซลล์ประสาทในสมองยักษ์" ~ สตีเฟน ฮอว์คิง
จริงเหรอ? พลังของอินเทอร์เน็ตไม่มีใครเทียบได้! เว็บเต็มไปด้วยเว็บไซต์และข้อมูลนับล้าน ไม่ว่าคุณจะต้องการค้นหาข้อมูลเฉพาะเพื่อการวิจัย หรือเพียงแค่เรียกดูพอร์ทัลความบันเทิงหรือค้นหาบนโซเชียลมีเดีย เว็บไซต์ก็เป็นแหล่งรวมหลักที่ทำให้เราติดใจแกดเจ็ตของคุณ
แหล่งที่มาของรูปภาพ:YouTube
คุณเคยได้ยินเกี่ยวกับคุณลักษณะ "ตรวจสอบองค์ประกอบ" ในขณะที่ใช้เว็บไซต์ใด ๆ หรือไม่? Inspect Element เป็นเหมือนเครื่องมือเบราว์เซอร์ที่ช่วยให้คุณสามารถดูและแก้ไขสคริปต์ HTML และ CSS ของหน้าเว็บได้ คุณลักษณะนี้มีอยู่ในทุกเบราว์เซอร์ อย่างไรก็ตาม ชื่อที่กำหนดอาจแตกต่างกัน เช่น สำหรับ Chrome คือโหมดนักพัฒนาซอฟต์แวร์ สำหรับ Safari คือ Web Inspector และสำหรับ Firefox คือ Inspect
ในโพสต์นี้ เราจะเรียนรู้เกี่ยวกับวิธีการตรวจสอบองค์ประกอบบน Mac บนเบราว์เซอร์ต่างๆ รวมถึง Safari, Google Chrome และ Firefox และก่อนที่เราจะเริ่มต้น เรามาทำความเข้าใจอย่างรวดเร็วเกี่ยวกับวิธีการใช้เครื่องมือตรวจสอบองค์ประกอบและเหตุใดจึงมีประโยชน์
Inspect Element คืออะไร
เมื่อใดก็ตามที่คุณคลิกขวาที่เว็บไซต์ใดๆ คุณจะเห็นคุณลักษณะ "ตรวจสอบองค์ประกอบ" ในเมนูบริบท ในแง่เทคนิค เครื่องมือตรวจสอบองค์ประกอบอนุญาตให้ผู้ใช้ดูหรือแก้ไขหน้าเว็บที่ส่วนหน้า เครื่องมือ Inspect Element ถูกใช้โดยนักพัฒนา front-end เป็นหลักในการเล่นกับรูปลักษณ์ของเว็บไซต์บางแห่งโดยไม่ต้องกลัวว่าจะก่อวินาศกรรมโค้ดสด ใช้ในขั้นตอน "การทดสอบ" เพื่อ "ตรวจสอบ" องค์ประกอบของเว็บไซต์ในบางโอกาส
วิธีการตรวจสอบองค์ประกอบบน Mac
คุณลักษณะ Inspect Element มาพร้อมกับเว็บเบราว์เซอร์แต่ละตัว รวมทั้ง Safari, Chrome และ Firefox ตอนนี้เราจะได้เรียนรู้เกี่ยวกับวิธีใช้ Inspect Element บน Mac ของแต่ละเว็บเบราว์เซอร์
Safari:
ก่อนที่เราจะเริ่มต้น ให้เปิดใช้งานคุณลักษณะ "ตรวจสอบองค์ประกอบ" บน Safari ก่อนในกรณีที่ไม่ได้เปิดไว้โดยค่าเริ่มต้น
เปิด Safari เปิด Preferences
สลับไปที่แท็บ "ขั้นสูง" แล้วทำเครื่องหมายที่ตัวเลือก "แสดงเมนูการพัฒนาในแถบเมนู"
ทันทีที่คุณเลือกตัวเลือกนี้ ตัวเลือก “พัฒนา” ใหม่จะถูกเพิ่มลงในแถบเมนู
ในการตรวจสอบองค์ประกอบบน Mac บนเบราว์เซอร์ Safari สิ่งที่คุณต้องทำมีดังนี้:
ตัวเลือกที่ 1:ด้วยวิธีคลิกขวา
วิธีที่เร็วที่สุดในการใช้เครื่องมือตรวจสอบองค์ประกอบบน Mac คือการใช้วิธีการคลิกขวา
ไปที่หน้าเว็บ คลิกขวาที่ใดก็ได้บนพื้นที่สีขาว เลือก “ตรวจสอบ”
ตัวเลือกที่ 2:ผ่านเมนู "พัฒนา"
คุณยังสามารถใช้คุณลักษณะตรวจสอบองค์ประกอบผ่านเมนู "พัฒนา" ที่เพิ่มใหม่ได้
ไปที่เว็บไซต์ แตะที่ตัวเลือก “Develop” ที่อยู่บนแถบเมนูด้านบน จากนั้นเลือก “Show Web Inspector”
ตัวเลือกที่ 3:ใช้ปุ่มลัด
ทางเลือกที่สามในการใช้เครื่องมือตรวจสอบองค์ประกอบบน macOS คือการใช้ปุ่มลัด
เพียงแค่กดแป้น Command + Option + I พร้อมกันเพื่อตรวจสอบองค์ประกอบของหน้าเว็บ
Google Chrome:
มีวิธีตรวจสอบองค์ประกอบบน Mac บนเบราว์เซอร์ Chrome ได้ 4 วิธี
ตัวเลือกที่ 1:วิธีการคลิกขวา
เปิดเบราว์เซอร์ Chrome บน Mac ของคุณ ไปที่เว็บไซต์ที่คุณต้องการตรวจสอบองค์ประกอบ
คลิกขวาที่ใดก็ได้แล้วเลือก “ตรวจสอบ”
ตัวเลือกที่ 2:ผ่านแถบเมนู
เปิด Chrome แตะที่ตัวเลือก “ดู” ที่วางอยู่บนแถบเมนูด้านบน
แหล่งที่มาของรูปภาพ:ผู้ใช้ขั้นสูง
ไปที่เครื่องมือสำหรับนักพัฒนา> Developer> เครื่องมือสำหรับนักพัฒนา
เลือกตัวเลือก “ปรับแต่งและควบคุม” เพื่อใช้ตรวจสอบองค์ประกอบบน Chrome
ตัวเลือกที่ 3:การใช้แป้นพิมพ์ลัด
กดตัวเลือก Command + Option + C เพื่อดูหน้าต่าง “Inspect Element” บน Chrome
ตัวเลือกที่ 4:ผ่านการตั้งค่า
เปิด Google Chrome บน macOS แตะที่ไอคอนสามจุดที่วางอยู่ที่มุมบนขวา
แตะที่ “เครื่องมือเพิ่มเติม” แล้วเลือก “เครื่องมือสำหรับนักพัฒนา”
Mozilla Firefox:
ในการใช้เครื่องมือตรวจสอบองค์ประกอบบน Firefox ให้ทำตามขั้นตอนด่วนเหล่านี้
ตัวเลือกที่ 1:วิธีการคลิกขวา
เปิด Firefox เข้าไปที่เว็บไซต์
คลิกขวาที่ใดก็ได้บนหน้าจอ เลือก “Inspect ”
ตัวเลือกที่ 2:ผ่านเมนู
เปิด Firefox บน Mac แตะที่ตัวเลือก "เครื่องมือ" ที่อยู่บนแถบเมนูด้านบน เลือก "นักพัฒนาเว็บ" แตะ "ตรวจสอบ"
ตัวเลือก 3:ปุ่มลัด
ทางลัดในการเปิดใช้งาน Inspect Element บน Mac บนเบราว์เซอร์ Firefox สามารถทำได้โดยการกดคีย์ผสม Command + Option + C
คำถามที่พบบ่อย:
Q.1. ฉันจะเปิดองค์ประกอบตรวจสอบบน Mac ได้อย่างไร
แหล่งที่มาของรูปภาพ:Zapier
วิธีที่เร็วที่สุดวิธีหนึ่งในการเปิดเครื่องมือตรวจสอบองค์ประกอบบน Mac คือการคลิกขวาที่เว็บไซต์แล้วเลือกตัวเลือก "ตรวจสอบ" จากเมนูบริบท
Q.2. ทางลัดสำหรับ Inspect Element บน Mac คืออะไร
ทางลัดในการใช้ Inspect Element จะแตกต่างกันไปในแต่ละเบราว์เซอร์:
- Safari:Command + Option + I
- Chrome:Command + Option + C
- Firefox:ตัวเลือกคำสั่ง + C
Q.3. ฉันจะเปิด Inspect Element ใน Chrome บน Mac ได้อย่างไร
หากต้องการใช้ Inspect Element บน Google Chrome คุณสามารถกดคีย์ผสม Command + Option + C หรือคุณสามารถคลิกขวาที่ใดก็ได้บนหน้าจอ เลือก "ตรวจสอบ" เพื่อเปิดหน้าต่างตรวจสอบองค์ประกอบ
คำสุดท้ายเกี่ยวกับวิธีการตรวจสอบองค์ประกอบบน Mac
นี่คือคำแนะนำโดยย่อเกี่ยวกับวิธีการใช้เครื่องมือตรวจสอบองค์ประกอบบน macOS บนเว็บเบราว์เซอร์ต่างๆ รวมถึง Safari, Chrome และ Firefox ติดตามเราบนโซเชียลมีเดีย – Facebook, Instagram และ YouTube คุณใช้เครื่องมือตรวจสอบองค์ประกอบบน Mac บ่อยแค่ไหน และเพื่อวัตถุประสงค์ใด อย่าลังเลที่จะแบ่งปันความคิดของคุณกับผู้อ่านของเรา
