Debugging the user interface in Chrome with Chrome Developer Tools
Set a breakpoint to make your GUI operation stop at a breakpoint in your Chrome console.
Before you begin
Before you execute these steps, make sure you have used Chrome developer tools to set at least one breakpoint in a JavaScript (.js) file.
Procedure
- Clear your Chrome browser cache.
- Press F12 to open the developer tools interface.
- Perform the steps that lead to your bug until the first breakpoint in the console is reached.
- Debug the code as follows:
- Examine the Console area in the Scripts tab to see the values of variables.
- Press F11 to step through your code line by line.
- Press F5 to resume normal script execution.
- In the Resources tab, select Time on the left to examine the loading time of various elements on the Web page.
- In the Resources tab, select a specific resource name on the left to examine the headers (Headers tab) and content (Content tab) of the request.