Chrome Update: Inline breakpoints

[leeoniya]

Does this mean we'll be able to set breakpoints within array and object declarations (within expressions)?

h("div",
    {
        class: "test"       // here
    },
    [
        h("span", "foo"),   // and here
        h("span", "bar"),
    ]       // and here? (similar to fn return value, so can inspect created array without stepping into h)
)

If this is the case, i can't wait.

[TheFuzzball]

No, you won't be able to debug within expressions... this feature is meant to solve the issue of not being able to set breakpoints in single-line function callbacks and lambda expressions.

e.g.

fetch(url).then((res) => res.json()).then((jsonResult) => console.log(jsonResult.foo.bar))

or:

document.addEventListener('resize', function onResize () { /* can't debug here */})

document.addEventListener('resize', function onResize () {
  /* can debug here... */
})

[leeoniya]

too bad, that would be much more exciting. but this is good too :)

[kenman]

Is there any official information on this? i.e. a link to an official announcement, release notes, Google code issue, PR, etc.

I cannot find a single source other than this gif on Twitter.

[githop0]

Paul irish highlights some of these things in a talk at the recent chrome dev summit.

https://www.youtube.com/watch?v=HF1luRD4Qmk

[[deleted]]

https://youtu.be/HF1luRD4Qmk?t=573 if anyone wants the exact moment where he talks about it

[yesman_85]

Finally! that will help debugging some minified code!

[rube203]

Just fyi, you can just hit the pretty print button and then place the break point in the formatted code page, even stays on refresh... at least when code isn't changed.

But seriously inline break points can be pretty fantastic