A breakpoint indicates where Visual Studio should suspend your running code so you can take a look at the values of variables, or the behavior of memory, or whether or not a branch of code is getting run. The debugger pauses at the breakpoint you set the current statement is marked in yellow. Now, you can inspect your app state by hovering over variables that are currently in scope, using debugger windows like the Locals and Watch windows. For debugging client-side script in ASP.
Visual Studio provides client-side debugging support for Chrome and Internet Explorer only. NET projects in Google Chrome. If your source is minified or created by a transpiler like TypeScript or Babel, the use of source maps is required for the best debugging experience. Without source maps, you can still attach the debugger to a running client-side script. However, you may only be able to set and hit breakpoints in the minified or transpiled file, not in the original source file.
For example, in a Vue. For help to generate source maps, see Generate source maps for debugging. Other browser instances can prevent the browser from opening with debugging enabled. Browser extensions may be running and preventing full debug mode, so you may need to open Task Manager to find unexpected instances of Chrome.
For Microsoft Edge Chromium , also shut down all instances of Chrome. Because both browsers use the chromium code base, this gives the best results. Use a different friendly name for the browser such as Edge with Debugging or Chrome with Debugging. For details, see the Release Notes. Alternatively, open the Run command from the Windows Start button right-click and choose Run , and enter the following command:.
Open the Run command from the Windows Start button right-click and choose Run , and enter the following command:. To attach the debugger from Visual Studio and hit breakpoints in client-side code, the debugger needs help to identify the correct process. Here is one way to enable this. Set the breakpoint in a line of code that allows breakpoints, such as a return statement or a var declaration. For client-side code, to hit a breakpoint in a TypeScript file,.
A source map must be configured correctly to support debugging in Visual Studio. In the Attach to Process dialog box, get a filtered list of browser instances that you can attach to. In Visual Studio , choose the correct debugger for your target browser, JavaScript Chrome or JavaScript Microsoft Edge - Chromium in the Attach to field, type chrome or edge in the filter box to filter the search results.
In Visual Studio , choose Webkit code in the Attach to field, type chrome in the filter box to filter the search results.
Select the browser process with the correct host port localhost in this example , and select Attach. The port for example, may also appear in the Title field to help you select the correct browser instance. If the debugger does not attach and you see the message "Failed to launch debug adapter" or "Unable to attach to the process. An operation is not legal in the current state. Browser extensions may be running and preventing full debug mode.
In the previous section, we inferred from the Raygun error report that the error came from the capitalizeString method. This method is called three times, so, which instance is the culprit?
You can look a little closer at the Stacktrace and see that it was the call that came from Line 13 which caused the error. You know that line 13 relates to the Middle Name value. Therefore, you should focus your effort on reproducing the error by crafting your input correctly. With this extra knowledge, you can fill in the First and Last Name fields but leave the Middle Name blank to see if this triggers the error.
Hit the Save button. From here, the Source tab will open where you can see the breakpoint activated. You can now start to step through the code. To do this, you use the four buttons in the debugging pane.
Resumes execution of your code and continues until the next breakpoint Steps over the current line, moving us on to the next line Steps into the next function call that is on that line Steps out of the current function call, back up the callstack one level. The active line is shown with a yellow background and arrow pointing to it. To do this, use the Call Stack window you opened earlier, which lists all the functions that have been passed through to get to this point in your code—exactly the same as the Callstack shown in the Raygun error report.
You can simply double-click on an item in this list and you will be moved back to that function. There are a bunch of options for figuring out what values variables contain and evaluating expressions before the code moves on. The simplest way to determine the value of a variable is to just hover the mouse over it and a tooltip will pop-up with the value. You can even select a group of expressions and hover over this to get the output of the expression.
You can add expressions to the Watch panel which displays the current value of the expression as you move through the code.
This is handy to keep track of how more complex expressions change over time. The Locals panel displays a list of variables currently within scope and their associated values. This is similar to the Watch panel but is generated automatically by Visual Studio automatically. The Locals panel is good for identifying local variables and saves you explicitly adding them to the Watch list.
Finally, the JavaScript Console tab is a great tool for checking expression values and experimenting with code. Just switch back to the JavaScript Console tab, type some code and hit enter. In the app, you know the problem lies in the index. Now that you can view your code, we want to be able to step through it a line at a time to see where things go wrong. To do this, we use breakpoints. Breakpoints are markers at specific points in the code which stop execution so you can inspect the state of the code at that point in time, and continue execution line-by-line.
Probably the most common way to add a breakpoint is to find the specific line you want to stop on and add it there. Navigate to the file and line you are interested in and click the grey area beside the line number. A red marker will be added on that line and execution will stop every time it hits this line of code. In the screenshot below it will stop on Line 7 of index. You can also add breakpoints programmatically.
This approach is useful for conditionally introducing breakpoints, for example, at certain iterations of loops. To do this, you add the debugger; statement at the position you want to break the execution. The code below will have the same effect as the Line Breakpoint above. By default, Visual Studio will pop-up a warning if an unhandled exception has occurred on your page.
From this dialog box, you can choose to break at this point so you can investigate the cause. In the previous section, we inferred from the Raygun error report that the error came from the capitalizeString method. This method is called three times, so, which instance is the culprit? You can look a little closer at Stacktrace and see that it was the call that came from Line 13 which caused the error. You know that line 13 relates to the Middle Name value.
Therefore, you should focus your effort on reproducing the error by crafting your input correctly. With this extra knowledge, you can fill in the First and Last Name fields but leave the Middle Name blank to see if this triggers the error.
Hit the Save button. From here, the Source tab will open where you can see the breakpoint activated. You can now start to step through the code. To do this, you use the four buttons in the debugging pane. The active line is shown with a yellow background and arrow pointing to it. To do this, use the Call Stack window you opened earlier, which lists all the functions that have been passed through to get to this point in your code— exactly the same as the Callstack shown in the Raygun error report.
You can simply double-click on an item in this list and you will be moved back to that function. There are a bunch of options for figuring out what values variables contain and evaluating expressions before the code moves on. The simplest way to determine the value of a variable is to just hover the mouse over it and a tooltip will pop-up with the value.
You can even select a group of expressions and hover over this to get the output of the expression. You can add expressions to the Watch panel which displays the current value of the expression as you move through the code.
0コメント