基於Visual Studio Code擴充套件進行xDIVA視覺化工具之重構

以作者查詢圖書館館藏

、以作者查詢臺灣博碩士

、以作者查詢全國書目

、勘誤回報

、線上人數：27

、訪客IP：18.221.15.15

姓名

劉冠毅(Kuan-Yi Liu) 查詢紙本館藏

畢業系所

資訊工程學系

論文名稱

基於Visual Studio Code擴充套件進行xDIVA視覺化工具之重構

相關論文

★ 使用PolyTraceAid進行程式文件覆蓋率計算與分群	★ Support Visual Debugging in Electronic Design Automation Software by xDIVA
★ 設計與實作視覺化追蹤點以支援xDIVA進行程式動畫	★ Combine Internal Test Oracles and Capture/Replay GUI Testing for Precise Replay and Higher Validation Power
★ Dissimilarity of Polymorphic Execution Sequences	★ The Analysis of Capturing System Test Cases into Unit Test Cases
★ 動態延遲載入的測試覆蓋率	★ 建構於JMeter之自動化分散式壓力測試架構
★ 模組化因修改具耦合的程式碼所伴隨的成本漣漪	★ Design a Pluggable Architecture for Layout Algorithms in xDIVA
★ 重複性程式碼檢測之外掛模組設計	★ Visual Perception of Realistic Rendering in xDiva 3D Environment
★ Why and When GUI Test Automation Fails in Practice and Our Solutions to The Problem	★ Why and When GUI Test Automation Fails in Practice and Our Solutions to The Problem
★ Very High Precision Optical Character Recognition For Clean-Fixed-Sized True Type Characters	★ Enhance Korat by Branch Capability in Capture/Replay User Scenario to Industrial Test Case Automation

檔案

[Endnote RIS 格式]

[Bibtex 格式]

[相關文章]

[文章引用]

[完整記錄]

[館藏目錄]

[檢視]

[下載]

本電子論文使用權限為同意立即開放。
已達開放權限電子全文僅授權使用者為學術研究之目的，進行個人非營利性質之檢索、閱讀、列印。
請遵守中華民國著作權法之相關規定，切勿任意重製、散佈、改作、轉貼、播送，以免觸法。

摘要(中)

xDIVA（extreme Debugging Information Visualization Assistant）是過去在本實驗室開發已久的程式3D視覺化除錯工具，其主要目的為協助程式設計師在進行程式除錯時提供具體的形式與圖像來呈現程式之變數內容。xDIVA提供一個直觀的3D畫面來表達程式中變數的資料與其對應關係。
由於先前的xDIVA程式的各個模組皆為獨立的執行視窗，需要由使用者自行額外開啟xDIVA程式，並且需要在命令列對GDB（GNU Debugger）下指令來操作，使得使用者需要在一些視窗頻繁切換。又因為普遍的程式設計師往往會使用IDE（Integrated Development Environment）來開發程式，但目前xDIVA需要由額外的視窗開啟。且舊版xDIVA若要支援其他程式語言的視覺化所要的開發成本並不小。
VS Code（Visual Studio Code）為現今大多數程式開發者使用的IDE工具。本論文藉由舊有的xDIVA部分程式來與VS Code所提供的API進行整合，並重構xDIVA的核心程式，擴展xDIVA未來支援其他語言視覺化的靈活性，設計出一套能在VS Code中使用Debugger UI結合xDIVA來進行 3D視覺化功能的擴充套件，改善xDIVA的使用與提升未來擴充性。

摘要(英)

xDIVA(extreme Debugging Information Visualization Assistant) is a program 3D visualization debugging tool that has been developed in our laboratory for a long time in the past. Its main purpose is to assist programmers in providing specific forms and graphs to show the program’s data or variable’s content. xDIVA provides an intuitive 3D picture to present the variable data in the program and its corresponding relationship.
Since each module of the previous xDIVA programs are independent execution windows, users need to open several programs by themselves, and they need to manipulate GDB(GNU Debugger) in Command-Line Interface by using xDIVA. Switching frequently among several working windows which brings inconvenience for users. Nowadays, developers often use IDE(Integrated Development Environment) to develop software, however xDIVA’s user need to run xDIVA with other window. Supporting other language’s visualization is also a problem which brings high development cost to xDIVA.
Visual Studio Code is the most popular IDE nowadays. This paper integrates with part of xDIVA’s program and the API/UI provided by VS Code, and reconstructs the xDIVA program, also expands the flexibility of xDIVA to support other language’s visualization. This research combines Debugger UI provided by VS Code and xDIVA’s functionality, improves the availability and scalability of xDIVA.

關鍵字(中)

★ 程式視覺化
★ 視覺化除錯
★ 軟體除錯

關鍵字(英)

論文目次

摘要 i
Abstract ii
目錄 iii
圖目錄 v
表目錄 vii
一、緒論 1
二、研究背景 5
2-1 xDIVA 5
2-1-1 GDB Plugin 6
2-1-2 xDIVA Watch Dialog 7
2-1-3 Type Mapping Dialog 8
2-1-4 Evaluator 9
2-1-5 Viewer 10
2-2 Visual Studio Code 12
2-3 JavaScript簡介 13
2-3-1 Node.js 13
2-3-2 Electron 14
三、問題描述與分析 16
3-1 缺乏程式除錯圖形化介面 16
3-2 xDIVA Watch Dialog資訊不足 17
3-3 xDIVA擴充其他語言的不便 18
四、系統架構與設計 20
4-1 VS Code API 21
4-2 xDIVA VS Code Extension系統分析 22
4-3 Web Socket架構 26
4-4 xDIVA核心程式架構 27
4-4-1 Mapping Engine 28
4-4-2 Viewer Client 29
4-4-3 GDB Client 30
4-4-5 Variable Model 31
4-5 使用者介面架構 32
五、系統實現 34
六、討論與評估 38
5-1 透過DAP支援其他語言視覺化之可行性 38
5-2 xDIVA Extension與舊版xDIVA之評估 42
七、結論與未來展望 47
八、參考資料 48

參考文獻

[1] Y.-P. Cheng, J.-F. Chen, M.-C. Chiu, N.-W. Lai and C.-C. Tseng, “xDIVA: A Debugging Visualization System with Composable Visualization Metaphors,” in 23rd ACM SIGPLAN Conference on Object-oriented Programming Systems Languages and Applications, Nashville, TN, USA, 2008.
[2] “ATOM” [online]. Available: https://atom.io/. [Accessed 6 Jun. 2021]
[3] “Visual Studio Code” [online]. Available: https://code.visualstudio.com/. [Accessed 6 Jun. 2021].
[4] “GDB: The GNU Project Debugger” [online]. Available: https://www.gnu.org/software/gdb/. [Accessed 6 Jun. 2021].
[5] “Python” [online]. Available: https://www.python.org/. [Accessed 6 Jun. 2021].
[6] Y. Cheng, C. Ku, W. Pan, C. Yang and T. Lin, "Toward Arbitrary Mapping for Debugging Visualizations," in 2016 IEEE/ACM 38th International Conference on Software Engineering Companion (ICSE-C), Austin, TX, USA, 2016.
[7] “JSON” [online]. Available: https://www.json.org/json-en.html. [Accessed 6 Jun. 2021].
[8] “Unity” [online]. Available: https://unity.com/. [Accessed 6 Jun. 2021].
[9] “DDD - Data Display Debugger” [online]. Available: https://www.gnu.org/software/ddd/. [Accessed 6 Jun. 2021].
[10] “JavaScript” [online]. Available: https://developer.mozilla.org/zh-TW/docs/Web/JavaScript. [Accessed 6 Jun. 2021].
[11] “Node.js” [online]. Available: https://nodejs.org/en/. [Accessed 6 Jun. 2021].
[12] “V8 JavaScript engine” [online]. Available: https://v8.dev/. [Accessed 6 Jun. 2021].
[13] “libuv” [online]. Available: https://github.com/libuv/libuv. [Accessed 6 Jun. 2021]
[14] “Electron” [online]. Available: https://www.electronjs.org/. [Accessed 6 Jun. 2021].
[15] “Chromium” [online]. Available: https://www.chromium.org/Home. [Accessed 6 Jun. 2021]
[16] “Debug Adapter Protocol” [online]. Available: https://microsoft.github.io/debug-adapter-protocol/. [Accessed 6 Jun 2021]

指導教授

鄭永斌(Yung-Pin Cheng)

審核日期

2021-8-19

推文