{"id":92051,"date":"2015-11-19T07:00:00","date_gmt":"2015-11-19T22:00:00","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/oldnewthing\/20151119-00\/?p=92051\/"},"modified":"2019-03-13T12:21:59","modified_gmt":"2019-03-13T19:21:59","slug":"20151119-00","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/oldnewthing\/20151119-00\/?p=92051","title":{"rendered":"Stupid JavaScript debugging tricks: Abusing the conditional breakpoint"},"content":{"rendered":"

Your favorite JavaScript debugger may very well have a conditional breakpoint facility, and if it does, you can abuse it to do things unrelated to conditional breakpoints. <\/p>\n

Since conditional breakpoints are based on evaluating an expression, you can use an expression with side effects, like, say, logging. <\/p>\n\n\n\n
Breakpoint Condition<\/td>\n<\/tr>\n
\n

When the breakpoint location is reached, the expression is evaluated and the breakpoint is hit only if the expression is true or has changed. <\/p>\n\n\n\n\n\n
☒<\/td>\nCondition:<\/td>\n<\/tr>\n
<\/td>\n console.log(“click received”)<\/td>\n<\/tr>\n
<\/td>\nⵙ Is true<\/td>\n<\/tr>\n
<\/td>\nⵔ Has changed<\/td>\n<\/tr>\n<\/table>\n

\n\n\n
OK<\/td>\nCancel<\/td>\n<\/tr>\n<\/table>\n<\/td>\n<\/tr>\n<\/table>\n

The console.log<\/code> function returns undefined<\/code>, so the condition is never true, but that’s okay, because we’re executing the expression for its side effect of printing a string to the console. <\/p>\n

Here, we just logged a hard-coded string, but you can log any expression you want. For example, you could use <\/p>\n

\nconsole.log(\"current selection is \" + this.currentSelection)\n<\/pre>\n
Or even more fun: <\/p>\n
\nconsole.log(getStack())\n<\/pre>\n
where you’ve defined <\/p>\n
\nfunction getStack() { try { throw new Error(); } catch (e) { return e.stack; } }\n<\/pre>\n
What, you didn’t define that function? No problem. Just evaluate it in your immediate window and boom, now it’s defined. <\/p>\n
Now, printing an entire stack trace may be excessive. So store it in your object for future inspection. For example, you might do this in a constructor so that you have a stack trace of how your object got created. That way, when you have a transaction that failed to complete, you can look at the cached stack trace to see how the transaction got started. <\/p>\n
\n(this._stack = getStack()) === 42\n<\/pre>\n
The extra === 42<\/code> at the end is to ensure that the value of the expression is falsy. <\/p>\n
Anyway, just a few quick tips for JavaScript debugging. I didn’t come up with these ideas, but I’m sharing them. <\/p>\n","protected":false},"excerpt":{"rendered":"
Code injection.<\/p>\n","protected":false},"author":1069,"featured_media":111744,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[1],"tags":[25],"class_list":["post-92051","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-oldnewthing","tag-code"],"acf":[],"blog_post_summary":"
Code injection.<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/92051","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/users\/1069"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/comments?post=92051"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/posts\/92051\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media\/111744"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/media?parent=92051"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/categories?post=92051"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/oldnewthing\/wp-json\/wp\/v2\/tags?post=92051"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}