บทความ IT เจ๋งๆ

11 เคล็ดลับมีประโยชน์ ในการใช้ Chrome DevTools

10-พ.ค.-24

คัมภีร์เทพ IT

Chrome Browser มีประโยชน์หลายอย่าง ไม่ว่าจะใช้มันเพื่อดู Network Requests, วิเคราะห์ Web Page Performance, และ Debug Features ของ JavaScript นอกจากนี้ยังมี Functions อีกมากมายที่ช่วยปรับปรุงประสิทธิภาพของการ Develop ซึ่งบทความนี้เรามาดู 11 เคล็ดลับมีประโยชน์ ในการใช้ Chrome DevTools กัน

1. เพิ่ม Conditional Breakpoint

Code ต่อไปนี้ เราหวังว่าชื่อของอาหารจะเป็น ช็อคโกแลต เมื่อ Breakpoint ถูก Triggered เราจะทำอย่างไร?

ในกรณีที่มี Data เป็นจำนวนมาก การใช้ Conditional Breakpoint จะมีประโยชน์อย่างมากสำหรับ Development Work และช่วยปรับปรุงประสิทธิภาพได้อย่างมาก

2. ใช้ ` $I ' เพื่อติดตั้ง npm package บน Console

บางครั้ง คุณอาจต้องการใช้ API อย่างเช่น dayjs หรือ lodash แต่คุณก็ไม่อยากไปที่ Official Website เพื่อตรวจสอบมัน ซึ่งคงจะดีไม่น้อยถ้าคุณสามารถลองใช้งานบน Console ได้โดยตรง

3. Resend XHR Request

เรามักจะต้อง Debug Interface กับ Back-end Developers ในงานของเรา การใช้ Function นี้สามารถปรับปรุงประสิทธิภาพการทำงานของเราได้

คุณเพียงแค่ทำตามขั้นตอนเหล่านี้:

  • เลือก Network Panel
  • คลิก Fetch/XHR
  • เลือก Request ที่คุณต้องการจะ Resend
  • คลิกขวาแล้วเลือก Replay XHR

4. เปลี่ยนสี Theme อย่างรวดเร็ว

บางคนชอบ Theme สีขาวของ Chrome แต่บางคนก็ชอบสีดำ เราสามารถใช้ Shortcut Keys เพื่อสลับระหว่างทั้งสอง Themes  ได้อย่างรวดเร็ว

  • cmd + shift + p เพื่อ Run คำสั่ง Command
  • ป้อน " Switch to dark theme" หรือ " Switch to light theme" เพื่อเปลี่ยน Theme ได้ตามต้องการ

5. Send Requests อย่างรวดเร็วใน Console

สำหรับ Request เดียวกัน บางครั้งก็จำเป็นต้องมีการแก้ไข Input Parameters และ Resend อีกครั้ง แล้วทางลัดในการทำสิ่งนี้คืออะไร?

คุณเพียงแค่ทำตามขั้นตอนเหล่านี้:

  • เลือก Network Panel
  • คลิก Fetch/XHR
  • เลือก Request ที่คุณต้องการจะ Resend
  • เลือก Copy as fetch Panel
  • แก้ไข Input Parameters แล้ว Resend มัน

6. Copy JavaScript Variables

เราจะ Copy Data ที่มีความซับซ้อนไปยัง Clipboard ได้อย่างไร?

คุณสามารถทำได้โดยใช้ Copy Function จาก Chrome Browser ได้เลย

7. รับ DOM Element ใน Console

เมื่อเราเลือก Element ผ่าน “Elements” Panel เราควรทำอย่างไรหากเราต้องการ Print Attributes บางอย่างผ่าน JavaScript เช่น Width, Height, Position ฯลฯ

  • เลือก DOM Element ผ่าน Elements Panel
  • ใช้ $0 เพื่อเข้าถึง Element ใน Console

8. จับภาพ Full-Sized Screenshots

หากเราต้องการจับภาพ Screenshots ที่มีมากกว่าหนึ่ง Screen จะมีวิธีใด ที่เราสามารถทำได้บ้าง?

ด้วย Chrome Browser อันทรงพลัง มันสามารถทำสิ่งนี้ได้อย่างง่ายดาย

  • เตรียม Content ของ Page ที่คุณต้องการจะ Capture
  • CMD + Shift + P เพื่อ Run คำสั่ง
  • ป้อน Capture full size screenshot แล้วกด Enter

มันง่ายมากเลยใช่ไหม

ตอนนี้มีคำถามใหม่ ถ้าเราแค่อยากได้ Screenshot เพียงแค่ส่วนหนึ่งของ Page เราควรทำอย่างไร?

แน่นอนว่า มันง่ายมาก เพียงแค่ป้อน Capture node screenshot ในขั้นตอนที่สาม 

9. Expand Child Nodes ทั้งหมด

ถ้าเราต้องการจะ Expand Child Nodes ทั้งหมดของ DOM Element ในคราวเดียว จะทำได้อย่างไร?

คุณสามารถใช้ “Alt + Click” ใน “Elements” Panel เพื่อ Expand Child Nodes ทั้งหมดในคราวเดียว

10. ใช้ “$” เพื่ออ้างอิงผลลัพธ์ของการ Execution ครั้งล่าสุด

เรามาลองดูสถานการณ์นี้กัน เราได้ดำเนินการต่าง ๆ กับ String แล้วอยากทราบผลในแต่ละขั้นตอน เราจะทำอย่างไรได้บ้าง?

คุณอาจทำอะไรในทำนองนี้

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

11. ใช้ “$" และ "$$" เพื่อเลือก DOM Elements อย่างรวดเร็ว

การใช้ document.querySelector และ document.querySelectorAll เพื่อเลือก Elements ของ Page ปัจจุบันใน Console เป็นสิ่งที่พบได้บ่อยที่สุดอย่างหนึ่ง แต่จะว่าไป มันอาจยาวเกินไปสักเล็กน้อย 

ในกรณีนี้ เราสามารถใช้ $ และ $$ แทนได้

ที่มา: https://javascript.plainenglish.io/

 

 

รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert

 

อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ

เพิ่มเพื่อน

 

บทความล่าสุด

ประเภทบทความ