1 <!-- BEGIN AUTHORED CONTENT --> 2 <p id="classSummary"> 3 Use the <code>experimental.webInspector.audits</code> module to add new audit 4 categories and rules to WebInspector's Audit panel. 5 </p><p> 6 See <a href="experimental.webInspector.html">WebInspector API summary</a> for 7 general introduction to using WebInspector API</a>. 8 </p> 9 10 <h2>Notes</h2> 11 12 <p> 13 Each audit category is represented by a line on <em>Select audits to run</em> 14 screen in the Audits panel. The following example adds a category named 15 <em>Readability</em>:</p> 16 <pre> 17 var category = webInspector.audits.addCategory("Readability", 2); 18 </pre> 19 <img src="images/devtools-audits-category.png" 20 style="margin-left: 20px" 21 width="489" height="342" 22 alt="Extension audit category on the launch screen of Audits panel" /> 23 <p> 24 If the category's checkbox is checked, the <code>onAuditStarted</code> event of 25 that category will be fired when user clicks the <em>Run</em> button. 26 </p> 27 <p>The event handler in your extension receives <code>AuditResults</code> 28 as an argument and should add one or more results using <code>addResult()</code> 29 method. This may be done asynchronously, i.e. after the handler returns. The 30 run of the category is considered to be complete once the extension adds the 31 number of results declared when adding the category with 32 <code>experimental.webInspector.audits.addCategory()</code> or 33 calls AuditResult's <code>done()</code> method. 34 </p> 35 <p>The results may include additional details visualized as an expandable 36 tree by the Audits panel. You may build the details tree using 37 <code>createResult()</code> and <code>addChild()</code> methods. The child node 38 may include specially formatted fragments created by 39 <code>auditResults.snippet()</code> or <code>auditResults.url()</code>. 40 </p> 41 The following example adds a handler for onAuditStarted event that creates two 42 audit results and populates one of them with the additional details: 43 44 <pre> 45 category.onAuditStarted.addListener(function(results) { 46 var details = results.createResult("Details..."); 47 var styles = details.addChild("2 styles with small font"); 48 var elements = details.addChild("3 elements with small font"); 49 50 results.addResult("Font Size (5)", 51 "5 elements use font size below 10pt", 52 results.Severity.Severe, 53 details); 54 results.addResult("Contrast", 55 "Text should stand out from background", 56 results.Severity.Info); 57 }); 58 </pre> 59 <p>The audit result tree produced by the snippet above will look like this: 60 </p> 61 <img src="images/devtools-audits-results.png" 62 style="margin-left: 20px" 63 width="330" height="169" 64 alt="Audit results example" /> 65 <!-- END AUTHORED CONTENT --> 66
