Debugging and profiling using Web Inspector

Web Inspector allows you to inspect and debug your webpage source code, inspecting web content displayed through the browser or in HTML5 applications. You can use Web Inspector to manipulate the DOM, edit and debug JavaScript code, analyze resource requests, and audit the performance of web content and web apps in near real time.

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.

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

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.