CODEWITHSUNDEEP
debugginggoogle-chrome-devtoolsbreakpoints
Lance Pollard
Lance Pollard

Reputation: 79178

How to dynamically create a breakpoint on an expression in chrome?

Say I have some code in production. I want to test that a particular item in a large list of items has some behavior. One way to accomplish this in development with the debugger statement is like this:

items.forEach(function(item){
  // some code...

  if (item.title.match(/foo/)) {
    debugger;
  }

  // some more code...
});

With that code, you put a breakpoint in a list, only when the list item matches some expression. This makes it easy to debug only that one item, which may have some obscure bug in it. If you just try to put a breakpoint there by clicking the line, then it's going to pause at every item in the list, so you have to step through like 100 items before you get there which is super tedious.

One problem with the above is, it requires you to have the ability to edit the client-side JavaScript, which you can't really do in production.

So the question is, can you accomplish this same sort of thing, but purely using the Chrome Web Inspector? Maybe something to do with "watch expressions" (haven't found much on google about those). The ideal would be, from within the Chrome Web Inspector, add an expression like:

breakpoint:
  line: 17
  file: build.js
  expression: item.title.match(/foo/)

Upvotes: 0

Views: 457

Answers (1)

user2943490
user2943490

Reputation: 6940

The closest you will get to this without getting into Chrome's chrome.debugger APIs are conditional breakpoints.

conditional breakpoints

If you truly want to do this programmatically, look into chrome.debugger.sendCommand with the Debugger.setBreakpoint command.

Upvotes: 2

Related Questions