更新日期: 2023 年 7 月 4 日
學程式語言的過程中，面對一大串的程式碼，你是否有閱讀上的困難？
想找個老師教你如何讀程式碼，了解程式是怎麼跑的？
需要非常仔細的程式碼解說教學？
關於這些問題，有個免費的程式語言家教可以幫你。
Python、Java、C、C++、Javascript、Ruby 六種程式語言，都可提供免費的程式碼解說。
幫你解析程式碼運作的流程，一步一步的講解，並且提供各個階段的結果，以視覺化的方式讓你馬上就懂。
程式語言家教 Python Tutor
首先，請你不要驚慌，儘管這個免費家教需要使用一點點英文，但基本上不需要閱讀英文文章或是聽、說英文，只要記得幾個單字，會點選按鈕及複製貼上即可。
就好像現在很多車子使用按鈕發動引擎，按鈕大多也只是寫個 START ，會讓你很驚慌嗎？
不會，對吧。
你只需要知道按鈕在哪，一樣可以開車，使用這個免費的程式語言家教也是一樣，你只需要知道如何貼上程式碼，啟動教學，讓家教幫你一行一行解析即可。
不需要口說、視訊、讀英文文章，都不用，只要貼上程式碼、按下按鈕。
來看看如何呼叫這個程式語言家教吧！
第一步-連線到 Python Tutor 網站
點選下方按鈕連結，或是在瀏覽器上輸入網址：pythontutor.com/。
進到 Python Tutor 網站後，你會看到下方的文字。
雖然都是英文的，但不用緊張，找到你所使用的程式語言名稱，點進去，便會進到教學頁面，會運用文字及圖像教學，完全不用視訊或英文口說。
又或者，使用瀏覽器的翻譯套件（例如在chrome瀏覽器安裝翻譯套件，直接翻譯頁面），將頁面轉換成繁體中文。
（本文以原文圖片解說，如果你把網頁翻譯成中文，就比照相對位置操作即可）
點選 Start visualizing your code now ，就會進入下圖的頁面，預設為 Python 語言，下拉選單可以選擇其他種類。
如果你是在首頁點選 Related services 那一行的程式語言，下拉選單只會有該程式語言，需要轉換語言，就到首頁點選其他語言。
第二步-貼上需要講解的程式碼
貼上你要解說的程式碼，必須是可以正常運轉的程式碼，如果有錯誤，會在貼上的區塊下方以紅字提醒。
貼好程式碼後，在下方的 Visualize Execution 灰色按鈕，字面的意思是視覺化執行，就是把你貼上的程式碼進行視覺化。
第三步-程式碼解說教學
點擊視覺化按鈕後，按鈕上方會顯示產生教學需要的秒數，稍等一下就會跳入教學頁面，如下圖。
進入程式碼解說教學，按下 Next 按鈕開始運作程式，紅色箭頭代表目前程式碼執行的位置，已經運作過的會用綠色箭頭表示。
頁面右下方區塊，解說程式是怎的跑的，會將框架與物件都說明清楚。
每一個步驟的解說都會在頁面的右邊顯示，右上角的方框是程式運作的結果，方框的右下角有個小灰點，將滑鼠游標移過去，可以縮放視窗大小。
其他的按鍵說明：
- Prev：上一步
- First：回到第一步
- Last：直接跳到最後一步
- step 4 of 57（此為例子）：程式碼總共 57 個步驟，目前在第 4 步。
這裡提供的數字是舉例，數值會因程式碼長短，及處於哪個階段而改變。 - generate permanent link：為這個程式碼教學產生一個網址。
產生網址類似把你貼上的程式碼存起來，下次輸入該網址便可直接看教學。 - generate embed code ：為這個程式碼教學產生嵌入代碼。
下方的影片，以英文說明如何使用 Python Tutor，並教你如何線上發問：
Python Tutor 是一個很實用的解說程式碼家教網頁，一步一步的帶著你看程式是怎麼運作。
本文中的教學圖片所舉的例子，是簡單的一段程式碼，基本上不太需要解說，但對於觀念不清楚的初學者來說，是很好的理解方式，像是不知道迴圈怎麼跑，使用 Python Tutor 便清楚明瞭。
除此以外，碰到比較複雜的程式碼看不懂，Python Tutor 更是一大救星。
上圖是稍微複雜一點的程式碼，有了 Python Tutor 這個程式語言家教的詳細的解說，對於梳理邏輯幫助很大，推薦給正在學習程式語言的你，以及需要詳細程式碼解說的朋友們。
延伸閱讀：
