2

There is a jQuery plugin. I set a variable to its config property as follows:

var myVar = "1:a;2:b;3:c";
$el.jsPlugin1({
   prop1: myVar 
});

And for a reason the plugin treats myVar other than I expect it to. So I would like to set breakpoints in the browser devtools to every occurrences of the property prop1. So that then I could track it and figure out why it acts differently. The issue is that there are about a hundred of occurrences of that property. And setting breakpoints manually to every occurrence is quite annoying.

Is there a way to automate it? Maybe there is an IDE or a trick in devtools that can help me to track the particular property usage. Thanks a lot in advance!

UPD. Using of object.watch is not an acceptable approach because that function is triggered when the propery is changed. But in my case the property never changes. It is just requested and somehow parsed.

Vadim Kotov
  • 8,084
  • 8
  • 48
  • 62
amigo
  • 343
  • 5
  • 19
  • 1. What plugin? 2. Some plugins have a "re-render" method of sorts to force the DOM element to re-render when the change in property occurs. – Korgrue Jan 14 '16 at 18:10
  • @Korgrue, jqGrid. I set a property on the initialization phase. – amigo Jan 14 '16 at 18:14
  • Also - which browser? Every one has different dev tools that do different things.What dev environment/platform are you using? If you're on a Mac giving a Visual Studio solution won't help, for example. – Chris Tavares Jan 14 '16 at 18:14
  • @ChrisTavares, I would like to know if it is possible by any means. No browser/IDE/OS dependencies. – amigo Jan 14 '16 at 18:16
  • what are you expecting to happen? You already know this, but setting prop1 won't change myVar. You could set a watch on your variable then step through your code. – Shanimal Jan 14 '16 at 18:16
  • This is a tooling question, and every tool is different. There is no browser/IDE independent way to do this. Any answer will depend on your environment. – Chris Tavares Jan 14 '16 at 18:17
  • @Shanimal I would like to fix it and send a pull request to the owner of the plugin. – amigo Jan 14 '16 at 18:17
  • @ChrisTavares, right now I can test any suggested solution on the Mac OS X Capitan and Windows 7. Google Chrome and Firefox are setup on both OS. – amigo Jan 14 '16 at 18:19
  • sorry, what i was asking was "what are you doing and what is the expected behavior? " – Shanimal Jan 14 '16 at 18:21
  • @Shanimal Sorry, are you asking about the exact plugin (jqGrid) or you asking about how I try to track the property usage? It the first one then my question is not about this particular plugin but about a way to set multiple breakpoints at once like by filter (occurrence of exact property). And right now I can set manually about a 100 breakpoint in the browser devtool where that property occurs but it takes too many time and it's annoying as I said in the main post. So I found a way to like set a 100 breakpoint at once by exact property. – amigo Jan 14 '16 at 18:26
  • @Shanimal Sorry once again) I haven't seen you suggestion about a watch approach. I know that in the Chrome devtools I can put a property in the watch section. But what is the way to say devtool to stop on every "request" of my variable? – amigo Jan 14 '16 at 18:31
  • @hello_amigo Looks like there is an `updateColumns` method that you have to call once changes are made to the properties. var mygrid=jQuery(”#grid_id”)[0]; mygrid.updateColumns(); http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods – Korgrue Jan 14 '16 at 18:34
  • @Shanimal Oh, it meant to set a breakpoint to my variable to track it from the vary start. I don't know. Yes I can track like that. But it can take a huge amount of time to go through all the function in the stacktrace until I get that line of code where needed things happens. – amigo Jan 14 '16 at 18:35
  • @Korgrue Sorry, but i'm interesting of a common way to do this. Without dependence to an exact library/plugin. – amigo Jan 14 '16 at 18:36
  • That is a method built into the plugin you said you are using (jqGrid). The link I provided is to the documentation for jqGrid. You don't need to use an additional library. – Korgrue Jan 14 '16 at 18:38
  • http://stackoverflow.com/questions/26302096/break-on-variable-change-in-chrome-using-angular – Shanimal Jan 14 '16 at 18:44
  • @Korgrue, well that method like documentation says "synchronizes the width of the headers with the data. Useful when used with table drag and drop.". My question has nothing about a column width. Sorry, that you spend your time to figuring out how a particular plugin can solve it. But i'm interesting of a common way to put multiple breakpoints by some "filter"/property – amigo Jan 14 '16 at 18:45
  • 1
    http://stackoverflow.com/questions/11618278/how-to-break-on-property-change-in-chrome – Shanimal Jan 14 '16 at 18:45
  • 1
    Possible duplicate of [javascript debugging: Is there a way to break on a change of variable value?](http://stackoverflow.com/questions/7910623/javascript-debugging-is-there-a-way-to-break-on-a-change-of-variable-value) – Shanimal Jan 14 '16 at 18:45
  • 1
    fwiw, this question has been asked a million times before though. Looks like Object.watch is your best bet. but there's also a link to setup a getter on the object. – Shanimal Jan 14 '16 at 18:47
  • @Shanimal, your second link where it is explained how to proxy a propety call by using a getter is just what i need. I don't know... It perhaps even better that putting a hundred breakpoints at once. A "watch" function is triggerd when a property is changed. So it's not a proper way to track where myVar goes (who requests it). So, please, post an "answer" so I can mark my question as solved. Thank you very much for help! – amigo Jan 14 '16 at 19:38

0 Answers0