สำหรับคนที่ไม่คุ้นเคยกับโค้ด การเปิด Inspect Element โดยไม่ตั้งใจอาจทำให้ตกใจง่าย แต่ถ้าคุณอยู่เฉยๆ หลังจากเห็นโค้ดที่ซับซ้อน Inspect Element จะช่วยให้คุณทำสิ่งที่มีประโยชน์ (และบางอย่างที่ไม่ค่อยมีประโยชน์) ได้หลายอย่าง ถ้าคุณรู้วิธีการ
ที่นี่เราจะมาดู 7 สิ่งสนุกๆ ที่คุณสามารถทำได้โดยใช้เครื่องมือนักพัฒนาของเบราว์เซอร์และ Inspect Element
Inspect Element คืออะไร?
Inspect Element เป็นเครื่องมือสำหรับนักพัฒนาที่เบราว์เซอร์เสนอ เพื่อดูและแก้ไขซอร์สโค้ดของหน้าเว็บไซต์ชั่วคราว ด้วยเครื่องมือนี้ นักพัฒนาและนักออกแบบสามารถตรวจสอบและแก้ไขส่วนหน้าบ้าน (front-end) ของเว็บไซต์ได้
เมื่อคุณเปลี่ยนโค้ด เบราว์เซอร์จะอัปเดตหน้าเว็บแบบเรียลไทม์ การเปลี่ยนแปลงนี้จะคงอยู่เฉพาะระหว่างเซสชันของคุณบนเว็บไซต์และมองเห็นได้เฉพาะคุณบนอุปกรณ์เครื่องเดียว การเปลี่ยนแปลงทั้งหมดจะหายไปทันทีที่คุณออกจากหน้าเว็บ
1. ดาวน์โหลดรูปภาพและวิดีโอ
ปกติคุณสามารถดาวน์โหลดรูปภาพจากเว็บได้ง่ายโดยคลิกขวาและบันทึก แต่ไม่ใช่ทุกเว็บไซต์ที่ทำได้ ในกรณีนี้ ฟีเจอร์ Inspect Element จะช่วยได้
เพื่อดาวน์โหลดไฟล์สื่อใดๆ ให้คลิกขวาที่ไฟล์นั้นและเลือก Inspect ขยายแท็ก <div> ตอนนี้คุณสามารถดูแหล่งที่มาของไฟล์ผ่านแอตทริบิวต์ src ได้ คัดลอกลิงก์แหล่งที่มาและเปิดในแท็บใหม่ จากนั้นคลิกขวาที่ไฟล์สื่อและดาวน์โหลดโดยใช้ตัวเลือก บันทึกเป็น (Save As)
2. เปลี่ยนส่วนหัวและข้อความเพื่อเล่นสนุกกับเพื่อน
แทนที่จะสร้างภาพปลอมตั้งแต่ต้น คุณสามารถใช้ DevTools เพื่อเปลี่ยนข้อความบนหน้าเว็บและเล่นสนุกกับเพื่อน
เพื่อสร้างหน้าเว็บปลอม ให้เปิดหน้าของเว็บไซต์ที่น่าเชื่อถือ คลิกขวาที่หัวข้อ แล้วคลิก Inspect เพื่อเปิดแผง คลิกไอคอน More ของโค้ดที่ไฮไลท์และเลือก Edit as HTML จากนั้นแทนที่หัวข้อกับหัวข้อปลอมของคุณเอง
เช่นเดียวกัน คุณสามารถเปลี่ยนเนื้อหาข้อความอื่นๆ เช่น คำอธิบายสั้น วันที่ และชื่อผู้เขียน เพื่อเปลี่ยนรูปภาพ ให้ลบแหล่งที่มาของรูปภาพด้วยขั้นตอนเดียวกัน หารูปภาพที่เกี่ยวข้องจาก Google คัดลอกที่อยู่รูปภาพ และวางลงในแหล่งที่มา
ด้วยวิธีนี้ คุณสามารถเล่นสนุกกับเพื่อนได้โดยไม่ยุ่งยาก แต่ต้องส่งสกรีนชอตพร้อมซ่อนแผง DevTools แทนการส่งลิงก์ เนื่องจากการเปลี่ยนแปลงเป็นชั่วคราว
3. เปลี่ยนสีและแบบอักษรของหน้าเว็บ
อีกทริกแอบแฝงที่ทำได้กับ Inspect Element คือการเปลี่ยนสีและแบบอักษรของหน้าเว็บไหนก็ได้ คลิกขวาที่วัตถุที่ต้องการเปลี่ยนสีและเลือก Inspect จากนั้นในแท็บ Styles หา color หรือ background-color และใส่รหัสเฮกซ์ สามารถเปลี่ยนขนาดและสไตล์แบบอักษรจากแท็บ Styles ได้เช่นกัน
คุณสามารถใช้ทริกนี้เพื่อเปลี่ยนลักษณะของเว็บไซต์ให้อ่านง่ายขึ้น ตัวอย่างเช่น สร้างโหมดมืดของเว็บไซต์เพิ่มขนาดตัวอักษรเพื่อความอ่านง่าย และลบองค์ประกอบที่รบกวนโดยการลบออก
4. ดูรหัสผ่านที่ซ่อนอยู่
หากเว็บไซต์ซ่อนรหัสผ่านของคุณด้วยดอกจัน (*) คุณสามารถปรับโค้ดหน้าเว็บเพื่อดูได้ ไปที่ DevTools โดยคลิกขวาที่รหัสผ่านที่ซ่อนอยู่ จากนั้นภายในแท็ก input ให้เปลี่ยน type จาก password เป็น text และคลิกที่พื้นที่ว่าง ตอนนี้รหัสผ่านของคุณจะมองเห็นได้
ทริกนี้มีประโยชน์เมื่อคุณลืมรหัสผ่านแต่บันทึกไว้ในตัวจัดการรหัสผ่าน ดังนั้นคุณสามารถดูและจำรหัสผ่านได้โดยตรงจากหน้าเว็บ
5. ดูเวอร์ชันมือถือของเว็บไซต์
เรารู้จักวิธีดูเวอร์ชันเดสก์ท็อปบนมือถือ แต่คุณยังสามารถใช้ Inspect Element เพื่อดูเวอร์ชันมือถือบนเดสก์ท็อปได้ เปิด DevTools และคลิกปุ่ม Toggle Device Toolbar (ปุ่มที่สองจากขวาบน)
เช่นกัน คุณสามารถสลับ User Agent และดูเวอร์ชันต่างๆ ของเว็บไซต์ ในเครื่องมือนักพัฒนา คลิกไอคอน More มุมซ้ายบน และเลือก network conditions ยกเลิกการติ๊กกล่อง Use Default Browser ในส่วน User Agent และเลือก user agent อื่นจากเมนูดรอปดาวน์ด้านล่าง
6. เลือกสีจากเว็บไซต์
แทนที่จะติดตั้งส่วนขยาย color picker ของบุคคลที่สาม คุณสามารถเลือกสีที่ชอบได้โดยใช้ Inspect Element ไปที่ Inspect Element จากนั้นไปที่แท็บ Styles และหา color หรือ background ตอนนี้คลิกที่กล่องเล็กๆ หลัง color เพื่อเปิด color picker
ตอนนี้คุณสามารถคลิกที่ใดก็ได้บนหน้าเพื่อเลือกสีและคัดลอกรหัสเฮกซ์จากแท็บ Styles หากต้องการรหัส RGB หรือ HSLA สามารถดูได้โดยใช้ปุ่ม Arrow
ดังนั้น เมื่อคุณเห็นสีที่สวยงามบนเว็บไซต์ใดๆ ที่อาจต้องการใช้ในอนาคต ให้ใช้ Inspect Element และบันทึกรหัสไว้อ้างอิง
7. ถ่ายสกรีนชอตโดยไม่ต้องใช้ส่วนขยาย
DevTools ยังช่วยให้คุณถ่ายสกรีนชอตที่สะอาดและชัดเจนได้ เพื่อถ่ายสกรีนชอต ให้เปิด DevTools คลิกไอคอน More และเลือก Run a Command ในกล่องค้นหา พิมพ์ screenshot คุณจะเห็นตัวเลือกการถ่ายสกรีนชอต 4 ประเภท
การเลือก area screenshot ช่วยให้คุณไฮไลท์พื้นที่เฉพาะบนหน้าต่าง และเบราว์เซอร์จะบันทึกเป็นไฟล์ PNG
การถ่าย full-size screenshot จะบันทึกภาพของหน้าเว็บทั้งหมด รวมถึงสิ่งที่ไม่มองเห็นบนหน้าจอ Node screenshot จะถ่ายภาพขององค์ประกอบเฉพาะตัวเท่านั้น ส่วน capture screenshot จะบันทึกภาพของทุกอย่างที่มองเห็นบนหน้าจอ
เรียนรู้ทริกแอบแฝงของ Inspect Element
นี่เพียงทริกบางส่วนที่คุณสามารถทำได้กับ Inspect Element ยังมีสิ่งที่มีประโยชน์อีกมากมายที่คุณสามารถทำได้ด้วย DevTools
ดังนั้น หากคุณต้องการเป็นผู้ใช้ระดับมืออาชีพและประทับใจเพื่อนๆ การเรียนรู้ฟีเจอร์แอบแฝงเพิ่มเติมของ DevTools จะเป็นความคิดที่ดี
