WebKit debugging – Chrome, Safari, and Opera

WebKit-based browsers support various debugging tools. For example, when encountering JavaScript issues, you can launch Web Inspector or Developer Tools and start to explore logs and errors using the JavaScript console.

In Chrome, you can access the Developer Tools from the Customize menu (click on the Customize menu and then go to Tools | Developer Tools). The Customize menu is available in the top-right corner. When working with Safari, you first have to enable the Developer Tools by opening Safari's Preferences panel and then selecting the Show Develop menu in the menu bar checkbox. You can then access the inspector by choosing Show Web Inspector from the application's Develop menu.

Since the Web Inspector is part of the WebKit codebase, you can use the same shortcuts in Chrome and Safari to access the debugging tools.

On Windows and Linux, press:

• Ctrl + Shift + I to open Developer Tools
• Ctrl + Shift + J to open Developer Tools and bring focus to the console
• Ctrl + Shift + C to toggle the Inspect Element mode

On OS X, press:

• ⌥ ⌘ I (option + command + I) to open Developer Tools
• ⌥ ⌘ J (option + command + J) to open Developer Tools and bring focus to the console
• ⌥ ⌘ C (option + command + C) to toggle the Inspect Element mode

When accessing Developer Tools, you can switch between tools by clicking on the respective icon.

The Elements panel allows you to see the webpage as the browser renders it. When using it, you can see the raw HTML and CSS, and explore the Document Object Model (DOM). By clicking on the Elements panel and moving around the source of the page, you can identify the HTML blocks and change the CSS selector's value on-the-fly in order to experiment and fix possible rendering issues:

The Resources panel lets you inspect resources that are loaded and available in the inspected page. It lets you interact with frame trees containing frame resources (HTML, JavaScript, CSS, images, fonts, and so on), HTML5 databases, local storage, cookies, and AppCache.

Using the Network panel, you can explore the components that a webpage or application requests from web servers, how long these requests take, and how much bandwidth is required.

Using the Sources panel, you can access all the resources loaded into the page. Use this panel to access the JavaScript, set breakpoints in the code, and explore the stack trace for each error. In order to set a breakpoint, select the script in which you want to set the breakpoint, and then click on the line number you are interested in. When the debug tool reaches the breakpoint, you can see what's happening in your code by exploring the call stack (that is, the chain of functions and/or methods executed until this breakpoint) and the scope variables, and move in and out of functions:

The JavaScript can be edited directly inside the debugger and you can see your changes on-the-fly by going back and forth using the navigation arrows. If you want the debugger to stop the code execution each time an exception is raised, use the Pause all button at the bottom left of the panel. For details about each of the functionalities, we recommend that you refer to the official docs at https://developer.chrome.com/devtools/docs/javascript-debugging.

The Timeline panel lets you analyze the various WebKit behind-the-scenes activities such as how long the browser takes to handle DOM events, render page layouts, and handle events.

Once you press the Record button, you can start to inspect what's happening in the page you are currently viewing.

The Events and Frames icons (available in Chrome) allow you to access two different timeline data views, the first one is based on time and the second one is based on frames; you can zoom into each view by using the grey vertical controls at the top.

The Memory icon lets you explore the memory usage of a specific webpage; in order to be more accurate during the exploration, it's a good habit to force the garbage collector by pressing the Trash icon at the bottom of the panel. Garbage collection is a form of automatic memory management; the collector attempts to reclaim garbage or memory occupied by objects that are no longer being used by the browser's window.

The Profiles tool helps you capture and analyze the performance of JavaScript scripts. For example, you can learn which functions take the most time to execute and then zoom in on the possible bottlenecks and understand exactly where to optimize.

The Audits panel is like having your own web optimization consultant sitting next to you. This panel can analyze a page as it loads and then provide suggestions and optimizations to decrease page load time and increase perceived responsiveness.