- Step 1: Reproduce the bug.
- Step 2: Get familiar with the Sources panel UI.
- Step 3: Pause the code with a breakpoint.
- Step 4: Step through the code.
- Step 5: Set a line-of-code breakpoint.
- Step 6: Check variable values. Method 1: The Scope pane. Method 2: Watch Expressions. Method 3: The Console.
- Step 7: Apply a fix.
- Hit the F12 key.
- Select the Scripts , or Sources , tab in the developer tools.
- Click the little folder icon in the top level.
- Add a breakpoint by clicking on the line number on the left (adds a little blue marker)
Set up DevTools
Press Command + Option + J (Mac) or Control + Shift + J (Windows, Linux, Chrome OS) to open the Console, right here on this very page.
How do I debug my browser?
- Step 1: Open your application in the Chrome web browser.
- Step 2: Open developer console by inspecting your web page and select source tab or Go to View → Developer → View Source.
- Step 3: Set the breakpoint on your source code something similar to what we did in Mozilla browser.
How do you debug?
7 Steps to Debug Efficiently and Effectively
- 1) Always Reproduce the Bug Before You Start Changing Code.
- 2) Understand Stack Traces.
- 3) Write a Test Case that Reproduces the Bug.
- 4) Know Your Error Codes.
- 5) Google! Bing! Duck! Duck! Go!
- 6) Pair Program Your Way Out of It.
- 7) Celebrate Your Fix.
How do I debug chrome step by step?
How to debug in chrome step by step?
- Open a site such as our online demo.
- Open the DevTools window. Press F12, or right click the page, select Inspect Element, or go to Tools -> Developer Tools.
- If it is not already selected, select Sources.
How do I access the console in Chrome?
To open the developer console window on Chrome, use the keyboard shortcut Ctrl Shift J (on Windows) or Ctrl Option J (on Mac). Alternatively, you can use the Chrome menu in the browser window, select the option “More Tools,” and then select “Developer Tools.”
How do I debug HTML in Chrome?
Debugging Your Website with Chrome Developer Tools
- In your Chrome browser, open the site you want to debug.
- Right click over an element you want to debug. In this example, we’re analyzing a yellow button.
- Click “Inspect”.
How do I turn on developer mode in Chrome?
You can start by turning on Developer mode. Click the Chrome menu icon and select Extensions from the Tools menu. Ensure that the “Developer mode” checkbox in the top right-hand corner is checked. Now you can reload extensions, load an unpacked directory of files as if it were a packaged extension, and more.
How do I disable debugging in Chrome?
Go to the “Sources” tab. At the bottom toolbar, toggle the button that looks like the pause symbol surrounded by a circle (4th button from the left) until the color of the circle turns black to turn it off.
How do I debug ASPX in Chrome?
The various methods are:
- Use the keyboard shortcut, “CTRL+SHIFT+J”
- Right click on the page you want to debug and select “Inspect Element”