Understand your code better

[geraldchecka]

Introduction

I've been doing Angular 1.X recently and had chance to deep dive into its internals. This totally changed my perception towards Angular. It works great, but it's internals are overwhelmingly complex and uncanny.

Motivation(s)

• 'step-into' & 'breakpoints' are baby steps into learning the code.
• They are not just enough when debugging complex ones like Angular/Project-Code-Base/React etc...
• There's got to be a better way to learn it quick with a helping hand.

Idea

Let's call our imaginary library Alpha. It takes input from a configuration file.
For e.g.,

{
   "watch": "../angular-1.5.1.js",          // Library to watch
   "listenOn": "http://localhost:9000/"     // Your local webpage port to listen to
}

Alpha has an _AST_ parser running in the background listening to execution in your webpage. It will track the interactions on your webpage, like the functions, variables, context, flows etc... and remembers them(including the data state). It will immediately go to the library supplied as inputs in the config, correlates all matching items and pulls out their documentation.
Execution of your webpage ends.

Now you have 5 items in hand

• Execution flow
• Items covered (vars, func, etc...)
• Data
• Documentation
• Library file

Combine all the above data and present it in a meaningful information.

Say what all methods in the library have been covered during your webpage runtime and explain their documentation and purpose

How many times the flows are covered

State of your data at different point during app runtime

How much time is spent on individual items

etc...

Peeps can deep dive into the internals in a presentable and meaningful way.

Please feel free to debate :-)
@hemanth @juarezpaf @andreicek @gokulkrishh @josueggh @juarezpaf @manekinekko @mhartington @pselle @radhikakhetan