Python 視覺化工具網站 - Python Tutor

閱讀時間約 4 分鐘
對於程式的初學者而言,理解程式的流程、迴圈的進行、或是變數的變化會需要一定程度將程式在腦中進行運算的能力,要一段時間熟悉與適應,尤其是當程式執行的結果不如預期時,往往是計算的過程和自己所想像的不同,這時又更難靠自己的能力找出錯誤。因此,這邊要介紹的這個工具可以將程式執行的過程逐行將變數的變化視覺化地呈現出來,幫助程式設計者理解。
這個工具網站名稱叫 Python Tutor,以下是這個網站的連結:
https://pythontutor.com/
點進去後會來到這個畫面,點擊「Start writing and visualizing code now」後即會開啟可以編寫程式的頁面。
Python Tutor
在此頁面中可以選擇程式語言的種類,可以看到它有支援 Python、JavaScript、C、C++、Java 等,這裡以 Python 做為說明。
Python Tutor 程式輸入頁面
我們從 for 迴圈一文中找一段程式碼貼上,點選「Visualize Execution」。
Python Tutor 程式輸入頁面
接著,我們便可以點選「Next >」單行執行程式,或是「< Prev」回到上一步、「<< First」回到第一行、「Last >>」跳到最後一行,也可以直接拉動捲軸來執行程式。行數旁邊的深色箭頭會指示下一步要執行哪一行,淺色箭頭則是剛執行完的行數。右方藍底的「Frames」會顯示目前有哪些變數,黃底的「Objects」則是變數所指向的容器空間。
單步執行
在執行的過程中,可以看到變數 i 由 1 不斷往上加,當滿足條件「i % 2 == 0」時直接進入下一個迴圈,若不滿足則會將 i 此時的數字做為元素附加到串列 odd_list 後面,清楚地將每行程式的執行結果以視覺化的方式展示出來。
對於一些較為複雜的程式,例如假設我要在網路上搜尋一個關於 Pascal's triangle 的演算法,就可以將此段程式碼貼到 Python Tutor 上,以視覺化的方式協助我們理解這段程式碼。
Pascal's triangle
程式視窗下方的「Customize visualization」可調整一些視覺化的顯示方式,以及是否顯示某些 Frames 或 Objects。
Customize visualization
最下方的「Generate permanent link」與「Generate embed code」可產生當前頁面的連結與嵌入代碼,做為分享與嵌入網站內使用。
Generate permanent link 與 Generate embed code
以上就是 Python Tutor 的使用方式,善用這個網站相信對於程式的理解與除錯都會有很大的幫助。
avatar-img
47會員
36內容數
留言0
查看全部
avatar-img
發表第一個留言支持創作者!
Wei-Jie Weng的沙龍 的其他內容
在上一節介紹了 JSON 資料的基本架構後,我們將改寫並擴充密碼產生器程式,讓它能夠藉由 JSON 的資料結構完成帳密搜尋的功能。
JSON的全名叫JavaScript Object Notation,是由Douglas Crockford所設計的一種資料格式,最初應用在JavaScript程式語言中,做為一種資料交換的格式,而後被廣泛運用在Web開發與NoSQL資料庫,現今已成為一種重要的資料格式。
不管你是程式的新手或老手,不管你是不是第一天寫Python程式,在編譯或執行時絕對有出現程式錯誤或異常的時候,也就是俗稱的「bug」,這對於程式編譯人員是好事,你可以在程式撰寫階段就事先排除這些異常,或是加上捕捉異常的程式區段以及處理程序,讓程式即使出現異常也可以繼續執行。
在先前的文章中,我們曾經實做過文字介面版本的密碼產生器,這篇文章中,我們將添加新的功能,包括記錄密碼使用場域的名稱、網址、帳號等,並能夠將以上記錄存檔,當然最重要的是將它轉換成友善的圖形介面。
繼上一篇文章介紹了多種tkinter的視窗元件後,這篇我們再來討論三種視窗元件的配置方法以及優缺點,以適當移動各個元件到視窗中指定的位置,讓整個視窗版面的配置看起來更合理且美觀。
之前的文章中介紹過了Turtle Graphics,它是架構於tkinter模組之上以實現基本圖形介面的繪圖模組,這篇文章就來說明tkinter模組常用元件(widget)的基本用法,以及如何用它來設計出一個具有圖形使用者介面(Graphical User Interface, GUI)的程式。
在上一節介紹了 JSON 資料的基本架構後,我們將改寫並擴充密碼產生器程式,讓它能夠藉由 JSON 的資料結構完成帳密搜尋的功能。
JSON的全名叫JavaScript Object Notation,是由Douglas Crockford所設計的一種資料格式,最初應用在JavaScript程式語言中,做為一種資料交換的格式,而後被廣泛運用在Web開發與NoSQL資料庫,現今已成為一種重要的資料格式。
不管你是程式的新手或老手,不管你是不是第一天寫Python程式,在編譯或執行時絕對有出現程式錯誤或異常的時候,也就是俗稱的「bug」,這對於程式編譯人員是好事,你可以在程式撰寫階段就事先排除這些異常,或是加上捕捉異常的程式區段以及處理程序,讓程式即使出現異常也可以繼續執行。
在先前的文章中,我們曾經實做過文字介面版本的密碼產生器,這篇文章中,我們將添加新的功能,包括記錄密碼使用場域的名稱、網址、帳號等,並能夠將以上記錄存檔,當然最重要的是將它轉換成友善的圖形介面。
繼上一篇文章介紹了多種tkinter的視窗元件後,這篇我們再來討論三種視窗元件的配置方法以及優缺點,以適當移動各個元件到視窗中指定的位置,讓整個視窗版面的配置看起來更合理且美觀。
之前的文章中介紹過了Turtle Graphics,它是架構於tkinter模組之上以實現基本圖形介面的繪圖模組,這篇文章就來說明tkinter模組常用元件(widget)的基本用法,以及如何用它來設計出一個具有圖形使用者介面(Graphical User Interface, GUI)的程式。
你可能也想看
Google News 追蹤
Thumbnail
從範例學python的目標讀者: 針對剛進入的初學者,想學習Python語言。 有基礎本數學邏輯基礎即可。 從小遊戲學python的目標讀者: 針對已經有經驗的C/C++, Python, 或其他有程式基礎的讀者。 想實作一些小專案,從實做中學習如何分析需求、元件分拆、到底層實作
Thumbnail
在流程控制中,最常用的就是for loop 或是 while loop 語法了。 最常見的場景就是根據條件判斷式,重複執行特定的指令。 如果要在python寫出類似C/C++ for loop,可以怎麼寫呢? 透過索引去進行迭代 for var in range( start=0, sto
Thumbnail
想要使用python學習程式應該要怎麼開始呢? 首先就是要下載Python(程式語言)還有Pychar(整合開發環境,IDE)這兩個軟體。 在Google的搜尋欄位打上Python下載, 點選第一個Download Python。 第二步點選Download,選擇你的電腦系統。
Thumbnail
什麼是Python python是電腦程式語言的一種,如同python官方網站上的介紹 "Python是一種程式語,可讓你更快速地工作並更有效的整合系統"。簡單地說,就是你可用python這個程式語言去告訴電腦你想要作什麼,讓電腦來幫你完成你要作的事情。
Thumbnail
本文介紹了Python中的流程控制,包括if, elif, else語句,三元運算子,for和while迴圈,以及控制迴圈語句如break、continue和pass。透過範例程式碼,說明了如何使用這些語句和結構進行條件判斷,迴圈遍歷和控制程式流程。
Thumbnail
Python語法包括條件語句、迴圈、函數和變數的使用。條件語句如if、elif和else用於進行條件判斷,for和while是兩種主要的迴圈,def用於定義函數。變數可以被賦予數字或字符串,並可使用類型提示來指定變數的類型。註解可以是單行或多行,並可用於解釋函數或類的用途和作用。
Thumbnail
今天來介紹python的函式 函式在python中是非常重要的一環,因為到了後期,程式會越來越複雜。 而函式可以想成是容易管理的小程式,當我們需要使用時,只需呼叫即可。
在求學階段,你已經對代數的計算熟到不能再熟,所以變數(variable)對你來說應該不至於太陌生,先來看看以下這個例子:   
Thumbnail
Python 提供了一系列內建函式,其中一部分涉及數學和數學操作。 以下是一些常用的內建函式和數學相關的函式: 基本數學運算: abs(x): 返回 x 的絕對值。 result = abs(-5) print(result) # 輸出: 5 max(iterable) 和 min(
Thumbnail
宣告變數 變數是程式中用來儲存和表示數據的標識符號​,並將變數存放在某個記憶體位子 可以用ID的方法查找變數存在哪個記憶體,此方法有利於以後查找問題用。 在大多數程式語言中,變數需要事先聲明(宣告)並賦值。 而Python是一種動態類型語言,不需要顯式宣告變數類型,而是在賦值時自動進行推斷。
Thumbnail
從範例學python的目標讀者: 針對剛進入的初學者,想學習Python語言。 有基礎本數學邏輯基礎即可。 從小遊戲學python的目標讀者: 針對已經有經驗的C/C++, Python, 或其他有程式基礎的讀者。 想實作一些小專案,從實做中學習如何分析需求、元件分拆、到底層實作
Thumbnail
在流程控制中,最常用的就是for loop 或是 while loop 語法了。 最常見的場景就是根據條件判斷式,重複執行特定的指令。 如果要在python寫出類似C/C++ for loop,可以怎麼寫呢? 透過索引去進行迭代 for var in range( start=0, sto
Thumbnail
想要使用python學習程式應該要怎麼開始呢? 首先就是要下載Python(程式語言)還有Pychar(整合開發環境,IDE)這兩個軟體。 在Google的搜尋欄位打上Python下載, 點選第一個Download Python。 第二步點選Download,選擇你的電腦系統。
Thumbnail
什麼是Python python是電腦程式語言的一種,如同python官方網站上的介紹 "Python是一種程式語,可讓你更快速地工作並更有效的整合系統"。簡單地說,就是你可用python這個程式語言去告訴電腦你想要作什麼,讓電腦來幫你完成你要作的事情。
Thumbnail
本文介紹了Python中的流程控制,包括if, elif, else語句,三元運算子,for和while迴圈,以及控制迴圈語句如break、continue和pass。透過範例程式碼,說明了如何使用這些語句和結構進行條件判斷,迴圈遍歷和控制程式流程。
Thumbnail
Python語法包括條件語句、迴圈、函數和變數的使用。條件語句如if、elif和else用於進行條件判斷,for和while是兩種主要的迴圈,def用於定義函數。變數可以被賦予數字或字符串,並可使用類型提示來指定變數的類型。註解可以是單行或多行,並可用於解釋函數或類的用途和作用。
Thumbnail
今天來介紹python的函式 函式在python中是非常重要的一環,因為到了後期,程式會越來越複雜。 而函式可以想成是容易管理的小程式,當我們需要使用時,只需呼叫即可。
在求學階段,你已經對代數的計算熟到不能再熟,所以變數(variable)對你來說應該不至於太陌生,先來看看以下這個例子:   
Thumbnail
Python 提供了一系列內建函式,其中一部分涉及數學和數學操作。 以下是一些常用的內建函式和數學相關的函式: 基本數學運算: abs(x): 返回 x 的絕對值。 result = abs(-5) print(result) # 輸出: 5 max(iterable) 和 min(
Thumbnail
宣告變數 變數是程式中用來儲存和表示數據的標識符號​,並將變數存放在某個記憶體位子 可以用ID的方法查找變數存在哪個記憶體,此方法有利於以後查找問題用。 在大多數程式語言中,變數需要事先聲明(宣告)並賦值。 而Python是一種動態類型語言,不需要顯式宣告變數類型,而是在賦值時自動進行推斷。