Skellar Dev Log #3: 邏輯視覺化

Corix RID

更新於 2025/09/13發佈於 2025/09/13閱讀時間約 8 分鐘

最佳的學習環境

我釋出最初版的 PR 式實境學習流程後，最多人回饋的點就是：對初學者來說門檻太高。

的確，Coding 領域本身相對困難，用了擬真的環境只有提升學習的真實性，並沒有降低學習門檻。就算加入了遊戲化要素也只是提升使用者的興趣，並沒有讓他變簡單。

One shoe doesn't fit all。初學和進階需要的學習完全不同。因此我重新定義了學習路徑：

初學：低門檻，用明確易懂的視覺、圖像化和生活連結來讓使用者踏入 Coding 領域
進階：擬真場景，用原本的 mission 式的題目去讓使用者模擬真實商務場景的 contribute 流程。

Skellar Code - Starters

我將這兩階段分成不同的學習模式：

Skellar Code - Starters：用豐富直觀的視覺化和簡單的任務，了解程式語言基本運作原理
Skellar Code - Contributors：用真實的專案場景，完成真實需求，並通過 PR 驗證

我參考了幾種不一樣的初學者 coding 學習平台

Brilliant.org
Scratch
freeCodeCamp
Codecademy
Khan Academy
Udacity
Tynker
CodeMonkey

我發現「視覺化」是降低們檻的關鍵，而他們主要聚焦在這幾種視覺化：

視覺化 Logic Flow

如 Scratch 本身，必要，但當 components 變多，反而讓整段「程式」過於龐大而難懂，維護起來也複雜。

Solution: VSCode Debugger。既然要逐行顯示執行順序和流程，那麼直接讓執行過程和 Debugger 結合可以說是完美方案：直觀、擴充性好、減少開發成本。

視覺化 Values & Data Manipulation

許多初學者對變數操作感到困惑，例如：

a = 3 之後為什麼可以再宣告 a = 5 ？

a + 3 為什麼不會改變變數，要用 a += 3？

稍微複雜一點的程式就會因為「中間值」看不到而陷入 Debug 地獄。

Solution: Data and Expression Visualizer（DEV）。

在 DEV 裡，apple_count = 3 會顯示一個箱子，裡面放 3 個蘋果；當運算子執行時則呈現動畫。這比傳統的變數樹狀結構直觀得多。

VSCode Extension 的製作與瓶頸

VSCode Extension 的開發是由官方的 TypeScript yo package 製作的，為了呈現 DEV webview 介面，獨立出了一個 Vite + ReactJS 的專案來開發 webview 內容。

當使用特定 Command 時，extension 會透過幾個不同的資料來源來渲染圖像化的執行過程

Debugger Adapter Protocol (DAP)

VSCode Debugger 提供了一個跨語言的斷點資料結構，讓 extension 可以拿到執行環境、現在有哪些變數、變數值等資料。

但透過 DAP 拿到的資料只有當下的 snapshot，想要知道現在是不是在一個 for loop iteration 或 if else block 中是不夠的，因此我們還需要一個資料來源

Abstract Syntax Tree (AST)

AST 能靜態解析程式結構，例如：

哪些區塊是迴圈
哪些是條件判斷
哪些是函式呼叫

將 AST 與 DAP 的 snapshot 合併，就能同時看到「程式架構」與「執行狀態」。這讓 DEV 得以動畫化還原整個流程。

目前我可以標示「在一個 for loop 中」，但還缺「第幾次迭代」的 pointer。如果 iterable 沒有重複值，可以直接比對 target 值在 iterable 的 index。但當 iterable 含有重複元素時，單靠 DAP + AST 還是無法精準定位。

這時候，就需要 更底層的手段：Instrumentation。

Instrumentation

監控植入，是在程式開始前， inject 一段針對程式碼的執行過程監控的追蹤程式

透過 DAP 的 session.customRequest('evaluate') 功能，我們可以在執行 user 執行前 inject 追蹤程式碼

為了實現 for loop 中的迭代次數，我們從 injection 中加入了一段 tracing，只要當前的 instruction 是 FOR_ITER，我們就找出該行的 loop list 和 loop var，並把 counter + 1，並將這個變數 expose 到 global。

# structure: __daps_progress[list_name][var_name] = index
__daps_progress: Dict[str, Dict[str, Any]] = {}

def trace_function(frame, event, arg):
    # we still return the tracer to continue tracing in nested frames
    if event == "line":
        try:
            filename = frame.f_code.co_filename
            lineno = frame.f_lineno
            source_line = linecache.getline(filename, lineno).rstrip()
            print(f"Tracing line {lineno}: {source_line}", flush=True)
        except Exception:
            return trace_function

        if _is_for_line(source_line):
            ...
            __daps_progress[loop_list][loop_var]['index'] += 1