วิธีการสร้าง Public URL สำหรับการ debug localhost website บน มือถือ โดยใช้ ngrok

หลายๆคนที่สร้าง website แล้ว run บน URL ที่เป็น localhost อาจจะเคยเจอปัญหาที่อยากจะทดสอบ website ของคุณใน browser ที่อยู่บนมือถือจริง เพื่อ debug หรือ ดู console log ใน browser บนมือถือเครื่องนั้น บทความนี้จะช่วยคุณทำสิ่งนั้นเอง ลุยกันเลย!

หากเราอยากจะดู console logใน browser ของมือถือเครื่องจริง เราจะทำอย่างไรนะ?

ในบทความนี้เราจะ debug กันใน iPhone ที่ใช้ Safari เป็น browser โดยต่อเข้ากับเครื่อง Mac เพื่อที่จะดู log ใน Safari บนเครื่อง Mac อีกที โดยสิ่งที่จะต้องเตรียมมีดังนี้

บน iPhone

1. ต่อสายเชื่อม iPhone เข้ากับเครื่อง Mac ของเรา (*ในขั้นตอนนี้หากมี Popup ขึ้นมาให้คุณกดยืนยันว่าสามารถเชื่อถืออุปกรณ์ที่พึ่งเชื่อมต่อได้)
2. จากนั้นเข้า Setting >> Safari >> Advanced
3. Enable : Web Inspector

Enable : Web Inspector

บน Macbook

1. เข้า Safari
2. เปิด menu >> Setting >> Advanced
3. กด Enable : Show Develop menu in menu bar

Enable : Show Develop menu in menu bar

4. จากนั้นให้กลับไปดูที่ menu bar ด้านบน จะสังเกตเห็นว่ามี menu : Develop ขึ้นมาใหม่ ให้คุณกดเลือกที่เมนูได้เลย

5. จากนั้นคุณจะสังเกตเห็นว่ามี ชื่อ Device ที่คุณได้กำลังเชื่อมต่อกับ Mac อยู่ในขณะนี้ (*ในขั้นตอนนี้จะต้องมั่นใจว่าได้เชื่อมสาย Device ของคุณเข้ากับ Mac อยู่และเปิดใช้งาน Safari โดยกำลังเปิดอยู่ที่หน้าเว็บที่คุณต้องการจะทำการ debug)

Select your device

6. เมื่อเลือกไปที่ Device ของคุณ จะปรากฏเป็น URL ของ Web ที่คุณกำลังใช้งานอยู่ ณ ขณะนี้ ให้กดเลือก Web ที่คุณต้องการ (*หากไม่ขึ้นตัวเลือก ให้คุณตรวจสอบให้แน่ใจว่า หน้าจอของ Device ไม่ได้ดับไป หรือ กำลังเข้าใช้งาน Web อยู่หรือไม่)

7. จากนั้นจะมีหน้าต่างใหม่ปรากฏขึ้นมา เป็นหน้าต่าง Web inspector ซึ่งคุณจะสามารถ debug ดู log ต่างๆ หรือ ตรวจสอบ element ได้เหมือนการ debug Browser บนคอมพิวเตอร์ตามปกติ

Web inspector

แล้วเราจะเปิด localhost URL บนมือถือของเราได้ยังไง?

โดยปกติแล้ววิธีที่ Basic ที่สุดคือ การเข้าผ่าน IP address เราจะต้องให้มือถือของเราเชื่อมต่อ wifi อันเดียวกันกับบนเครื่องคอมพิวเตอร์ที่ run website อยู่ จากนั้นเราจึงจะใช้ IP address ของเครื่องคอมพิวเตอร์ของเรานั้นเป็น URL สำหรับเปิด website บนมือถือได้ เช่น

Computer มี IP address = 192.168.1.30

พอไปเปิดบนมือถือ เราก็แค่เข้าเว็บและพิมพ์ URL เป็นเลข IP address และต่อด้วย port ที่กำลัง run อยู่

สมมติว่าเราใช้ port 3000 อยู่ URL ที่เราต้องใช้ก็คือ 192.168.1.30:3000 นั่นเอง

แต่วิธีนี้จะมีข้อเสียอยู่อย่างนึงคือ จำเป็นจะต้องต่อ wifi อันเดียวกันเท่านั้น!!

ในบทความนี้เราจึงมีอีกวิธีมานำเสนอ นั้นก็คือ…

การสร้าง public URL สำหรับ localhost ด้วย ngrok

public URL นี้เราจะใช้เพื่อที่จะชี้ไปที่เครื่องคอมพิวเตอร์ของเรา แล้วให้มือถือ access website ในเครื่องของเราผ่าน public URL นั้น ด้วย วิธีนี้เราจึงไม่จำเป็นต้องต่อ wifi อันเดียวกันกับเครื่องคอมพิวเตอร์ของเราอีกต่อไป

ซึ่ง Tool ในการสร้าง public URL ที่เราจะใช้กันในวันนี้มีชื่อว่า ngrok

งั้นก่อนอื่นเรามาเริ่ม install ngrok กันเลย ลุย!

1. Download และ Install ngrok ถ้าเครื่องของคุณมี homebrew อยู่แล้ว สามารถใช้คำสั่งนี้ได้เลย

brew install ngrok/ngrok/ngrok

หรือสามารถ Manual download/install ได้ที่ https://ngrok.com/download

2. กดเข้าที่ลิงก์นี้ https://dashboard.ngrok.com/ (Sign up หากคุณยังไม่มีบัญชีเข้าใช้งาน)

3. เมื่อ Sign In เข้ามาแล้วให้ เลือก menu : Getting Started >> Setup & Installation

4. ดูตรงหัวข้อ Connect your account จะมี command สำหรับ config token ของคุณ >> copy command ดังกล่าวมา

5. เปิด Terminal บนเครื่องของคุณให้ run คำสั่งที่พึ่ง copy มาได้เลย

6. หลังจากนั้นคุณก็จะสามารถใช้คำสั่งนี้

ngrok http 3000

เป็นการ Create Public URL ของ Localhost port ที่ได้ระบุไป (ในตัวอย่างคือ port 3000 นั้นเอง) เมื่อ run คำสั่งเสร็จแล้ว จะได้ URL ที่เป็น Public ที่คุณสามารถส่งให้ ทีมงานของคุณสามารถร่วมทดสอบงาน หรือลองเล่น Website ของคุณได้ง่ายๆเลย

และนี่คือผลลัทธ์หลังจากที่เราเอา Public URL ที่ได้ไปใช้นั้นเอง

จากขั้นตอนการทำ Public URL เพื่อเชื่อมต่อไปยัง localhost website ที่อยู่บนเครื่องคอมพิวเตอร์ของเรา และ การทำให้ Safari บนเครื่อง Mac สามารถแสดง log ของมือถือเราได้ ด้วยวิธีนี้ก็จะทำให้การ debug บนมือถือเครื่องจริงของคุณผู้อ่านง่ายขึ้น และแถมยังสามารถ แชร์ URL นั้นให้กับทีมงานท่านอื่นๆช่วยทดสอบ localhost ของเราอีกด้วย