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

  • 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

  • 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

  • Network

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

    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

    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

  • 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

  • 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