See DevTools APIs summary for general introduction to using Developer Tools APIs.

Overview

Each audit category is represented by a line on Select audits to run screen in the Audits panel. The following example adds a category named Readability:

var category = chrome.experimental.devtools.audits.addCategory("Readability", 2);

If the category's checkbox is checked, the onAuditStarted event of that category will be fired when user clicks the Run button.

The event handler in your extension receives AuditResults as an argument and should add one or more results using addResult() method. This may be done asynchronously, i.e. after the handler returns. The run of the category is considered to be complete once the extension adds the number of results declared when adding the category with addCategory() or calls AuditResult's done() method.

The results may include additional details visualized as an expandable tree by the Audits panel. You may build the details tree using the createResult() and addChild() methods. The child node may include specially formatted fragments created by the auditResults.createSnippet() and auditResults.createURL() methods.

Examples

The following example adds a handler for onAuditStarted event that creates two audit results and populates one of them with the additional details:

category.onAuditStarted.addListener(function(results) {
  var details = results.createResult("Details...");
  var styles = details.addChild("2 styles with small font");
  var elements = details.addChild("3 elements with small font");

  results.addResult("Font Size (5)",
      "5 elements use font size below 10pt",
      results.Severity.Severe,
      details);
  results.addResult("Contrast",
                    "Text should stand out from background",
                    results.Severity.Info);
});

The audit result tree produced by the snippet above will look like this:

You can find more examples that use this API in Samples.