กลับไปหน้ารวมไฟล์
portable-web-debugger-for-all-platforms-f0675c.md

ชื่อโปรเจกต์: Portable Web Debugger พกพา ใช้ได้ทุกแพลตฟอร์ม (หล่อเท่สุดๆ)

เคยป้ะ? อยากรู้ว่าโปรเจกต์ที่ทำอยู่มันทำงานยังไง แต่ดันไม่อยากนั่งแกร่วอยู่หน้าคอมเพื่อรอจังหวะที่บั๊กจะโผล่ ถ้าเป็นงั้นน้องต้องจัด Web Debugging ตัวนี้ไปใช้แล้วล่ะ ตามรายละเอียดด้านล่างเลย...

แค่ตั้งค่า Serial Debugger แล้วรันแอปพกพาตัวนี้ บอร์ดน้องก็จะเทพทันที เพราะมันจะทำให้เข้าถึง Board ผ่านอุปกรณ์ไหนก็ได้ที่เปิดเว็บได้ จะใช้งานในวงแลนหรือรีโมทมาดูจากข้างนอกก็ได้ แถมแชร์ให้เพื่อนช่วยดูพร้อมกันหลายคนก็ยังไหว จัดไปวัยรุ่น!

หรือน้องจะหิ้ว Board กับตัวแอปไปเปิดเครื่องอื่นก็ทำได้สบายๆ เอาไปโชว์งานให้เพื่อนดู หรือพรีเซนต์ให้พี่ๆ ในออฟฟิศดูว่าเราเทพแค่ไหนก็ได้ หรือจะรีโมทเข้ามาเช็คงานตอน Work from Home ก็ยังได้ สบายใจเฉิบ

วิธีการเซ็ตอัพ

การตั้งค่าก็เหมือนกับ Serial Debugger ปกติเลย ทั้งเรื่องเขียน Code และการ Build / Upload สเต็ปเดิมเป๊ะ

แถมให้อีกนิด: อย่าลืมไปติ๊กเปิดออปชัน vMicro > Debugging > Export Web Debugger (Experimental) ด้วยล่ะ

เสร็จแล้วก็ Build และ Upload ลง Board ตามปกติเลยน้อง

ลิงก์เพิ่มเติมสำหรับออปชัน Web Debugger หลัง Upload เสร็จ

เดี๋ยวจะมีลิงก์โผล่มาที่หน้า Output ให้น้องไปปรับแต่งพวก Port หรือ Address ได้ตามใจชอบเลย จากนั้นก็รัน Script เพื่อเปิด Web Server แล้วก็เปิดดูใน Browser บนคอมได้เลย ง่ายจัด!

มีวิดีโอตัวอย่างให้ดูด้านล่างนะ ส่วนรายละเอียดลึกๆ เข้าไปดูเพิ่มได้ที่เว็บของ Visual Micro เลย

Youtube: ไกด์การใช้งาน Web Based Debugger

ไปให้สุดกว่าเดิม

เครื่องมือตัวนี้เขามีการอัปเดตกันตลอดนะน้อง เดี๋ยวพวกฟีเจอร์ใหม่ๆ อย่าง Dashboard เท่ๆ หรือ Chart สวยๆ จะตามมาในเร็วๆ นี้แน่นอน คอยเช็คอัปเดตกันให้ดีล่ะ

Export Web Debugger (Experimental)

Visual Micro Website

ข้อมูลเทคนิคแบบจัดเต็ม

อุปกรณ์ตรวจเช็คงานทางไกลแบบข้ามแพลตฟอร์ม

โปรเจกต์ระดับเทพตัวนี้จะเปลี่ยน Arduino ของน้องให้กลายเป็น "Wireless Diagnostic Bridge" (สะพานวิเคราะห์ไร้สาย) ที่ช่วยให้ Debug งานผ่าน Browser บนอุปกรณ์อะไรก็ได้

  • ใช้งานร่วมกับ Visual Micro: สร้างด้วย Extension Visual Micro บน Visual Studio ซึ่งช่วยให้น้องเขียน C++ ระดับมือโปร และปรับแต่ง Firmware ให้ทำงานได้เร็วปรี๊ด
  • HTTP/WebSocket Debugging Stream: ตัว Arduino (พวก ESP8266/ESP32) จะทำหน้าที่เป็น Local Access Point คอยเก็บ Serial Log จากอุปกรณ์เป้าหมาย แล้วยิง Stream ไปโชว์บน Dashboard สวยๆ ใน Browser

ประสิทธิภาพ

  • Zero-Lag Telemetry: ส่งข้อมูลไวแบบไม่มีหน่วง เห็นค่า Variable และการใช้ Memory แบบ Real-time ช่วยให้น้องหาบั๊กหน้างานได้ไวขึ้นเยอะ โดยไม่ต้องมานั่งต่อสาย Debugger ให้วุ่นวาย ห้ามทำช็อตนะตัวนี้!

ข้อมูล Frontmatter ดั้งเดิม 

title: "Portable Web Debugger for All Platforms"
description: "Serial Web Debugging can be used with shared sessions, breaks, watches and charting, you can share your project anywhere with one solution.."
author: "arduinocc"
category: ""
tags:
  - "debugging tools"
  - "internet of things"
  - "visual micro"
views: 4958
likes: 2
price: 299
difficulty: "Easy"
components:
  - "1x Arduino UNO"
tools: []
apps:
  - "1x Visual Micro"
  - "1x Visual Studio 2017"
  - "1x Arduino IDE"
downloadableFiles:
  - "https://projects.arduinocontent.cc/070d49ca-81bd-460e-a61d-cb1d595657cd.ino"
  - "https://projects.arduinocontent.cc/cf25359b-f976-4874-af89-6c6423bfe228.ino"
  - "https://projects.arduinocontent.cc/070d49ca-81bd-460e-a61d-cb1d595657cd.ino"
documentationLinks: []
passwordHash: "5af77277a614f37525032256444e31b111e52a65d5afdc6f3d57668b1c7ff70e"
encryptedPayload: "U2FsdGVkX1+M0UQ2c0tbKOwD5tTAtHsrBPzv3tSBeTv36FVZ48qz3cjUIERW+27SQWEqhSXQsS4Y31y0baGgYlbIckVkiETQ6DXXUMOtf4KMI8CA3b6lvkDeUqudoknMOiTRFiIPWEZvAUHjiBlhoQ=="
seoDescription: "Portable Web Debugger for Serial Web Debugging with shared sessions, breaks, and charts. Share your project on any platform."
videoLinks:
  - "https://www.youtube.com/embed/axNZlcCpt0U"
heroImage: "https://cdn.jsdelivr.net/gh/bigboxthailand/arduino-assets@main/images/projects/portable-web-debugger-for-all-platforms-f0675c_cover.jpg"
lang: "th"