24

I just finished my website, which I started 2 years ago. I was always trying new things, which sometimes included adding different frameworks or other external JS files.

Now I don't know which of the linked files/lines of JS are unused. Is there a tool which can detect these files and lines of code? It would save me a lot of time.

5
  • 2
    For the CSS the webkit developer tools from google chrome show the unused styles. As for the javascript I'm waiting for an answer too Commented Nov 1, 2012 at 10:21
  • @BrunoVieira the OP is not asking about unused styles, but unused javascript files that are sitting in the directory tree yet are not referenced from any of this pages. Also note that there's more than one page to deal with, but a whole app. Commented Nov 1, 2012 at 10:23
  • 4
    That's why I didn't answer but rather made a comment because it may be useful if not for him for someone else @AleksG Commented Nov 1, 2012 at 10:23
  • @BrunoVieira See this question of mine for problems with that approach Commented Nov 1, 2012 at 10:25
  • @BrunoVieira: Yes, this tool i use. So i search something like exactly this... Commented Nov 1, 2012 at 12:12

6 Answers 6

14

This answer offers Google's Closure Compiler which, in the process of minifying and concatenating your JavaScript code, can remove "dead code".

Quoting from the documentation for the compilation levels:

Compilation with ADVANCED_OPTIMIZATIONS removes code that is provably unreachable. This is especially useful in combination with large libraries. If you use only a few functions from a large library file, the compiler can remove everything except those functions from its output.

Also see this answer which contains more information on Google's Closure Compiler.

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

2 Comments

Hey! Thanks for the link. I haven't time yet to read the documentation, and my first "dirty" try was really confusing... I try it on sunday...I'll report back
Sorry for the late answer. Had a hard week. I tried your solution and it works how i want it :) Big Thanks! +1 & Accepted :)
3

I had this need so I created a tool that detects unused JS on the browser side, not just from the sources, so it can also test third parties scripts.

It works by creating a local proxy on your computer that intercepts JavaScript requests and instruments these files on-the-fly. The tool is than able to detect which parts of the instrumented files have been used by the page, and which don't.

I made it open-source and you can find it here: https://github.com/gmetais/unusedjs.

Comments

0

For this answer, I am not sure whether it's helpful or not. How about trying Sonar. Sonar has a javascript plugin that can check your js code quality and list the code that unused.

2 Comments

I found some guy talking about this jslint.com/lint.html, may be it can give you a hand.
Thanks for your answer. I also found this question on SO. But it search for the code quality like: it is on the newest standard, how much are comments... The problem is, he also analyse unused Code, but do not display if it in use or not...
0

I've been looking at a similar task for the past few weeks myself and ended up with the following powershell query:

PS> Get-ChildItem -Path C:\PathToProject\ -Filter *.as?x -Recurse 
| select-string -pattern "src=""([^""]*.js)""" 
| Select -Expand Matches | Foreach { $_.Groups[1].Value } | select -unique

First it recursively selects all .aspx and .ascx files in our project directory, then finds src attribute values that refer to .js files (presumably those of script elements) and traces distinct values - voila, you have a list of .js files as referenced in your project!

It would be fairly straightforward to adjust the query so that it fits your specific project and its structure. Make sure you don't iterate over outdated files that may include obsolete references. Account for markup discreptancies - could you have used single quotes for attribute values in the past, or left unnecessary whitespace around the "equals" symbol, or both? Could you be including these files programmatically or asynchronously from inside another js files? etc. etc.

1 Comment

Hey! Okay. Looks complicated. I try it on sunday...I'll report back
0

In Google Chrome Developer tools, you can now view "Coverage" on the Sources tab to display unused Javascript and CSS by percentage of each file, or even on a line by line basis.

Here's the announcement of the feature in 2017.

enter image description here

1 Comment

It seems the link is not working. Does the coverage tool find lines that didn't execute for the current session or the lines that are not connected to the program and will not ever execute?
0

Though it is pretty old question, this might help for this type of problem - https://github.com/skpaul/LocateMe

I wrote this to use in my project.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.