Debugging and profiling using Web Inspector

Web Inspector contains a number of panels that provide different functionality you can use to help improve the appearance and performance of your webpage.

Using the WebKit-based browser on your desktop, you can navigate to the IP address and port number used by the server application and begin inspecting the code. You can use Web Inspector to manipulate the Document Object Model (DOM), edit and debug JavaScript code, analyze resource requests, and audit the performance of web content and web apps in near real time.

You can work from different panels, depending on what you need to do:

Panel Description
Elements Inspect the DOM of the current webpage and adjust settings for attributes and CSS properties. Changes you make are reflected in the browser.
Resources Display information about all the resources used by the current webpage.
Network Display information about each HTTP request made as resources are requested, received, and displayed in the browser or in your HTML5 app.
Sources Debug JavaScript code. You can set breakpoints and step through your code to locate and correct issues.
Timeline View how much time it takes for the browser to load and render the webpage and its resources.
Profiles Examine how your JavaScript code utilizes memory. With the Profiles panel, you can pinpoint programmatic inefficiencies.
Audits Examine the network utilization and webpage performance. The tool suggests ways to improve performance.
Console A command-line utility that lets you debug JavaScript or HTML parsing errors.