How to find out if certain javascript code is actually used?

Question

I am doing some JavaScript cleanup work on a legacy project, and trying to get rid of redundant JS libraries. I have done all the obvious ones (those that are not references from anywhere at all). But there are a number of JS files that are included in all pages (via tiles).

How can I find out whether they are actually used, short of going through content of each and search for each function in them? Is there a smarter/easier way to do this? It's a java based / Spring project if that helps by the way.

There's no trivial way. Is there 100% test coverage? If so, try removing parts one after the other and see if they fail. — Prinzhorn
– Prinzhorn, Commented May 31, 2013 at 9:54
I think this is impossible to do in an easy way (automatically) you have to actually understand the code AND look at generated pages. Even if you had put everywhere console.log("I'm in xxx file"); there is no certainty that JS code won't execute on some user interaction, after some time or even based on some cookie/request parameter that is set when user go through some pages. — Xeon
– Xeon, Commented May 31, 2013 at 9:55
@Pirnzhorn unfortunately not, this is part of the reason I'm doing this, some cleanup before getting people to add test and up the coverage! — Ashkan Aryan
– Ashkan Aryan, Commented May 31, 2013 at 9:57
Here you can find a good answer webmasters.stackexchange.com/questions/55025/… — Plijen
– Plijen, Commented Mar 29, 2016 at 14:58

Lauren Van Sloun · Accepted Answer · 2023-11-23 22:31:50Z

31

+500

One of the latest updates from the chrome dev tools now includes a JS and CSS coverage tab that allows you to see your unused code.

https://developer.chrome.com/docs/devtools/coverage/

1) Open the Command Menu.
2) Start typing Coverage and select Show Coverage.

edited Nov 23, 2023 at 22:31

Lauren Van Sloun

1,2635 gold badges20 silver badges30 bronze badges

answered Jan 16, 2018 at 9:09

li x

4,0612 gold badges34 silver badges52 bronze badges

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

1 Comment

Roy Tinker Over a year ago

This is definitely the quickest way to manually prune unused code. (For new projects, modern build tools like Webpack offer code pruning -- but adding them to existing projects usually requires more effort than it's worth.)

Carlos ABS · Accepted Answer · 2019-12-18 15:42:19Z

3

I think there's no easy way.

You can remove the script reference, run your site with the browser debugger turned on, and see if there's any "function not found" error.

But you'll have to test every single functionality in your site...

EDIT:

The answer from user li x seems to be the best at this moment.

edited Dec 18, 2019 at 15:42

answered Jul 28, 2014 at 16:37

Carlos ABS

72311 silver badges19 bronze badges

1 Comment

samjco-com Over a year ago

Why can't there be a new standard on how JS is added? This has got to be one of the most sort after solutions. This will fix so many things if Only it existed

Alberto Zaccagni · Accepted Answer · 2013-05-31 10:17:51Z

I would suggest using spies for this task. They are used in TDD to test if functions are called, so that one could assert if calls are actually happening.

If you are lucky enough those js libraries are initialized in a constructor or in some other way, if so I would suggest you to spy on these init functions.
If not you might want to spy on all functions, but this is painful especially if you have big libraries, in that case I would suggest to go one by one.

In the past I've used Jasmine or Sinon.JS for this task, follows an example:

it('should be able to login', function () {
  spyOn(authobj, 'isEmpty');  
  authobj.login('abc', 'abc');  
  expect(authobj.isEmpty).toHaveBeenCalled();
});

Once you have spies setup on the proper functions then it should be just a matter of checking if they are called or not, you could make a call to mixpanel (first example that comes to mind) with some info about it, so that later on you can see what functions are called and what are not.

user1773603 · Accepted Answer · 2018-01-17 10:11:52Z

0

You can also give a try to purifycss.

CLI usage:

$ npm install -g purify-css

purifycss <css> <content> [option]

Options:
  -m, --min        Minify CSS                         [boolean] [default: false]
  -o, --out        Filepath to write purified css to                    [string]
  -i, --info       Logs info on how much css was removed
                                                      [boolean] [default: false]
  -r, --rejected   Logs the CSS rules that were removed
                                                      [boolean] [default: false]
  -w, --whitelist  List of classes that should not be removed
                                                           [array] [default: []]
  -h, --help       Show help                                           [boolean]
  -v, --version    Show version number                                 [boolean]

answered Jan 17, 2018 at 10:11

user1773603

1 Comment

user1773603 Over a year ago

yes this only works on bootstrap css or other css files reduction.

Collectives™ on Stack Overflow

How to find out if certain javascript code is actually used?

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related