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

11 ตัวอย่าง การใช้ Chrome DevTools ที่ช่วยให้คุณทำงานสะดวกขึ้น

22-ก.ค.-22

คัมภีร์เทพ IT

เชื่อว่า Front-end Developers หลายคนคงจะคุ้นเคยกับ Chrome Browser มาบ้างแล้ว เนื่องจากคุณสามารถใช้มันเพื่อ Network Requests, Analyze Web Page Performance และ Debug Features ล่าสุดของ JavaScript ได้ และบทความนี้จะมาบอก 11 ตัวอย่าง การใช้ Chrome DevTools ที่ช่วยให้คุณทำงานสะดวกขึ้น

1. ส่ง XHR Request ซ้ำอีก

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

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

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

2. ส่ง Requests ใน Console อย่างรวดเร็ว

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

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

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

3. Copy ตัวแปรของ JavaScript

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

แน่นอนว่า คุณสามารถทำได้ด้วยการใช้ Copy Function จาก Chrome Browser

4. รับ DOM Element ที่เลือกไว้ใน Console

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

  • เลือก DOM Element ผ่าน Elements Panel
  • ใช้ $0 เพื่อ Access ไปยัง Element ใน Console

5. Capture Screenshots แบบ Full-Size

ถ้าเราอยากจะ Capture หน้าจอของ Page ที่มีมากกว่าหนึ่งหน้าจอ จะทำได้ด้วยวิธีไหนบ้าง

ด้วยความสามารถที่ยอดเยี่ยมของ Chrome Browser คุณสามารถทำสิ่งนี้ได้อย่างง่ายดาย

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

แต่ตอนนี้ คุณอาจมีคำถามเพิ่มเติมอีก คือ ถ้าเราแค่ต้องการ Capture แค่ส่วนหนึ่งของ Screenshot Page ล่ะ เราจะทำอย่างไรดี

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

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

เราจะ Expand Child Nodes ทั้งหมดของ DOM Element พร้อมกันได้อย่างไร ไม่ใช่ทำแค่ทีละ Node

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

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

เราลองมาดูกรณีนี้กัน: เราได้ดำเนินการหลายอย่างบน String แล้วเราอยากรู้ผลลัพธ์ของแต่ละขั้นตอน เราจะทำอย่างไรได้บ้าง

หรือคุณจะทำแบบนี้ก็ได้:

หรือจะลองมาดูวิธีที่ง่ายกว่า:

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

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

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

  • cmd + shift + p เพื่อ Execute Command
  • ป้อน "Switch to dark theme" หรือ "Switch to light theme" เพื่อทำการเปลี่ยน Theme

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

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

10. ใช้ "$i" เพื่อติดตั้ง NPM Package ใน Console

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

  • ติดตั้ง Console Importer Plugin
  • $i('name') เพื่อติดตั้ง npm package

11. เพิ่ม Conditional Breakpoint

จาก Code ต่อไปนี้ เราอยากจะให้ Breakpoint ตรง Food ที่เป็นสัญลักษณ์สีแดง เราจะทำอย่างไรได้บ้าง

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

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

 

 

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

 

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

เพิ่มเพื่อน

 

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

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