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:
You will be greeted with this error
Your fear is confirmed when you try to run just
$ and it returns undefined:
It doesn’t have to be so, we can manually add the jQuery library by ourselves in a few simple steps. Here goes:
- 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
That is all we need to do and you can use jQuery like a charm.