บทความ IT เจ๋งๆ
10 Browser Tricks ที่จะช่วยเปลี่ยนวิธีพัฒนา Frontend ของคุณให้ดีขึ้น
12-พ.ย.-25
คัมภีร์เทพ IT
จริง ๆ แล้ว Browser ของเรามี Features ที่ซ่อนอยู่เต็มไปหมดซึ่งจะช่วยให้คุณ Debug ได้เร็วขึ้น, Test ได้แม่นขึ้น และแก้ปัญหา Frontend ได้แบบ Real-time โดยไม่ต้องพึ่ง Plugins หรือเครื่องมือเสริมอะไรเลย และบทความนี้จะมาแนะนำ 10 Browser Tricks ที่จะช่วยเปลี่ยนวิธีพัฒนา Frontend ของคุณให้ดีขึ้น
1. $0 และ $_ — สุดยอดของการ Debug
เมื่อคุณเลือก Element ใน DevTools Elements Panel คุณสามารถเข้าถึง Element นั้นใน Console ได้ทันทีด้วย $0 และถ้าต้องการอ้างอิง Expression ล่าสุดที่คุณเพิ่ง Run ไป ก็สามารถใช้ $_ ได้เลย
ไม่ต้องเสียเวลา Copy-Paste ตัว Selector หรือพิมพ์ document.querySelector ซ้ำ ๆ อีกต่อไปในระหว่างการ Debug
2. Copy as cURL — API Debugger ที่เร็วที่สุด
คลิกขวาที่ Network Request ใน DevTools → Copy → Copy as cURL จากนั้นก็แค่ไปวางใน Terminal คุณก็จะได้คำสั่ง API Call เดียวกันเป๊ะ ซึ่งใช้ในการตรวจ Auth Header หรือ Replay Request ได้ทันที
แค่เทคนิคนี้เทคนิคเดียว ก็สามารถช่วยให้คุณประหยัดเวลาการ Debug ไปได้หลายชั่วโมงเลยทีเดียว
3. Local Overrides — แก้ Production Code ได้แบบไม่ต้อง Deploy
รู้ไหมว่า คุณสามารถ “แก้ไข Files บน Production” ได้บนเครื่องของคุณ โดยให้ Browser จดจำการเปลี่ยนแปลงนั้นไว้ เพียงแค่ทำตามขั้นตอนนี้:
- เปิด Sources Tab → Overrides
- เลือก Folder ในเครื่องของคุณ
- ทำการแก้ไข แล้วกด Save → การเปลี่ยนแปลงจะถูกแทนที่บนหน้า Website จริงทันที
คุณสามารถใช้วิธีนี้ ในการแก้ไข CSS บน Production ได้ภายในไม่กี่วินาที ก่อนที่จะส่ง Code ขึ้นระบบจริง
4. Design Mode — เปลี่ยนทุก Web ให้กลายเป็น Playground ของคุณ
ให้ Run Code นี้ใน Console:
แล้วคุณจะสามารถแก้ไขข้อความบน Pages ที่ต้องการได้ และคุณสามารถใช้สิ่งนี้ สำหรับการ Mockups อย่างรวดเร็ว, การนำเสนอ หรือแม้แต่ การฝึกเขียนคำโฆษณา (Copy write) ได้โดยตรงภายใน Webpage
5. Screenshot ได้แบบมือโปร
ลืมพวก Program สำหรับจับภาพหน้าจอไปได้เลย เพราะ Chrome DevTools มีมาให้ในตัวแล้ว
เพียงแค่กด:
- Ctrl+Shift+P (หรือ Cmd+Shift+P สำหรับ Mac)
- พิมพ์ “screenshot” แล้วลือก Capture full size screenshot
วิธีการนี้สะดวกมาก ในเวลาที่คุณต้องการเก็บภาพของ UI Bug หรือส่งภาพตัวอย่างให้ลูกค้า
6. Performance Tab — หาต้นเหตุความหน่วงของ Web
มี Developers หลายคนที่กลัวการใช้งาน Performance Tab เพราะมันดูซับซ้อน แต่จริง ๆ แล้วมันมีข้อดีอย่างมาก
คุณสามารถ Record การทำงานของหน้า Web แล้วดู Layout Shift, Paint Times และ Script Execution ได้ เพื่อหาว่าส่วนไหนคือ คอขวด (Bottleneck) ที่ทำให้ Web ช้าลง
7. ปรับแต่ง CSS ด้วยปุ่มลูกศร
ใน Styles Panel เราสามารถใช้ปุ่มลูกศรเพื่อเพิ่มหรือลดค่าของตัวเลขได้
มันมี Shortcut ที่น่าสนใจคือ:
- Shift + Up/Down → เพิ่มหรือลดทีละ 10
- Alt + Up/Down → เพิ่มหรือลดทีละ 0.1
มันให้อารมณ์เหมือน “Live Coding ด้วย Joystick” เลย
8. Network Throttling — Debug ได้เหมือนเป็นผู้ใช้งานจริง
เป็นไปได้ว่า Users ของคุณไม่ได้ใช้งานอินเทอร์เน็ตความเร็วสูงกันทุกคน ด้วย Network Throttling Feature ใน DevTools คุณสามารถ “จำลอง” ความเร็วอินเทอร์เน็ตของ Users เหล่านั้นได้จริง ๆ เพื่อดูว่า Web ของคุณยัง Load เร็วไหม หรือส่วนไหนทำงานผิดพลาดเมื่อเครือข่ายช้าลง โดยให้ลองจำลองการเชื่อมต่อแบบ 3G ที่ช้า, 4G ที่หน่วง หรือแม้แต่ Offline Mode ที่ไม่มีอินเทอร์เน็ตใน DevTools ได้เลย
- แค่เปิด Network Panel
- แล้วเปลี่ยนจาก “No throttling” → “Slow 3G”
9. Snippets — Script ส่วนตัวใน DevTools
ภายใน Sources → Snippets คุณสามารถเก็บ Scripts เล็ก ๆ ที่มักใช้งานบ่อย ๆ ได้ เช่น การเคลียร์ localStorage, Mock API data และ ทดสอบ Animations
เพียงแค่คลิกเดียวก็สามารถ Run ได้เลย โดยไม่ต้องเปิดไฟล์หรือเขียนใหม่ในทุกครั้ง
10. CSS Grid & Flexbox Visualizers
นี่คือหนึ่งใน Features ที่ทำให้รู้สึกราวกับมีเวทมนตร์ เพราะเวลาเลือก Element ที่มี display: grid หรือ flex ใน DevTools จะมีปุ่ม Overlay ที่ช่วยแสดงช่องว่าง (Spacing), การจัดตำแหน่ง (Alignment) และช่องว่างจริงระหว่าง Element แต่ละตัว (Gaps)
ไม่ต้องเดาอีกต่อไปว่าทำไม Flex Item ถึงไม่ตรงหรือจัดวางไม่ถูกต้อง แต่ Browsers จะวาดให้คุณเห็นชัด ๆ เลย
สรุป
และนี่ก็คือ 10 Browser Tricks ที่จะช่วยเปลี่ยนวิธีพัฒนา Frontend ของคุณให้ดีขึ้น เพราะ Browser ไม่ใช่แค่เครื่องมือสำหรับเปิด Web แต่มันคือ “สนามฝึกฝีมือของ Frontend Developer” ที่ทรงพลัง พอคุณเริ่มใช้ Features เหล่านี้ เชื่อว่าการทำงานในแต่ละวันของคุณ “ไหลลื่นขึ้น” ไม่ต้องสลับเครื่องมือบ่อย ๆ ไม่ต้องเสียเวลาแก้ปัญหาแบบเดิม ๆ และเริ่มเข้าใจว่าแค่ DevTools ใน Browser ก็ทำให้คุณเก่งขึ้นได้เช่นกัน
ที่มา: https://javascript.plainenglish.io/
รับตำแหน่งงานไอทีใหม่ๆ ด้วยบริการ IT Job Alert
|
|
อัพเดทบทความจากคนวงในสายไอทีทาง LINE ก่อนใคร
อย่าลืมแอดไลน์ @techstarth เป็นเพื่อนนะคะ
|
|
บทความล่าสุด