Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

List all js global variables used by site (not all defined!)

Tags:

javascript

What is the way to list all global variables that have been used by the site? Can any browser javascript debugger do that? By used I mean READ, not changed/added. Detect iframe ones, would be nice too.

PLEASE NOTE: I need to get a list of global variables "touched" by site. Not all of them or added ones or edited ones, the ones that were used anywhere in the site scripts.

like image 921
Flash Thunder Avatar asked Jun 24 '13 13:06

Flash Thunder


People also ask

How do I see all global variables?

Once setup, open jslinter and go to Options->check everything on the left column except "tolerate unused parameters". Then run jslinter on the webpage and scroll down in the results. You will have a list of unused variables (global and then local to each function).

Where are global variables stored in JavaScript?

Are global variables stored in specific object? The answer is yes; they are stored in something called, officially, the global object. This object is described in Section 15.1 of the official ECMAScript 5 Specification.

Are all variables global in JavaScript?

Variables declared Globally (outside any function) have Global Scope. Global variables can be accessed from anywhere in a JavaScript program. Variables declared with var , let and const are quite similar when declared outside a block.

What are the problems with global variables in JavaScript?

This is because global variables are easily overwritten by other scripts. Global Variables are not bad and not even a security concern, but it shouldn't overwrite values of another variable. On the usage of more global variables in our code, it may lead to a maintenance issue.


2 Answers

In Chrome, go to Dev tools and open the console. Then type in the following:

Object.keys( window ); 

This will give you an Array of all the global variables.

EDIT

After searching on Google a bit, I found a way. You will need firefox and the jslinter addon.

Once setup, open jslinter and go to Options->check everything on the left column except "tolerate unused parameters".

Then run jslinter on the webpage and scroll down in the results. You will have a list of unused variables (global and then local to each function).

Now run Object.keys(window); in the console and compare the results from both to figure out which ones are used.

like image 169
stackErr Avatar answered Oct 06 '22 00:10

stackErr


This one-liner will get you pretty close, and does not require installing anything additional, or running code before the page loads:

Object.keys(window).filter(x => typeof(window[x]) !== 'function' &&   Object.entries(     Object.getOwnPropertyDescriptor(window, x)).filter(e =>       ['value', 'writable', 'enumerable', 'configurable'].includes(e[0]) && e[1]     ).length === 4) 

It filters Object.keys(window) based on three principles:

  1. Things that are null or undefined are usually not interesting to look at.
  2. Most scripts will define a bunch of event handlers (i.e. functions) but they are also usually not interesting to dump out.
  3. Properties on window that are set by the browser itself, are usually defined in a special way, and their property descriptors reflect that. Globals defined with the assignment operator (i.e. window.foo = 'bar') have a specific-looking property descriptor, and we can leverage that. Note, if the script defines properties using Object.defineProperty with a different descriptor, we'll miss them, but this is very rare in practice.
like image 21
jd20 Avatar answered Oct 05 '22 22:10

jd20