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

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

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

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

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

  1. คลิกที่จุดสามจุดถัดจากไอคอนโปรไฟล์ของคุณในแถบเมนู Chrome
  2. เลือก เครื่องมือเพิ่มเติม ตัวเลือก.
  3. เลือก เครื่องมือสำหรับนักพัฒนา.
  4. คอนโซลจะเปิดขึ้นทางด้านขวาของหน้าเว็บ โดยแสดงโค้ดของเว็บไซต์ที่คุณเปิดอยู่
  5. ที่ด้านซ้ายบนสุดของคอนโซลนี้ คุณจะเห็นไอคอนสี่เหลี่ยมจัตุรัสพร้อมเมาส์ คลิกมัน คุณยังสามารถกด Ctrl + Shift + C เพื่อทริกเกอร์ฟังก์ชัน
  6. ตอนนี้คุณสามารถเลื่อนเมาส์ไปยังตำแหน่งที่คุณต้องการบนหน้าเว็บได้แล้ว และโค้ดสำหรับองค์ประกอบเฉพาะนั้นจะปรากฏขึ้น
  7. คลิกที่พื้นที่ที่คุณกำลังวางเมาส์ไว้เพื่อดูโค้ดในคอนโซลทางด้านขวา

นอกจากนี้คุณยังสามารถหลีกเลี่ยงเมนูนี้ได้ทั้งหมดโดยเพียงแค่เรียกใช้งานโดยอัตโนมัติ Ctrl + Shift + I บนแป้นพิมพ์ของคุณ

ตรวจสอบองค์ประกอบบน Chromebook โดยใช้เมาส์หรือทัชแพด

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

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

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