วิธีใช้องค์ประกอบการตรวจสอบ

ลิงค์อุปกรณ์

• แอนดรอยด์
• โครมบุ๊ค
• แม็ค
• หน้าต่าง
• อุปกรณ์หายไป?

คนส่วนใหญ่ไม่ทราบว่ามีขุมสมบัติของเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์และซ่อนอยู่ในเบราว์เซอร์ที่พวกเขาชื่นชอบ

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

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

เบราว์เซอร์ส่วนใหญ่มีเครื่องมือในการตรวจสอบองค์ประกอบของเว็บไซต์ แต่โดยทั่วไปแล้วทั้งหมดจะทำงานในลักษณะเดียวกัน

การใช้ Inspect Element ใน Google Chrome

1. เปิดเว็บไซต์ที่คุณต้องการตรวจสอบ
   
2. คลิกขวาที่ใดก็ได้บนหน้า แล้วเลือกตรวจสอบ
   
   หรือ
3. คลิกที่จุดแนวตั้งสามจุดที่มุมขวาของแถบเครื่องมือ
   
4. ไปที่เครื่องมือเพิ่มเติม
   
5. เลือกเครื่องมือสำหรับนักพัฒนา
   
   หรือ
6. กด ปุ่มลัดแป้นพิมพ์ F12บนพีซี (หรือCMD + Options + Iบน Mac)
   

ใช้ตรวจสอบองค์ประกอบใน Microsoft Edge

1. เปิดเว็บไซต์
   
2. คลิกที่จุดแนวตั้งสามจุดที่มุมขวาบนของแถบเครื่องมือของเบราว์เซอร์
   
3. เลื่อนลงและคลิกเครื่องมือเพิ่มเติม
   
4. คลิกที่เครื่องมือสำหรับนักพัฒนา
   
   หรือ
5. คลิกขวาที่ ใดก็ได้บนเว็บไซต์แล้วคลิกตรวจสอบ
   
   หรือ
6. กดCtrl + Shift + I
   

วิธีใดวิธีหนึ่งในสามวิธีนี้จะให้ผลลัพธ์ที่เหมือนกันแก่คุณ

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

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

1. คลิกที่จุดแนวนอนสามจุดที่มุมบนของแผงเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์
   
2. เลือกฝั่งด็อค (ซ้าย ล่าง หรือขวา) หรือปลดด็อคไปยังหน้าต่างแยกต่างหาก
   

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

การใช้องค์ประกอบการตรวจสอบ (เฉพาะ OS)

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

วิธีใช้ Inspect Element บน Chromebook

เบราว์เซอร์เริ่มต้นบน Chromebook คือ Google ดังนั้นให้ทำตามคำแนะนำเบราว์เซอร์ Chrome เพื่อเข้าถึงInspect Element นี่คือหลักสูตรทบทวนเล็กน้อยสำหรับคุณ:

1. เปิดเว็บไซต์
   
2. คลิกที่จุดแนวตั้งสามจุดที่มุมขวาบนของแถบเครื่องมือ
   
3. เลือกเครื่องมือเพิ่มเติม
   
4. คลิกที่เครื่องมือสำหรับนักพัฒนา
   

คุณยังสามารถใช้วิธีคลิกขวาหรือ ปุ่มฟังก์ชัน F12เพื่อไปยังเครื่องมือสำหรับนักพัฒนาได้เร็วขึ้น

วิธีใช้ Inspect Element บนอุปกรณ์ Android

การเรียกใช้ Inspect Element บนอุปกรณ์ Android จะแตกต่างกันเล็กน้อย ดูวิธีไปที่แผงตรวจสอบองค์ประกอบบน Android:

1. กดปุ่มฟังก์ชันF12
   
2. เลือกสลับแถบอุปกรณ์
   
3. เลือกอุปกรณ์ Android จากเมนูแบบเลื่อนลง
   

เมื่อคุณเลือกอุปกรณ์ Android ใดอุปกรณ์หนึ่ง คุณจะสังเกตเห็นว่ามีการโหลดเว็บไซต์เวอร์ชันมือถือ จากที่นี่ คุณสามารถใช้ฟีเจอร์ Inspect Element บนอุปกรณ์ Android ของคุณจากเดสก์ท็อปได้อย่างสะดวกสบาย

วิธีนี้ใช้ได้กับทั้งเบราว์เซอร์ Chrome และ Firefox เนื่องจากมีคุณสมบัติในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ที่เรียกว่าการจำลองอุปกรณ์

นอกจากนี้ยังทำงานในลักษณะเดียวกันสำหรับอุปกรณ์ iPhone คุณเพียงแค่ต้องเลือกรายการที่ถูกต้องในเมนูแบบเลื่อนลง

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

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

หากคุณใช้ระบบปฏิบัติการ Windows คุณมีแนวโน้มที่จะใช้เบราว์เซอร์ Microsoft Edge ด้วยเช่นกัน ตรวจสอบวิธีการเข้าถึง Inspect Element บน MS Edge:

1. เปิดเว็บไซต์ที่คุณต้องการตรวจสอบ
   
2. แตะที่จุดแนวตั้งสามจุดที่มุมของหน้าต่างเบราว์เซอร์
   
3. เลื่อนลงและเลือกเครื่องมือเพิ่มเติม
   
4. คลิกที่เครื่องมือสำหรับนักพัฒนา
   

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

วิธีใช้ Inspect Element บน Mac

หากคุณใช้ Mac เบราว์เซอร์ที่คุณเลือกน่าจะเป็น Safari การเปิด Inspect Elements บน Safari จะแตกต่างจาก Chrome และ Firefox เล็กน้อย แต่ทำได้ง่ายๆ ด้วยขั้นตอนเหล่านี้:

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

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

หลังจากทำขั้นตอนนี้เสร็จแล้ว ให้คลิกขวาที่หน้าเว็บที่เปิดอยู่และเลือกตรวจสอบ คุณยังสามารถใช้คำสั่งปุ่มด่วน: CMD + Option + I (ตรวจสอบ)

วิธีใช้ Inspect Element บน iOS

คุณต้องการใช้คุณสมบัติตรวจสอบองค์ประกอบเพื่อดูว่าหน้าเว็บเวอร์ชันมือถือปรากฏบน iPhone หรือไม่ คุณสามารถทำได้และอีกมากมายด้วยขั้นตอนง่ายๆ เพียงไม่กี่ขั้นตอน แต่ก่อนที่คุณจะดูองค์ประกอบ คุณต้องเปิดใช้Web Inspectorสำหรับอุปกรณ์ iOS ของคุณ:

1. ไปที่การตั้งค่า
   
2. ตอน นี้เลือกSafari
   
3. เลื่อนลงไปด้านล่างแล้วแตะที่เมนูขั้นสูง
   
4. ตอน นี้แตะสวิตช์สลับเพื่อเปิดWeb Inspector
   

นอกจากนี้ ตรวจสอบให้แน่ใจว่าได้เปิดใช้งานเมนูพัฒนาบน Mac ของคุณโดยทำตามขั้นตอนในส่วนด้านบน

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

โปรดทราบว่าคำแนะนำเหล่านี้ใช้ได้กับ Safari ที่ใช้ Mac เท่านั้น ไม่ใช่ Safari บน Windows

วิธีใช้องค์ประกอบตรวจสอบเมื่อถูกบล็อก

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

วิธีที่ 1 –ปิด Javascript

1. เข้าไปที่การตั้งค่า
   
2. ค้นหาจาวาสคริปต์
   
3. ปิดจาวาสคริปต์
   

วิธีที่ 2 - เข้าถึงเครื่องมือสำหรับนักพัฒนาในระยะยาว

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

1. ไปที่การตั้งค่าในเบราว์เซอร์ของคุณ
   
2. เลือกเครื่องมือเพิ่มเติม
   
3. เลื่อนลงและคลิกที่เครื่องมือสำหรับนักพัฒนา
   

วิธีที่ 3 - การใช้ปุ่มฟังก์ชัน

คุณยังสามารถลองใช้ ปุ่มฟังก์ชัน F12บนหน้าเว็บที่บล็อกการคลิกขวาเพื่อตรวจ

คุณอาจต้องลองทุกวิธีเหล่านี้ก่อนที่จะเจอวิธีที่เหมาะกับคุณ ทางเลือกสุดท้าย คุณยังสามารถลองดูซอร์สโค้ดโดยพิมพ์view-source: [ป้อน url แบบเต็ม ]

วิธีใช้ Inspect Element บน Chromebook ของโรงเรียน

หาก Chromebook ของคุณออกโดยโรงเรียน การใช้คุณลักษณะ Inspect Element จ���มีขั้นตอนง่ายๆ ไม่กี่ขั้นตอน:

1. คลิกขวาหรือ แตะสองนิ้วบนหน้าเว็บแล้วเลือกตรวจสอบ
   
2. กดCtrl + Shift + I
   
3. ลองใช้เมธอด view- source :[url] เช่นview-source:https://www.wikipedia.com
   
   

อย่างไรก็ตาม โรงเรียนและองค์กรบางแห่งบล็อกฟีเจอร์นี้ ดังนั้นหากใช้ไม่ได้ คุณอาจต้องติดต่อกับองค์กรหรือผู้ดูแลระบบของโรงเรียน

วิธีใช้องค์ประกอบการตรวจสอบเพื่อหาคำตอบ

คุณสามารถใช้ Inspect Element เพื่อหาคำตอบของสิ่งต่างๆ เช่น:

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

เมื่อคุณเปิดแผงตรวจสอบองค์ประกอบ คุณจะเห็นรหัสทั้งหมดสำหรับเว็บไซต์ ซึ่งรวมถึงโค้ด JavaScript, CSS และ HTML ทั้งหมดที่สร้างขึ้น เหมือนกับการดูซอร์สโค้ดของหน้าเว็บ เว้นแต่คุณจะเปลี่ยนแปลงโค้ดได้ นอกจากนี้คุณยังจะได้เห็นการเปลี่ยนแปลงที่เกิดขึ้นแบบเรียลไทม์

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

คำถามที่พบบ่อยเพิ่มเติม

หากคุณไม่ใช่ผู้เชี่ยวชาญเกี่ยวกับ Inspect Element หลังจากอ่านด้านบนแล้ว มีคำตอบเพิ่มเติมที่นี่

ฉันจะใช้คำสั่งตรวจสอบองค์ประกอบเพื่อหาคำตอบได้อย่างไร

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

มิฉะนั้น คุณเพียงแค่ดูรหัสสำหรับแบบทดสอบหรือแบบทดสอบเมื่อคุณใช้คุณสมบัติตรวจสอบองค์ประกอบ เช่นเดียวกับคำตอบใดๆ ที่คุณส่ง

องค์ประกอบการตรวจสอบผิดกฎหมายหรือไม่?

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

เป็นไปได้ไหมที่จะปิดการตรวจสอบองค์ประกอบในเบราว์เซอร์?

คำตอบสั้น ๆ คือไม่

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

ทำความรู้จักกับอวัยวะภายในของเว็บเพจ

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

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