เคล็ดลับในการใช้องค์ประกอบตรวจสอบในเบราว์เซอร์ Google Chrome

สมมติว่าคุณต้องการคำแนะนำเกี่ยวกับการใช้คุณสมบัติตรวจสอบองค์ประกอบในเบราว์เซอร์ Google Chrome: คลิกขวาที่องค์ประกอบที่คุณต้องการตรวจสอบและเลือก 'ตรวจสอบ' จากเมนูแบบเลื่อนลง คุณยังสามารถใช้แป้นพิมพ์ลัด Ctrl+Shift+I (Windows) หรือ Cmd+Opt+I (Mac) เพื่อเปิดตัวตรวจสอบ เมื่อคุณเปิดตัวตรวจสอบแล้ว คุณจะเห็น HTML ของหน้าทางด้านซ้ายและ CSS ทางด้านขวา คุณสามารถทำการเปลี่ยนแปลง HTML และ CSS ในตัวตรวจสอบและดูว่าการเปลี่ยนแปลงเหล่านั้นมีผลกับหน้าทันที หากต้องการออกจากตัวตรวจสอบ เพียงคลิก X ที่มุมขวาบน

Google Chrome ไม่ได้มีไว้สำหรับผู้ใช้เว็บทั่วไปเท่านั้น แต่ยังสำหรับนักพัฒนาเว็บที่สร้างเว็บไซต์ สร้างบล็อก ฯลฯ บ่อยๆ ตรวจสอบองค์ประกอบ หรือ ตรวจสอบ ตัวเลือก Google Chrome ช่วยให้ผู้ใช้ค้นหาข้อมูลบางอย่างเกี่ยวกับเว็บไซต์ที่ซ่อนไม่ให้เห็น ต่อไปนี้คือเคล็ดลับบางประการสำหรับการใช้ Inspect Element ในเบราว์เซอร์ Google Chrome สำหรับ Windows PC

ตรวจสอบองค์ประกอบของ Google Chrome

1] ค้นหาไฟล์ JavaScript/สื่อที่ซ่อนอยู่

ลบโปรไฟล์ผู้ใช้ windows 10

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

ภาพขนาดย่อของ onedrive ไม่แสดง

2] รับรหัสสี HEX/RGB ใน Chrome

บางครั้งเราอาจชอบสีใดสีหนึ่งและต้องการทราบรหัสสีของมัน คุณสามารถค้นหารหัสสี HEX หรือ RGB ที่ใช้บนหน้าเว็บเฉพาะได้ง่ายๆ โดยใช้ตัวเลือกในตัวใน Google Chrome คลิกขวาที่สีและเลือก ตรวจสอบ . ในกรณีส่วนใหญ่ คุณจะพบรหัสสีทางด้านขวาพร้อมกับ CSS ที่แตกต่างกัน หากคุณไม่เห็น คุณอาจต้องใช้ซอฟต์แวร์ตัวเลือกสีฟรี

เคล็ดลับ : ลองดูสิ่งเหล่านี้ เครื่องมือเลือกสีออนไลน์ เดียวกัน.

3] รับคำแนะนำในการปรับปรุงประสิทธิภาพหน้าเว็บ

ไอคอนลูกโลก windows 10

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

4] ทดสอบการตอบสนอง

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

ปิดการใช้งาน Secure Boot windows 10

5] แก้ไขเว็บไซต์สด

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

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