7 สิ่งสนุกๆ ที่คุณสามารถทำได้ด้วย Inspect Element

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

2. เปลี่ยนส่วนหัวและข้อความเป็นเพื่อนเล่นตลก

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

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

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

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

3. เปลี่ยนสีและแบบอักษรของหน้าเว็บ

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

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

4. ดูรหัสผ่านที่ซ่อนอยู่

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

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

5. ดูเวอร์ชันมือถือของเว็บไซต์

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

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

6. เลือกสีจากเว็บไซต์

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

ตอนนี้คุณสามารถคลิกที่ใดก็ได้บนหน้าเพื่อเลือกสีและคัดลอกรหัสฐานสิบหกจาก รูปแบบ แท็บ หากคุณต้องการโค้ด RGB หรือ HSLA คุณสามารถดูได้โดยใช้ ลูกศร ปุ่ม.

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

7. ถ่ายภาพหน้าจอโดยไม่มีส่วนขยายใด ๆ

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

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

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

เรียนรู้เคล็ดลับที่ซ่อนอยู่ของการตรวจสอบองค์ประกอบ

นี่เป็นเพียงเทคนิคเล็กๆ น้อยๆ ที่คุณสามารถทำได้โดยใช้ Inspect Element มีประโยชน์อื่นๆ มากมายที่คุณสามารถทำได้โดยใช้ DevTools

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