top

Web Inspector Features

This topic describes Web Inspector features you can use to help debug and optimize your application.

The Web Inspector provides a debugging environment where you can, for example, control JavaScript execution and monitor various information about your application while it runs.

The Web Inspector has the following tabs:

  • Elements
    The "Elements" tab allows you to see the Web page components (the CSS style, event listeners, and properties).

    Figure 1. "Elements" tab

    Figure 1. "Elements" tab

  • Console
    The "Console" tab allows you to inspect the JavaScript console operation. You can interact with your page programmatically. Any errors or warnings on your page are shown in the console.

    Figure 2. "Console" tab

    Figure 2. "Console" tab

  • Sources
    The "Sources" tab allows you to inspect the JavaScript source page and debug your JavaScript code. This tab supports watch expressions, callstack, scope variables, and break point operation. In addition, it supports basic debugging operations: continue, step over, step into, and step out.

    Figure 3. "Sources" tab

    Figure 3. "Sources" tab

  • Network
    The "Network" tab allows you to inspect resources downloaded over the network.

    Figure 4. "Network" tab

    Figure 4. "Network" tab

  • Timeline
    The "Timeline" tab allows you to perform advanced timing and speed analysis. You can see how long the browser takes to handle DOM events, and render and paint windows.

    Figure 5. "Timeline" tab

    Figure 5. "Timeline" tab


    On the timeline, the time spent loading and rendering the application content is shown with colored bars:

    • Loading (blue)
      Time spent loading HTML content.
    • Scripting (yellow)
      Time spent loading JavaScript files.
    • Rendering (violet)
      Time spent rendering content.
    • Painting (green)
      Time spent loading graphics, such as images and icons.
  • Profiles
    The "Profiles" tab allows you to inspect the JavaScript performance analyses. You can inspect CPU, heap, and memory allocation profiles.

    Figure 6. "Profiles" tab

    Figure 6. "Profiles" tab

  • Application
    The "Application" tab allows you to inspect resources. You can interact with frames containing resources, such as HTML, JavaScript, CSS, images, and fonts. You can also inspect WebSQL and HTML5 databases, local storage, cookies, and the application cache.

    Figure 7. "Application" tab

    Figure 7. "Application" tab

  • Audits
    The "Audits" tab allows you to analyze a page as it loads and provide suggestions and optimizations for decreasing load time and increase perceived (or real) responsiveness.

    Figure 8. "Audits" tab

    Figure 8. "Audits" tab