Documentation Center

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

  1. Clear your Chrome browser cache.
  2. Press F12 to open the developer tools interface.
  3. Perform the steps that lead to your bug until the first breakpoint in the console is reached.
  4. 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.