Detecting duplicate JavaScript includes on a page

I started working on a new app recently with some people mostly new to front end development and noticed that on many pages we were including the same JavaScript file multiple times, either on the same page or within an included page, so I wrote up some JavaScript (using jQuery) to detect those on the page.

The script itself is pretty straightforward.

function findDupes() {
  var allScripts = [];
  var dupe = false;
  $.each(document.getElementsByTagName("script"), function(index, value) {
    if ($.inArray(value.src, allScripts) !== -1 && value.src !== '') {
      console.log('already loaded :: ' + value.src);
      dupe=true;
    }
    allScripts.push(value.src);
  });
  if(!dupe){
    console.log('no dupes');
  }
});

I turned this into a bookmarklet as well if you want to add it as a bookmark to easily run on the page

javascript: (function() {var a = []; var b = false;$.each(document.getElementsByTagName("script"), function(index, value) {if ($.inArray(value.src, a) !== -1 && value.src !== '') {console.log('already loaded :: ' + value.src);b=true;}a.push(value.src);});if(!b){console.log('no dupes');}})();

Checking an HTML page for duplicate IDs using JavaScript

A couple years back I wrote a post about Checking an HTML page for duplicate IDs using jQuery. A pretty useful tool when you need to ensure IDs on a page are unique. The downside to that code was that it required jQuery and the app I’m currently working with does not use jQuery, so I modifed the existing code to write a pure JavaScript solution that does the same thing.

var allElements = document.getElementsByTagName("*");
var allIds = {};
var found = false;
for (var i = 0, n = allElements.length; i < n; ++i) {
  var id = allElements[i].id;
  if (id) {
    if (allIds[id] === undefined) {
      allIds[id] = 1;
    } else {
      found = true;
      console.warn('Duplicate ID #' + id);
    }
  }
}
if (!found) {
  console.log('No duplicate IDs found');
}

All you need to do is create a new bookmark with the following as the URL

javascript: (function() {var allElements = document.getElementsByTagName('*');var allIds = {};var found = false;for (var i = 0, n = allElements.length; i < n; ++i) {var id = allElements[i].id;if (id) {if (allIds[id] === undefined) {allIds[id] = 1;} else {found = true;console.warn('Duplicate ID #' + id);}}}if (!found) {console.log('No duplicate IDs found');}})();

Or you can simply drag the bookmarklet below onto your bookmark toolbar

Duplicate ID Checker

Update: Ryan Guill let me know he wrote something similar and he’s saved it as a Gist. It’s interesting seeing the different approaches to accomplish the same thing.