เพิ่มประสิทธิภาพการพัฒนาสูงสุด:ใช้ประโยชน์จากคุณสมบัติ DevTools ข้ามเบราว์เซอร์

ภาพหน้าจอด้านล่างแสดงวิธีที่เราสามารถใช้ 161 ในคอนโซลเพื่อเข้าถึงโหนดที่เลือกในแผนผัง DOM และเปลี่ยนสีพื้นหลังเป็นสิ่งที่เราต้องการ

จากภาพด้านบน เราเริ่มต้นด้วยการตรวจสอบองค์ประกอบที่ต้องการที่เราต้องการในแผงองค์ประกอบ ตอนนี้ แทนที่จะค้นหาองค์ประกอบอีกครั้งโดยใช้ 176 คุณสามารถใช้ 183 ได้ เพื่อจัดการมันโดยตรงเช่นนี้:

$0.style.backgroundColor = 'lightblue';

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

คุณลักษณะ DevTools คำขอบล็อกทรัพยากรเป็นคุณลักษณะที่สำคัญสำหรับนักพัฒนาเว็บในการทดสอบว่าเว็บไซต์ของตนทำงานอย่างไรเมื่อไม่สามารถโหลดทรัพยากรเฉพาะได้

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

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

บน Chrome และ Edge:

• บนแผงเครือข่าย คลิกขวาที่ทรัพยากรที่คุณต้องการบล็อก และเลือกบล็อก URL คำขอ

• รีเฟรชเว็บไซต์ และทรัพยากรที่ถูกบล็อกจะไม่ถูกดาวน์โหลดและจะไม่ส่งผลกระทบต่อหน้าเว็บ

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

จากภาพด้านบน เราจะเห็นคำขอเครือข่ายทั้งหมดที่เว็บเพจสร้างขึ้น รวมถึงคำขอรูปภาพ, ไฟล์ CSS, ไฟล์ JavaScript และอื่นๆ ในกรณีของฉัน ฉันได้กรองเฉพาะไฟล์ CSS ที่จะแสดงเท่านั้น

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

ด้วยการบล็อกคำขอ เราจะสามารถระวังพฤติกรรมแปลก ๆ และยังวัดว่าการไม่มีทรัพยากรที่ถูกบล็อกจะส่งผลต่อเวลาและประสิทธิภาพในการโหลดหน้าเว็บอย่างไร

บนไฟร์ฟอกซ์:

• บนแผงเครือข่าย คลิกขวาที่ทรัพยากรที่คุณต้องการบล็อก และเลือกบล็อก URL

• โหลดหน้าซ้ำ

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

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

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

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

ในภาพด้านบน เราพยายามเข้าสู่ระบบเว็บไซต์ เมื่อผู้ใช้ส่งข้อมูลประจำตัว แบบฟอร์มจะส่ง 215 ร้องขอไปยังจุดสิ้นสุด API 225 ด้วยชื่อผู้ใช้และรหัสผ่านของผู้ใช้

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

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

• URL:หากจำเป็น คุณสามารถแก้ไข URL หรือเพิ่มพารามิเตอร์การค้นหาได้

• ส่วนหัว:คุณอาจสังเกตเห็นส่วนหัวประเภทเนื้อหาหายไปหรือไม่ถูกต้อง ซึ่งคุณสามารถแก้ไขได้ที่นี่

• เนื้อหา:นี่คือที่ที่คุณสามารถปรับเปลี่ยนเพย์โหลดได้ เช่น การแก้ไขช่องชื่อผู้ใช้หรือรหัสผ่าน

ในเบราว์เซอร์ Chrome คุณลักษณะการแก้ไขและส่งอีกครั้งใช้งานได้กับคำขอ XHR เท่านั้น และคุณสามารถใช้งานได้โดยคลิกขวาที่คำขอแล้วเลือกเล่นซ้ำ

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

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

บน Chrome และ Edge:

• ใน DevTools ให้กด 243 พิมพ์ความครอบคลุมและเลือกเริ่มความครอบคลุมของเครื่องมือ รีเฟรชหน้า จากนั้นกด Enter

• คุณจะเห็นตารางไฟล์ JS และ CSS พร้อมด้วยคอลัมน์ไบต์ที่ไม่ได้ใช้

• คลิกที่ไฟล์ใดก็ได้เพื่อเปิด เส้นด้านข้างระบุว่าส่วนใดของโค้ดที่ไม่ได้ใช้งานเป็นสีแดง

ในภาพด้านล่าง เรากำลังระบุโค้ด CSS ที่ไม่ได้ใช้ซึ่งอาจลบหรือเลื่อนการโหลดโค้ด

จากภาพด้านบน หลังจากการบันทึกเสร็จสิ้น เครื่องมือความครอบคลุมจะแสดงรายการไฟล์ CSS และ JavaScript ที่โหลดโดยเพจ พร้อมด้วยเมตริกโดยละเอียด:

• ไบต์ทั้งหมด:ขนาดของไฟล์

• ไบต์ที่ไม่ได้ใช้:จำนวนไบต์ในไฟล์ที่ไม่ได้ใช้

• การแสดงภาพการใช้งาน:แถบภาพที่แสดงสัดส่วนของโค้ดที่ใช้กับโค้ดที่ไม่ได้ใช้

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

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

บน Chrome และ Edge:

• ในหน้าการตั้งค่า ให้เลือกแท็บการทดสอบ

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

• รีเฟรช DevTools และไปที่เครื่องมือ Elements

• ที่มุมขวาบนของมุมมององค์ประกอบ ให้คลิกสลับเป็นมุมมองแบบต้นไม้ DOM

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

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

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

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

บนไฟร์ฟอกซ์:

• ใน Firefox DevTools ให้คลิกที่แท็บการเข้าถึงและขยายโหนดเอกสาร

• คุณสามารถคลิกที่โหนดต่างๆ เพื่อดูคุณสมบัติได้

• ปัญหาในการเข้าถึงสำหรับโหนดจะแสดงบนแท็บตรวจสอบ

สรุป

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

หวังว่าคุณจะสำรวจและใช้คุณลักษณะ DevTools เพิ่มเติมต่อไปเพื่อปรับปรุงประสบการณ์นักพัฒนาซอฟต์แวร์ของคุณ

เรียนรู้การเขียนโค้ดฟรี หลักสูตรโอเพ่นซอร์สของ freeCodeCamp ช่วยให้ผู้คนมากกว่า 40,000 คนได้งานในตำแหน่งนักพัฒนา เริ่มต้น