Report all used Javascript functions

Question

I am working on a WYSIWIG animation editor for designing sliders / ad banners that includes a lot of dependencies, which also means a lot of extra bloated code that isn't ever used. I am hoping to run a report on the code that helps me identify the important things. I have a couple cool starts that will search through javascript for all functions and return each function by parts: https://regex101.com/r/sXrHLI/1

Then some PHP that will sort it by size: Sort preg_match_all by named group size

The thought is that by identifying large functions that aren't being used, we can remove them. My next step is to identify the function tree of what functions are invoked on document load, and then which are loaded and invoked on actions such as clicks / mouseovers and so on.

While I have this handy function that tells me all functions loaded in the DOM, it isn't enough:

var functionArray;
$(document).ready(function(){
    var objs = [];
    for (var obj in window){
        if(window.hasOwnProperty(obj) && typeof window[obj] === 'function') objs.push(obj);
    };
    console.log(obj));
});

I am looking for a solution that I can use to script in PHP / shell to emulate page load - now here is where my knowledge of terminology fails me, am I looking for "Call Stack", do I need a timeline, interpreter, framework, engine or a parser?

I next need to emulate a click / hover event on all elements, or all elements that match something like this regex:

(?|\$\(['"](\.\w*)["']|getElementsByClassName\('(\w*)'\))
(?|\$\(['"](\#\w*)["']|getElementsById\('(\w*)'\))

to find any events that trigger functions so I can make a master list of functions that need to be in the final code.

Is this for a library you are creating or is your key use case just to get the functions used? You could always do some profiling within something like Chrome's dev tools to get stack traces and timelines of what code is executed if the latter use case. If the former, more power to you! I could see that beneficial in the development community, nothing like that immediately comes to mind. Vladimir's answer would definitely be able to assist in your goal, in part. — Arthur Weborg
– Arthur Weborg, Commented May 12, 2017 at 18:23
It will probably get open sourced as a way to minify your entire codebase including changes to the php, html, css and js files once I am a little further along. — Alan
– Alan, Commented May 12, 2017 at 18:51

Arthur Weborg · Accepted Answer · 2017-06-20 17:20:57Z

2

I was watching a talk from a Google Developer and I thought of your post. The following link has more intel on Dev Tools Coverage Profiler, but the following is the high level.

Google dev tools ships out a neat feature for generating reports on used and unused JS and CSS code -- which is right along the essence of what you were searching to do (just a slightly different medium -- it'd be a bit harder to automate, but it otherwise contains, I believe, exactly what you were looking for).

Open Dev tools and then open up the ellipse in the bottom left corner (see image) and then click the record button [see image 1]. Go through the steps you want to capture. You'll get an interactive screen to which you can go through all the code and see what was used (green) and what was not used (red) [see image 2]

Image 1 - Ellipse drop down to get to coverage tool

Image 2 - Full screenshot of the interactive report for this StackOverflow page while editing this post.

answered Jun 20, 2017 at 17:20

Arthur Weborg

8,6705 gold badges32 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Alan Over a year ago

Thank you for thinking of me so much later, I can't wait to try this out.

Vladimir M · Accepted Answer · 2017-05-12 18:28:37Z

1

I'd suggest you to take a look at this tool: Istanbul

With it you can do the following:

create an instrumented version of your code
deploy it on the server and run the manual test (coverage information is collected in one of the global variables inside the browser)
copy coverage information into a file (its an lcov data as far as I remember)
generate code coverage report with it

If you feel like going further, you can actually use something like jvm-cucumber with selenium to automate UI tests. You will need to dump the coverage data every time you reload the page, however. Then you will have to combine coverage from different runs and use this combined lcov data to generate the overall report.

The whole process is a bit heavy, but it is way better then starting to reinvent it.

Even more, you can combine this data with unit test coverage information to produce joint reports.

As a step further, you may want to setup sonar server so that you store multiple versions of the coverage reports and compare differences between tests.

edited May 12, 2017 at 18:28

answered May 12, 2017 at 18:20

Vladimir M

4,4891 gold badge21 silver badges26 bronze badges

2 Comments

Alan Over a year ago

Thanks, Istanbul looks like it is made to test Node.js sites, but mine is a laravel site that uses a lot of javascript, can it be used still? I am looking at cucumber as you suggested as well.

Vladimir M Over a year ago

It instruments your javascript code by replacing your code with something that does has the same functionality but produces code coverage metrics along the way. In theory, should worth with anything. At least for my angular-based applications it works perfectly. Try it.

Collectives™ on Stack Overflow

Report all used Javascript functions

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related