# Step 3: Pause the code with a breakpointĪ common method for debugging a problem like this is to insert a lot of console.log() statements into the code, in order to inspect values as the script executes. If your DevTools window is wide, this pane is displayed to the right of the Code Editor pane. Various tools for inspecting the page's JavaScript. After selecting a file in the File Navigator pane, the contents of that file are displayed here.
Every file that the page requests is listed here. This shortcut opens the Console panel.įigure 4. Open DevTools by pressing Command+Option+I (Mac) or Control+Shift+I (Windows, Linux). The Sources panel is where you debug JavaScript. The report viewer, a high-end software within built extensions for SAP functionalities, comes from the SAP reports and is one of the best and most downloaded crystal report editors. # Step 2: Get familiar with the Sources panel UIĭevTools provides a lot of different tools for different tasks, such as changing CSS, profiling page load performance, and monitoring network requests. This is the bug you're going to fix.įigure 1.
Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. The label below the button says 5 + 1 = 51. Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. The demo opens in a new tab.Ĭlick Add Number 1 and Number 2. Finding a series of actions that consistently reproduces a bug is always the first step to debugging.Ĭlick Open Demo.
