Back to: HTML, CSS and JavaScript For Data People

0
1.2 เตรียมเครื่องมือ (VS Code / Browser / DevTools) | HTML CSS JS สำหรับ Data People
{ } HTML CSS JS สำหรับ Data People
บทที่ 1
2/6
บทที่ 1 · ตอนที่ 1.2

เตรียมเครื่องมือ (VS Code / Browser / DevTools)

ก่อนเริ่มพิมพ์โค้ดจริงในตอนหน้า เราต้องมี “โต๊ะทำงาน” ที่เหมาะสมก่อน ตอนนี้พาไปติดตั้งและตั้งค่าเครื่องมือ 3 อย่างที่จะอยู่กับเราตลอดทั้งคอร์ส

เวลาอ่าน ~24 นาที ระดับ: เริ่มต้น

ถ้าเทียบกับงาน Data พวกเราคงไม่ทำ analysis ด้วย Notepad แล้วรัน query แบบก็อปวางทีละบรรทัดใช่ไหมครับ เรามี Jupyter, VS Code, หรือ IDE ที่ช่วยให้ทำงานเร็วขึ้น เขียนเว็บก็เหมือนกัน

ตอนนี้เราจะติดตั้งเครื่องมือ 3 ชิ้นให้พร้อม แล้วทำความรู้จัก DevTools ในเบราว์เซอร์แบบลงลึกขึ้น กว่าตอนที่แล้ว เพราะมันจะเป็นเพื่อนซี้ตลอดคอร์สนี้เลยครับ

01ทำไมต้องใช้ Code Editor แทน Text Editor ธรรมดา

เราสามารถเขียนไฟล์ HTML ด้วย Notepad ธรรมดาก็ได้ในทางเทคนิค แต่มันจะเจ็บปวดมาก เพราะ:

  • ไม่มี syntax highlighting — โค้ดจะเป็นสีเดียวหมด หา tag ผิดยากมาก
  • ไม่มี auto-complete — ต้องพิมพ์ทุกตัวอักษรเอง พลาดง่าย
  • ไม่เตือนเวลาลืมปิด tag หรือวงเล็บ
  • ไม่มี extension เสริมที่ช่วยให้ preview หน้าเว็บได้ทันทีที่กด save

เครื่องมือที่คอร์สนี้แนะนำคือ Visual Studio Code (VS Code) เพราะฟรี ใช้งานได้ทั้ง Windows/Mac/Linux และเป็นเครื่องมือที่ทีม data และทีม engineer ส่วนใหญ่ใช้ร่วมกันอยู่แล้ว ถ้าใครเคยเขียน Python ด้วย VS Code มาก่อน ก็จะคุ้นเคยได้เร็วมาก

📎 หมายเหตุ

ถ้าใครใช้ Jupyter Notebook หรือ PyCharm อยู่แล้วและถนัดกว่า ก็สามารถใช้ต่อได้เช่นกัน หลักการเขียน HTML/CSS/JS จะเหมือนกันหมด ไม่ว่าจะพิมพ์จากโปรแกรมไหน แต่ตัวอย่างในคอร์สนี้จะอ้างอิงหน้าตาของ VS Code เป็นหลัก เพื่อความสอดคล้องกัน

02ติดตั้ง VS Code และ Extension ที่จำเป็น

ขั้นตอนติดตั้งแบบย่อ:

  1. ดาวน์โหลด VS Code จากเว็บไซต์ทางการ (code.visualstudio.com) แล้วติดตั้งตามระบบปฏิบัติการของเรา
  2. เปิด VS Code ขึ้นมา แล้วไปที่แท็บ Extensions (ไอคอนสี่เหลี่ยมด้านซ้าย)
  3. ค้นหาและติดตั้ง extension เหล่านี้:
Extension ที่แนะนำสำหรับคอร์สนี้ 
Live Server        → กด save แล้วเห็นผลในเบราว์เซอร์ทันที ไม่ต้อง refresh เอง
Prettier           → จัดฟอร์แมตโค้ดให้อ่านง่ายอัตโนมัติ (คล้าย Black ของ Python)
Auto Rename Tag    → แก้ tag เปิด แล้ว tag ปิดเปลี่ยนตาม ไม่ต้องแก้ 2 ที่
Thai Language Pack → เปลี่ยนเมนู VS Code เป็นภาษาไทย (เลือกใช้หรือไม่ก็ได้)

Extension ที่สำคัญที่สุดสำหรับคอร์สนี้คือ Live Server เพราะเวลาเราเขียน HTML/CSS/JS เราต้องการเห็นผลลัพธ์ทันทีเหมือนตอนรัน cell ใน Jupyter แล้วเห็นกราฟโผล่ขึ้นมา หลังติดตั้งเสร็จ วิธีใช้คือคลิกขวาที่ไฟล์ .html แล้วเลือก “Open with Live Server” เบราว์เซอร์จะเปิดขึ้นมาเอง และทุกครั้งที่เรากด save ไฟล์ หน้าเว็บจะ refresh ให้อัตโนมัติ

💡 เคล็ดลับ

ตั้งหน้าจอให้ VS Code อยู่ครึ่งซ้าย และเบราว์เซอร์ (ที่เปิดผ่าน Live Server) อยู่ครึ่งขวา จะได้เห็นทั้งโค้ดและผลลัพธ์พร้อมกันตลอดเวลา วิธีนี้จะทำให้เรียนคอร์สนี้เร็วขึ้นมากครับ

03เลือกเบราว์เซอร์ที่เหมาะกับการเรียน

แนะนำให้ใช้ Google Chrome หรือ Microsoft Edge เป็นหลัก เพราะทั้งสองตัวมี DevTools ที่ทรงพลังและอัปเดตบ่อย ส่วน Safari และ Firefox ก็ใช้ได้เช่นกัน แต่หน้าตาเมนูใน DevTools จะต่างจากตัวอย่างในคอร์สนี้เล็กน้อย

04รู้จัก DevTools แบบละเอียด

ตอนที่แล้วเราเปิด DevTools ผ่านมาแล้วครั้งหนึ่ง คราวนี้มาดูทีละแท็บที่จะใช้บ่อยตลอดคอร์สนี้ เปิดได้โดยกด F12 หรือคลิกขวา → Inspect

  • Elements — แสดง HTML และ CSS ของหน้าปัจจุบัน คลิก element ไหนก็เห็น style ที่กำหนดให้มันทันที ใช้บ่อยที่สุดตอนแก้ดีไซน์
  • Console — พื้นที่รัน JavaScript แบบสด ๆ และเป็นที่แสดง error เวลาโค้ดเราพัง เทียบได้กับ output cell ใน Jupyter ตอนโค้ด error
  • Network — แสดงทุก request ที่หน้าเว็บส่งออกไป (โหลดไฟล์ไหนบ้าง ช้าตรงไหน) มีประโยชน์มากตอนบทที่ 8 ที่เราจะดึงข้อมูลจาก API
  • Sources — ดูไฟล์ JS ต้นฉบับ และตั้งจุดหยุด (breakpoint) เพื่อ debug ทีละบรรทัด

💭 ลองคิดดู

แท็บ Console ใน DevTools จริง ๆ แล้วทำงานคล้ายอะไรที่เราคุ้นเคยในงาน Data มากที่สุด? ถ้านึกถึง Python interactive shell หรือ cell ใน Jupyter Notebook ที่พิมพ์โค้ดแล้วเห็นผลทันที นั่นแหละใกล้เคียงที่สุด — Console คือที่ที่เราพิมพ์ JavaScript แล้วเห็นผลลัพธ์ทันทีเหมือนกัน

05ทดสอบเครื่องมือทั้งหมดด้วยไฟล์แรก

ลองสร้างไฟล์ทดสอบเพื่อเช็คว่าทุกอย่างพร้อมใช้งาน:

ไฟล์ test.html 
<!DOCTYPE html>
<html lang="th">
<head>
  <meta charset="UTF-8">
  <title>ทดสอบเครื่องมือ</title>
</head>
<body>
  <h1>ถ้าเห็นข้อความนี้ แปลว่าเครื่องมือพร้อมแล้ว 🎉</h1>
</body>
</html>

บันทึกไฟล์นี้ไว้ที่ไหนก็ได้บนเครื่อง แล้วคลิกขวาเลือก “Open with Live Server” ถ้าเบราว์เซอร์เปิดขึ้นมาและเห็นข้อความ แปลว่าทุกอย่างพร้อมสำหรับตอนถัดไปแล้วครับ

สรุปตอนนี้

  • ใช้ VS Code เป็น code editor หลักตลอดคอร์ส เพราะฟรีและมี extension ที่ช่วยงานเว็บโดยเฉพาะ
  • Extension ที่ขาดไม่ได้คือ Live Server ทำให้เห็นผลลัพธ์ทันทีที่กด save
  • DevTools มี 4 แท็บหลักที่ใช้บ่อย: Elements, Console, Network, Sources
  • Console ใน DevTools ทำหน้าที่คล้าย interactive shell ที่พวกเราคุ้นเคยจากงาน Python
แบบฝึกหัด

ติดตั้งและทดสอบเครื่องมือของตัวเอง

โจทย์: 1) ติดตั้ง VS Code และ extension Live Server ให้เรียบร้อย
2) สร้างไฟล์ test.html ตามตัวอย่างด้านบน (พิมพ์เอง ไม่ก็อปวาง จะได้ฝึกมือ)
3) เปิดด้วย Live Server แล้วลองกด F12 เปิด DevTools ดูแท็บ Elements ว่าเห็นโค้ดของเราไหม
ดูแนวทางคำตอบ

ถ้าเปิด Live Server แล้วเห็นข้อความในเบราว์เซอร์ และกด F12 แล้วเห็น tag <h1> ของเราอยู่ในแท็บ Elements แปลว่าติดตั้งถูกต้องครบทุกขั้นตอนแล้ว ถ้ายังไม่เห็น ให้ลองปิดแล้วเปิด VS Code ใหม่ หรือเช็คว่าติดตั้ง extension Live Server สำเร็จหรือยัง

ควิซทบทวน

คะแนน: 0/0

1. Extension ตัวไหนที่ทำให้เห็นการเปลี่ยนแปลงในเบราว์เซอร์ทันทีที่กด save โดยไม่ต้อง refresh เอง

2. ถ้าอยากดูว่า tag HTML และ style CSS ของหน้าปัจจุบันเป็นยังไง ควรเปิดแท็บไหนใน DevTools

3. แท็บไหนใน DevTools ที่ทำงานคล้าย interactive shell ของ Python มากที่สุด

4. ปุ่มลัดที่ใช้เปิด DevTools บนคีย์บอร์ดคือปุ่มอะไร