หัวข้อ 5: เครื่องมือพัฒนาเว็บ

แนวคิดหลัก

นักพัฒนาเว็บไม่ได้เขียนโค้ดเพียงอย่างเดียว แต่ต้องใช้เครื่องมือช่วยตรวจสอบ แก้ปัญหา ทดสอบ API จัดการไฟล์ ติดตั้ง package และควบคุมเวอร์ชันของงาน เครื่องมือพื้นฐานจึงเป็นทักษะสำคัญตั้งแต่ช่วงแรกของการเรียน

Browser DevTools

Browser DevTools เป็นเครื่องมือที่ติดมากับ browser สมัยใหม่ เช่น Chrome, Edge และ Firefox

แท็บสำคัญ ได้แก่

  1. Elements: ตรวจสอบและแก้ HTML/CSS ชั่วคราว
  2. Console: ดู error, warning และทดลอง JavaScript
  3. Network: ตรวจสอบ request, response, status code และเวลาโหลด
  4. Sources: ดูไฟล์ JavaScript และตั้ง breakpoint เพื่อ debug
  5. Performance: วิเคราะห์ประสิทธิภาพการโหลดและการทำงานของหน้าเว็บ

VS Code

VS Code เป็น code editor ที่นิยมมากในการพัฒนาเว็บ เพราะเร็ว มี extension จำนวนมาก และทำงานร่วมกับ terminal/Git ได้ดี

Extension สำคัญ:

  1. Prettier: จัดรูปแบบโค้ด
  2. ESLint: ตรวจ style และข้อผิดพลาด JavaScript/TypeScript
  3. Live Server: เปิดหน้าเว็บพร้อม reload อัตโนมัติ
  4. Angular Language Service: ช่วยพัฒนา Angular
  5. GitLens: ช่วยดูประวัติ Git

Git Bash / Terminal

Terminal ช่วยให้ทำงานกับไฟล์ project และเครื่องมือ developer ได้รวดเร็ว

คำสั่งพื้นฐาน:

cd my-project
ls
mkdir web-course
touch index.html
git status
git add .
git commit -m "initial project"

บน Windows บางคำสั่งเช่น touch อาจไม่มีใน PowerShell โดยตรง สามารถใช้ New-Item index.html แทนได้

Node.js และ npm

Node.js ทำให้ JavaScript ทำงานนอก browser ได้ ส่วน npm ใช้ติดตั้ง package สำหรับ project

ตรวจสอบเวอร์ชัน:

node -v
npm -v

ตัวอย่างติดตั้ง package:

npm install express

Postman

Postman เป็นเครื่องมือทดสอบ API โดยไม่ต้องเขียน frontend ก่อน สามารถส่ง GET, POST, PUT, DELETE และดู response ได้สะดวก

ใช้ Postman เพื่อ

  1. ทดสอบ endpoint
  2. ส่ง request body
  3. ใส่ header เช่น Authorization
  4. ตรวจ status code และ response JSON
  5. บันทึกชุด request สำหรับใช้งานซ้ำ

กิจกรรม

ติดตั้งหรือเปิดใช้งานเครื่องมือหลัก ได้แก่ VS Code, Browser DevTools, Terminal, Node.js/npm และ Postman จากนั้นบันทึกภาพหรือผลลัพธ์เวอร์ชันของ node -v และ npm -v

แบบทดสอบหลังเรียน

  1. DevTools แท็บ Network ใช้ตรวจสอบอะไร
  2. Prettier และ ESLint ต่างกันอย่างไร
  3. git status ใช้ทำอะไร
  4. Node.js และ npm มีบทบาทต่างกันอย่างไร
  5. Postman เหมาะกับงานใดในการพัฒนาเว็บ

กลับสัปดาห์ที่ 1