COOL IT IDEAS AND STUFF

See the original english version Click here!

 

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 ได้เก่งขึ้น