A Tool for Syntactic Dependency Analysis on the Web Stack

One of the most common errors developers make is to provide incorrect string identifiers across the HTML5-JavaScript-CSS3 stack. The existing literature shows that a significant percentage of defects observed in real-world codebases belong to this category. Existing work focuses on semantic static analysis, while this paper attempts to tackle challenges that can be solved using syntactic static analysis. While semantic state analysis is more powerful, it creates a greater computational burden on tool processing while simple static analysis may be computed faster, allowing for better integration in inline syntax-highlighting marker in a user interface or a quick pass through large codebases. This paper proposes a tool for quickly identifying defects at the time of injection due to dependencies between HTML5, JavaScript, and CSS3, specifically in syntactic errors in string identifiers. The proposed solution reduces the delta (time) between defect injection and discovery with the use of a dedicated just-in-time syntactic string identifier resolution tool. The solution focuses on modeling the nature of syntactic dependencies across the stack, and providing a tool that helps developers discover such dependencies. This tool was validated against a set of real-world codebases to analyze the significance of these defects.