OLD | NEW |
1 <!-- BEGIN AUTHORED CONTENT --> | |
2 <p id="classSummary"> | 1 <p id="classSummary"> |
3 Use the <code>chrome.experimental.devtools.audits</code> module to add new audit | 2 Use the <code>chrome.experimental.devtools.audits</code> module to add new audit |
4 categories to Developer Tools' Audit panel. | 3 categories to Developer Tools' Audit panel. |
5 </p><p> | 4 </p><p> |
6 See <a href="experimental.devtools.html">DevTools APIs summary</a> for | 5 See <a href="experimental.devtools.html">DevTools APIs summary</a> for |
7 general introduction to using Developer Tools APIs</a>. | 6 general introduction to using Developer Tools APIs</a>. |
8 </p> | 7 </p> |
9 | |
10 <h2>Overview</h2> | 8 <h2>Overview</h2> |
11 | |
12 <p> | 9 <p> |
13 Each audit category is represented by a line on <em>Select audits to run</em> | 10 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 | 11 screen in the Audits panel. The following example adds a category named |
15 <em>Readability</em>:</p> | 12 <em>Readability</em>:</p> |
16 <pre> | 13 <pre> |
17 var category = chrome.experimental.devtools.audits.addCategory("Readability", 2)
; | 14 var category = chrome.experimental.devtools.audits.addCategory("Readability", 2)
; |
18 </pre> | 15 </pre> |
19 <img src="{{static}}/images/devtools-audits-category.png" | 16 <img src="{{static}}/images/devtools-audits-category.png" |
20 style="margin-left: 20px" | 17 style="margin-left: 20px" |
21 width="489" height="342" | 18 width="489" height="342" |
(...skipping 10 matching lines...) Expand all Loading... |
32 <code>addCategory()</code> or | 29 <code>addCategory()</code> or |
33 calls AuditResult's <code>done()</code> method. | 30 calls AuditResult's <code>done()</code> method. |
34 </p> | 31 </p> |
35 <p>The results may include additional details visualized as an expandable | 32 <p>The results may include additional details visualized as an expandable |
36 tree by the Audits panel. You may build the details tree using the | 33 tree by the Audits panel. You may build the details tree using the |
37 <code>createResult()</code> and <code>addChild()</code> methods. The child node | 34 <code>createResult()</code> and <code>addChild()</code> methods. The child node |
38 may include specially formatted fragments created by the | 35 may include specially formatted fragments created by the |
39 <code>auditResults.createSnippet()</code> | 36 <code>auditResults.createSnippet()</code> |
40 and <code>auditResults.createURL()</code> methods. | 37 and <code>auditResults.createURL()</code> methods. |
41 </p> | 38 </p> |
42 | |
43 <h2>Examples</h2> | 39 <h2>Examples</h2> |
44 <p>The following example adds a handler for onAuditStarted event that creates | 40 <p>The following example adds a handler for onAuditStarted event that creates |
45 two audit results and populates one of them with the additional details: | 41 two audit results and populates one of them with the additional details: |
46 </p> | 42 </p> |
47 | |
48 <pre> | 43 <pre> |
49 category.onAuditStarted.addListener(function(results) { | 44 category.onAuditStarted.addListener(function(results) { |
50 var details = results.createResult("Details..."); | 45 var details = results.createResult("Details..."); |
51 var styles = details.addChild("2 styles with small font"); | 46 var styles = details.addChild("2 styles with small font"); |
52 var elements = details.addChild("3 elements with small font"); | 47 var elements = details.addChild("3 elements with small font"); |
53 | |
54 results.addResult("Font Size (5)", | 48 results.addResult("Font Size (5)", |
55 "5 elements use font size below 10pt", | 49 "5 elements use font size below 10pt", |
56 results.Severity.Severe, | 50 results.Severity.Severe, |
57 details); | 51 details); |
58 results.addResult("Contrast", | 52 results.addResult("Contrast", |
59 "Text should stand out from background", | 53 "Text should stand out from background", |
60 results.Severity.Info); | 54 results.Severity.Info); |
61 }); | 55 }); |
62 </pre> | 56 </pre> |
63 <p>The audit result tree produced by the snippet above will look like this: | 57 <p>The audit result tree produced by the snippet above will look like this: |
64 </p> | 58 </p> |
65 <img src="{{static}}/images/devtools-audits-results.png" | 59 <img src="{{static}}/images/devtools-audits-results.png" |
66 style="margin-left: 20px" | 60 style="margin-left: 20px" |
67 width="330" height="169" | 61 width="330" height="169" |
68 alt="Audit results example" /> | 62 alt="Audit results example" /> |
69 | |
70 <p> | 63 <p> |
71 You can find more examples that use this API in | 64 You can find more examples that use this API in |
72 <a href="samples.html#devtools.audits">Samples</a>. | 65 <a href="samples.html#devtools.audits">Samples</a>. |
73 </p> | 66 </p> |
74 <!-- END AUTHORED CONTENT --> | |
OLD | NEW |