วิธีตรวจสอบองค์ประกอบบน Mac, Windows, iPhone และ iPad

นักพัฒนาและนักออกแบบ UI ใช้คุณสมบัติ Inspect Element เพื่อแก้ไขเว็บไซต์ออนไลน์โดยไม่ต้องเปลี่ยนซอร์สโค้ด แต่จะตรวจสอบองค์ประกอบโดยไม่ต้องเรียนหลักสูตรการพัฒนาเว็บไซต์ได้อย่างไร

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

คุณสามารถทำมายากลต่างๆ ได้มากมาย เช่น เปลี่ยนเลย์เอาต์ของเว็บไซต์ ถ่ายภาพหน้าจอแบบไม่มีข้อความ เปลี่ยนฟอนต์ แก้ไขตัวเลข และอื่นๆ อีกมากมาย

ค้นหาคำแนะนำทีละขั้นตอนโดยย่อด้านล่างเพื่อเรียนรู้วิธีตรวจสอบองค์ประกอบอย่างง่ายดาย

ตรวจสอบองค์ประกอบคืออะไร?

Inspect Element เป็นเครื่องมือพัฒนาเว็บที่มีอยู่ในเว็บเบราว์เซอร์ส่วนใหญ่ คุณสามารถใช้เพื่อแก้ไขซอร์สโค้ดส่วนหน้าของเว็บไซต์ใดๆ ที่คุณกำลังเยี่ยมชม

การเปลี่ยนแปลงที่คุณทำเกิดขึ้นภายในแซนด์บ็อกซ์ภายในเว็บเบราว์เซอร์ของคุณ คุณไม่ได้ทำการเปลี่ยนแปลงใดๆ กับเว็บไซต์จริง นอกจากนี้ การเปลี่ยนแปลงผิวเผินที่คุณทำจะหายไปเมื่อคุณรีเฟรชหน้า

ต่อไปนี้คือวิธีการใช้งานที่สร้างสรรค์:

• คุณต้องถ่ายภาพหน้าจอจากเว็บไซต์ และข้อความในภาพกำลังทำให้คุณลำบากใจ ใช้เครื่องมือ Inspect Element เพื่อลบข้อความเหล่านั้น
• คุณต้องแกล้งเพื่อนด้วยการแสดงชื่อของคุณใน New York Times หรือ Washington Post ตรวจสอบองค์ประกอบเป็นวิธีที่ดีที่สุดในการทำเช่นนี้
• ทดสอบการดีบักโค้ดบนเว็บไซต์โดยนำไปใช้แบบเรียลไทม์โดยใช้เครื่องมือ Inspect Element ถ้าได้ผล คุณสามารถเปลี่ยนซอร์สโค้ดแบ็กเอนด์ได้
• ในฐานะนักการตลาดดิจิทัล คุณสามารถเปิดเผยคีย์เวิร์ดของคู่แข่ง ชื่อ SEO เมตาแท็ก ฯลฯ โดยใช้เครื่องมือพัฒนาเว็บไซต์ที่มีประสิทธิภาพนี้

วิธีตรวจสอบองค์ประกอบบน Windows

การใช้เครื่องมือ Inspect Element บน Windows นั้นง่ายมาก ค้นหาคำแนะนำทีละขั้นตอนด้านล่างเพื่อตรวจสอบองค์ประกอบโดยใช้เว็บเบราว์เซอร์ต่างๆ บน Windows:

เครื่องมือตรวจสอบ Google Chrome

วิธีตรวจสอบองค์ประกอบบนเบราว์เซอร์ Chrome ของ Windows

• เมื่อใช้Google Chromeให้คลิกขวาที่ใดก็ได้บนเว็บไซต์
• เมนูบริบทคลิกขวาจะปรากฏขึ้น
• ที่ด้านล่าง คุณจะเห็นตรวจสอบ
• คลิกตรวจสอบเพื่อดูโค้ด HTML และ CSS ในแผงด้านขวา

ฉันจะเปิดตรวจสอบองค์ประกอบใน Chrome โดยไม่ต้องคลิกขวาได้อย่างไร

มีทางลัดที่สะดวกในการเปิดเครื่องมือ Inspect Element บน Google Chrome สำหรับ Windows ปุ่มลัดเหล่านี้มีดังต่อไปนี้:

• Ctrl + Shift + C
• ปุ่มฟังก์ชันF12

ปุ่มลัดด้านบนยังใช้งานได้บนเบราว์เซอร์ Mozilla สำหรับ Windows

เครื่องมือตรวจสอบ Mozilla

วิธีตรวจสอบองค์ประกอบบน Windows Mozilla Browser

บนเบราว์เซอร์ Mozilla กระบวนการจะเหมือนกับ Google Chrome อย่างไรก็ตาม หน้าต่าง ตัวตรวจสอบจะปรากฏขึ้นที่ด้านล่างของเบราว์เซอร์แทนที่จะเป็นด้านขวาเหมือนใน Google Chrome

เครื่องมือตรวจสอบ Microsoft Edge

วิธีตรวจสอบองค์ประกอบบน Windows Edge Browser

น่าแปลกใจที่ Inspect Element ของ Microsoft Edge ทำงานคล้ายกับเบราว์เซอร์ Google Chrome เครื่องมือตรวจสอบจะใช้งานได้เมื่อคลิกขวา นอกจากนี้ โค้ด HTML และ CSS จะแสดงทางด้านขวา คล้ายกับ Google Chrome

วิธีตรวจสอบองค์ประกอบบน Mac

คุณใช้ Google Chrome, Mozilla Firefox หรือ Microsoft Edge บนคอมพิวเตอร์ Mac ของ Apple หรือไม่ ถ้าใช่ คุณสามารถใช้เครื่องมือ Inspect Element ได้โดยทำตามขั้นตอนที่กล่าวไว้ข้างต้นในส่วนของ Windows

แต่ถ้าคุณใช้เว็บเบราว์เซอร์เริ่มต้นของ macOS อย่าง Safari การใช้เครื่องมือ Inspect Element นั้นเป็นเกมที่ยุ่งยาก ตามค่าเริ่มต้น Safari จะไม่แสดง Inspect Element บน Mac นี่คือสิ่งที่คุณต้องทำ:

วิธีเปิด Inspect Element บน Mac

ก่อนอื่น คุณต้องเปิดใช้งานเครื่องมือสำหรับนักพัฒนาบน Safari บนเครื่อง Mac นี่คือวิธี:

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

คุณได้เปิดใช้งานเครื่องมือสำหรับนักพัฒนาบน Safari สำหรับ Mac เรียบร้อยแล้ว ตอนนี้ ทำตามขั้นตอนเหล่านี้เพื่อใช้ Inspect Element:

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

What Are the Keys for Inspect Element?

คุณอาจกำลังมองหาทางลัดสำหรับตรวจสอบองค์ประกอบบน Mac คุณสามารถใช้สิ่งต่อไปนี้:

• คำสั่ง + Shift + C
• กด ปุ่ม Controlจากนั้นเลือกองค์ประกอบใดๆ
• คลิกแทร็คแพดด้วยสองนิ้ว

วิธีตรวจสอบองค์ประกอบใน Chromebook

Chromebook ใช้ Google Chrome เป็นเบราว์เซอร์เริ่มต้น ดังนั้น หลังจากเปิดเว็บไซต์ใดๆ แล้ว ให้คลิกขวาเพื่อค้นหาตัวเลือกตรวจสอบองค์ประกอบในเมนูบริบทที่ตามมา

หากคุณใช้ Chromebook จากที่ทำงานหรือโรงเรียน คุณอาจถามคำถามนี้:

Why Can’t I Inspect on My School Chromebook?

ผู้ดูแลระบบโรงเรียนและธุรกิจส่วนใหญ่ปิดใช้คุณลักษณะขั้นสูงใน Chromebook ที่จัดเตรียมไว้ให้คุณทำงานหรือเรียน เนื่องจากเครื่องมือสำหรับนักพัฒนาเป็นคุณลักษณะขั้นสูง โอกาสที่โรงเรียนหรือที่ทำงานของคุณ Chromebook จะไม่แสดงเครื่องมือตรวจสอบองค์ประกอบ

วิธีตรวจสอบองค์ประกอบบน iPad/iPhone

ขออภัย คุณไม่สามารถใช้เครื่องมือตรวจสอบองค์ประกอบบน iPhone หรือ iPad หากไม่มี Mac

iOS และ iPadOS มีตัวตรวจสอบเว็บสำหรับแอพ Safari อย่างไรก็ตาม จะใช้งานได้ก็ต่อเมื่อคุณเชื่อมต่ออุปกรณ์พกพากับ Mac ที่คุณเปิดใช้งานเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำหรับ Safari ไว้แล้วเท่านั้น ด้านล่างนี้เป็นขั้นตอนที่คุณสามารถลองได้:

• เปิด แอปการตั้งค่า iPad/iPhone
• คลิกSafariที่บานหน้าต่างนำทางด้านซ้าย

การเปิดการตั้งค่า Safari บน iPad หรือ iPhone

• จากนั้น เลื่อนลงมาทางด้านขวาเพื่อค้นหาและเลือกขั้นสูง

การเปิดใช้งาน Web Inspector บน iPad และ iPhone

• เปิดใช้งานการสลับสำหรับWeb Inspector
• ตอนนี้ เชื่อมต่ออุปกรณ์มือถือกับ Mac โดยใช้USB
• อนุญาต iPhone/iPad บน Mac
• เปิดเว็บไซต์ใดก็ได้บนอุปกรณ์มือถือบน Safari
• ตอนนี้ เรียกใช้ Safari บน Mac แล้วเลือกพัฒนาบนแถบเมนูด้านบน
• ในเมนูบริบทที่เปิดขึ้น ให้มองหาชื่ออุปกรณ์มือถือของคุณ
• เลื่อนเคอร์เซอร์ไปที่อุปกรณ์พกพาเพื่อดูเว็บไซต์ที่เปิดอยู่ทั้งหมด
• ตอนนี้ เลือกเว็บไซต์ใดก็ได้เพื่อดูซอร์สโค้ด HTML และ CSS บนเบราว์เซอร์ Safari ของ Mac

บทสรุป

คุณได้สำรวจวิธีที่เป็นไปได้ทั้งหมดในการใช้เครื่องมือตรวจสอบองค์ประกอบสำหรับการแก้ไขหน้าเว็บชั่วคราว คุณยังได้เรียนรู้วิธีตรวจสอบองค์ประกอบต่างๆ สำหรับอุปกรณ์ต่างๆ เช่น Mac, Windows, Chromebook, iPad และ iPhone

ครั้งต่อไปที่คุณต้องแก้ไขหน้าเว็บเพื่อความสนุกสนานหรือเพื่อความต้องการทางอาชีพ ลองใช้วิธีเหล่านี้ดู คุณจะต้องชอบขั้นตอนง่ายๆ เหล่านี้มากกว่าวิธีการที่ซับซ้อนอื่นๆ ที่อธิบายไว้ในที่อื่นๆ อย่างแน่นอน

อย่าลืมแสดงความคิดเห็นด้านล่างหากขั้นตอนข้างต้นช่วยคุณได้ วิธีใดก็ตามที่คุณพบว่าท้าทาย หรือเคล็ดลับลับเกี่ยวกับเครื่องมือ Inspect Element

ต้องการหน้าเว็บเป็นข้อมูลอ้างอิงฉบับพิมพ์หรือไม่? เรียนรู้วิธีบันทึกหน้าเว็บเป็น PDF ได้อย่างรวดเร็วทันที!