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)

指導教授 ： 莊裕澤

國立臺灣大學/管理學院/資訊管理學研究所/碩士(2016年)

https://doi.org/10.6342/NTU201603800

摘要

隨著網路技術之發展、網頁與使用者互動的需求日增，網頁前端開發越來越複雜，動輒包含數千甚至數萬行的JavaScript程式碼。對於網頁開發者而言，當頁面中的HTML元素，因為JavaScript的操作而產生非預期的反饋行為時，開發者往往很難從數千數萬行的JavaScript程式碼中，找出實際造成錯誤的程式碼。

本篇論文將以現有的JavaScript程式碼解析技術，透過實作一Chrome擴充功能，將網頁中的JavaScript程式碼轉換為Abstract Syntax Tree（AST），以AST的角度來模擬原本程式碼的行為，並在模擬解析AST的過程中，在適當的時機加入記錄程式碼資訊的邏輯判斷，任何使用DOM或jQuery API的JavaScript程式碼資訊（包括位於哪個檔案、原始碼行與列的範圍、以及原始程式碼字串），都會以頁面中的HTML元素為分類，動態地記錄下來。

藉由安裝並使用本研究所開發的Chrome擴充功能，網頁開發者追蹤頁面中的JavaScript程式碼將變得更有效率，以往必須尋遍所有程式碼的除錯過程，現在只需要在產生錯誤反饋行為的HTML元素上，過濾出真正造成錯誤的JavaScript程式碼即可。

關鍵字

HTML ； JavaScript ； DOM API ； jQuery API ； 網頁開發 ； 網頁除錯 ； Chrome擴充功能

並列摘要

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.

並列關鍵字

HTML ； JavaScript ； DOM API ； jQuery API ； Web Development ； Web Debug ； Chrome Extension

參考文獻

Ariya, H. (2012). Esprima. Retrieved from Esprima: http://esprima.org

Chai.js Assertion Library. (2016). Chai Assertion Library. Retrieved from Chai Assertion Library: http://chaijs.com

Dave, H., Ingvar, S., Mike, S., Michael, F., Sebastian, M., & Kyle, S. (2015). The ESTree Spec. Retrieved from The ESTree Spec: https://github.com/estree/estree

Douglas, C. (2008). Appendix A: Awful Parts. In C. Douglas, JavaScript: The Good Parts. O’Reilly Media, Inc.

Douglas, C. (2008). Functions. In C. Douglas, JavaScript: The Good Parts. O’Reilly Media, Inc.