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

Developer มักจะให้ความสนใจกับ Tools ใหม่ๆ อยู่เสมอ ทั้ง CLI, Extension หรือแม้แต่ AI ตัวล่าสุด แต่ความจริงแล้วมี Dev Tools ที่ทรงพลังหลายตัวที่มีติดมาให้แล้วใน OS, Browser และ IDE ที่เราใช้อยู่ทุกวัน เพียงแค่เราอาจยังไม่เคยใช้มันอย่างจริงจัง ดังนั้นบทความนี้จะมาแนะนำ 8 Dev Tools ใกล้ตัว ที่ Developer อาจยังไม่ค่อยได้ใช้จริงจัง

1. DevTools ของ Browser — ไม่ได้มีแค่ “Inspect Element”

เชื่อว่า Developer ทุกคนต้องเคย คลิกขวา → “Inspect” มาแล้วอย่างน้อยสักครั้งหนึ่ง

แต่ส่วนใหญ่ก็หยุดอยู่แค่การดู HTML หรือปรับ CSS เล็ก ๆ น้อย ๆ เท่านั้น แต่ในความเป็นจริงแล้ว DevTools ของ Browser (Chrome, Edge, Firefox, Safari) นั้นกลับทรงพลังมากกว่าที่คุณคิด ถ้าคุณได้ลองเจาะลึกเข้าไปจริง ๆ

สิ่งที่คุณอาจกำลังพลาดอยู่:

Performance Tab:

• ตรวจสอบว่า App ของคุณใช้เวลานานแค่ไหนในการ Render และ Load Asset
• ช่วยระบุปัญหาอย่าง Layout Shift, Network Call ที่ช้า หรือ Scripts ที่ไม่ได้ใช้งาน

ตัวอย่างการใช้งาน:

เปิด DevTools → ไปที่ Performance → กด Record → ใช้งาน App ของคุณตามปกติ จากนั้นคุณจะเห็น Flame Graph ที่บอกชัดเจนว่าอะไรคือ จุดที่ทำให้ระบบช้าลง

คุณสามารถค้นหา Bottleneck ได้แบบ Real-Time อีกด้วย

Network Tab:

• กรองและวิเคราะห์ Request ทุกตัวที่ App ของคุณเรียก
• ดู Headers, Cookies, CORS Issues และขนาดของ Response
• เหมาะมากสำหรับการ Debug APIs หรือปรับปรุงประสิทธิภาพการ Load Asset

Link: Chrome DevTools Overview

2. Terminal และ Tasks ที่เป็น Built-In ใน VS Code

https://code.visualstudio.com/docs/debugtest/tasks

ถ้าคุณต้องทำงานสลับไป-มาระหว่าง VS Code กับ OS Terminal ของคุณตลอดเวลา ซึ่งนั่นอาจทำให้คุณกำลัง “เสียสมาธิ” ไปทีละเล็กทีละน้อยโดยไม่รู้ตัว

Terminal ที่ฝังอยู่ใน VS Code จะช่วยให้คุณ:

• Run Shell ได้หลากหลาย (PowerShell, Bash, Zsh เป็นต้น)
• ใช้หน้าต่าง Terminal แบบแยก เพื่อ Run การ Build หรือ Test หลายงานพร้อมกัน
• สร้าง Automation สำหรับ Build หรือ Test ด้วย “Tasks” (ผ่านไฟล์ tasks.json)

ตัวอย่างการใช้งาน:

คุณสามารถตั้ง Shortcut แค่ปุ่มเดียว (เช่น Ctrl + Shift + B) เพื่อ Run Build Script ได้ทันที โดยไม่ต้องออกจาก Editor เลย

ดูรายละเอียดเพิ่มเติม: VS Code Tasks Guide

3. Windows PowerToys (หรือ macOS Automator)

https://learn.microsoft.com/en-us/windows/powertoys/

เครื่องมือเหล่านี้ “ซ่อนอยู่ตรงหน้า” ของคุณ ซึ่งทั้ง Windows และ macOS มีระบบ Automation เล็ก ๆ ที่ช่วยให้คุณประหยัดเวลาได้อย่างมาก

Windows PowerToys:

• FancyZones: จัด Window Layouts แบบกำหนดเองสำหรับ Multitasking
• PowerRename: เปลี่ยนชื่อไฟล์ในจำนวนมากพร้อม ๆ กันได้ด้วย regex
• Color Picker: ดูค่า Hex Codes ได้ทันทีจากทุกจุดบนหน้าจอ
• Keyboard Manager: สร้าง Shortcuts เป็นของตัวเองได้

ตัวอย่างการใช้งาน:

อยากให้ Editor กับ Browser เรียงหน้าจอในแบบเดิม ๆ ทุกครั้งใช่ไหม? คุณสามารถตั้ง FancyZone Layout เพียงแค่ครั้งเดียว จากนั้นก็สามารถใช้งานได้ตลอดไป

Download: PowerToys for Windows

macOS Automator:

• สร้าง Automation สำหรับงานที่ต้องทำซ้ำ ๆ เช่น Rename, Resize หรือ Compress ไฟล์
• เชื่อม Workflows เข้าด้วยกัน (เช่น Convert Screenshots → Move To Folder → Rename)

Tutorial: Getting Started with Automator

4. Terminal — สิ่งที่มักถูกมองข้าม

ไม่ว่าจะเป็น Bash, Zsh หรือ PowerShell ก็ตาม เชื่อไหมว่า Terminal ของคุณมีความสามารถมากกว่าที่คุณคิด

เครื่องมือเล็ก ๆ ที่ทรงพลัง:

• grep → ค้นหา Text ในไฟล์ได้ทันที
• curl → ทดสอบ APIs ได้ โดยที่ไม่ต้องใช้ Postman
• jq → จัดรูปแบบและสามารถ Filter JSON ได้โดยตรงจาก Terminal
• history | grep "command" → ค้นหาคำสั่งที่คุณเคยเรียกใช้ไปแล้วเมื่อสัปดาห์ก่อน

ตัวอย่างการใช้งาน:

คำสั่ง One-Liner นี้สามารถดึงจำนวน Repository ของผู้ใช้ได้ทันที โดยไม่ต้องเปิด GUI หรือ Browser แต่อย่างใด

เรียนรู้เพิ่มเติม: Command Line Crash Course

5. ความสามารถของ Git ที่มากกว่าแค่ commit และ push

Git น่าจะเป็นหัวใจหลักใน Project ของคุณ แต่มีโอกาสสูงมากที่คุณกำลังใช้ความสามารถของมัน เพียงแค่ประมาณ 20% เท่านั้น

ความสามารถของ Git ที่หลายคนอาจไม่ค่อยได้ใช้:

• git stash → เก็บการเปลี่ยนแปลงไว้ชั่วคราวโดยที่ไม่ต้อง Commit
• git bisect → หา Commit ที่ทำให้เกิด Bug
• git reflog → กู้คืน Commit ที่ “หายไป” หลังจาก Reset
• git blame → ดูว่าใครเป็นคนแก้ไขแต่ละบรรทัดของไฟล์ (และเมื่อใด)

ตัวอย่างสถานการณ์

คุณดันเผลอ Run คำสั่ง git reset –hard ไป คุณคงรู้สึกตกใจใช่ไหม?

แต่ไม่ต้องกังวลไป เพราะ git reflog จะแสดง Commit ก่อนหน้าทั้งหมด และคุณก็สามารถกู้กลับมาได้อย่างง่ายดาย

Resource: Pro Git Book (Free)

6. Chrome Lighthouse — เครื่องมือ Audit ที่ติดมากับ Browser

ไม่จำเป็นต้องเสียเงินใช้ Audit Tools ที่มีราคาแพง ๆ อีกต่อไป เพราะ Chrome เองก็มี Lighthouse ให้คุณได้ใช้อยู่แล้ว ซึ่งเป็นเครื่องมือที่ช่วยวิเคราะห์ Performance, SEO และ Accessibility ได้แบบฟรี ๆ

เพียงแค่เปิด DevTools → Lighthouse Tab → คลิก “Analyze page load”

คุณจะได้รับ Report ที่มีคำแนะนำเชิงปฏิบัติจริงเพื่อเพิ่ม Performance และ Best Practices

จุดเด่นของ Lighthouse

• ตรวจสอบปัญหา Accessibility ให้อัตโนมัติ
• วิเคราะห์ Mobile และ Desktop แยกจากกัน
• สร้าง Reports ที่สามารถแชร์ให้ Client หรือคนในทีมได้

ดูเพิ่มเติม: Lighthouse Docs

7. Clipboard History ของ Operating System

เชื่อว่ามันเป็นเครื่องมือช่วยชีวิตที่ Developer จำนวนไม่น้อย ไม่เคยเปิดใช้งานเลย

• Windows: กด Win + V → เปิด Clipboard History (เปิดครั้งเดียว แต่สามารถใช้งานได้ตลอด)
• macOS: ใช้ Command + Shift + V ร่วมกับเครื่องมืออย่าง Paste หรือ Clipboard Viewer ของระบบ

คุณสามารถ Copy ข้อมูลได้หลายรายการ แล้วนำมาวางเรียงต่อกันได้ตามลำดับ โดยไม่ทำให้เสียจังหวะการทำงาน

8. Debugging Tools ที่ซ่อนอยู่ใน Node.js

Node.js มาพร้อมกับความสามารถในด้านการ Debug อยู่แล้ว โดยไม่จำเป็นต้องพึ่งพา Debugger ภายนอก

ลองใช้ตามนี้:

หรือเชื่อม Node.js เข้ากับ Chrome DevTools:

จากนั้นเปิด chrome://inspect → Connect → Debug ผ่าน Chrome ได้ทันที

เรียนรู้เพิ่มเติม: Node.js Debugging Guide

สรุป

และนี่ก็เป็น 8 Dev Tools ใกล้ตัว ที่ Developer อาจยังไม่ค่อยได้ใช้จริงจัง เพราะการเพิ่ม Productivity ไม่จำเป็นต้องเริ่มจากการติดตั้ง Tools ใหม่เสมอไป เพียงแค่สำรวจและใช้ Dev Tools ใกล้ตัวให้เต็มประสิทธิภาพ คุณก็สามารถทำงานได้เร็วและฉลาดขึ้น โดยไม่ต้องเพิ่มค่าใช้จ่ายหรือทำให้มันซับซ้อนแต่อย่างใด

ที่มา: https://medium.com/

 

 

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

 

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

 

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

• 10 ทริค JavaScript สำหรับเขียน Code ให้เร็วและ Clean ยิ่งขึ้น
• 10 เทคนิค Browser DevTools ที่ Frontend Developer ควรรู้ไว้
• 10 เทคนิคที่ช่วยให้ Developer ใช้ Git ได้เก่งขึ้น