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 | 8 |
10 <h2>Overview</h2> | 9 <h2>Overview</h2> |
11 | 10 |
12 <p> | 11 <p> |
13 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> |
14 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 |
15 <em>Readability</em>:</p> | 14 <em>Readability</em>:</p> |
16 <pre> | 15 <pre> |
17 var category = chrome.experimental.devtools.audits.addCategory("Readability", 2)
; | 16 var category = chrome.experimental.devtools.audits.addCategory("Readability", 2)
; |
18 </pre> | 17 </pre> |
19 <img src="../images/devtools-audits-category.png" | 18 <img src="{{static}}/images/devtools-audits-category.png" |
20 style="margin-left: 20px" | 19 style="margin-left: 20px" |
21 width="489" height="342" | 20 width="489" height="342" |
22 alt="Extension audit category on the launch screen of Audits panel" /> | 21 alt="Extension audit category on the launch screen of Audits panel" /> |
23 <p> | 22 <p> |
24 If the category's checkbox is checked, the <code>onAuditStarted</code> event of | 23 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. | 24 that category will be fired when user clicks the <em>Run</em> button. |
26 </p> | 25 </p> |
27 <p>The event handler in your extension receives <code>AuditResults</code> | 26 <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> | 27 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 | 28 method. This may be done asynchronously, i.e. after the handler returns. The |
(...skipping 25 matching lines...) Expand all Loading... |
55 "5 elements use font size below 10pt", | 54 "5 elements use font size below 10pt", |
56 results.Severity.Severe, | 55 results.Severity.Severe, |
57 details); | 56 details); |
58 results.addResult("Contrast", | 57 results.addResult("Contrast", |
59 "Text should stand out from background", | 58 "Text should stand out from background", |
60 results.Severity.Info); | 59 results.Severity.Info); |
61 }); | 60 }); |
62 </pre> | 61 </pre> |
63 <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: |
64 </p> | 63 </p> |
65 <img src="../images/devtools-audits-results.png" | 64 <img src="{{static}}/images/devtools-audits-results.png" |
66 style="margin-left: 20px" | 65 style="margin-left: 20px" |
67 width="330" height="169" | 66 width="330" height="169" |
68 alt="Audit results example" /> | 67 alt="Audit results example" /> |
69 | 68 |
70 <p> | 69 <p> |
71 You can find more examples that use this API in | 70 You can find more examples that use this API in |
72 <a href="samples.html#devtools.audits">Samples</a>. | 71 <a href="samples.html#devtools.audits">Samples</a>. |
73 </p> | 72 </p> |
74 <!-- END AUTHORED CONTENT --> | |
OLD | NEW |