เคล็ดลับการตรวจสอบองค์ประกอบ: 8 เคล็ดลับที่ต้องรู้!

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

1 . ดาวน์โหลดภาพ

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

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

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

ภายในหน้าต่าง Element Inspector คลิกที่แท็บ “เครือข่าย” แท็บเครือข่ายควรมี "รูปภาพ" เป็นหนึ่งในเมนูย่อย คลิกที่ “รูปภาพ”

ตอนนี้โหลดหน้าใหม่อีกครั้ง เพื่อให้ทรัพยากรรูปภาพทั้งหมดปรากฏขึ้นในแท็บ "รูปภาพ" ใช้ ปุ่มรีเฟรชข้างแถบที่อยู่ จากเบราว์เซอร์ของคุณหรือกด Ctrl+R

ขั้นตอนที่ 3

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

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

2 . ดาวน์โหลดวิดีโอ

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

ขั้นตอนที่ 1

เปิดหน้าต่าง Element Inspector โดยการกดแป้นพิมพ์ลัด F12 (ควรใช้ได้กับระบบส่วนใหญ่) อีกวิธีหนึ่งคือคุณสามารถคลิกขวาที่ใดก็ได้บนเว็บเพจและเลือก “ตรวจสอบ” หน้าต่าง Element Inspector ควรจะปรากฏขึ้น

ขั้นตอนที่ 2

คลิกแท็บ “เครือข่าย” แล้วคลิก “สื่อ” เพื่อกรองทุกอย่างยกเว้นไฟล์วิดีโอ โหลดหน้าใหม่อีกครั้ง ไม่ว่าจะโดยการคลิกปุ่มรีเฟรชของเบราว์เซอร์หรือโดยการกด Ctrl+R

ขั้นตอนที่ 3

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

3 . จับภาพหน้าจอเต็มหน้า

หากคุณต้องการบันทึกเว็บเพจทั้งหมด คุณสามารถดาวน์โหลดเป็นไฟล์ PDF หรือ HTML ได้อย่างรวดเร็ว แต่จะเกิดอะไรขึ้นหากคุณต้องการจับภาพหน้าจอทั้งหน้าแบบปกติ? ที่นี่ ฉันจะอธิบายวิธีทำ-

Firefox มีเครื่องมือจับภาพหน้าจอโดยเฉพาะในเมนูบริบท ดังนั้น ฉันจะแสดงวิธีการดำเนินการให้คุณดู กูเกิลโครม และเบราว์เซอร์อื่น ๆ

เปิดเครื่องมือตรวจสอบโดยการคลิกขวาที่ใดก็ได้บนหน้าหรือการกด F12

กด Ctrl+Shift+P เพื่อเปิดหน้าต่าง Run ฉันเขียน การจับภาพการจับภาพของ หน้าจอขนาดเต็ม ในหน้าต่างนี้ คลิ๊กที่นี่

หน้าต่าง “บันทึกเป็น” ควรจะปรากฏขึ้นทันที เพื่อให้คุณสามารถบันทึกภาพหน้าจอหน้าเต็มในรูปแบบ JPG ได้

4 . แกล้งทำเป็นว่าคุณกำลังคุยโทรศัพท์

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

ใน Chrome ให้เปิดหน้าต่าง Element Inspector จากเมนูคลิกขวาหรือใช้ F12 จากนั้นคลิกที่ไอคอนแล็ปท็อปและโทรศัพท์ขนาดเล็กที่มุมบนซ้าย Firefox มีปุ่มที่คล้ายกัน เรียกว่า Responsive Design Mode (Ctrl+Shift+M)

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

5 . ระบุแหล่งที่มา

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

ขั้นแรก เปิดเครื่องมือ Element Inspector ขั้นตอนต่อไป คลิกที่แท็บ “เครือข่าย” (อาจซ่อนอยู่ในเมนูเพิ่มเติม) และเลือก “แหล่งที่มา”

จากนั้นกด Ctrl+R แบบอักษรที่เรนเดอร์จะถูกโหลดลงในรายการ อาจเป็นรูปแบบ WOFF คุณสามารถดาวน์โหลดได้โดยตรงด้วยการดับเบิลคลิกบนชื่อแบบอักษร ตัวอย่างเช่น How-To Geek ใช้ Roboto เป็นแบบอักษรเริ่มต้น

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

6 . แก้ไขข้อความบนหน้า (ชั่วคราว)

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

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

ไฮไลท์ข้อความบนเพจที่คุณต้องการแก้ไขและคลิกขวาที่ข้อความนั้น จากนั้นเลือก “ตรวจสอบ” หรือ “ตรวจสอบองค์ประกอบ”

ข้อความย่อยที่เกี่ยวข้องควรปรากฏในแท็บองค์ประกอบ เพียงแค่ดับเบิลคลิกและแทนที่ข้อความด้วยสิ่งที่คุณต้องการ

ปิด Element Inspector แล้วเสร็จเรียบร้อย! โปรดทราบว่าหากคุณโหลดหน้าใหม่ การเปลี่ยนแปลงของคุณจะถูกยกเลิก

7 . ลบรายการ

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

คลิกขวาที่รายการที่คุณต้องการลบ จากนั้นเลือก “ตรวจสอบ” หรือ “ตรวจสอบองค์ประกอบ”

เลื่อนเมาส์ไปเหนือป้ายกำกับ “

” จนกว่าจะเน้นทั้งองค์ประกอบ จากนั้นเพียงกดปุ่ม Delete

หายไปเฉยเลย!

8 . ระบุค่าสี

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

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

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

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

---

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