2

I have an extremely large (in terms of expandability - there are a lot of nodes that can be expanded) object I'm viewing in the console tab of Chrome dev tools. I'm looking for a certain value to debug a chart. Is there a way to perform a CTRL-F (find) and have Chrome dev tools expand the proper nodes to reveal it's location? I can manually expand each node but that would most likely take forever (like I said - LOTS of nodes). I'm new to HTML so maybe this is something trivial. Right now when I perform a CTRL-F, it tells me how many instances there are, but it doesn't highlight them unless the nodes are already expanded.

In a nutshell, can you do a CTRL-F in Chrome dev tools (Console tab) and make it expand the proper nodes and highlight/show where it is in the console?

EDIT (image added):

enter image description here

3
  • Right-click the mouse over the element and click "inspect" Jun 3, 2016 at 16:56
  • If I do a CTRL+F in the "Elements" tab, it auto-expands the nodes for whatever it finds in the document matching my search. Is this not the behavior you are experiencing?
    – user820304
    Jun 3, 2016 at 16:58
  • I'm specifically talking about the Console tab within Chrome developer tools (which I access by right-click->'Inspect'); I've attached an image to the original post. To give you an idea of what I'm trying to do: I have a chart that does a chartClicked/chartHover method when clicked or hovered. It returns an object. I would like to take that object and get the individual x,y values for the chart. I cannot find those values however in the returned object (due to how large/expandable it is).
    – Roka545
    Jun 3, 2016 at 17:18

2 Answers 2

1

open dev tools and just click somewhere inside the inspector. Then just hit ctrl+F and it will only search inside the inspector; which will expand elements that it found a result in

Edit: To find things in the console, click the filter button (second button top right) then type in what you want to search. This might not be what you're asking for but unfortunately I think thats the most specific search you can do in the console.

2
  • 1
    That's what I would like to do, but in the 'Console' tab instead, not the 'Elements' tab. See original post edit.
    – Roka545
    Jun 3, 2016 at 17:24
  • I don't know who upvoted this but this is not what the question asks Sep 30, 2020 at 20:23
1

You could use JSON.stringify within your log statement, and then search the results as usual with Ctrl + F / Cmd + F. It's not very pretty though, and it will fail if you have circular references.

An alternative solution is to create an expand function in a Chrome Snippet, that loops through the nodes and recursively logs them, grouping at each level with console.group. See this solution. As per the other solution, you can use the shortcut to find the text.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.