A Summary of the WebKit Developer Tools

I use the WebKit developer tools extensively in both Chrome and Safari, but it occurred to me the other day that I was probably only using a fraction of their capabilities. After researching them more fully, I was pleasantly surprised by how comprehensive they are, so I decided to make a quick list of all the major developer-oriented features of WebKit that I know of. Even if you use the Chrome/WebKit dev tools regularly, there’s a good chance you’ll find one or two things below you haven’t been leveraging.

WebKit Developer Tools

Each section below describes a section of the WebKit developer console.

Elements

  • Traverse, inspect, and edit the DOM.
  • Inspect and edit CSS.
  • View a diagram of the CSS box model and edit its metrics.
  • View and edit a DOM element’s properties.
  • Manage DOM breakpoints. Breakpoints can break on:
    • Subtree modification.
    • Attribute modification.
    • Node removal.
  • View an element’s event listeners.
  • Right-click on any element in a web page, and select “Inspect Element” from the context menu to bring it up in the developer console.
  • Note that edits are for testing purposes only and are not saved (though I believe there are extensions which make tracking your changes easier).

Resources

  • Allows you to inspect (and in some cases, edit) various elements of a web application:
    • Frames (all externally loaded files).
    • Databases (SQLite).
    • Local storage.
    • Session storage.
    • Cookies.
    • Application cache.

Network

  • Detailed inspection of network metrics broken down by resource.
  • Metrics include:
    • Name of the resource.
    • Request method (GET, POST, DELETE, etc.).
    • Status (200, 404, etc.).
    • Type (content type, i.e. text/javascript, text/css, etc.).
    • Size.
    • Time in milliseconds.
    • Timeline waterfall (start and end time of all resource requests relative to each other, including latency).
    • Exactly when the DOMContentLoaded and Load events were fired.
  • Resource types can be filtered (for instance, if you just want to watch images).
  • You can click on a resource to see a detailed view which includes:
    • HTTP headers (both request and response).
    • A preview of the resource (HTML source, image, etc.).
    • Cookies.
    • Detailed timing information including:
      • DNS lookup.
      • Connecting.
      • Sending.
      • Waiting.
      • Receiving.

Scripts

  • View all the scripts being used by the current page.
  • Manage breakpoints.
  • Flow control (pause, resume, step over, step into, and step out).
  • View the call stack.
  • Inspect variables by scope.
  • Manage context-specific breakpoints:
    • DOM (see above).
    • XMLHttpRequest.
    • Event listener.
    • Workers.

Timeline

  • Detailed breakdown of the timeline related to loading your site including:
    • Loading.
    • JavaScript parsing.
    • JavaScript execution.
    • Calculating styles and layout.
    • Rendering.
    • Events.
  • Timeline of memory consumption.

Profiler

  • CPU: shows where execution time is spent.
  • Heap: shows memory distribution.

Audits

  • Various tests and diagnostics that can be run on a page or application.
  • Included audits:
    • Network Utilization
      • Recommends things like using gzip, leveraging browser caching, using proxy caching, and reducing cookie size.
    • Web Page Performance
      • Recommends things like removing unused CSS rules, changing the order of scripts and styles, etc.
  • Extensibility APIs for creating your own audits.

Console

  • View parse errors and JavaScript execution errors.
  • Write to the console from within your code using the console.log() function (the new alert()).
  • Supports multiple strings and objects as arguments. Objects can be expanded and inspected.
  • Execute JavaScript directly from the console.
  • Enable pausing, or breaking, whenever a runtime error is encountered (as opposed to just logging it).

Task Manager (Chrome only)

Similar to the Windows Task Manager or the Activity Monitor on OS X, the Task Manager shows metrics by tab, process, and extension. Fields include:

  • Process ID.
  • Memory (shared and private).
  • JavaScript memory.
  • CPU.
  • Network throughput.
  • Frames per second.
  • Image cache size.
  • Script cache size.
  • CSS cache size.
  • SQLite memory.

Debugging APIs

Below are all the APIs that I know of that can be used to programmatically debug and/or audit a web application:

  • console.log
    • Logs strings and objects to the console.
  • performance.timing
    • Networking metrics that reflect page load performance.
  • performance.memory
    • Fields:
      • jsHeapSizeLimit
      • totalJSHeapSize
      • usedJSHeapSize
    • Requires the -enable-memory-info command line flag.
  • window.onerror event handler
    • Allows global error registration.
    • Typical usage is to send the data to your server where it can be aggregated and reports can be generated.
  • console.profile('name'), console.endProfile('name'), and console.profiles (returns an array of Profile objects):
    • Programmatic ways of starting, stopping, and analyzing profile information.
    • Data can be captured and sent back to the server for aggregation.
  • console.markTimeline()
    • Programmatically add “marks” to your timeline view.
  • Extensibility APIs for creating your own audits.

Remote Debugging

Remote debugging allows you to debug a remote browser instance. This is nice on the desktop, but will become critical on mobile devices.

  • Start Chrome with the --remote-debugging-port command line flag.
  • Starts a mini web server.
  • External browsers can connect to that port and profile tabs remotely.
  • Implemented at the WebKit level, so all WebKit browsers will get it.

Additional Resources

Believe it or not, there’s actually more. If you haven’t gotten enough, check out these excellent resources: