วิธีใช้เครื่องมือสำหรับนักพัฒนา Chrome เพื่อปรับปรุงเว็บไซต์ WordPress ของคุณ

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

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

การเปิดเครื่องมือ

มีหลายวิธีในการเปิดเครื่องมือ:

1. เลือกเมนู Chrome เลือกเครื่องมือ แล้วเลือกเครื่องมือสำหรับนักพัฒนา
2. คลิกขวาที่องค์ประกอบใด ๆ บนหน้าจอและเลือก ตรวจสอบองค์ประกอบ (วิธีที่ฉันต้องการ)
3. Ctrl + Shift + I (สำหรับพีซี) | Cmd + Opt + I (สำหรับ Mac)

หน้าต่าง DevTools

หน้าต่างเครื่องมือประกอบด้วยสองแผง ทั้งสองมีเครื่องมือที่สามารถใช้ร่วมกันได้ มาดูเครื่องมือกันครับ

ชุดแรกประกอบด้วยเครื่องมือ 8 กลุ่ม เครื่องมือประกอบด้วย:

• องค์ประกอบ
• เครือข่าย
• แหล่งที่มา
• เส้นเวลา
• โปรไฟล์
• ทรัพยากร
• การตรวจสอบ
• คอนโซล

ส่วนที่สองประกอบด้วย:

• สไตล์
• คำนวณ
• ผู้ฟังเหตุการณ์
• DOM (Document Object Model) เบรกพอยต์
• คุณสมบัติ

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

องค์ประกอบ

แผงนี้จะแสดงแผนผัง DOM ซึ่งแสดงถึงองค์ประกอบ HTML ของหน้าเว็บของคุณ และช่วยให้คุณตรวจสอบหรือแก้ไของค์ประกอบใดๆ ได้ คุณสามารถดูการปรับ CSS แบบเรียลไทม์

คุณสามารถเปิดและยุบแผงใดๆ เพื่อให้มองเห็นและนำทางได้ง่ายขึ้นโดยคลิกที่โหนด (มีลักษณะเหมือนลูกศรหรือสามเหลี่ยม) มุมมองแบบต้นไม้ DOM แสดงสถานะปัจจุบันของต้นไม้แทนที่จะเป็น HTML ดั้งเดิม (เช่น อาจมีการแก้ไขโดย JavaScript)

เมื่อคุณวางเมาส์เหนือองค์ประกอบในมุมมองแบบต้นไม้ องค์ประกอบบนหน้าเว็บจะไฮไลต์ มันจะแสดงข้อมูลเช่นรูปแบบตัวอักษรขนาดภาพ ฯลฯ

หากคุณคลิกที่องค์ประกอบใดองค์ประกอบหนึ่ง หน้าต่างทางด้านขวาจะแสดง CSS ที่นี่คุณสามารถเลือกสไตล์และทำการปรับเปลี่ยนแบบอักษร สี ขนาด ระยะขอบ เส้นขอบ ช่องว่างภายใน ฯลฯ

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

ตัวอย่างเช่น ภาพนี้ปัจจุบันกว้าง 600 พิกเซล ฉันสามารถเลือกความกว้างและพิมพ์ค่าใหม่แล้วกด Enter

รูปภาพจะเปลี่ยนเป็นขนาดใหม่ทันที

หากต้องการเปลี่ยนสไตล์ของฟอนต์ ให้เลือกฟอนต์และเลือกสิ่งที่คุณต้องการเปลี่ยนในหน้าต่างสไตล์ทางด้านขวา

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

ฉันกำลังย้ายความคิดเห็นล่าสุดไปไว้เหนือโพสต์ล่าสุดเพียงแค่ลาก div

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

ฉันได้ใช้เครื่องมือนี้เพื่อค้นหาขนาดภาพและตรวจสอบข้อมูลโค้ด

เครือข่าย

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

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

คุณสามารถดูรายละเอียดของทรัพยากร รายละเอียดรวมถึง:

• ส่วนหัวของคำขอและการตอบสนอง HTTP – แสดง URL คำขอ วิธี HTTP รหัสสถานะการตอบสนอง และแสดงรายการการตอบกลับ HTTP และส่วนหัวของคำขอพร้อมค่า และพารามิเตอร์สตริงการสืบค้น
• การแสดงตัวอย่างทรัพยากร – แสดงตัวอย่างสำหรับรูปภาพและทรัพยากร JSON
• การตอบสนอง HTTP – แสดงเนื้อหาที่ไม่ได้จัดรูปแบบของทรัพยากร
• ชื่อและค่าของคุกกี้ – แสดงคุกกี้ที่ส่งในส่วนหัวของคำขอ HTTP และการตอบสนองของทรัพยากร และล้างคุกกี้
• ข้อความ WebSocket – ข้อความนี้แสดงข้อความที่ส่งหรือรับผ่านการเชื่อมต่อ WebSocket
• ระยะเวลาของเครือข่ายทรัพยากร – แสดงกราฟของเวลาที่ใช้ในเฟสของเครือข่ายที่เกี่ยวข้องกับการโหลดทรัพยากร

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

คุณสามารถบันทึกข้อมูลเครือข่ายเพื่อการวิเคราะห์ในอนาคต

แหล่งที่มา

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

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

เส้นเวลา

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

• กิจกรรม – รายการของกิจกรรมทั้งหมดที่จัดตามประเภท สิ่งนี้แสดงให้คุณเห็นว่างานใดใช้เวลามากที่สุด
• เฟรม – แสดงงานที่ต้องทำในแต่ละเฟรมของประสิทธิภาพการแสดงผลเว็บไซต์ของคุณ ตัวอย่างเช่น หากไซต์ของคุณแสดงผลที่ 60 เฟรมต่อวินาที จะแสดงงานที่ทำเสร็จใน 1/60 วินาที ซึ่งรวมถึงสคริปต์การโหลด การลงสีเลย์เอาต์ การจัดการเหตุการณ์ ฯลฯ คุณสามารถใช้เพื่อดูกิจกรรมที่ผิดปกติในการโหลดหน้า
• หน่วยความจำ – กราฟแสดงการใช้หน่วยความจำของคุณเมื่อเวลาผ่านไป จะแสดงเอกสาร โหนด และผู้ฟังเหตุการณ์ทั้งหมดที่อยู่ในหน่วยความจำ ซึ่งช่วยในการหาสาเหตุของการรั่วไหลของหน่วยความจำ

โปรไฟล์

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

มันจะบันทึกประเภทโปรไฟล์สามประเภท:

• รวบรวม JavaScript CPU Profile – แสดงเวลาดำเนินการของฟังก์ชัน JavaScript ของคุณ
• Take Heap Snapshot – แสดงการใช้หน่วยความจำและการกระจายออบเจกต์ JavaScript ของคุณ
• บันทึกการจัดสรรฮีป – บันทึกการจัดสรรอ็อบเจ็กต์ของคุณเพื่อแสดงหน่วยความจำรั่วไหลเมื่อเวลาผ่านไป

ทรัพยากร

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

แท็บ IndexedDB ช่วยให้คุณตรวจสอบฐานข้อมูล IndexedDB และที่เก็บอ็อบเจ็กต์ และดูและลบระเบียนได้

คุณสามารถเรียกใช้ คำสั่ง SQL และดูผลลัพธ์ในรูปแบบตาราง เมื่อคุณพิมพ์คำสั่ง มันจะให้คำแนะนำเกี่ยวกับชื่อตาราง คำสั่ง และส่วนคำสั่งต่างๆ

แท็บ คุกกี้ แสดงข้อมูลเกี่ยวกับคุกกี้ที่สร้างโดย HTTP หรือ JavaScript คุณสามารถลบทีละรายการหรือในกลุ่ม

Chrome แคชทรัพยากรของแอปพลิเคชัน แท็บ แคชของแอปพลิเคชัน ช่วยให้คุณดูสถานะของทรัพยากรเหล่านั้นได้ นอกจากนี้ยังจะแสดง URL ของทรัพยากร ประเภทของทรัพยากรที่เป็น และขนาดของทรัพยากร

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

การตรวจสอบ

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

ไม่ได้ลงรายละเอียดมากเท่ากับ Google PageSpeed ​​Insights แต่ให้ข้อมูลเพียงพอแก่คุณในการแก้ไขผลที่ค้างอยู่ต่ำ หลังจากอ่าน PageSpeed ​​Insights หน้าเว็บของฉันก็อยู่ในสภาพที่ดี แต่กลับให้ข้อมูลบางอย่างเกี่ยวกับไซต์ของฉันโดยที่ Insights ไม่ระบุ

คอนโซล

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

โหมดอุปกรณ์

หนึ่งในคุณสมบัติที่ฉันชอบคือโหมดอุปกรณ์ คุณสามารถเข้าถึงสิ่งนี้ได้ด้วยปุ่มเล็กๆ ทางด้านซ้ายของ Elements ในเมนู โหมดอุปกรณ์ให้คุณเลือกจากอุปกรณ์พกพายอดนิยม 23 รุ่น (Kindle Fire, iPhone หลายรุ่น, กาแล็กซี่หลายเครื่อง, แล็ปท็อป ฯลฯ) และดูว่าเว็บไซต์ของคุณมีลักษณะและตอบสนองอย่างไรบนอุปกรณ์นั้น

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

คุณยังสามารถเลือกประเภทเครือข่ายได้ (3G, 4G, Wi-Fi เป็นต้น) เพื่อให้คุณสามารถวิเคราะห์ลักษณะและการตอบสนองของไซต์ในเครือข่ายและความเร็วต่างๆ

ลิ้นชัก

ที่ด้านล่างของหน้าจอ คุณจะพบลิ้นชัก ซึ่งสามารถเปิดหรือปิดได้ด้วยปุ่ม >_ ที่ด้านขวาของแถบเครื่องมือ ลิ้นชักประกอบด้วย:

• คอนโซล – บรรทัดคำสั่งคอนโซล ซึ่งจะทำให้คอนโซลใช้งานได้เมื่อใช้พาเนลอื่น
• ค้นหา - ค้นหาแหล่งที่มาใด ๆ คุณสามารถเลือกที่จะละเว้นตัวพิมพ์เล็กและตัวพิมพ์ใหญ่และค้นหานิพจน์ทั่วไปได้
• การจำลอง – เครื่องมือและการตั้งค่าสำหรับโหมดอุปกรณ์ ประกอบด้วยคุณลักษณะต่างๆ เช่น มาตรความเร่งและพิกัดตำแหน่งทางภูมิศาสตร์
• การแสดงผล – แสดงคุณสมบัติการเรนเดอร์ เช่น fps meter, เส้นขอบแบบผสม ฯลฯ ส่วนที่ดีที่สุดเกี่ยวกับสิ่งนี้คือมันจะแสดงปัญหาคอขวดที่อาจเกิดขึ้น

การมีเครื่องมือเหล่านี้อยู่ในลิ้นชักนั้นมีประโยชน์ เนื่องจากพาเนลบางส่วนไม่มีการเข้าถึงเครื่องมือเหล่านี้

ความคิดสุดท้าย

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

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