Understanding the debugger.html codebase.
This post will give a glimpse of the codebase of debugger.html and how the code is structured in the project itself. Debugger.html is a web application based debugger that takes its inspiration from mozilla's devtools. It is a debugger that runs on your browser that you can checkout here . So the debugger is a react/redux application and uses the new ES6 syntax as a result. The components are divided into 3 parts. Primary Pane- The left pane which hold the directory pathing. Editor -The middle panes that opens up the files. Secondary Pane -The right panel that hold the debugging windows such as breakpoints, watch etc. Most of the shared resources exists in the shared folder and utils contains all the utility files. Recently I worked on a dropdown menu issue that made the editor show more files that were not in the tab itself. The PR is got a lot of changes too since the primary push so hopefully this gets merged like my last PR.