Chrome DevTools: 10 เคล็ดลับและลูกเล่นที่มีประโยชน์

ฉันทำงานกับ Chrome มานานกว่าทศวรรษแล้ว ก่อนที่ Mozilla จะจัดการแก้ไขปัญหาหน่วยความจำรั่วได้ และในฐานะคนที่ทำการพัฒนา front-end เป็นประจำทุกวัน ฉันก็ยังเป็นผู้ใช้ Chrome DevTools ตัวยงอีกด้วย ไม่ว่าจะเป็นการตรวจสอบ CSS ในรูปแบบพื้นฐานหรือการทดสอบประสิทธิภาพ DevTools เป็นส่วนสำคัญของกิจวัตรของฉันในฐานะนักพัฒนา

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

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

บล็อกทรัพยากรเพื่อแสดงไซต์โดยไม่มี CSS/JavaScript

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

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

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

ฉันเชื่อว่าสิ่งนี้ใช้งานได้ในเครื่องมือสำหรับนักพัฒนา Firefox และ Edge

การเปลี่ยนแปลง CSS อย่างรวดเร็ว (ด้วยการส่งออก)

คุณเคยรู้สึกเบื่อหน่ายกับการเปลี่ยน CSS จาก DevTools เพียงเพื่อจะรู้ว่าตอนนี้คุณต้องย้อนรอยไปยังคุณสมบัติต่างๆ 10 อย่างเพื่อบันทึกการเปลี่ยนแปลงเหล่านั้นหรือไม่? ใช่. เคยไปที่นั่นทำอย่างนั้น

โชคดีที่มีวิธีที่ดีกว่าในการแก้ไขปัญหานี้

• ไปที่ ปรับแต่งและควบคุม DevTools -> More tools
• เลือก การเปลี่ยนแปลง
• แท็บถาวรจะปรากฏขึ้นภายใน DevTools เพื่อแสดงการเปลี่ยนแปลงโค้ดที่คุณได้ทำไว้

คุณยังสามารถเข้าถึงแผงการเปลี่ยนแปลงผ่านทางลัด CTRL/CMD+Shift+P แล้วพิมพ์การเปลี่ยนแปลงในคอนโซลเรียกใช้ ที่ด้านล่างของอินเทอร์เฟซการเปลี่ยนแปลง คุณมีปุ่ม คัดลอก ซึ่งสามารถใช้เพื่อส่งออกการเปลี่ยนแปลงทั้งหมดที่คุณทำในเซสชันนั้นโดยตรง

เปลี่ยนโครงสร้างเค้าโครง Grid & Flexbox

ฉันเพิ่งเขียนบทความเกี่ยวกับเครื่องมือสร้างเลย์เอาต์ CSS ที่ดีที่สุด ดังนั้นเคล็ดลับถัดไปนี้จึงสอดคล้องกับบทความนั้น ขั้นแรก ตรวจสอบ คอนเทนเนอร์ใดๆ ที่ได้รับการสนับสนุนโดย Grid หรือ Flexbox จากนั้นค้นหาคุณสมบัติที่จัดสรรซึ่งมี display: flex; หรือในทางกลับกัน

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

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

การดีบักการเข้าถึงด้วยเครื่องมือในตัว

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

» การเปิดใช้งานแผนผังการช่วยสำหรับการเข้าถึงใน Chrome DevTools

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

» ผู้ดูคำสั่งซื้อที่มา

ในแผงเดียวกันกับที่แสดงใน GIF ด้านบนจะมีช่องทำเครื่องหมายอื่น และช่องทำเครื่องหมายนั้นเรียกว่า Show source order สิ่งนี้ทำเมื่อเปิดใช้งานแล้ว ช่วยให้คุณเห็นลำดับที่องค์ประกอบปรากฏขึ้นสำหรับผู้เยี่ยมชมที่อาจเข้าชมหน้าเว็บของคุณโดยใช้เครื่องมือช่วยเหลือ

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

สิ่งนี้มีประโยชน์อย่างยิ่งเมื่อทำงานกับ Grid หรือ Flexbox ซึ่งทั้งคู่มีคุณสมบัติสำหรับการจัดเรียงลำดับการแสดงผลของรายการใหม่ เช่น order: 1;

» คำแนะนำสีสำหรับข้อความที่มีคอนทราสต์ต่ำ

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

ทีมงาน web.dev ได้ทำการเขียนทั้งหมดเกี่ยวกับวิธีการทำงานต่อไปนี้

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

จัดรูปแบบย่อขนาด JavaScript/CSS เป็นโค้ดที่อ่านได้

ใช้เวลาเพียงไม่กี่วินาทีในการนำเข้าโค้ดย่อขนาดลงใน VS Code จากนั้นจึงใช้ Prettier แต่ทำไมต้องกังวลเมื่อคุณสามารถฟอร์แมต (unminify) ได้โดยตรงจากคอนโซล DevTools

เพื่อให้งานนี้:

• เปิดพาเนล Sources ภายใน DevTools
• เปิดไฟล์ใด ๆ ที่ได้รับการย่อขนาด
• คลิกที่ไอคอน { } ที่ด้านล่างของคอนโซล
• รหัสได้รับการจัดรูปแบบแล้ว

การแก้ไข (ข้อความ) และการลบองค์ประกอบด้วย designMode

designMode เป็นส่วนหนึ่งของข้อกำหนด Web API และช่วยให้คุณสามารถแก้ไของค์ประกอบในหน้าได้โดยตรง แม้ว่าจะมีข้อจำกัดบางประการ ตัวอย่างเช่น แก้ไขได้เฉพาะข้อความ แต่องค์ประกอบอื่นสามารถลบออกได้ทั้งหมด โปรดจำไว้ว่านี่ไม่ใช่คุณลักษณะ "เป็นทางการ" แต่ก็ยังมีประโยชน์เมื่อทำงานกับสิ่งต่างๆ เช่น ฟังก์ชันคณิตศาสตร์ CSS และคุณสมบัติเฉพาะข้อความอื่นๆ

วิธีทดลองด้วยตัวเอง:

• เปิด คอนโซล DevTools
• พิมพ์ document.designMode=”on” แล้วส่ง
• กลับไปที่หน้าและเริ่มแก้ไข

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

จับภาพหน้าจอจาก Device Emulator

นี่เป็นคุณสมบัติที่หลบเลี่ยงฉันมาเป็นเวลานานที่สุด เวิร์กโฟลว์ปกติของฉันสำหรับการจับภาพหน้าจอคือส่วนขยาย Snip หรือ Awesome ตามที่ปรากฏ คุณสามารถจับภาพหน้าจอมือถือ/แท็บเล็ตและความละเอียดอื่นๆ ได้โดยตรงจาก Device Emulator

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

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

• เปิด DevTools
• คลิกที่ไอคอน แถบเครื่องมืออุปกรณ์สลับ
• ไป ที่ไอคอนเมนูด้านบนขวา (จุดสามจุด)
• เลือก แสดงกรอบอุปกรณ์

นี่คือภาพตัวอย่าง:

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

• iPhone 5/SE
• iPhone 6/7/8 & พลัส
• Nexus 5 & 5x
• Nexus 6P
• iPad

ขอบคุณผู้ใช้ StackOverflow RoCk RoCk สำหรับการชี้แจง

เลือกสีจากภายนอกเบราว์เซอร์

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

ตอนนี้คุณสามารถคว้าสีจากภาพถ่ายที่คุณชื่นชอบได้เร็วยิ่งขึ้น

ใช้ copy() เป็น pseudo-scraper

สามารถใช้ฟังก์ชัน copy() เพื่อดึงข้อมูลวัตถุจำนวนมากที่พบในหน้า สำหรับฉัน นี่เป็นวิธีที่เร็วที่สุดในการขูด URL ทั้งหมดที่พบในหน้าเว็บอย่างรวดเร็ว

ในประเภท คอนโซล ของคุณ:

 copy($$('a').map(a => a.href).join('\n'))

และผลลัพธ์ก็คือ:

ฟังก์ชัน JavaScript ทางเลือกจะมีลักษณะดังนี้:

 var link_array = [], l = document.links; for(var i=0; i<l.length; i++) { link_array.push(l[i].href); } console.log(link_array)

วิธีเปลี่ยนธีมสีของ Chrome DevTools

ฉันสงสัยว่ามีนักพัฒนากี่คนที่เปลี่ยนธีมเบราว์เซอร์ Chrome เป็นสีเข้ม แต่ไม่ทราบว่าคุณต้องทำแยกต่างหากสำหรับ DevTools ฉันแน่ใจว่ามีไม่กี่อย่าง

เมื่อเปิด DevTools คุณสามารถกด F1 เพื่อเปิดการตั้งค่า ซึ่งจะเปิดแผงการตั้งค่าเริ่มต้นซึ่งคุณสามารถเลือกจากธีม Light หรือ Dark หรือใช้ System Preferences

เหลือบภายในโรงไฟฟ้าแห่งการพัฒนา

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