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

Roka545
  • 3,404
  • 20
  • 62
  • 106
  • Right-click the mouse over the element and click "inspect" – Adam Buchanan Smith Jun 03 '16 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? –  Jun 03 '16 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 03 '16 at 17:18

2 Answers2

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.

mcky
  • 823
  • 2
  • 7
  • 20
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.

Community
  • 1
  • 1
Gideon Pyzer
  • 22,610
  • 7
  • 62
  • 68