คุณสมบัติ Cross-Browser DevTools บางอย่างที่คุณอาจไม่รู้

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

แต่มีคุณลักษณะบางอย่างของ DevTools ที่สามารถทำงานร่วมกันได้ แม้กระทั่งบางคุณลักษณะที่รู้จักกันน้อยซึ่งฉันจะแบ่งปันกับคุณ

เพื่อความกระชับ ฉันใช้ “Chromium” เพื่ออ้างถึงเบราว์เซอร์ที่ใช้ Chromium ทั้งหมด เช่น Chrome, Edge และ Opera ในบทความ DevTools จำนวนมากในนั้นนำเสนอคุณสมบัติและความสามารถที่เหมือนกันทุกประการ ดังนั้นนี่เป็นเพียงการสรุปสั้น ๆ ของฉันสำหรับการอ้างอิงถึงพวกเขาทั้งหมดในคราวเดียว

ค้นหาโหนดในแผนผัง DOM

บางครั้งแผนผัง DOM เต็มไปด้วยโหนดที่ซ้อนอยู่ในโหนดที่ซ้อนอยู่ในโหนดอื่น เป็นต้น ซึ่งทำให้ยากที่จะค้นหาสิ่งที่คุณต้องการ แต่คุณสามารถค้นหาแผนผัง DOM ได้อย่างรวดเร็วโดยใช้ Cmd + F (แมคโอเอส) หรือ Ctrl + F (Windows)

นอกจากนี้ คุณยังสามารถค้นหาโดยใช้ตัวเลือก CSS ที่ถูกต้อง เช่น .redหรือใช้ XPath เช่น //div/h1.

ในเบราว์เซอร์ Chromium โฟกัสจะข้ามไปยังโหนดที่ตรงกับเกณฑ์การค้นหาโดยอัตโนมัติในขณะที่คุณพิมพ์ ซึ่งอาจสร้างความรำคาญได้หากคุณทำงานกับคำค้นหาที่ยาวขึ้นหรือแผนผัง DOM ขนาดใหญ่ โชคดีที่คุณสามารถปิดการทำงานนี้ได้โดยไปที่ การตั้งค่า (F1) → การตั้งค่า → เหตุการณ์ที่ → ค้นหาในขณะที่คุณพิมพ์ → ปิดการใช้งาน.

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

เข้าถึงโหนดจากคอนโซล

DevTools มีหลายวิธีในการเข้าถึงโหนด DOM โดยตรงจากคอนโซล

ตัวอย่างเช่นคุณสามารถใช้ไฟล์ $0 เพื่อเข้าถึงโหนดที่เลือกในปัจจุบันในแผนผัง DOM เบราว์เซอร์ Chromium ก้าวไปอีกขั้นด้วยการอนุญาตให้คุณเข้าถึงโหนดที่เลือกตามลำดับเวลาย้อนกลับของการเลือกในอดีตโดยใช้ $1, $2, $3ฯลฯ

อีกสิ่งหนึ่งที่เบราว์เซอร์ Chromium อนุญาตให้คุณทำคือคัดลอกเส้นทางของโหนดเป็นนิพจน์ JavaScript ในรูปแบบของ document.querySelector โดยคลิกขวาที่โหนด แล้วเลือก คัดลอก → คัดลอกเส้นทาง JSซึ่งสามารถใช้เพื่อเข้าถึงโหนดในคอนโซล

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

• โครเมียม: คลิกขวา → “จัดเก็บเป็นตัวแปรส่วนกลาง”
• Firefox: คลิกขวา → “ใช้ในคอนโซล”
• Safari: คลิกขวา → “องค์ประกอบบันทึก”

แสดงภาพองค์ประกอบด้วยตรา

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

In Safariมีปุ่มตราในแถบเครื่องมือพาเนล Elements ซึ่งสามารถใช้สลับการแสดงตราเฉพาะได้ ตัวอย่างเช่น ถ้าโหนดมี display: grid or display: inline-grid การประกาศ CSS นำไปใช้กับมัน grid ป้ายจะแสดงอยู่ข้างๆ การคลิกที่ป้ายจะไฮไลต์พื้นที่กริด ขนาดแทร็ก หมายเลขบรรทัด และอื่นๆ ในหน้านั้น

ป้ายที่ได้รับการสนับสนุนในปัจจุบัน FirefoxDevTools ของรายการอยู่ใน Firefox เอกสารต้นฉบับ. ตัวอย่างเช่น scroll ป้ายระบุองค์ประกอบที่เลื่อนได้ การคลิกที่ป้ายจะไฮไลท์องค์ประกอบที่ทำให้เกิดการโอเวอร์โฟลว์ด้วย overflow ป้ายข้างๆ

In โครเมียม เบราว์เซอร์ คุณสามารถคลิกขวาที่โหนดใดก็ได้แล้วเลือก “การตั้งค่าตรา…” เพื่อเปิดคอนเทนเนอร์ที่แสดงป้ายที่มีอยู่ทั้งหมด ตัวอย่างเช่น องค์ประกอบที่มี scroll-snap-type จะมี scroll-snap ป้ายที่อยู่ติดกันซึ่งเมื่อคลิกจะเป็นการสลับ scroll-snap ซ้อนทับบนองค์ประกอบนั้น

การถ่ายภาพหน้าจอ

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

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

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

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

• โครเมียม: Cmd + Shift + M (แมคโอเอส) หรือ Ctrl + Shift + M (หน้าต่าง). หรือคลิกไอคอน “อุปกรณ์” ถัดจากไอคอน “ตรวจสอบ”
• Firefox: เครื่องมือ → เครื่องมือเบราว์เซอร์ → “โหมดการออกแบบที่ตอบสนอง”
• Safari: พัฒนา → “เข้าสู่โหมดการออกแบบที่ตอบสนอง”

เคล็ดลับ Chrome: ตรวจสอบชั้นบนสุด

Chrome ช่วยให้คุณแสดงภาพและตรวจสอบองค์ประกอบชั้นบนสุด เช่น กล่องโต้ตอบ การแจ้งเตือน หรือโมดอล เมื่อมีการเพิ่มองค์ประกอบใน #top-layer, มันได้รับ top-layer ป้ายที่อยู่ถัดจากนั้น ซึ่งเมื่อคลิก คุณจะข้ามไปยังคอนเทนเนอร์ชั้นบนสุดซึ่งอยู่ถัดจาก </html> แท็ก

ลำดับขององค์ประกอบใน top-layer คอนเทนเนอร์ตามลำดับการเรียงซ้อนซึ่งหมายความว่าอันสุดท้ายอยู่ด้านบน คลิก reveal ป้ายเพื่อข้ามกลับไปที่โหนด

เคล็ดลับ Firefox: ข้ามไปที่ ID

Firefox เชื่อมโยงองค์ประกอบที่อ้างถึงแอตทริบิวต์ ID กับองค์ประกอบเป้าหมายใน DOM เดียวกันและเน้นด้วยการขีดเส้นใต้ ใช้ CMD + Click (แมคโอเอส) หรือ CTRL + Click (Windows) )เพื่อข้ามไปยังองค์ประกอบเป้าหมายด้วยตัวระบุ

ตัดขึ้น

ค่อนข้างน้อยใช่ไหม? เป็นเรื่องที่ยอดเยี่ยมที่มีฟีเจอร์ DevTools ที่มีประโยชน์อย่างเหลือเชื่อซึ่งรองรับใน Chromium, Firefox และ Safari เหมือนกัน มีคุณสมบัติอื่นที่ไม่ค่อยมีคนรู้จักสนับสนุนโดยทั้งสามอย่างที่คุณชอบหรือไม่?

มีแหล่งข้อมูลบางอย่างที่ฉันเก็บไว้ใกล้ตัวเพื่อติดตามข่าวสารใหม่ๆ ฉันคิดว่าฉันจะแบ่งปันกับที่นี่:

• เนื้อหาที่ขับเคลื่อนด้วย SEO และการเผยแพร่ประชาสัมพันธ์ รับการขยายวันนี้
• เพลโตบล็อคเชน Web3 Metaverse ข่าวกรอง ขยายความรู้. เข้าถึงได้ที่นี่.
• ที่มา: https://css-tricks.com/some-cross-browser-devtools-features-you-might-not-know/