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