นักพัฒนาและนักออกแบบ UI ใช้คุณสมบัติ Inspect Element เพื่อแก้ไขเว็บไซต์ออนไลน์โดยไม่ต้องเปลี่ยนซอร์สโค้ด แต่จะตรวจสอบองค์ประกอบโดยไม่ต้องเรียนหลักสูตรการพัฒนาเว็บไซต์ได้อย่างไร
Inspect Element เป็นเครื่องมือสำหรับนักพัฒนาที่ใช้งานสะดวกซึ่งมาพร้อมกับเว็บเบราว์เซอร์ยอดนิยม คุณเพียงแค่ต้องรู้วิธีปรับใช้เครื่องมือในไม่กี่คลิกขณะเรียกดูเว็บไซต์
คุณสามารถทำมายากลต่างๆ ได้มากมาย เช่น เปลี่ยนเลย์เอาต์ของเว็บไซต์ ถ่ายภาพหน้าจอแบบไม่มีข้อความ เปลี่ยนฟอนต์ แก้ไขตัวเลข และอื่นๆ อีกมากมาย
ค้นหาคำแนะนำทีละขั้นตอนโดยย่อด้านล่างเพื่อเรียนรู้วิธีตรวจสอบองค์ประกอบอย่างง่ายดาย
ตรวจสอบองค์ประกอบคืออะไร?
Inspect Element เป็นเครื่องมือพัฒนาเว็บที่มีอยู่ในเว็บเบราว์เซอร์ส่วนใหญ่ คุณสามารถใช้เพื่อแก้ไขซอร์สโค้ดส่วนหน้าของเว็บไซต์ใดๆ ที่คุณกำลังเยี่ยมชม
การเปลี่ยนแปลงที่คุณทำเกิดขึ้นภายในแซนด์บ็อกซ์ภายในเว็บเบราว์เซอร์ของคุณ คุณไม่ได้ทำการเปลี่ยนแปลงใดๆ กับเว็บไซต์จริง นอกจากนี้ การเปลี่ยนแปลงผิวเผินที่คุณทำจะหายไปเมื่อคุณรีเฟรชหน้า
ต่อไปนี้คือวิธีการใช้งานที่สร้างสรรค์:
วิธีตรวจสอบองค์ประกอบบน Windows
การใช้เครื่องมือ Inspect Element บน Windows นั้นง่ายมาก ค้นหาคำแนะนำทีละขั้นตอนด้านล่างเพื่อตรวจสอบองค์ประกอบโดยใช้เว็บเบราว์เซอร์ต่างๆ บน Windows:
เครื่องมือตรวจสอบ Google Chrome
วิธีตรวจสอบองค์ประกอบบนเบราว์เซอร์ Chrome ของ Windows
ฉันจะเปิดตรวจสอบองค์ประกอบใน Chrome โดยไม่ต้องคลิกขวาได้อย่างไร
มีทางลัดที่สะดวกในการเปิดเครื่องมือ Inspect Element บน Google Chrome สำหรับ Windows ปุ่มลัดเหล่านี้มีดังต่อไปนี้:
ปุ่มลัดด้านบนยังใช้งานได้บนเบราว์เซอร์ 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 สำหรับ Mac เรียบร้อยแล้ว ตอนนี้ ทำตามขั้นตอนเหล่านี้เพื่อใช้ Inspect Element:
What Are the Keys for Inspect Element?
คุณอาจกำลังมองหาทางลัดสำหรับตรวจสอบองค์ประกอบบน Mac คุณสามารถใช้สิ่งต่อไปนี้:
วิธีตรวจสอบองค์ประกอบใน 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 ไว้แล้วเท่านั้น ด้านล่างนี้เป็นขั้นตอนที่คุณสามารถลองได้:
การเปิดการตั้งค่า Safari บน iPad หรือ iPhone
การเปิดใช้งาน Web Inspector บน iPad และ iPhone
บทสรุป
คุณได้สำรวจวิธีที่เป็นไปได้ทั้งหมดในการใช้เครื่องมือตรวจสอบองค์ประกอบสำหรับการแก้ไขหน้าเว็บชั่วคราว คุณยังได้เรียนรู้วิธีตรวจสอบองค์ประกอบต่างๆ สำหรับอุปกรณ์ต่างๆ เช่น Mac, Windows, Chromebook, iPad และ iPhone
ครั้งต่อไปที่คุณต้องแก้ไขหน้าเว็บเพื่อความสนุกสนานหรือเพื่อความต้องการทางอาชีพ ลองใช้วิธีเหล่านี้ดู คุณจะต้องชอบขั้นตอนง่ายๆ เหล่านี้มากกว่าวิธีการที่ซับซ้อนอื่นๆ ที่อธิบายไว้ในที่อื่นๆ อย่างแน่นอน
อย่าลืมแสดงความคิดเห็นด้านล่างหากขั้นตอนข้างต้นช่วยคุณได้ วิธีใดก็ตามที่คุณพบว่าท้าทาย หรือเคล็ดลับลับเกี่ยวกับเครื่องมือ Inspect Element
ต้องการหน้าเว็บเป็นข้อมูลอ้างอิงฉบับพิมพ์หรือไม่? เรียนรู้วิธีบันทึกหน้าเว็บเป็น PDF ได้อย่างรวดเร็วทันที!
ตามค่าเริ่มต้น Chrome จะไม่แสดง URL แบบเต็มให้คุณเห็น คุณอาจไม่สนใจรายละเอียดนี้มากเกินไป แต่ถ้าคุณต้องการแสดง URL แบบเต็มด้วยเหตุผลบางประการ คำแนะนำโดยละเอียดเกี่ยวกับวิธีทำให้ Google Chrome แสดง URL แบบเต็มในแถบที่อยู่
Reddit เปลี่ยนการออกแบบอีกครั้งในเดือนมกราคม 2024 ผู้ใช้เบราว์เซอร์เดสก์ท็อปสามารถเห็นการออกแบบใหม่และทำให้ฟีดหลักแคบลงในขณะที่ให้ลิงก์
การพิมพ์คำพูดที่คุณชื่นชอบจากหนังสือของคุณไปยัง Facebook ต้องใช้เวลาและเต็มไปด้วยข้อผิดพลาด เรียนรู้วิธีใช้ Google Lens เพื่อคัดลอกข้อความจากหนังสือไปยังอุปกรณ์ของคุณ
บางครั้ง เมื่อคุณใช้งาน Chrome คุณจะไม่สามารถเข้าถึงบางเว็บไซต์ได้ และได้รับข้อผิดพลาด “ไม่พบที่อยู่ DNS ของเซิร์ฟเวอร์แก้ไขใน Chrome” นี่คือวิธีที่คุณสามารถแก้ไขปัญหาได้
การช่วยเตือนถือเป็นจุดเด่นหลักของ Google Home มาโดยตลอด พวกเขาทำให้ชีวิตของเราง่ายขึ้นอย่างแน่นอน มาดูวิธีสร้างการช่วยเตือนบน Google Home กันสั้นๆ เพื่อที่คุณจะได้ไม่พลาดการดูแลเรื่องสำคัญๆ
วิธีเปลี่ยนรหัสผ่านของคุณในบริการวิดีโอสตรีมมิ่งของ Netflix โดยใช้เบราว์เซอร์หรือแอป Android ที่คุณต้องการ
YouTube Music เป็นผู้สืบทอดต่อจาก Google Play Music มาตั้งแต่ปี 2560 เช่นเดียวกับ Apple Music และ Spotify YouTube Music ได้กลายเป็นหนึ่งในบริการสตรีมเพลงที่ได้รับความนิยมมากที่สุด
คุณมีปัญหาในการเพลิดเพลินกับประสบการณ์การเล่นเกม PlayStation 5 (PS5) เนื่องจากความล่าช้ามากเกินไปหรือไม่ ถ้าเป็นเช่นนั้นคุณไม่ได้อยู่คนเดียว
ในฐานะเกมเมอร์ ไม่มีอะไรน่าหงุดหงิดไปกว่าการเตรียมพร้อมเล่นเกม Xbox ออนไลน์ที่คุณชื่นชอบ แต่กลับถูกหยุดโดยข้อผิดพลาด “DNS ไม่แก้ไขชื่อเซิร์ฟเวอร์ Xbox” ที่น่าสะพรึงกลัว นั่นหมายถึงอะไร
เราทุกคนมี Snaps ที่ต้องการเก็บไว้เป็นส่วนตัว ไม่ว่าจะเป็นรูปภาพส่วนตัว หรือสิ่งที่คุณไม่อยากให้ใครใช้โทรศัพท์ของคุณเห็น คุณสามารถสร้างเรื่องราวส่วนตัวบน Snapchat ได้แล้ว และตอนนี้สำหรับ Snaps ส่วนตัวพิเศษเหล่านั้น คุณสามารถปกป้องความเป็นส่วนตัว Snapchat ของคุณด้วยฟีเจอร์ My Eyes Only Snapchat
