ลงมือจริง: DevTools + playground

9 บทที่ผ่านมาเราเรียน concept HTTP + API ครบทุกชิ้น แต่ยังไม่เคย “เห็นของจริง” ที่วิ่งอยู่ในเว็บที่เราใช้ทุกวัน

บทสุดท้ายคือ ภาคปฏิบัติ ทำ 2 อย่าง

1. เปิด DevTools ของ browser ดู request จริงของ Facebook, YouTube, Google
2. ลอง ยิง request ด้วยตัวเอง ผ่าน widget ในหน้านี้ ไม่ต้องเขียน code

จบบทนี้จะมี “แว่น X-ray” ติดตัวไปตลอด เปิดเว็บไหนก็มองทะลุเห็นสิ่งที่เบื้องหลังทำงานอยู่

DevTools คืออะไร

• เครื่องมือ developer ที่ ติดมากับทุก browser (Chrome, Firefox, Edge, Safari)
• เปิดได้ฟรี ไม่ต้องติดตั้งอะไร
• รวมเครื่องมือหลายอย่าง: inspect HTML, debug JavaScript, ดู network request, วัด performance
• บทนี้เน้นแค่ tab เดียวคือ Network

เปิด DevTools ยังไง

• Windows/Linux กด F12 หรือ Ctrl + Shift + I
• Mac กด Cmd + Option + I
• อีกวิธี: คลิกขวาที่ไหนก็ได้บนหน้าเว็บ → เลือก Inspect (หรือ ตรวจสอบ)

หน้า DevTools จะแบ่งออกมาจาก browser เป็น panel ด้านล่างหรือด้านข้าง ถ้าเปิดครั้งแรกจะเห็น tab Elements เป็น default ให้ไปที่ tab Network

ลองเองกับเว็บที่คุ้น

นี่คือ exercise ที่แนะนำให้ลองทันทีหลังอ่านจบย่อหน้านี้

Exercise 1: เปิด YouTube

1. เปิด youtube.com ใน tab ใหม่
2. กด F12 เปิด DevTools
3. ไปที่ tab Network
4. กด refresh หน้า (F5 หรือ Cmd+R)
5. จะเห็น request วิ่งเข้ามาเยอะมาก (30-200 request ต่อ 1 หน้า)
6. มองหา request ที่ Type เป็น xhr หรือ fetch พวกนี้คือ API call
7. คลิก 1 request แล้วดู Headers, Payload, Response

Exercise 2: สังเกต behavior

ขณะ tab Network เปิดค้างไว้ ลอง scroll feed, เล่นวิดีโอ, คลิก like

• Scroll → เห็น request ใหม่โผล่มาเรื่อยๆ (loading data เพิ่ม)
• Click like → 1 request (น่าจะเป็น POST)
• Play video → request ของ chunk video ทยอยโหลด

คุณจะเริ่มเห็นว่าทุก click ทุก scroll = HTTP request ที่วิ่งอยู่เบื้องหลัง ไม่มี “เวทมนตร์” อะไรเลย ทุกอย่างคือสิ่งที่เรียนมาใน 9 บทที่ผ่านมา

สิ่งที่ต้องสังเกตในทุก request

• Method GET? POST? PATCH? (บท 4)
• URL path + query string (บท 2)
• Status 200? 304? 404? (บท 5)
• Content-Type JSON? HTML? image? (บท 6, 7)
• Authorization header มี token ไหม (บท 9)
• Request body ส่งอะไรไป (บท 7)
• Response body ได้อะไรกลับ

ยิง request ด้วยตัวเอง (ไม่ต้องเขียน code)

widget ข้างล่างคือ mini-Postman ในหน้านี้ กด preset แล้วกด Send ยิง public API จริงได้เลย

แนะนำ Public API ฟรีให้ลอง

• api.github.com/users/{username}ข้อมูล user ของ GitHub เช่น api.github.com/users/cryptothedev
• pokeapi.co/api/v2/pokemon/{name}ข้อมูลโปเกมอน พร้อม stat, type, ability
• restcountries.com/v3.1/name/{country}ข้อมูลประเทศทั่วโลก
• dog.ceo/api/breeds/image/randomรูปหมาสุ่ม
• api.quotable.io/randomคำคมสุ่ม
• jsonplaceholder.typicode.com/postsfake blog posts สำหรับทดลอง

ทุกตัวข้างบนใช้ฟรี ไม่ต้อง auth เปิดใน browser address bar ก็ได้ (GET) หรือใส่ใน widget ข้างบน

คำศัพท์จากบทนี้

• DevTools เครื่องมือ developer ใน browser กด F12 เปิด
• Network tab แสดง HTTP request ทุกตัวที่ browser ส่ง
• Fetch/XHR ประเภท request ที่เป็น API call (ไม่ใช่ HTML/CSS/image)
• Preserve log option ให้ request เก่าไม่หายเวลาเปลี่ยนหน้า
• Postman / Insomnia / curl tool เฉพาะทางสำหรับทดสอบ API
• Public API API ฟรีที่เปิดให้ทุกคนเรียกได้

สรุปทั้งคอร์ส

10 บทที่ผ่านมาเราเดินทางจาก “HTTP คืออะไร” ไปจนถึง “ยิง request จริงได้เอง”

1. HTTP = ภาษาที่ client กับ server ใช้คุยกัน
2. URL = ที่อยู่ของ resource ที่อยากได้
3. Request/Response = text 3 ส่วน (start line + headers + body)
4. Method = verb บอกว่าจะทำอะไร
5. Status code = 3 หลักบอกผลการขอ
6. Headers = metadata ข้างๆ body
7. Body + JSON = payload จริงที่แลกเปลี่ยน
8. API = ประตูให้ program คุยกัน REST = style ยอดนิยม
9. Auth + HTTPS = 2 ชั้นความปลอดภัย
10. DevTools + playground = เห็นของจริง ลองด้วยตัวเอง

ทุกเว็บ ทุก app ทุก API ที่คุณใช้ในชีวิตประจำวัน ทำงานด้วยสิ่งที่เรียนมา 10 บทนี้ ตอนนี้คุณมองทะลุเห็นเบื้องหลังได้แล้ว

ถ้าอยากต่อยอดสู่การเป็น developer เปิด Reveal “ทางเดินต่อไป” ข้างบน ถ้าแค่อยากรู้เพื่อเข้าใจโลก digital รอบตัว แค่นี้ก็เกินพอแล้ว

ขอบคุณที่เรียนจนจบ