Inspecting Web Applications Using jQuery Audit

Introduction

Most front end developers know and work on the jQuery (JavaScript library) but many of them do not know about jQuery Audit. It’s a simple Chrome extension to inspect/audit jQuery Applications and jQuery is mandatory to run this tool. It's not an official tool from jQuery.

Download jQuery Audit here.

jquery

Chrome Web store detail page

It creates a sidebar in the elements panel, which contains jQuery delegated events, internal data and more, as live DOM nodes, functions, and objects.

Requirements

jQuery in Webpage.
Adding jQuery function in Global scope (Add “$(document).ready(function() { }); “) . Because jQuery audit does a typeof window.jQuery === 'function', whenever a node is selected. If it can't find a jQuery function in the global scope, the sidebar will display an error: "@(window.jQuery is missing)".

After adding an extension, you can get jQuery audit tab in the sidebar of the element tab.

jquery

jQuery audit in an element tab

Main options of jQuery audit

@(this.element), Data, Events ,Internal Data, dateset and ownHtml

@(this.element)

It shows a jQuery object of the current selected element. You can view the whole properties (attributes, classlist, childNodes, id, etc.) of the selected element.

jquery
@ this.element

Data

Data returns an object of “$(element).data()” but, jQuery audit doesn't invoke the data of an element, if already rendered. If jQuery invokes the data (“$(element).data()) or assigns data(“$(element).data(“id”,56)”) it is shown as Data properties.

An example is to add some data to an Email field and invoke data by jQuery, which is shown in jQuery audit data.

<input class="form-control" type="email" name="email" required/>

In Console, the code is given below.

$('input[name="email"]').data('id', '236');
$('input[name="email"]').data('name', 'cooper');
$('input[name="email"]').data();

jquery
Data of an element

Events

An event shows a list of events attached with the selected element. You can see the event function of the current element, using show function definition. This is a useful function, where you can easily find out an event attached function of the current element in thousand lines of code.

jquery
jQuery Audit event options

Data Set

It just parses the data from all the data attributes of the current element.

<button id="formSubmit" type="submit" data-id="23" data-type="signup"> Submit </button>

Return Object is:

dataset = {id:256, type:"signup"}

ownHtml

It shows an HTML string of the selected element. It trims the child element of the current element.

The orginal code is given below.

<button id="formSubmit" type="submit"data-id="23" data-type="signupsubmit">
<span class="glyphicon glyphicon-plus"></span> submit</button>

ownHtml is given below.

<button id="formSubmit"type="submit"data-id="23"data-type="signupsubmit"> submit</button>

ownHtml quietly rejects inner <span> tag of the selected element.

Summary

jQuery Audit is a very simple tool but it saves your time from finding DOM element properties and attached events in large size scripts. You can smartly inspect others coding, using jQuery Audit. If you need more information about this tool, visit GitHub page of jQuery Audit.