請用此 Handle URI 來引用此文件:
http://tdr.lib.ntu.edu.tw/jspui/handle/123456789/60136
標題: | JavaScript使用DOM或jQuery API操作網頁中HTML元素之行為追蹤工具開發 On the Tool Development for Tracking the Behavior of JavaScript that Uses DOM or jQuery API to manipulate HTML Elements on Web Pages |
作者: | Chun-Yan Ho 何均晏 |
指導教授: | 莊裕澤 |
關鍵字: | HTML,JavaScript,DOM API,jQuery API,網頁開發,網頁除錯,Chrome擴充功能, HTML,JavaScript,DOM API,jQuery API,Web Development,Web Debug,Chrome Extension, |
出版年 : | 2016 |
學位: | 碩士 |
摘要: | 隨著網路技術之發展、網頁與使用者互動的需求日增,網頁前端開發越來越複雜,動輒包含數千甚至數萬行的JavaScript程式碼。對於網頁開發者而言,當頁面中的HTML元素,因為JavaScript的操作而產生非預期的反饋行為時,開發者往往很難從數千數萬行的JavaScript程式碼中,找出實際造成錯誤的程式碼。
本篇論文將以現有的JavaScript程式碼解析技術,透過實作一Chrome擴充功能,將網頁中的JavaScript程式碼轉換為Abstract Syntax Tree(AST),以AST的角度來模擬原本程式碼的行為,並在模擬解析AST的過程中,在適當的時機加入記錄程式碼資訊的邏輯判斷,任何使用DOM或jQuery API的JavaScript程式碼資訊(包括位於哪個檔案、原始碼行與列的範圍、以及原始程式碼字串),都會以頁面中的HTML元素為分類,動態地記錄下來。 藉由安裝並使用本研究所開發的Chrome擴充功能,網頁開發者追蹤頁面中的JavaScript程式碼將變得更有效率,以往必須尋遍所有程式碼的除錯過程,現在只需要在產生錯誤反饋行為的HTML元素上,過濾出真正造成錯誤的JavaScript程式碼即可。 In recent years, the technologies of web development evolve dramatically. Interaction with users is now an essential feature on every web page. Due to this circumstance, development of a web page is getting more and more complicated, usually involving thousands or even tens of thousands JavaScript code. It is hard for web front-end developers to find out possible errors from thousands of code, once there are some unexpected behaviors of HTML elements triggered by JavaScript on web page. In this thesis, we develop a Chrome Extension. We use this extension to parse all JavaScript code on web page into an Abstract Syntax Tree (AST). With the AST, we use our own parsers to parse the AST to simulate the behaviors of original web page, and we record information of JavaScript code (including file the code located in, location of the code in file, and the code text), which using DOM or jQuery API, grouped by HTML elements on web page while simulating. With the Chrome Extension this thesis developed, it becomes more efficient for web front-end developer to track the JavaScript code on web page. Web front-end developers is needless to search all JavaScript code on web page anymore. Instead, they can select specific HTML elements on page to get information of JavaScript code only related to the unexpected behaviors of web page. |
URI: | http://tdr.lib.ntu.edu.tw/jspui/handle/123456789/60136 |
DOI: | 10.6342/NTU201603800 |
全文授權: | 有償授權 |
顯示於系所單位: | 資訊管理學系 |
文件中的檔案:
檔案 | 大小 | 格式 | |
---|---|---|---|
ntu-105-1.pdf 目前未授權公開取用 | 17.06 MB | Adobe PDF |
系統中的文件,除了特別指名其著作權條款之外,均受到著作權保護,並且保留所有的權利。