for
loop of the main
function, set a breakpoint by clicking the left margin of the following line of code:name += letters[i];
for
loop in the main
method, press F11 (or choose Debug > Step Into) twice to to advance to the SendMessage
method call.SendMessage(name, a[i]);
SendMessage
method.SendMessage
method.SendMessage
method, and you want to get out of the method but stay in the debugger. You can do this using the Step Out command.for
loop in the main
method, paused at the SendMessage
method call.SendMessage
method call again.SendMessage
method. F10 advances the debugger without stepping into functions or methods in your app code (the code still executes). By pressing F10 on the SendMessage
method call (instead of F11), we skipped over the implementation code for SendMessage
(which maybe we're not interested in right now). For more information on different ways to move through your code, see Navigate code in the debugger.std::wcout
function in the SendMessage
method until the green Run to Click button appears on the left. The tooltip for the button shows 'Run execution to here'.std::wcout
function.for
loop.name += letters[i]
statement, hover over the letters
variable and you see it's default value, size={10}
.letters
variable to see its properties, which include all the elements that the variable contains.name
variable, and you see its current value, an empty string.for
loop, pausing again at the breakpoint, and hovering over the name
variable each time to check its value.for
loop, showing values of f
, then fr
, then fre
, and so on.letters
variable to show the elements that it contains.name
variable and choose Add Watch.name
variable, and you can see its value change as you move through the debugger. Unlike the other variable windows, the Watch window always shows the variables that you are watching (they're grayed out when out of scope).for
loop, click the Call Stack window, which is by default open in the lower right pane.SendMessage
method. Look at the Call Stack window.SendMessage
method in this app). The second line shows that SendMessage
was called from the main
method, and so on.std::wcout
function.SendMessage
method call, use the mouse to grab the yellow arrow (the execution pointer) on the left and move the yellow arrow up one line, back to std::wcout
.std::wcout
function (you see this in the console window output).Breakpoint Type | Use This When You Want To Pause.. |
---|---|
Line-of-code | On an exact region of code. |
Conditional line-of-code | On an exact region of code, but only when some other condition is true. |
DOM | On the code that changes or removes a specific DOM node, or its children. |
XHR | When an XHR URL contains a string pattern. |
Event listener | On the code that runs after an event, such as click , is fired. |
Exception | On the line of code that is throwing a caught or uncaught exception. |
Function | Whenever a specific function is called. |
debugger
from your code to pause on that line. This is equivalent toa line-of-code breakpoint, except that the breakpoint is set in yourcode, not in the DevTools UI.send()
.click
, or categories of events, such as all mouse events.debug(functionName)
, where functionName
is the function you want todebug, when you want to pause whenever a specific function is called. You caninsert debug()
into your code (like a console.log()
statement) or call itfrom the DevTools Console. debug()
is equivalent to setting aline-of-code breakpoint on the first line of the function.ReferenceError
if the function you want to debug is notin scope.debug()
from the DevTools Console. Here's one strategy:debug()
in the DevTools Console while the code is still pausedon your line-of-code breakpoint.