html-tree-debugger.js

/**
* dependencies: jQuery 1+
* right-click any element with your dev-tools console open
*/

jQuery(document).ready(function($){
	var events = [];
	var timeout;

	/* Fetch a property from an array of objects */
	var RMP = function(arr, prop) {
		return arr.map(function(entry){ 
			return entry[prop]; 
		});
    }


	/* Check if argument is "undefined", return a fallback value if it is, or the argument (optionally wrapped with pre_def and sub_def) */
	var nodef = function(ifDef, fallback, pre_def="", sub_def="") {
		return ("undefined" !== typeof ifDef ? pre_def + ifDef + sub_def : fallback);
    }

	/* generate selectors (using tagname, ids and classes) for a nodelist */
	var RMSel = function(arr) {
		return arr.map(function(entry){
			var r, classes;
			classes = Array.from(entry.classList);

			r = entry.tagName.toLowerCase();
			r += nodef($(entry).attr('id'), "", "#");
			r += (classes.length ? "." + classes.join(".") : "");
			return r;
        });
    }
	
	
	var parseEvents = function(){
		var hits = RMP(events, 'currentTarget');
		var sel = RMSel(hits);
		var options = sel.map((selector)=>`<option value="${selector}">${selector}</option>`);
		var select = $('<select>');
		select.append(options);
		console.log(hits);
    events = [];
    }

/**
* bind mouseclick on all elements
* bail out unless the shiftKey is down
* push the event to our events array, reset the timeout to parse it to 20ms
* this is done to only run the heavier code once per click
*/
    $('*').click(function(event) {
        if (!event.shiftKey) { return; }
        event.preventDefault();
        events.push(event); 
        clearTimeout(timeout);
        timeout = setTimeout(parseEvents, 1);
    });
});