I would like to open the WebDeveloper pane in Firefox (on Windows) and enter+execute a jQuery command. Similarly the following:
$("div:contains('comments')");
Firefox should jump to the corresponding found element.
How can I achieve this?
I don't want to execute it from script.
I want to view it immediately in real-time in source
How to execute in WebDeveloper pane a jQuery command?
-
thoste
- Posts: 319
- Joined: June 7th, 2003, 12:45 am
-
morat
- Posts: 6435
- Joined: February 3rd, 2009, 6:29 pm
Re: How to execute in WebDeveloper pane a jQuery command?
$() is equivalent to document.querySelector() or calls the $ function in the page, if it exists.
Web Console Helpers
http://firefox-source-docs.mozilla.org/ ... index.html
Try $("div[id='container']"); command with test page 1, then click the select node button.
Try $("p:contains('versatility')"); command with test page 2, then click the select node button.
Test page 1 ($ function doesn't exist)
http://www.mozillazine.org/
Test page 2 ($ function exists)
http://jquery.com/
Select node button pic
http://blog.mozilla.org/hacks/files/201 ... t-node.png
P.S.
Include jQuery on sites where $ function doesn't exist
http://stackoverflow.com/questions/7474354
Web Console Helpers
http://firefox-source-docs.mozilla.org/ ... index.html
Try $("div[id='container']"); command with test page 1, then click the select node button.
Try $("p:contains('versatility')"); command with test page 2, then click the select node button.
Test page 1 ($ function doesn't exist)
http://www.mozillazine.org/
Test page 2 ($ function exists)
http://jquery.com/
Select node button pic
http://blog.mozilla.org/hacks/files/201 ... t-node.png
P.S.
Include jQuery on sites where $ function doesn't exist
http://stackoverflow.com/questions/7474354
-
thoste
- Posts: 319
- Joined: June 7th, 2003, 12:45 am
Re: How to execute in WebDeveloper pane a jQuery command?
@morat:
Ok, thank you.
I tried it out with your second testpage
Yes, I can enter the command in the console, butt this is NOT enough.
I would like to jump to the found corresponding element in the pane above.
See this snapshot:
https://i.postimg.cc/NFzBQ2Xz/how-to-ju ... lement.png
How can I achieve this?
Ok, thank you.
I tried it out with your second testpage
Yes, I can enter the command in the console, butt this is NOT enough.
I would like to jump to the found corresponding element in the pane above.
See this snapshot:
https://i.postimg.cc/NFzBQ2Xz/how-to-ju ... lement.png
How can I achieve this?
-
morat
- Posts: 6435
- Joined: February 3rd, 2009, 6:29 pm
Re: How to execute in WebDeveloper pane a jQuery command?
The select node button works here.
* load jquery.com
* open web developer tools ctrl+shift+i
* notice that <body> tag is selected in inspector
* execute $("p:contains('versatility')"); command in console
* click select node button next to "Object { 0: p" in console
* notice that <p> tag is selected in inspector
Screenshot (see red arrow)
http://imgur.com/a/sX4jEtg
You can output the p element directly by executing the $("p:contains('versatility')")["0"]; command.
* load jquery.com
* open web developer tools ctrl+shift+i
* notice that <body> tag is selected in inspector
* execute $("p:contains('versatility')"); command in console
* click select node button next to "Object { 0: p" in console
* notice that <p> tag is selected in inspector
Screenshot (see red arrow)
http://imgur.com/a/sX4jEtg
You can output the p element directly by executing the $("p:contains('versatility')")["0"]; command.
-
thoste
- Posts: 319
- Joined: June 7th, 2003, 12:45 am
Re: How to execute in WebDeveloper pane a jQuery command?
@morat:
I revert to your instructions above: They do not work.
Have a look at the attached snapshot (of this web page).
Why do I get "No matches" when searching for "Screenshot"?
BTW: What do you mean with "load jquery.com"?
https://postimg.cc/3dxjYvSF
I revert to your instructions above: They do not work.
Have a look at the attached snapshot (of this web page).
Why do I get "No matches" when searching for "Screenshot"?
BTW: What do you mean with "load jquery.com"?
https://postimg.cc/3dxjYvSF
-
morat
- Posts: 6435
- Joined: February 3rd, 2009, 6:29 pm
Re: How to execute in WebDeveloper pane a jQuery command?
Are you really trying to run jQuery code using the inspector searchbox? You should run jQuery code using the console.
My example is only valid on the jquery.com site. (load jquery.com means open jquery.com in current tab)
The jquery.com site uses the jQuery library so the $ function exists on that site. (window.$ results in function jQuery(selector, context) in console)
The mozillazine.org site doesn't use the jQuery library so the $ function doesn't exist on that site. (window.$ results in undefined in console)
You can't run the jQuery :contains() selector code using the console if the page doesn't load the jQuery library.
jQuery :contains() selector
http://api.jquery.com/contains-selector/
jQuery Quick API Reference
http://oscarotero.com/jquery/
My example is only valid on the jquery.com site. (load jquery.com means open jquery.com in current tab)
The jquery.com site uses the jQuery library so the $ function exists on that site. (window.$ results in function jQuery(selector, context) in console)
The mozillazine.org site doesn't use the jQuery library so the $ function doesn't exist on that site. (window.$ results in undefined in console)
You can't run the jQuery :contains() selector code using the console if the page doesn't load the jQuery library.
jQuery :contains() selector
http://api.jquery.com/contains-selector/
jQuery Quick API Reference
http://oscarotero.com/jquery/