devtools selector doesn't seem to be working

[Clifford Dunlea]

I am having a little problem with the inspector. If I select $('h1') devtools is giving me

[h1, selector: "h1", prevObject: jQuery.fn.init(1), context: document]

i want it to give me the actual node which I can get if I Input $0

<h1>

        <a href="http://wp-wamp-2/blogpost        </a>

</h1>

I don't understand why it's not finding the element. It always has before. Does somebody know what I am doing wrong here

[PhistucK]

This is by design (though may get an easier workaround soon).

The page is using jQuery, which, by default, defines $ for "selecting" elements as well.

You can use the longer document.querySelector(selector) in pages like that page.

If you need the second parameter ($("link", document.head)), you can just use -

secondParameter.querySelector(selector). For example, document.head.querySelector("link").

Alternatively - use $$, which returns a list and you can use [0] to get the first. For example -

$$("link")[0]

Or -

$$("link", document.head)[0]

$("link")[0] will also work.

Finally, note that deleting $ first will also work (delete $;), but may break the page.

☆PhistucK

--
You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/f18699a9-9b19-4119-9c72-1cd3a8ef7f84%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Clifford Dunlea]

Thanks for the response. I can remember using the console around last year and if I used the $('h1') command it selected the node with no need to use the javascript method. Am I right in saying

that this is a recent update to the devtools inspector? It just seems to me  that if the page is using jQuery then shouldn't a selection be as simple as $('h1'). Just straight forward jq selection - select this, without the need to revert to the longer more complicated javascript selector. Thanks again for your help.

[PhistucK]

I guess the output of $(selector) (in case $ is jQuery) used to look different and this is the change you are experiencing. I do not think the Developer Tools originated $ ever took over the jQuery one in pages where $ is jQuery.

I am not sure whether it is a bug or a feature...

(I lean slightly toward a feature, since I guess jQuery is used less and less in modern code and so the Developer Tools team might have decided to cater less for it)

☆PhistucK

--

You received this message because you are subscribed to the Google Groups "Google Chrome Developer Tools" group.
To unsubscribe from this group and stop receiving emails from it, send an email to google-chrome-developer-tools+unsub...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/google-chrome-developer-tools/993c5f60-6172-465f-952e-4a919c1a6bca%40googlegroups.com.