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