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

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

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

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

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

ขั้นตอนที่ 1

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

ขั้นตอนที่ 2

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

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

ขั้นตอนที่ 3

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

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

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

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

ขั้นตอนที่ 1

Abre la ventana del inspector de elementos presionando el atajo de teclado F12 (debería funcionar en la mayoría de los sistemas). Alternativamente, podés hacer clic derecho en cualquier parte de la página web y seleccionar “Inspeccionar.” La ventana del inspector de elementos debería aparecer. 🖱️

ขั้นตอนที่ 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 หากคุณต้องการเจาะลึกเกี่ยวกับการพัฒนาเว็บมากขึ้น นี่คือคู่มือที่จะช่วยคุณเริ่มต้นได้