CODEWITHSUNDEEP
javascriptjqueryhtmlcssdom
JackyJohnson
JackyJohnson

Reputation: 3126

how to manually load a javascript library after page load using debugging tools?

I would like to do some jQuery DOM manipulations after a page is loaded by manually calling the functions thru a (/the web inspection) console. I tried doing that in Safari web inspection console of course, but it seems the jQuery is directly implemented in the browser console ($$(selector) is the syntax for selecting all elements with selector selector)and they seem to be only inspection functions (i.e., cannot make modifications). I find that awkward because I can manually delete tags in the loaded DOM and it reflects in the browser viewport. So for example to get to the point, what would prevent me from running something like:

$('p').css('color','red')

I think this question may have come up in the past in SO, but entries I found were quite out of date (2~3 years is a long time, right?).

I'm also concerned with being able to manually load the jQuery library if the site I am visiting doesn't have it included.

EDIT: to restate my question, I was trying to use jQuery functions in Safari Web Inspector Console while browsing on a website that doesn't load the jQuery library. I updated the title of the question too.

Upvotes: 2

Views: 490

Answers (1)

Goodword
Goodword

Reputation: 1643

I just found this stack overflow post, which answers your question.

Copying from the post: "run this in your browser's javascript console, then jQuery should be available...

var jq = document.createElement('script');
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js";
document.getElementsByTagName('head')[0].appendChild(jq);
// ... give time for script to load, then type.
jQuery.noConflict();

NOTE, if the site has scripts that conflict with jQuery (other libs, etc..) you could still run into problems."

Alternatively, you could copy and paste the whole jquery libary into your console. Here is a link to the latest version of Jquery: http://code.jquery.com/jquery-latest.min.js

Upvotes: 1

Related Questions