Dynamically adding jQuery to a site for debugging with DOM manipulations

You are new to front-end web-development and you just started to get the hang of jQuery. DOM manipulations fascinates newbies (it still fascinates me) and doing it with the jQuery library is even sweeter.

You are surfing the net and you suddenly want to count how many <p> tags are on the page. Due to poor styling, an image is covering a very interesting piece of text and you want to resize it. You are a web developer aren’t you, you fire up your browser console with the hope that you will do a little manipulation with jQuery and then all will be well with humanity.

Not so fast, the site you want to manipulate may not have jQuery as a dependency. As a matter of fact, that is exactly the case. You come to terms with this when you try to run:

$('p').length

You will be greeted with this error

Your fear is confirmed when you try to run just$ and it returns undefined:

Now we have a little problem. We can still do what we want with vanilla javascript. But if you are like me and using vanilla JS for DOM manipulations tires quickly, you could just decide it is not worth the stress and then you give up and move on to greener pastures.

It doesn’t have to be so, we can manually add the jQuery library by ourselves in a few simple steps. Here goes:

  1. Fire up the browser console and create a script tag like so:
var script = document.createElement("script")

2. Set the src attribute of the script tag to a popular jQuery CDN. I personally like to use the Microsoft jQuery CDN. Anyone will do for our purposes so feel free to use anyone

script.src = ""https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"

3. Append the script tag to the document’s body .

document.body.appendChild(script)

That is all we need to do and you can use jQuery like a charm.