-4

This is not a real programming question, but it's driving me crazy...

Please do not close it immediately as "asking for tools" (even if I do :-D)

At the moment I have to fix something in a JavaScript/AngularJS web-application. This was not done by me, I'm digging for nuggets in cubic meters of sand...

The application is loading rows from a web-service. The application shows, that there are 22 rows loaded, 22 unique IDs are there in an array. The web-service' response via DevTools tells me, that 18 rows were fetched. 4 rows seem to exist some where.

I know the unique IDs (GUIDs), which were not part of the loading. Now I'd like to do something like a full-text search at runtime if I can find these strange GUIDs somewhere in any context...

Does Crome DevTools offer such a tool? Might be you have another suggestion...

Shnugo
  • 66,100
  • 9
  • 53
  • 114
  • Try [How to search the browser window object looking which object or variable has the searched-for value?](//stackoverflow.com/a/46536947) – wOxxOm Oct 23 '17 at 18:53
  • @wOxxOm Thx, I tried this, but exceeded the max depth... Anyway: Thx for the hint to snippets, very handsome! – Shnugo Oct 24 '17 at 07:06
  • "this is not a real programming question" and "Please do not close" are not good ways to start a question. It only serves to highlight the fact that this question isn't very clear. – Claies Oct 25 '17 at 19:03
  • @Claies Look, I have answered quite a lot of questions myself. You can be ensured, that I know, what a good question is. And often enough I was the one to vote for closing. But In this case I cannot show the community a part of code with a detailled questions. Still it's about programming. This is at least what I think I'm doing... "How do you debug this special case" is - in my eyes - close enough... What's not clear with the quesiton? – Shnugo Oct 25 '17 at 19:28
  • "The application shows that there are 22 rows loaded" **Where are you seeing this**? and why isn't that telling you where the discrepancies lie? – Claies Oct 25 '17 at 19:31
  • @Claies, The UI shows a total number, but uses pagination to display this. There is an object in the `$scope` with a count of `22` but there is an array with 15 records (due to pagination). When switching to page 2 I get the other records without any action against the backend. I'm new to JavaScript and Angular (have done a lot with C# and TSQL). This logic was burried deeply within directives, services, whatever... I've found it, but it would have helped to now, where to search... – Shnugo Oct 25 '17 at 19:35
  • well, just knowing how angular works, I'm really not sure that any "search anywhere in the DOM" kind of tool would help, because it doesn't sound like these elements were rendered in the DOM to be found. Angular itself doesn't really have a "show me all variables in memory" kind of function, either..... aside from logging the output at various stages of the code, there isn't really anything that would help analyse the application logic, that I can think of. – Claies Oct 25 '17 at 19:41
  • @Claies, Hey, that almost sounds like an answer :-D When examining the content of objects at a breakpoint one can open a million sub-nodes to find even more sub-nodes. If a GUID was burried anywhere down this lane it should be findable - some how... Anyway, I've found my lost objects, heureka! Happy coding! – Shnugo Oct 25 '17 at 19:45

1 Answers1

1

One approach is to search all the source files for the GUID text.

  1. Open the Search pane. It opens up as a tab in the Console drawer.
  2. Enter the GUIDs in the text box.

Another approach is be to investigate the call stack when the GUIDs are populated into the DOM.

  1. Add a Subtree modification breakpoint on the <ol> element that the GUID gets populated into.
  2. DevTools pauses every time the <ol> gets modified, so you may have to press Resume Script Execution a few times.
  3. When you're paused on the relevant modification, you can investigate the Call Stack to see the call stack of functions that led to the GUID getting populated into the DOM.
  4. While DevTools is paused you can use the Console to inspect the JS heap at that point in time.
Kayce Basques
  • 23,849
  • 11
  • 86
  • 120
  • Thx, just tried this... It seems to be search through all files. But I'd need a search through and within all objects at runtime in order to find some values. I have to find out, where in the quirky object's model this is hidden. – Shnugo Oct 24 '17 at 06:25
  • Is there a class that creates the objects? Can you set a breakpoint in the constructor? – Kayce Basques Oct 24 '17 at 16:04
  • The problem was, that I had no idea, were these objects "live" within the object's model. I've found them using *code archeology* (means *digging* :-D). So: Problem solved. The question above remains unanswered and I wonder, why there's nothing like this within DevTools... Just a "find everywhere"... – Shnugo Oct 25 '17 at 06:11
  • Check out the DOM Change Breakpoint workflow that I added to my answer. – Kayce Basques Oct 25 '17 at 18:32
  • Thx, I'll have a look at this tomorrow! – Shnugo Oct 25 '17 at 19:25