เคล็ดลับในการใช้ Inspect Element ของเบราว์เซอร์ Google Chrome

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

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

1) ค้นหาไฟล์ JavaScript / Media ที่ซ่อนอยู่

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

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

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

TIP : ลองดูเครื่องมือออนไลน์ของเครื่องมือเลือกสีเหล่านี้ด้วย

3> ดูเคล็ดลับการปรับปรุงประสิทธิภาพของเว็บเพจ

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

4] ตรวจสอบการตอบสนอง

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

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

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