นักพัฒนาและนักออกแบบ UI ใช้คุณสมบัติ Inspect Element เพื่อแก้ไขเว็บไซต์ออนไลน์โดยไม่ต้องเปลี่ยนซอร์สโค้ด แต่จะตรวจสอบองค์ประกอบโดยไม่ต้องเรียนหลักสูตรการพัฒนาเว็บไซต์ได้อย่างไร
Inspect Element เป็นเครื่องมือสำหรับนักพัฒนาที่ใช้งานสะดวกซึ่งมาพร้อมกับเว็บเบราว์เซอร์ยอดนิยม คุณเพียงแค่ต้องรู้วิธีปรับใช้เครื่องมือในไม่กี่คลิกขณะเรียกดูเว็บไซต์
คุณสามารถทำมายากลต่างๆ ได้มากมาย เช่น เปลี่ยนเลย์เอาต์ของเว็บไซต์ ถ่ายภาพหน้าจอแบบไม่มีข้อความ เปลี่ยนฟอนต์ แก้ไขตัวเลข และอื่นๆ อีกมากมาย
ค้นหาคำแนะนำทีละขั้นตอนโดยย่อด้านล่างเพื่อเรียนรู้วิธีตรวจสอบองค์ประกอบอย่างง่ายดาย
ตรวจสอบองค์ประกอบคืออะไร?
Inspect Element เป็นเครื่องมือพัฒนาเว็บที่มีอยู่ในเว็บเบราว์เซอร์ส่วนใหญ่ คุณสามารถใช้เพื่อแก้ไขซอร์สโค้ดส่วนหน้าของเว็บไซต์ใดๆ ที่คุณกำลังเยี่ยมชม
การเปลี่ยนแปลงที่คุณทำเกิดขึ้นภายในแซนด์บ็อกซ์ภายในเว็บเบราว์เซอร์ของคุณ คุณไม่ได้ทำการเปลี่ยนแปลงใดๆ กับเว็บไซต์จริง นอกจากนี้ การเปลี่ยนแปลงผิวเผินที่คุณทำจะหายไปเมื่อคุณรีเฟรชหน้า
ต่อไปนี้คือวิธีการใช้งานที่สร้างสรรค์:
- คุณต้องถ่ายภาพหน้าจอจากเว็บไซต์ และข้อความในภาพกำลังทำให้คุณลำบากใจ ใช้เครื่องมือ Inspect Element เพื่อลบข้อความเหล่านั้น
- คุณต้องแกล้งเพื่อนด้วยการแสดงชื่อของคุณใน New York Times หรือ Washington Post ตรวจสอบองค์ประกอบเป็นวิธีที่ดีที่สุดในการทำเช่นนี้
- ทดสอบการดีบักโค้ดบนเว็บไซต์โดยนำไปใช้แบบเรียลไทม์โดยใช้เครื่องมือ Inspect Element ถ้าได้ผล คุณสามารถเปลี่ยนซอร์สโค้ดแบ็กเอนด์ได้
- ในฐานะนักการตลาดดิจิทัล คุณสามารถเปิดเผยคีย์เวิร์ดของคู่แข่ง ชื่อ SEO เมตาแท็ก ฯลฯ โดยใช้เครื่องมือพัฒนาเว็บไซต์ที่มีประสิทธิภาพนี้
วิธีตรวจสอบองค์ประกอบบน Windows
การใช้เครื่องมือ Inspect Element บน Windows นั้นง่ายมาก ค้นหาคำแนะนำทีละขั้นตอนด้านล่างเพื่อตรวจสอบองค์ประกอบโดยใช้เว็บเบราว์เซอร์ต่างๆ บน Windows:
เครื่องมือตรวจสอบ Google Chrome
- เมื่อใช้ Google Chrome, คลิกขวา ที่ใดก็ได้บนเว็บไซต์
- เมนูบริบทคลิกขวาจะปรากฏขึ้น
- ที่ด้านล่างคุณจะเห็น ตรวจสอบ.
- คลิก ตรวจสอบ เพื่อดูโค้ด HTML และ CSS บน แผงด้านขวา.
ฉันจะเปิดตรวจสอบองค์ประกอบใน Chrome โดยไม่ต้องคลิกขวาได้อย่างไร
มีทางลัดที่สะดวกในการเปิดเครื่องมือ Inspect Element บน Google Chrome สำหรับ Windows ปุ่มลัดเหล่านี้มีดังต่อไปนี้:
- Ctrl + กะ + ค
- ปุ่มฟังก์ชัน F12
ปุ่มลัดด้านบนยังใช้งานได้บนเบราว์เซอร์ Mozilla สำหรับ Windows
เครื่องมือตรวจสอบ Mozilla
บนเบราว์เซอร์ Mozilla กระบวนการจะเหมือนกับ Google Chrome อย่างไรก็ตาม สารวัตร หน้าต่างจะปรากฏขึ้นที่ด้านล่างของเบราว์เซอร์แทนที่จะเป็นด้านขวาเหมือนใน Google Chrome
เครื่องมือตรวจสอบ Microsoft Edge
น่าแปลกใจที่ 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 สำหรับ Mac เรียบร้อยแล้ว ตอนนี้ ทำตามขั้นตอนเหล่านี้เพื่อใช้ Inspect Element:
- ในองค์ประกอบใดๆ ของเว็บไซต์ เช่น ข้อความหรือรูปภาพ คลิกขวา.
- เมนูบริบทจะปรากฏขึ้น ที่ด้านล่างคุณจะเห็น ตรวจสอบองค์ประกอบ.
- คลิกที่เพื่อเปิดส่วนการแก้ปัญหาด้านล่างเว็บไซต์ที่แสดง HTML และ ซีเอสเอส รหัส
อะไรคือกุญแจสำคัญในการตรวจสอบองค์ประกอบ?
คุณอาจกำลังมองหาทางลัดสำหรับตรวจสอบองค์ประกอบบน Mac คุณสามารถใช้สิ่งต่อไปนี้:
- สั่งการ + กะ + ค
- กด ควบคุม คีย์แล้วเลือกองค์ประกอบใดๆ
- คลิกแทร็คแพดด้วยสองนิ้ว
วิธีตรวจสอบองค์ประกอบใน Chromebook
Chromebook ใช้ Google Chrome เป็นเบราว์เซอร์เริ่มต้น ดังนั้น หลังจากเปิดเว็บไซต์ใดๆ แล้ว ให้คลิกขวาเพื่อค้นหาตัวเลือกตรวจสอบองค์ประกอบในเมนูบริบทที่ตามมา
หากคุณใช้ Chromebook จากที่ทำงานหรือโรงเรียน คุณอาจถามคำถามนี้:
เหตุใดฉันจึงตรวจสอบ Chromebook ของโรงเรียนไม่ได้
ผู้ดูแลระบบโรงเรียนและธุรกิจส่วนใหญ่ปิดใช้คุณลักษณะขั้นสูงใน Chromebook ที่จัดเตรียมไว้ให้คุณทำงานหรือเรียน เนื่องจากเครื่องมือสำหรับนักพัฒนาเป็นคุณลักษณะขั้นสูง โอกาสที่โรงเรียนหรือที่ทำงานของคุณ Chromebook จะไม่แสดงเครื่องมือตรวจสอบองค์ประกอบ
วิธีตรวจสอบองค์ประกอบบน iPad/iPhone
ขออภัย คุณไม่สามารถใช้เครื่องมือ Inspect Element บน iPhone หรือ iPad ที่ไม่มี Mac
iOS และ iPadOS มีตัวตรวจสอบเว็บสำหรับแอพ Safari อย่างไรก็ตาม จะใช้งานได้ก็ต่อเมื่อคุณเชื่อมต่ออุปกรณ์เคลื่อนที่กับ Mac ซึ่งคุณได้เปิดใช้งานเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์สำหรับ Safari แล้ว ด้านล่างนี้เป็นขั้นตอนที่คุณสามารถลองได้:
- เปิด iPad/iPhone การตั้งค่า แอป.
- คลิก ซาฟารี ในบานหน้าต่างนำทางด้านซ้าย
- จากนั้นเลื่อนลงมาทางด้านขวาเพื่อค้นหาและเลือก ขั้นสูง.
- เปิดใช้งานการสลับสำหรับ สารวัตรเว็บ.
- ตอนนี้ เชื่อมต่ออุปกรณ์มือถือกับ Mac โดยใช้ ยูเอสบี.
- อนุญาต iPhone/iPad บน Mac
- เปิดเว็บไซต์ใดก็ได้บนอุปกรณ์มือถือบน Safari
- ตอนนี้ เรียกใช้ Safari บน Mac แล้วเลือก พัฒนา บนแถบเมนูด้านบน
- ในเมนูบริบทที่เปิดขึ้น ให้มองหาชื่ออุปกรณ์มือถือของคุณ
- เลื่อนเคอร์เซอร์ไปที่อุปกรณ์พกพาเพื่อดูเว็บไซต์ที่เปิดอยู่ทั้งหมด
- ตอนนี้ เลือกเว็บไซต์ใดก็ได้เพื่อดูซอร์สโค้ด HTML และ CSS บนเบราว์เซอร์ Safari ของ Mac
บทสรุป
คุณได้สำรวจวิธีที่เป็นไปได้ทั้งหมดในการใช้เครื่องมือตรวจสอบองค์ประกอบสำหรับการแก้ไขหน้าเว็บชั่วคราว คุณยังได้เรียนรู้วิธีตรวจสอบองค์ประกอบต่างๆ สำหรับอุปกรณ์ต่างๆ เช่น Mac, Windows, Chromebook, iPad และ iPhone
ครั้งต่อไปที่คุณต้องแก้ไขหน้าเว็บเพื่อความสนุกสนานหรือเพื่อความต้องการทางอาชีพ ลองใช้วิธีเหล่านี้ดู คุณจะต้องชอบขั้นตอนง่ายๆ เหล่านี้มากกว่าวิธีการที่ซับซ้อนอื่นๆ ที่อธิบายไว้ในที่อื่นอย่างแน่นอน
อย่าลืมแสดงความคิดเห็นด้านล่างหากขั้นตอนข้างต้นช่วยคุณได้ วิธีใดก็ตามที่คุณพบว่าท้าทาย หรือเคล็ดลับลับเกี่ยวกับเครื่องมือ Inspect Element
ต้องการหน้าเว็บเป็นข้อมูลอ้างอิงฉบับพิมพ์หรือไม่? เรียนรู้วิธีการ บันทึกหน้าเว็บเป็น PDF อย่างรวดเร็ว ตอนนี้!