1fb726d48Sopenharmony_ci<!DOCTYPE html>
2fb726d48Sopenharmony_ci<html>
3fb726d48Sopenharmony_ci  <head>
4fb726d48Sopenharmony_ci    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5fb726d48Sopenharmony_ci    <title>quickstart_parsing_ability</title>
6fb726d48Sopenharmony_ci
7fb726d48Sopenharmony_ci    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
8fb726d48Sopenharmony_ci
9fb726d48Sopenharmony_ci    <style>
10fb726d48Sopenharmony_ci      code[class*='smartperf-'],
11fb726d48Sopenharmony_ci      pre[class*='smartperf-'] {
12fb726d48Sopenharmony_ci        color: #333333;
13fb726d48Sopenharmony_ci        background: none;
14fb726d48Sopenharmony_ci        font-family: Helvetica;
15fb726d48Sopenharmony_ci        line-height: 1.6;
16fb726d48Sopenharmony_ci        text-align: left;
17fb726d48Sopenharmony_ci        white-space: pre;
18fb726d48Sopenharmony_ci        -moz-tab-size: 9;
19fb726d48Sopenharmony_ci        -o-tab-size: 9;
20fb726d48Sopenharmony_ci        tab-size: 8;
21fb726d48Sopenharmony_ci        -webkit-hyphens: none;
22fb726d48Sopenharmony_ci        -moz-hyphens: none;
23fb726d48Sopenharmony_ci        -ms-hyphens: none;
24fb726d48Sopenharmony_ci        hyphens: none;
25fb726d48Sopenharmony_ci      }
26fb726d48Sopenharmony_ci
27fb726d48Sopenharmony_ci      /* Code blocks */
28fb726d48Sopenharmony_ci      pre[class*='smartperf-'] {
29fb726d48Sopenharmony_ci        padding: 0.9em;
30fb726d48Sopenharmony_ci        overflow: auto;
31fb726d48Sopenharmony_ci        border-radius: 2px;
32fb726d48Sopenharmony_ci        background: #f5f5f4;
33fb726d48Sopenharmony_ci      }
34fb726d48Sopenharmony_ci
35fb726d48Sopenharmony_ci      /* Inline code */
36fb726d48Sopenharmony_ci      :not(pre) > code[class*='smartperf-'] {
37fb726d48Sopenharmony_ci        white-space: normal;
38fb726d48Sopenharmony_ci        background: #fcf8f8;
39fb726d48Sopenharmony_ci        padding: 1px 0.2em;
40fb726d48Sopenharmony_ci        border-radius: 1px 0.3em;
41fb726d48Sopenharmony_ci      }
42fb726d48Sopenharmony_ci
43fb726d48Sopenharmony_ci      .tk.comment,
44fb726d48Sopenharmony_ci      .tk.blockquote {
45fb726d48Sopenharmony_ci        color: #8c918c;
46fb726d48Sopenharmony_ci      }
47fb726d48Sopenharmony_ci
48fb726d48Sopenharmony_ci      .tk.cdata {
49fb726d48Sopenharmony_ci        color: #183898;
50fb726d48Sopenharmony_ci      }
51fb726d48Sopenharmony_ci
52fb726d48Sopenharmony_ci      .tk.doctype,
53fb726d48Sopenharmony_ci      .tk.punctuation,
54fb726d48Sopenharmony_ci      .tk.variable,
55fb726d48Sopenharmony_ci      .tk.macro.property {
56fb726d48Sopenharmony_ci        color: #424242;
57fb726d48Sopenharmony_ci      }
58fb726d48Sopenharmony_ci
59fb726d48Sopenharmony_ci      .tk.operator,
60fb726d48Sopenharmony_ci      .tk.important,
61fb726d48Sopenharmony_ci      .tk.keyword,
62fb726d48Sopenharmony_ci      .tk.rule,
63fb726d48Sopenharmony_ci      .tk.builtin {
64fb726d48Sopenharmony_ci        color: #b71d65;
65fb726d48Sopenharmony_ci      }
66fb726d48Sopenharmony_ci
67fb726d48Sopenharmony_ci      .tk.string,
68fb726d48Sopenharmony_ci      .tk.url,
69fb726d48Sopenharmony_ci      .tk.regex,
70fb726d48Sopenharmony_ci      .tk.attr-value {
71fb726d48Sopenharmony_ci        color: #16338d;
72fb726d48Sopenharmony_ci      }
73fb726d48Sopenharmony_ci
74fb726d48Sopenharmony_ci      .tk.property,
75fb726d48Sopenharmony_ci      .tk.number,
76fb726d48Sopenharmony_ci      .tk.boolean,
77fb726d48Sopenharmony_ci      .tk.entity,
78fb726d48Sopenharmony_ci      .tk.atrule,
79fb726d48Sopenharmony_ci      .tk.constant,
80fb726d48Sopenharmony_ci      .tk.symbol,
81fb726d48Sopenharmony_ci      .tk.command,
82fb726d48Sopenharmony_ci      .tk.code {
83fb726d48Sopenharmony_ci        color: #037aa2;
84fb726d48Sopenharmony_ci      }
85fb726d48Sopenharmony_ci
86fb726d48Sopenharmony_ci      .tk.tag,
87fb726d48Sopenharmony_ci      .tk.selector,
88fb726d48Sopenharmony_ci      .tk.prolog {
89fb726d48Sopenharmony_ci        color: #69ad62;
90fb726d48Sopenharmony_ci      }
91fb726d48Sopenharmony_ci
92fb726d48Sopenharmony_ci      .tk.function,
93fb726d48Sopenharmony_ci      .tk.namespace,
94fb726d48Sopenharmony_ci      .tk.pseudo-element,
95fb726d48Sopenharmony_ci      .tk.class,
96fb726d48Sopenharmony_ci      .tk.class-name,
97fb726d48Sopenharmony_ci      .tk.pseudo-class,
98fb726d48Sopenharmony_ci      .tk.id,
99fb726d48Sopenharmony_ci      .tk.url-reference .tk.variable,
100fb726d48Sopenharmony_ci      .tk.attr-name {
101fb726d48Sopenharmony_ci        color: #775d9d;
102fb726d48Sopenharmony_ci      }
103fb726d48Sopenharmony_ci
104fb726d48Sopenharmony_ci      .tk.entity {
105fb726d48Sopenharmony_ci        cursor: help;
106fb726d48Sopenharmony_ci      }
107fb726d48Sopenharmony_ci
108fb726d48Sopenharmony_ci      .tk.title,
109fb726d48Sopenharmony_ci      .tk.title .tk.punctuation {
110fb726d48Sopenharmony_ci        font-weight: bold;
111fb726d48Sopenharmony_ci        color: #1a3773;
112fb726d48Sopenharmony_ci      }
113fb726d48Sopenharmony_ci
114fb726d48Sopenharmony_ci      .tk.list {
115fb726d48Sopenharmony_ci        color: #f56940;
116fb726d48Sopenharmony_ci      }
117fb726d48Sopenharmony_ci
118fb726d48Sopenharmony_ci      .tk.inserted {
119fb726d48Sopenharmony_ci        background-color: #eaffea;
120fb726d48Sopenharmony_ci        color: #509b2f;
121fb726d48Sopenharmony_ci      }
122fb726d48Sopenharmony_ci
123fb726d48Sopenharmony_ci      .tk.deleted {
124fb726d48Sopenharmony_ci        background-color: #fae1e1;
125fb726d48Sopenharmony_ci        color: #ad2d06;
126fb726d48Sopenharmony_ci      }
127fb726d48Sopenharmony_ci
128fb726d48Sopenharmony_ci      .tk.bold {
129fb726d48Sopenharmony_ci        font-weight: bolder;
130fb726d48Sopenharmony_ci      }
131fb726d48Sopenharmony_ci
132fb726d48Sopenharmony_ci      .tk.italic {
133fb726d48Sopenharmony_ci        font-style: normal;
134fb726d48Sopenharmony_ci      }
135fb726d48Sopenharmony_ci
136fb726d48Sopenharmony_ci      /* JSON */
137fb726d48Sopenharmony_ci      .smartperf-json .tk.property {
138fb726d48Sopenharmony_ci        color: #19358c;
139fb726d48Sopenharmony_ci      }
140fb726d48Sopenharmony_ci
141fb726d48Sopenharmony_ci      .smartperf-markup .tk.tag .tk.punctuation {
142fb726d48Sopenharmony_ci        color: #2c2b2b;
143fb726d48Sopenharmony_ci      }
144fb726d48Sopenharmony_ci
145fb726d48Sopenharmony_ci      /* CSS */
146fb726d48Sopenharmony_ci      code.smartperf-css,
147fb726d48Sopenharmony_ci      .smartperf-css .tk.function {
148fb726d48Sopenharmony_ci        color: #047ca4;
149fb726d48Sopenharmony_ci      }
150fb726d48Sopenharmony_ci
151fb726d48Sopenharmony_ci      /* YAML */
152fb726d48Sopenharmony_ci      .smartperf-yaml .tk.atrule {
153fb726d48Sopenharmony_ci        color: #609b5a;
154fb726d48Sopenharmony_ci      }
155fb726d48Sopenharmony_ci
156fb726d48Sopenharmony_ci      code.smartperf-yaml {
157fb726d48Sopenharmony_ci        color: #153491;
158fb726d48Sopenharmony_ci      }
159fb726d48Sopenharmony_ci
160fb726d48Sopenharmony_ci      /* Ruby */
161fb726d48Sopenharmony_ci      .smartperf-ruby .tk.function {
162fb726d48Sopenharmony_ci        color: #3f3e3e;
163fb726d48Sopenharmony_ci      }
164fb726d48Sopenharmony_ci
165fb726d48Sopenharmony_ci      /* Markdown */
166fb726d48Sopenharmony_ci      .smartperf-markdown .tk.url {
167fb726d48Sopenharmony_ci        color: #6e5298;
168fb726d48Sopenharmony_ci      }
169fb726d48Sopenharmony_ci
170fb726d48Sopenharmony_ci      /* Makefile */
171fb726d48Sopenharmony_ci      .smartperf-makefile .tk.symbol {
172fb726d48Sopenharmony_ci        color: #6c5393;
173fb726d48Sopenharmony_ci      }
174fb726d48Sopenharmony_ci
175fb726d48Sopenharmony_ci      .smartperf-makefile .tk.variable {
176fb726d48Sopenharmony_ci        color: #183488;
177fb726d48Sopenharmony_ci      }
178fb726d48Sopenharmony_ci
179fb726d48Sopenharmony_ci      .smartperf-makefile .tk.builtin {
180fb726d48Sopenharmony_ci        color: #027ba4;
181fb726d48Sopenharmony_ci      }
182fb726d48Sopenharmony_ci
183fb726d48Sopenharmony_ci      /* Bash */
184fb726d48Sopenharmony_ci      .smartperf-bash .tk.keyword {
185fb726d48Sopenharmony_ci        color: #027fa9;
186fb726d48Sopenharmony_ci      }
187fb726d48Sopenharmony_ci
188fb726d48Sopenharmony_ci      /* highlight */
189fb726d48Sopenharmony_ci      pre[dl] {
190fb726d48Sopenharmony_ci        position: relative;
191fb726d48Sopenharmony_ci        padding: 1em 1px 1px 0.9em;
192fb726d48Sopenharmony_ci      }
193fb726d48Sopenharmony_ci
194fb726d48Sopenharmony_ci      pre[dl] .line-highlight-wrapper {
195fb726d48Sopenharmony_ci        position: absolute;
196fb726d48Sopenharmony_ci        top: 1px;
197fb726d48Sopenharmony_ci        left: 1px;
198fb726d48Sopenharmony_ci        background-color: transparent;
199fb726d48Sopenharmony_ci        display: block;
200fb726d48Sopenharmony_ci        width: 99%;
201fb726d48Sopenharmony_ci      }
202fb726d48Sopenharmony_ci
203fb726d48Sopenharmony_ci      pre[dl] .line-highlight {
204fb726d48Sopenharmony_ci        position: absolute;
205fb726d48Sopenharmony_ci        left: 1px;
206fb726d48Sopenharmony_ci        right: 1px;
207fb726d48Sopenharmony_ci        padding: inherit;
208fb726d48Sopenharmony_ci        margin-top: 0.9em;
209fb726d48Sopenharmony_ci        background: hsla(25, 21%, 50%, 0.08);
210fb726d48Sopenharmony_ci        background: linear-gradient(to right, hsla(24, 20%, 50%, 0.1) 70%, hsla(24, 20%, 50%, 0));
211fb726d48Sopenharmony_ci        pointer-events: none;
212fb726d48Sopenharmony_ci        line-height: inherit;
213fb726d48Sopenharmony_ci        white-space: pre;
214fb726d48Sopenharmony_ci      }
215fb726d48Sopenharmony_ci
216fb726d48Sopenharmony_ci      pre[dl] .line-highlight:before,
217fb726d48Sopenharmony_ci      pre[dl] .line-highlight[data-end]:after {
218fb726d48Sopenharmony_ci        content: attr(data-start);
219fb726d48Sopenharmony_ci        position: absolute;
220fb726d48Sopenharmony_ci        text-shadow: none;
221fb726d48Sopenharmony_ci        top: 0.3em;
222fb726d48Sopenharmony_ci        left: 0.7em;
223fb726d48Sopenharmony_ci        min-width: 0.9em;
224fb726d48Sopenharmony_ci        padding: 1px 0.6em;
225fb726d48Sopenharmony_ci        background-color: hsla(24, 20%, 47%, 0.4);
226fb726d48Sopenharmony_ci        color: hsl(20, 11%, 95%);
227fb726d48Sopenharmony_ci        text-align: center;
228fb726d48Sopenharmony_ci        vertical-align: 0.2em;
229fb726d48Sopenharmony_ci        border-radius: 10000px;
230fb726d48Sopenharmony_ci        box-shadow: 1px 2px #fdf6f6;
231fb726d48Sopenharmony_ci      }
232fb726d48Sopenharmony_ci
233fb726d48Sopenharmony_ci      pre[dl] .line-highlight[data-end]:after {
234fb726d48Sopenharmony_ci        content: attr(data-end);
235fb726d48Sopenharmony_ci        top: auto;
236fb726d48Sopenharmony_ci        bottom: 0.5em;
237fb726d48Sopenharmony_ci      }
238fb726d48Sopenharmony_ci
239fb726d48Sopenharmony_ci      html body {
240fb726d48Sopenharmony_ci        line-height: 1.6;
241fb726d48Sopenharmony_ci        font-size: 16px;
242fb726d48Sopenharmony_ci        color: #333333;
243fb726d48Sopenharmony_ci        overflow: initial;
244fb726d48Sopenharmony_ci        word-wrap: break-word;
245fb726d48Sopenharmony_ci        font-family: Helvetica;
246fb726d48Sopenharmony_ci        box-sizing: border-box;
247fb726d48Sopenharmony_ci      }
248fb726d48Sopenharmony_ci
249fb726d48Sopenharmony_ci      html body > :first-child {
250fb726d48Sopenharmony_ci        margin-top: 0px;
251fb726d48Sopenharmony_ci      }
252fb726d48Sopenharmony_ci
253fb726d48Sopenharmony_ci      html body h1,
254fb726d48Sopenharmony_ci      html body h2,
255fb726d48Sopenharmony_ci      html body h3,
256fb726d48Sopenharmony_ci      html body h4,
257fb726d48Sopenharmony_ci      html body h5,
258fb726d48Sopenharmony_ci      html body h6 {
259fb726d48Sopenharmony_ci        margin-top: 1em;
260fb726d48Sopenharmony_ci        margin-bottom: 16px;
261fb726d48Sopenharmony_ci        color: #000000;
262fb726d48Sopenharmony_ci        line-height: 1.2;
263fb726d48Sopenharmony_ci      }
264fb726d48Sopenharmony_ci
265fb726d48Sopenharmony_ci      html body h1 {
266fb726d48Sopenharmony_ci        font-weight: 300;
267fb726d48Sopenharmony_ci        font-size: 2.25em;
268fb726d48Sopenharmony_ci        padding-bottom: 0.3em;
269fb726d48Sopenharmony_ci      }
270fb726d48Sopenharmony_ci
271fb726d48Sopenharmony_ci      html body h2 {
272fb726d48Sopenharmony_ci        font-weight: 410;
273fb726d48Sopenharmony_ci        font-size: 1.74em;
274fb726d48Sopenharmony_ci        padding-bottom: 0.2em;
275fb726d48Sopenharmony_ci      }
276fb726d48Sopenharmony_ci
277fb726d48Sopenharmony_ci      html body h3 {
278fb726d48Sopenharmony_ci        font-size: 1.6em;
279fb726d48Sopenharmony_ci        font-weight: 501;
280fb726d48Sopenharmony_ci      }
281fb726d48Sopenharmony_ci
282fb726d48Sopenharmony_ci      html body h4 {
283fb726d48Sopenharmony_ci        font-size: 1.26em;
284fb726d48Sopenharmony_ci        font-weight: 601;
285fb726d48Sopenharmony_ci      }
286fb726d48Sopenharmony_ci
287fb726d48Sopenharmony_ci      html body h5 {
288fb726d48Sopenharmony_ci        font-size: 1.2em;
289fb726d48Sopenharmony_ci        font-weight: 601;
290fb726d48Sopenharmony_ci      }
291fb726d48Sopenharmony_ci
292fb726d48Sopenharmony_ci      html body h6 {
293fb726d48Sopenharmony_ci        font-size: 0.9em;
294fb726d48Sopenharmony_ci        font-weight: 601;
295fb726d48Sopenharmony_ci      }
296fb726d48Sopenharmony_ci
297fb726d48Sopenharmony_ci      html body h1,
298fb726d48Sopenharmony_ci      html body h2,
299fb726d48Sopenharmony_ci      html body h3,
300fb726d48Sopenharmony_ci      html body h4,
301fb726d48Sopenharmony_ci      html body h5 {
302fb726d48Sopenharmony_ci        font-weight: 601;
303fb726d48Sopenharmony_ci      }
304fb726d48Sopenharmony_ci
305fb726d48Sopenharmony_ci      html body h5 {
306fb726d48Sopenharmony_ci        font-size: 0.9em;
307fb726d48Sopenharmony_ci      }
308fb726d48Sopenharmony_ci
309fb726d48Sopenharmony_ci      html body h6 {
310fb726d48Sopenharmony_ci        color: #5c5c5c;
311fb726d48Sopenharmony_ci      }
312fb726d48Sopenharmony_ci
313fb726d48Sopenharmony_ci      html body strong {
314fb726d48Sopenharmony_ci        color: #090909;
315fb726d48Sopenharmony_ci      }
316fb726d48Sopenharmony_ci
317fb726d48Sopenharmony_ci      html body del {
318fb726d48Sopenharmony_ci        color: #525252;
319fb726d48Sopenharmony_ci      }
320fb726d48Sopenharmony_ci
321fb726d48Sopenharmony_ci      html body a:not([href]) {
322fb726d48Sopenharmony_ci        color: inherit;
323fb726d48Sopenharmony_ci        text-decoration: none;
324fb726d48Sopenharmony_ci      }
325fb726d48Sopenharmony_ci
326fb726d48Sopenharmony_ci      html body a {
327fb726d48Sopenharmony_ci        color: #0192da;
328fb726d48Sopenharmony_ci        text-decoration: none;
329fb726d48Sopenharmony_ci      }
330fb726d48Sopenharmony_ci
331fb726d48Sopenharmony_ci      html body a:hover {
332fb726d48Sopenharmony_ci        color: #029dea;
333fb726d48Sopenharmony_ci        text-decoration: none;
334fb726d48Sopenharmony_ci      }
335fb726d48Sopenharmony_ci
336fb726d48Sopenharmony_ci      html body img {
337fb726d48Sopenharmony_ci        max-width: 99%;
338fb726d48Sopenharmony_ci      }
339fb726d48Sopenharmony_ci
340fb726d48Sopenharmony_ci      html body > p {
341fb726d48Sopenharmony_ci        margin-top: 1px;
342fb726d48Sopenharmony_ci        margin-bottom: 15px;
343fb726d48Sopenharmony_ci        word-wrap: break-word;
344fb726d48Sopenharmony_ci      }
345fb726d48Sopenharmony_ci
346fb726d48Sopenharmony_ci      html body > ul,
347fb726d48Sopenharmony_ci      html body > ol {
348fb726d48Sopenharmony_ci        margin-bottom: 15px;
349fb726d48Sopenharmony_ci      }
350fb726d48Sopenharmony_ci
351fb726d48Sopenharmony_ci      html body ul,
352fb726d48Sopenharmony_ci      html body ol {
353fb726d48Sopenharmony_ci        padding-left: 1.9em;
354fb726d48Sopenharmony_ci      }
355fb726d48Sopenharmony_ci
356fb726d48Sopenharmony_ci      html body ul.no-list,
357fb726d48Sopenharmony_ci      html body ol.no-list {
358fb726d48Sopenharmony_ci        padding: 0px;
359fb726d48Sopenharmony_ci        list-style-type: none;
360fb726d48Sopenharmony_ci      }
361fb726d48Sopenharmony_ci
362fb726d48Sopenharmony_ci      html body ul ul,
363fb726d48Sopenharmony_ci      html body ul ol,
364fb726d48Sopenharmony_ci      html body ol ol,
365fb726d48Sopenharmony_ci      html body ol ul {
366fb726d48Sopenharmony_ci        margin-top: 1px;
367fb726d48Sopenharmony_ci        margin-bottom: 1px;
368fb726d48Sopenharmony_ci      }
369fb726d48Sopenharmony_ci
370fb726d48Sopenharmony_ci      html body li {
371fb726d48Sopenharmony_ci        margin-bottom: 1px;
372fb726d48Sopenharmony_ci      }
373fb726d48Sopenharmony_ci
374fb726d48Sopenharmony_ci      html body li.task-list-item {
375fb726d48Sopenharmony_ci        list-style: none;
376fb726d48Sopenharmony_ci      }
377fb726d48Sopenharmony_ci
378fb726d48Sopenharmony_ci      html body li > p {
379fb726d48Sopenharmony_ci        margin-top: 1px;
380fb726d48Sopenharmony_ci        margin-bottom: 1px;
381fb726d48Sopenharmony_ci      }
382fb726d48Sopenharmony_ci
383fb726d48Sopenharmony_ci      html body .task-list-item-checkbox {
384fb726d48Sopenharmony_ci        margin: 0 0.3em 0.24em -1.7em;
385fb726d48Sopenharmony_ci        vertical-align: middle;
386fb726d48Sopenharmony_ci      }
387fb726d48Sopenharmony_ci
388fb726d48Sopenharmony_ci      html body .task-list-item-checkbox:hover {
389fb726d48Sopenharmony_ci        cursor: pointer;
390fb726d48Sopenharmony_ci      }
391fb726d48Sopenharmony_ci
392fb726d48Sopenharmony_ci      html body blockquote {
393fb726d48Sopenharmony_ci        padding: 0.1px 15px 0 0.1px;
394fb726d48Sopenharmony_ci        font-size: inherit;
395fb726d48Sopenharmony_ci        color: #5c5c5c;
396fb726d48Sopenharmony_ci        margin: 16px 0.1px 0 0.1px;
397fb726d48Sopenharmony_ci        border-left: 3px solid #cbc9c9;
398fb726d48Sopenharmony_ci        background-color: #e8e6e6;
399fb726d48Sopenharmony_ci      }
400fb726d48Sopenharmony_ci
401fb726d48Sopenharmony_ci      html body blockquote > :first-child {
402fb726d48Sopenharmony_ci        margin-top: 0.2px;
403fb726d48Sopenharmony_ci      }
404fb726d48Sopenharmony_ci
405fb726d48Sopenharmony_ci      html body blockquote > :last-child {
406fb726d48Sopenharmony_ci        margin-bottom: 0.1px;
407fb726d48Sopenharmony_ci      }
408fb726d48Sopenharmony_ci
409fb726d48Sopenharmony_ci      html body hr {
410fb726d48Sopenharmony_ci        height: 5px;
411fb726d48Sopenharmony_ci        background-color: #cbcaca;
412fb726d48Sopenharmony_ci        margin: 32px 0 0.1px 0;
413fb726d48Sopenharmony_ci        border: 0 none;
414fb726d48Sopenharmony_ci      }
415fb726d48Sopenharmony_ci
416fb726d48Sopenharmony_ci      html body table {
417fb726d48Sopenharmony_ci        overflow: auto;
418fb726d48Sopenharmony_ci        border-collapse: collapse;
419fb726d48Sopenharmony_ci        margin: 15px 0.1px 20px 0.1px;
420fb726d48Sopenharmony_ci        border-spacing: 0;
421fb726d48Sopenharmony_ci      }
422fb726d48Sopenharmony_ci
423fb726d48Sopenharmony_ci      html body table th {
424fb726d48Sopenharmony_ci        font-weight: bold;
425fb726d48Sopenharmony_ci        color: #000000;
426fb726d48Sopenharmony_ci      }
427fb726d48Sopenharmony_ci
428fb726d48Sopenharmony_ci      html body table td,
429fb726d48Sopenharmony_ci      html body table th {
430fb726d48Sopenharmony_ci        border: 1px solid #d6d6d6;
431fb726d48Sopenharmony_ci        padding: 2px 14px;
432fb726d48Sopenharmony_ci      }
433fb726d48Sopenharmony_ci
434fb726d48Sopenharmony_ci      html body dl {
435fb726d48Sopenharmony_ci        padding: 0px;
436fb726d48Sopenharmony_ci      }
437fb726d48Sopenharmony_ci
438fb726d48Sopenharmony_ci      html body dl dt {
439fb726d48Sopenharmony_ci        padding: 0px;
440fb726d48Sopenharmony_ci        margin-top: 15px;
441fb726d48Sopenharmony_ci        font-size: 0.9em;
442fb726d48Sopenharmony_ci        font-style: italic;
443fb726d48Sopenharmony_ci        font-weight: bold;
444fb726d48Sopenharmony_ci      }
445fb726d48Sopenharmony_ci
446fb726d48Sopenharmony_ci      html body dl dd {
447fb726d48Sopenharmony_ci        padding: 0px 17px;
448fb726d48Sopenharmony_ci        margin-bottom: 17px;
449fb726d48Sopenharmony_ci      }
450fb726d48Sopenharmony_ci
451fb726d48Sopenharmony_ci      html body code {
452fb726d48Sopenharmony_ci        font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
453fb726d48Sopenharmony_ci        font-size: 0.86em !important;
454fb726d48Sopenharmony_ci        color: #000000;
455fb726d48Sopenharmony_ci        background-color: #f0f0f0;
456fb726d48Sopenharmony_ci        border-radius: 4px;
457fb726d48Sopenharmony_ci        padding: 0.3em 0px;
458fb726d48Sopenharmony_ci      }
459fb726d48Sopenharmony_ci
460fb726d48Sopenharmony_ci      html body code::before,
461fb726d48Sopenharmony_ci      html body code::after {
462fb726d48Sopenharmony_ci        letter-spacing: -0.1em;
463fb726d48Sopenharmony_ci        content: '\00a0';
464fb726d48Sopenharmony_ci      }
465fb726d48Sopenharmony_ci
466fb726d48Sopenharmony_ci      html body pre > code {
467fb726d48Sopenharmony_ci        padding: 1px;
468fb726d48Sopenharmony_ci        margin: 0px;
469fb726d48Sopenharmony_ci        font-size: 0.86em !important;
470fb726d48Sopenharmony_ci        word-break: normal;
471fb726d48Sopenharmony_ci        white-space: pre;
472fb726d48Sopenharmony_ci        background: transparent;
473fb726d48Sopenharmony_ci        border: 0px;
474fb726d48Sopenharmony_ci      }
475fb726d48Sopenharmony_ci
476fb726d48Sopenharmony_ci      html body .highlight {
477fb726d48Sopenharmony_ci        margin-bottom: 17px;
478fb726d48Sopenharmony_ci      }
479fb726d48Sopenharmony_ci
480fb726d48Sopenharmony_ci      html body .highlight pre,
481fb726d48Sopenharmony_ci      html body pre {
482fb726d48Sopenharmony_ci        padding: 0.9em;
483fb726d48Sopenharmony_ci        overflow: auto;
484fb726d48Sopenharmony_ci        font-size: 0.86em !important;
485fb726d48Sopenharmony_ci        line-height: 1.46;
486fb726d48Sopenharmony_ci        border: #d6d6d6;
487fb726d48Sopenharmony_ci        border-radius: 4px;
488fb726d48Sopenharmony_ci      }
489fb726d48Sopenharmony_ci
490fb726d48Sopenharmony_ci      html body .highlight pre {
491fb726d48Sopenharmony_ci        margin-bottom: 0px;
492fb726d48Sopenharmony_ci        word-break: normal;
493fb726d48Sopenharmony_ci      }
494fb726d48Sopenharmony_ci
495fb726d48Sopenharmony_ci      html body pre code,
496fb726d48Sopenharmony_ci      html body pre tt {
497fb726d48Sopenharmony_ci        display: inline;
498fb726d48Sopenharmony_ci        max-width: initial;
499fb726d48Sopenharmony_ci        padding: 1px;
500fb726d48Sopenharmony_ci        margin: 1px;
501fb726d48Sopenharmony_ci        overflow: initial;
502fb726d48Sopenharmony_ci        line-height: inherit;
503fb726d48Sopenharmony_ci        word-wrap: normal;
504fb726d48Sopenharmony_ci        background-color: transparent;
505fb726d48Sopenharmony_ci        border: 1px;
506fb726d48Sopenharmony_ci      }
507fb726d48Sopenharmony_ci
508fb726d48Sopenharmony_ci      html body pre code:before,
509fb726d48Sopenharmony_ci      html body pre tt:before,
510fb726d48Sopenharmony_ci      html body pre code:after,
511fb726d48Sopenharmony_ci      html body pre tt:after {
512fb726d48Sopenharmony_ci        content: normal;
513fb726d48Sopenharmony_ci      }
514fb726d48Sopenharmony_ci
515fb726d48Sopenharmony_ci      html body p,
516fb726d48Sopenharmony_ci      html body blockquote,
517fb726d48Sopenharmony_ci      html body ul,
518fb726d48Sopenharmony_ci      html body ol,
519fb726d48Sopenharmony_ci      html body dl,
520fb726d48Sopenharmony_ci      html body pre {
521fb726d48Sopenharmony_ci        margin-top: 1px;
522fb726d48Sopenharmony_ci        margin-bottom: 17px;
523fb726d48Sopenharmony_ci      }
524fb726d48Sopenharmony_ci
525fb726d48Sopenharmony_ci      html body kbd {
526fb726d48Sopenharmony_ci        color: #000000;
527fb726d48Sopenharmony_ci        border: 3px solid #d6d6d6;
528fb726d48Sopenharmony_ci        border-bottom: 3px solid #c7c7c7;
529fb726d48Sopenharmony_ci        padding: 3px 5px;
530fb726d48Sopenharmony_ci        background-color: #f0f0f0;
531fb726d48Sopenharmony_ci        border-radius: 2px;
532fb726d48Sopenharmony_ci      }
533fb726d48Sopenharmony_ci
534fb726d48Sopenharmony_ci      @media print {
535fb726d48Sopenharmony_ci        html body {
536fb726d48Sopenharmony_ci          background-color: #ffffff;
537fb726d48Sopenharmony_ci        }
538fb726d48Sopenharmony_ci
539fb726d48Sopenharmony_ci        html body h1,
540fb726d48Sopenharmony_ci        html body h2,
541fb726d48Sopenharmony_ci        html body h3,
542fb726d48Sopenharmony_ci        html body h4,
543fb726d48Sopenharmony_ci        html body h5,
544fb726d48Sopenharmony_ci        html body h6 {
545fb726d48Sopenharmony_ci          color: #000000;
546fb726d48Sopenharmony_ci          page-break-after: avoid;
547fb726d48Sopenharmony_ci        }
548fb726d48Sopenharmony_ci
549fb726d48Sopenharmony_ci        html body blockquote {
550fb726d48Sopenharmony_ci          color: #5c5c53;
551fb726d48Sopenharmony_ci        }
552fb726d48Sopenharmony_ci
553fb726d48Sopenharmony_ci        html body pre {
554fb726d48Sopenharmony_ci          page-break-inside: avoid;
555fb726d48Sopenharmony_ci        }
556fb726d48Sopenharmony_ci
557fb726d48Sopenharmony_ci        html body table {
558fb726d48Sopenharmony_ci          display: table;
559fb726d48Sopenharmony_ci        }
560fb726d48Sopenharmony_ci
561fb726d48Sopenharmony_ci        html body img {
562fb726d48Sopenharmony_ci          display: block;
563fb726d48Sopenharmony_ci          max-width: 99%;
564fb726d48Sopenharmony_ci          max-height: 99%;
565fb726d48Sopenharmony_ci        }
566fb726d48Sopenharmony_ci
567fb726d48Sopenharmony_ci        html body pre,
568fb726d48Sopenharmony_ci        html body code {
569fb726d48Sopenharmony_ci          word-wrap: break-word;
570fb726d48Sopenharmony_ci          white-space: pre;
571fb726d48Sopenharmony_ci        }
572fb726d48Sopenharmony_ci      }
573fb726d48Sopenharmony_ci
574fb726d48Sopenharmony_ci      .smartperf-preview {
575fb726d48Sopenharmony_ci        width: 68vw;
576fb726d48Sopenharmony_ci        height: 99%;
577fb726d48Sopenharmony_ci        box-sizing: border-box;
578fb726d48Sopenharmony_ci        overflow: hidden;
579fb726d48Sopenharmony_ci        background-color: #fff;
580fb726d48Sopenharmony_ci      }
581fb726d48Sopenharmony_ci
582fb726d48Sopenharmony_ci      .smartperf-preview .pagebreak,
583fb726d48Sopenharmony_ci      .smartperf-preview .newpage {
584fb726d48Sopenharmony_ci        page-break-before: always;
585fb726d48Sopenharmony_ci      }
586fb726d48Sopenharmony_ci
587fb726d48Sopenharmony_ci      .smartperf-preview pre.line-numbers {
588fb726d48Sopenharmony_ci        position: relative;
589fb726d48Sopenharmony_ci        padding-left: 3.7em;
590fb726d48Sopenharmony_ci        counter-reset: linenumber;
591fb726d48Sopenharmony_ci      }
592fb726d48Sopenharmony_ci
593fb726d48Sopenharmony_ci      .smartperf-preview pre.line-numbers > code {
594fb726d48Sopenharmony_ci        position: relative;
595fb726d48Sopenharmony_ci      }
596fb726d48Sopenharmony_ci
597fb726d48Sopenharmony_ci      .smartperf-preview pre.line-numbers .line-numbers-rows {
598fb726d48Sopenharmony_ci        position: absolute;
599fb726d48Sopenharmony_ci        pointer-events: none;
600fb726d48Sopenharmony_ci        top: 0.9em;
601fb726d48Sopenharmony_ci        font-size: 99%;
602fb726d48Sopenharmony_ci        left: 1px;
603fb726d48Sopenharmony_ci        width: 3em;
604fb726d48Sopenharmony_ci        letter-spacing: -1px;
605fb726d48Sopenharmony_ci        border-right: 1px solid #999;
606fb726d48Sopenharmony_ci        -webkit-user-select: none;
607fb726d48Sopenharmony_ci        -moz-user-select: none;
608fb726d48Sopenharmony_ci        -ms-user-select: none;
609fb726d48Sopenharmony_ci        user-select: none;
610fb726d48Sopenharmony_ci      }
611fb726d48Sopenharmony_ci
612fb726d48Sopenharmony_ci      .smartperf-preview pre.line-numbers .line-numbers-rows > span {
613fb726d48Sopenharmony_ci        pointer-events: none;
614fb726d48Sopenharmony_ci        display: block;
615fb726d48Sopenharmony_ci        counter-increment: linenumber;
616fb726d48Sopenharmony_ci      }
617fb726d48Sopenharmony_ci
618fb726d48Sopenharmony_ci      .smartperf-preview pre.line-numbers .line-numbers-rows > span:before {
619fb726d48Sopenharmony_ci        content: counter(linenumber);
620fb726d48Sopenharmony_ci        color: #999;
621fb726d48Sopenharmony_ci        display: block;
622fb726d48Sopenharmony_ci        padding-right: 0.79em;
623fb726d48Sopenharmony_ci        text-align: right;
624fb726d48Sopenharmony_ci      }
625fb726d48Sopenharmony_ci
626fb726d48Sopenharmony_ci      .smartperf-preview .mathjax-exps .MathJax_Display {
627fb726d48Sopenharmony_ci        text-align: center !important;
628fb726d48Sopenharmony_ci      }
629fb726d48Sopenharmony_ci
630fb726d48Sopenharmony_ci      .smartperf-preview:not([for='preview']) .code-chunk .btn-group {
631fb726d48Sopenharmony_ci        display: none;
632fb726d48Sopenharmony_ci      }
633fb726d48Sopenharmony_ci
634fb726d48Sopenharmony_ci      .smartperf-preview:not([for='preview']) .code-chunk .status {
635fb726d48Sopenharmony_ci        display: none;
636fb726d48Sopenharmony_ci      }
637fb726d48Sopenharmony_ci
638fb726d48Sopenharmony_ci      .smartperf-preview:not([for='preview']) .code-chunk .output-div {
639fb726d48Sopenharmony_ci        margin-bottom: 16px;
640fb726d48Sopenharmony_ci      }
641fb726d48Sopenharmony_ci
642fb726d48Sopenharmony_ci      .scrollbar-style::-webkit-scrollbar {
643fb726d48Sopenharmony_ci        width: 8px;
644fb726d48Sopenharmony_ci      }
645fb726d48Sopenharmony_ci
646fb726d48Sopenharmony_ci      .scrollbar-style::-webkit-scrollbar-track {
647fb726d48Sopenharmony_ci        border-radius: 9px;
648fb726d48Sopenharmony_ci        background-color: transparent;
649fb726d48Sopenharmony_ci      }
650fb726d48Sopenharmony_ci
651fb726d48Sopenharmony_ci      .scrollbar-style::-webkit-scrollbar-thumb {
652fb726d48Sopenharmony_ci        border-radius: 6px;
653fb726d48Sopenharmony_ci        background-color: rgba(150, 150, 150, 1);
654fb726d48Sopenharmony_ci        border: 4px solid rgba(150, 150, 150, 1);
655fb726d48Sopenharmony_ci        background-clip: content-box;
656fb726d48Sopenharmony_ci      }
657fb726d48Sopenharmony_ci
658fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm]) {
659fb726d48Sopenharmony_ci        position: relative;
660fb726d48Sopenharmony_ci        width: 99%;
661fb726d48Sopenharmony_ci        height: 99%;;
662fb726d48Sopenharmony_ci        overflow: auto;
663fb726d48Sopenharmony_ci      }
664fb726d48Sopenharmony_ci
665fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm]) .smartperf-preview {
666fb726d48Sopenharmony_ci        position: relative;
667fb726d48Sopenharmony_ci        top: 1px;
668fb726d48Sopenharmony_ci      }
669fb726d48Sopenharmony_ci
670fb726d48Sopenharmony_ci      @media screen and (min-width: 914px) {
671fb726d48Sopenharmony_ci        html body[for='html-export']:not([dpm]) .smartperf-preview {
672fb726d48Sopenharmony_ci          padding: 2em;
673fb726d48Sopenharmony_ci        }
674fb726d48Sopenharmony_ci      }
675fb726d48Sopenharmony_ci
676fb726d48Sopenharmony_ci      @media screen and (max-width: 914px) {
677fb726d48Sopenharmony_ci        html body[for='html-export']:not([dpm]) .smartperf-preview {
678fb726d48Sopenharmony_ci          padding: 1.9em;
679fb726d48Sopenharmony_ci        }
680fb726d48Sopenharmony_ci      }
681fb726d48Sopenharmony_ci
682fb726d48Sopenharmony_ci      @media screen and (max-width: 450px) {
683fb726d48Sopenharmony_ci        html body[for='html-export']:not([dpm]) .smartperf-preview {
684fb726d48Sopenharmony_ci          font-size: 15px !important;
685fb726d48Sopenharmony_ci          padding: 1.1em;
686fb726d48Sopenharmony_ci        }
687fb726d48Sopenharmony_ci      }
688fb726d48Sopenharmony_ci
689fb726d48Sopenharmony_ci      @media print {
690fb726d48Sopenharmony_ci        html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
691fb726d48Sopenharmony_ci          display: none;
692fb726d48Sopenharmony_ci        }
693fb726d48Sopenharmony_ci      }
694fb726d48Sopenharmony_ci
695fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm]) #sidebar-toc-btn {
696fb726d48Sopenharmony_ci        position: fixed;
697fb726d48Sopenharmony_ci        bottom: 9px;
698fb726d48Sopenharmony_ci        left: 9px;
699fb726d48Sopenharmony_ci        font-size: 28px;
700fb726d48Sopenharmony_ci        cursor: pointer;
701fb726d48Sopenharmony_ci        color: inherit;
702fb726d48Sopenharmony_ci        z-index: 99;
703fb726d48Sopenharmony_ci        width: 31px;
704fb726d48Sopenharmony_ci        text-align: center;
705fb726d48Sopenharmony_ci        opacity: 0.5;
706fb726d48Sopenharmony_ci      }
707fb726d48Sopenharmony_ci
708fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] #sidebar-toc-btn {
709fb726d48Sopenharmony_ci        opacity: 1;
710fb726d48Sopenharmony_ci      }
711fb726d48Sopenharmony_ci
712fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc {
713fb726d48Sopenharmony_ci        position: fixed;
714fb726d48Sopenharmony_ci        top: 1px;
715fb726d48Sopenharmony_ci        left: 1px;
716fb726d48Sopenharmony_ci        width: 300px;
717fb726d48Sopenharmony_ci        height: 99%;
718fb726d48Sopenharmony_ci        padding: 32px 0 48px 0;
719fb726d48Sopenharmony_ci        font-size: 14px;
720fb726d48Sopenharmony_ci        box-shadow: 1px 1px 4px rgba(150, 150, 150, 0.33);
721fb726d48Sopenharmony_ci        box-sizing: border-box;
722fb726d48Sopenharmony_ci        overflow: auto;
723fb726d48Sopenharmony_ci        background-color: inherit;
724fb726d48Sopenharmony_ci      }
725fb726d48Sopenharmony_ci
726fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar {
727fb726d48Sopenharmony_ci        width: 9px;
728fb726d48Sopenharmony_ci      }
729fb726d48Sopenharmony_ci
730fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-track {
731fb726d48Sopenharmony_ci        border-radius: 11px;
732fb726d48Sopenharmony_ci        background-color: transparent;
733fb726d48Sopenharmony_ci      }
734fb726d48Sopenharmony_ci
735fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc::-webkit-scrollbar-thumb {
736fb726d48Sopenharmony_ci        border-radius: 6px;
737fb726d48Sopenharmony_ci        background-color: rgba(150, 150, 150, 0.66);
738fb726d48Sopenharmony_ci        border: 3px solid rgba(150, 150, 150, 0.66);
739fb726d48Sopenharmony_ci        background-clip: content-box;
740fb726d48Sopenharmony_ci      }
741fb726d48Sopenharmony_ci
742fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc a {
743fb726d48Sopenharmony_ci        text-decoration: none;
744fb726d48Sopenharmony_ci      }
745fb726d48Sopenharmony_ci
746fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
747fb726d48Sopenharmony_ci        padding: 1px 1.7em;
748fb726d48Sopenharmony_ci        margin-top: 0.9em;
749fb726d48Sopenharmony_ci      }
750fb726d48Sopenharmony_ci
751fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc li {
752fb726d48Sopenharmony_ci        margin-bottom: 0.8em;
753fb726d48Sopenharmony_ci      }
754fb726d48Sopenharmony_ci
755fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] .md-sidebar-toc ul {
756fb726d48Sopenharmony_ci        list-style-type: none;
757fb726d48Sopenharmony_ci      }
758fb726d48Sopenharmony_ci
759fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
760fb726d48Sopenharmony_ci        left: 301px;
761fb726d48Sopenharmony_ci        width: calc(100% - 300px);
762fb726d48Sopenharmony_ci        padding: 2em calc(50% - 457px - 150px);
763fb726d48Sopenharmony_ci        margin: 1px;
764fb726d48Sopenharmony_ci        box-sizing: border-box;
765fb726d48Sopenharmony_ci      }
766fb726d48Sopenharmony_ci
767fb726d48Sopenharmony_ci      @media screen and (max-width: 1274px) {
768fb726d48Sopenharmony_ci        html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
769fb726d48Sopenharmony_ci          padding: 1.9em;
770fb726d48Sopenharmony_ci        }
771fb726d48Sopenharmony_ci      }
772fb726d48Sopenharmony_ci
773fb726d48Sopenharmony_ci      @media screen and (max-width: 450px) {
774fb726d48Sopenharmony_ci        html body[for='html-export']:not([dpm])[hsst] .smartperf-preview {
775fb726d48Sopenharmony_ci          width: 99%;
776fb726d48Sopenharmony_ci        }
777fb726d48Sopenharmony_ci      }
778fb726d48Sopenharmony_ci
779fb726d48Sopenharmony_ci      html body[for='html-export']:not([dpm]):not([hsst]) .md-sidebar-toc {
780fb726d48Sopenharmony_ci        display: none;
781fb726d48Sopenharmony_ci      }
782fb726d48Sopenharmony_ci    </style>
783fb726d48Sopenharmony_ci  </head>
784fb726d48Sopenharmony_ci  <body for="html-export" id="body" style="margin:0">
785fb726d48Sopenharmony_ci    <div class="smartperf smartperf-preview" style="min-height: 99vh;">
786fb726d48Sopenharmony_ci      <h1 class="mume-header fontColor">Trace解析能力增强</h1>
787fb726d48Sopenharmony_ci
788fb726d48Sopenharmony_ci      <p class="fontColor">Trace解析能力增强主要是提高Trace的解析能力。</p>
789fb726d48Sopenharmony_ci      <h3 class="mume-header fontColor" id="header-index-1">焦点问题trace切割,选择焦点trace,聚焦问题发生时间范围,单独打开</h3>
790fb726d48Sopenharmony_ci
791fb726d48Sopenharmony_ci      <p class="fontColor">
792fb726d48Sopenharmony_ci        焦点问题切割是将现有的trace加载到界面时,对指定时间进行框选,截取框选时间范围内的trace数据通过跳转的方式去打开新的trace界面,新界面的trace数据就是按照这段时间范围去切割的。如下图框选一段时间范围,点击右上方的小剪刀图标对框选时间范围数据进行剪切。
793fb726d48Sopenharmony_ci        <br />
794fb726d48Sopenharmony_ci        <img src="../figures/parsingability/cuttrace_bytime.jpg" alt="GitHub Logo" />
795fb726d48Sopenharmony_ci      </p>
796fb726d48Sopenharmony_ci      <h3 class="mume-header fontColor" id="header-index-2">超大trace分段打开,超大trace按照固定大小切割,分段打开显示</h3>
797fb726d48Sopenharmony_ci
798fb726d48Sopenharmony_ci      <p class="fontColor">
799fb726d48Sopenharmony_ci        超大trace分段打开是对现有配置抓取的同一种时钟源数据源的。也就是配置命令下发的抓取有效。Htrace数据按照端侧切割的大小分成多个文件,并将不能切割的hiperf、ebpf、arkts的数据单独存储。IDE通过将这几种源文件数据存储在IndexedDB,并调用trace
800fb726d48Sopenharmony_ci        streamer去进行切割数据,并在IDE侧过滤筛选出切割的数据进行展示。
801fb726d48Sopenharmony_ci      </p>
802fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">超大trace浏览器用户数据目录配置说明</h4>
803fb726d48Sopenharmony_ci
804fb726d48Sopenharmony_ci      <p class="fontColor">
805fb726d48Sopenharmony_ci        由于大文件切割的数据是保存在浏览器的IndexedDb中,默认存储在系统盘,所以需要修改用户目录数据存放位置。
806fb726d48Sopenharmony_ci      </p>
807fb726d48Sopenharmony_ci      <h5 class="mume-header fontColor">
808fb726d48Sopenharmony_ci        找到浏览器的exe执行文件位置(或者浏览器exe的快捷方式位置), 在cmd窗口执行以下命令(edge浏览器)
809fb726d48Sopenharmony_ci      </h5>
810fb726d48Sopenharmony_ci
811fb726d48Sopenharmony_ci      <pre class="smartperf-text fontColor light">
812fb726d48Sopenharmony_ciD:\deskTop\msedge.exe.lnk --user-data-dir=D:\Edgedata
813fb726d48Sopenharmony_ci	D:\deskTop\msedge.exe.lnk    浏览器的exe执行文件位置(或者浏览器exe的快捷方式位置)
814fb726d48Sopenharmony_ci	--user-data-dir=D:\Edgedata   指定用户目录数据位置,本地除系统盘外的位置都可以,内存尽量大一点
815fb726d48Sopenharmony_ci</pre
816fb726d48Sopenharmony_ci      >
817fb726d48Sopenharmony_ci      <h5 class="mume-header fontColor">浏览器exe或者exe快捷方式目录和名称不能有带空格</h5>
818fb726d48Sopenharmony_ci
819fb726d48Sopenharmony_ci      <pre class="smartperf-text fontColor light">
820fb726d48Sopenharmony_ci错误:D:\desk Top\Microsoft Edge.exe.lnk --user-data-dir=D:\Edgedata
821fb726d48Sopenharmony_ci正确:D:\deskTop\MicrosoftEdge.exe.lnk --user-data-dir=D:\Edgedata
822fb726d48Sopenharmony_ci</pre
823fb726d48Sopenharmony_ci      >
824fb726d48Sopenharmony_ci      <h5 class="mume-header fontColor">配置完成后, 查看【用户配置路径】是否是配置的路径</h5>
825fb726d48Sopenharmony_ci
826fb726d48Sopenharmony_ci      <pre class="smartperf-text fontColor light">
827fb726d48Sopenharmony_ciedge浏览器:     edge://version/
828fb726d48Sopenharmony_ci</pre
829fb726d48Sopenharmony_ci      >
830fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">超大trace抓取配置说明</h4>
831fb726d48Sopenharmony_ci
832fb726d48Sopenharmony_ci      <p class="fontColor"><img src="../figures/parsingability/bigtracerecord.jpg" alt="GitHub Logo" /></p>
833fb726d48Sopenharmony_ci      <ul class="fontColor">
834fb726d48Sopenharmony_ci        <li>
835fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
836fb726d48Sopenharmony_ciLong Trace Mode: 超大trace抓取模式。
837fb726d48Sopenharmony_ci</pre
838fb726d48Sopenharmony_ci          >
839fb726d48Sopenharmony_ci        </li>
840fb726d48Sopenharmony_ci        <li>
841fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
842fb726d48Sopenharmony_ciSingle file max size: trace文件分割的大小。
843fb726d48Sopenharmony_ci</pre
844fb726d48Sopenharmony_ci          >
845fb726d48Sopenharmony_ci        </li>
846fb726d48Sopenharmony_ci      </ul>
847fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">本地导入超大trace</h4>
848fb726d48Sopenharmony_ci
849fb726d48Sopenharmony_ci      <p class="fontColor">
850fb726d48Sopenharmony_ci        本地导入超大trace是导入文件夹,将该文件夹中所有文件导入。如下图从Open long trace file入口导入。
851fb726d48Sopenharmony_ci        <br />
852fb726d48Sopenharmony_ci        <img src="../figures/parsingability/longtraceload.jpg" alt="GitHub Logo" />
853fb726d48Sopenharmony_ci        <br />
854fb726d48Sopenharmony_ci        本地导入以后,点击右上方的切页图标可以切页。
855fb726d48Sopenharmony_ci        <br />
856fb726d48Sopenharmony_ci        <img src="../figures/parsingability/longtraceswitch.jpg" alt="GitHub Logo" />
857fb726d48Sopenharmony_ci      </p>
858fb726d48Sopenharmony_ci      <h3 class="mume-header fontColor" id="header-index-3">web端支持已打开的trace文件转换成systrace,并可下载</h3>
859fb726d48Sopenharmony_ci
860fb726d48Sopenharmony_ci      <p class="fontColor">
861fb726d48Sopenharmony_ci        已打开的trace界面,增加convert to systrace按钮,支持将htrace和row trace转为systrace。
862fb726d48Sopenharmony_ci        <br />
863fb726d48Sopenharmony_ci        <img src="../figures/parsingability/traceconvert.jpg" alt="GitHub Logo" />
864fb726d48Sopenharmony_ci      </p>
865fb726d48Sopenharmony_ci      <h3 class="mume-header fontColor" id="header-index-4">
866fb726d48Sopenharmony_ci        tracestreamer离线执行sql和metrics语句,对标trace_processor_shell –q和—run-metrics
867fb726d48Sopenharmony_ci      </h3>
868fb726d48Sopenharmony_ci
869fb726d48Sopenharmony_ci      <p class="fontColor">
870fb726d48Sopenharmony_ci        trace_streamer_shell
871fb726d48Sopenharmony_ci        –q可以直接将sql查询结果显示在命令行里,如下图bytrace.ftrace是需要解析的文件,a.txt是sql语句。
872fb726d48Sopenharmony_ci        <br />
873fb726d48Sopenharmony_ci        <img src="../figures/parsingability/tracestreamer_q.jpg" alt="GitHub Logo" />
874fb726d48Sopenharmony_ci        <br />
875fb726d48Sopenharmony_ci        trace_streamer_shell
876fb726d48Sopenharmony_ci        –m可以直接将metric接口的查询结果显示在命令行里,如下图bytrace.ftrace是需要解析的文件,trace_stats是metric接口名。
877fb726d48Sopenharmony_ci        <br />
878fb726d48Sopenharmony_ci        <img src="../figures/parsingability/tsmetric.jpg" alt="GitHub Logo" />
879fb726d48Sopenharmony_ci      </p>
880fb726d48Sopenharmony_ci
881fb726d48Sopenharmony_ci      <h3 class="mume-header fontColor" id="header-index-5">
882fb726d48Sopenharmony_ci        Hangs抓取和展示说明
883fb726d48Sopenharmony_ci      </h3>
884fb726d48Sopenharmony_ci      <p class="fontColor">
885fb726d48Sopenharmony_ci        挂起(hang)是离散用户交互中的明显延迟,并且它几乎总是主线程上长时间运行工作的结果。
886fb726d48Sopenharmony_ci        仅当主线程在大约 50 毫秒到 100 毫秒或更长时间内无响应时,离散交互延迟才会开始变得明显。
887fb726d48Sopenharmony_ci      </p>
888fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">Hangs的抓取</h4>
889fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">Hangs抓取配置参数</h4>
890fb726d48Sopenharmony_ci      <p class="fontColor">
891fb726d48Sopenharmony_ci        进入Probes config页面,打开Record mode开关,勾选notification可以抓取Hangs数据(此选项为默认勾选)。
892fb726d48Sopenharmony_ci      </p>
893fb726d48Sopenharmony_ci      <br />
894fb726d48Sopenharmony_ci      <img src="../figures/parsingability/hangsrecord.jpg" alt="GitHub Logo" />
895fb726d48Sopenharmony_ci      <p class="fontColor">
896fb726d48Sopenharmony_ci        解析时需要打开Flags页面的Hangs Detection开关(Disabled切换为Enabled)。
897fb726d48Sopenharmony_ci      </p>
898fb726d48Sopenharmony_ci      <br />
899fb726d48Sopenharmony_ci      <img src="../figures/parsingability/hangsdetection.jpg" alt="GitHub Logo" />
900fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">Hangs展示说明</h4>
901fb726d48Sopenharmony_ci      <p class="fontColor">
902fb726d48Sopenharmony_ci        将抓取的trace文件导入到smartperf工具中,查看挂起的情况。
903fb726d48Sopenharmony_ci      </p>
904fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">泳道图展示</h4>
905fb726d48Sopenharmony_ci      <img src="../figures/parsingability/hangstrace.jpg" alt="GitHub Logo" />
906fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">类型说明</h4>
907fb726d48Sopenharmony_ci      <img src="../figures/parsingability/hangsttype.jpg" alt="GitHub Logo" />
908fb726d48Sopenharmony_ci      <p class="fontColor">
909fb726d48Sopenharmony_ci        点击Hangs Detection开关下的选项可以选择展示的不同类型。
910fb726d48Sopenharmony_ci      </p>
911fb726d48Sopenharmony_ci      <p class="fontColor">
912fb726d48Sopenharmony_ci        根据duration大小将hang划分为4个type,即Instant、Circumstantial、Micro、Severe。4个type分别对应时长为
913fb726d48Sopenharmony_ci        33ms&lt;d&lt;100ms、100ms&le;d&lt;250ms、250ms&le;d&lt;500ms、500ms&le;d。
914fb726d48Sopenharmony_ci      </p>
915fb726d48Sopenharmony_ci      <p class="fontColor">
916fb726d48Sopenharmony_ci        颜色按type由浅及深:Instant蓝色、Circumstantial黄色、Micro橙色、Severe红色。
917fb726d48Sopenharmony_ci      </p>
918fb726d48Sopenharmony_ci      <p class="fontColor">
919fb726d48Sopenharmony_ci        选择不同类型展示出的泳道会不一样: 选择Instant会显示Instant、Circumstantial、Micro、Severe,如图一;
920fb726d48Sopenharmony_ci        选择Circumstantial则显示Circumstantial、Micro、Severe,如图二,以此类推。
921fb726d48Sopenharmony_ci      </p>
922fb726d48Sopenharmony_ci      <img src="../figures/parsingability/Instant.jpg" alt="GitHub Logo" />
923fb726d48Sopenharmony_ci      <p class="fontColor">
924fb726d48Sopenharmony_ci        图一
925fb726d48Sopenharmony_ci      </p>
926fb726d48Sopenharmony_ci      <img src="../figures/parsingability/Circumstantial.jpg" alt="GitHub Logo" />
927fb726d48Sopenharmony_ci      <p class="fontColor">
928fb726d48Sopenharmony_ci        图二
929fb726d48Sopenharmony_ci      </p>
930fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">Hangs泳道图的点选功能</h4>
931fb726d48Sopenharmony_ci      <p class="fontColor">
932fb726d48Sopenharmony_ci        可以对hangs的各个slice进行点选,点选后在最下方的弹出层中会展示点选数据的统计的tab页。点击Hang type右侧蓝色箭头,会跳转到该hang对应的trace点。
933fb726d48Sopenharmony_ci      </p>
934fb726d48Sopenharmony_ci      <img src="../figures/parsingability/hangdetails.jpg" alt="GitHub Logo" />
935fb726d48Sopenharmony_ci      <br />
936fb726d48Sopenharmony_ci      <img src="../figures/parsingability/hangname.jpg" alt="GitHub Logo" />
937fb726d48Sopenharmony_ci      <p class="fontColor">
938fb726d48Sopenharmony_ci        Trace点的name依次对应tab页的Sender tid、Send time、Expect handle time、Task name/ID、Prio、Sender。
939fb726d48Sopenharmony_ci      </p>
940fb726d48Sopenharmony_ci      <ul class="fontColor">
941fb726d48Sopenharmony_ci        <li>
942fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
943fb726d48Sopenharmony_ciStartTime(Relative):开始时间(相对时间)。
944fb726d48Sopenharmony_ci</pre>
945fb726d48Sopenharmony_ci        </li>
946fb726d48Sopenharmony_ci        <li>
947fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
948fb726d48Sopenharmony_ciStartTime(Absolute):开始时间(绝对时间)。
949fb726d48Sopenharmony_ci</pre>
950fb726d48Sopenharmony_ci        </li>
951fb726d48Sopenharmony_ci        <li>
952fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
953fb726d48Sopenharmony_ciDuration:持续时间。
954fb726d48Sopenharmony_ci</pre>
955fb726d48Sopenharmony_ci        </li>
956fb726d48Sopenharmony_ci        <li>
957fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
958fb726d48Sopenharmony_ciHang Type:挂起类型。
959fb726d48Sopenharmony_ci</pre>
960fb726d48Sopenharmony_ci        </li>
961fb726d48Sopenharmony_ci        <li>
962fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
963fb726d48Sopenharmony_ciSender tid:发送event的线程ID。
964fb726d48Sopenharmony_ci</pre>
965fb726d48Sopenharmony_ci        </li>
966fb726d48Sopenharmony_ci        <li>
967fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
968fb726d48Sopenharmony_ciSend time:事件发送时间。
969fb726d48Sopenharmony_ci</pre>
970fb726d48Sopenharmony_ci        </li>
971fb726d48Sopenharmony_ci        <li>
972fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
973fb726d48Sopenharmony_ciExpect handle time:期望事件开始时间。
974fb726d48Sopenharmony_ci</pre>
975fb726d48Sopenharmony_ci        </li>
976fb726d48Sopenharmony_ci        <li>
977fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
978fb726d48Sopenharmony_ciTask name/Id:事件名/事件ID。
979fb726d48Sopenharmony_ci</pre>
980fb726d48Sopenharmony_ci        </li>
981fb726d48Sopenharmony_ci        <li>
982fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
983fb726d48Sopenharmony_ciPrio:优先级。
984fb726d48Sopenharmony_ci</pre>
985fb726d48Sopenharmony_ci        </li>
986fb726d48Sopenharmony_ci        <li>
987fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
988fb726d48Sopenharmony_ciSender:发送者。
989fb726d48Sopenharmony_ci</pre>
990fb726d48Sopenharmony_ci        </li>
991fb726d48Sopenharmony_ci      </ul>
992fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">Hangs泳道图的框选功能</h4>
993fb726d48Sopenharmony_ci      <p class="fontColor">
994fb726d48Sopenharmony_ci        框选Hangs的泳道图,展示Hangs的tab页,右侧第一个下拉框可以选择类型,也能根据process ,sender去搜索。
995fb726d48Sopenharmony_ci      </p>
996fb726d48Sopenharmony_ci      <img src="../figures/parsingability/hangstab.jpg" alt="GitHub Logo" />
997fb726d48Sopenharmony_ci      <ul class="fontColor">
998fb726d48Sopenharmony_ci        <li>
999fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1000fb726d48Sopenharmony_ciStartTime:开始时间。
1001fb726d48Sopenharmony_ci</pre>
1002fb726d48Sopenharmony_ci        </li>
1003fb726d48Sopenharmony_ci        <li>
1004fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1005fb726d48Sopenharmony_ciDuration:持续时间。
1006fb726d48Sopenharmony_ci</pre>
1007fb726d48Sopenharmony_ci        </li>
1008fb726d48Sopenharmony_ci        <li>
1009fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1010fb726d48Sopenharmony_ciHang Type:挂起类型。
1011fb726d48Sopenharmony_ci</pre>
1012fb726d48Sopenharmony_ci        </li>
1013fb726d48Sopenharmony_ci        <li>
1014fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1015fb726d48Sopenharmony_ciProcess:进程名。
1016fb726d48Sopenharmony_ci</pre>
1017fb726d48Sopenharmony_ci        </li>
1018fb726d48Sopenharmony_ci        <li>
1019fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1020fb726d48Sopenharmony_ciSender tid:发送event的线程ID。
1021fb726d48Sopenharmony_ci</pre>
1022fb726d48Sopenharmony_ci        </li>
1023fb726d48Sopenharmony_ci        <li>
1024fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1025fb726d48Sopenharmony_ciSend time:事件发送时间。
1026fb726d48Sopenharmony_ci</pre>
1027fb726d48Sopenharmony_ci        </li>
1028fb726d48Sopenharmony_ci        <li>
1029fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1030fb726d48Sopenharmony_ciExpect handle time:期望事件开始时间。
1031fb726d48Sopenharmony_ci</pre>
1032fb726d48Sopenharmony_ci        </li>
1033fb726d48Sopenharmony_ci        <li>
1034fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1035fb726d48Sopenharmony_ciTask name/Id:事件名/事件ID。
1036fb726d48Sopenharmony_ci</pre>
1037fb726d48Sopenharmony_ci        </li>
1038fb726d48Sopenharmony_ci        <li>
1039fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1040fb726d48Sopenharmony_ciPrio:优先级。
1041fb726d48Sopenharmony_ci</pre>
1042fb726d48Sopenharmony_ci        </li>
1043fb726d48Sopenharmony_ci        <li>
1044fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1045fb726d48Sopenharmony_ciSender:发送者。
1046fb726d48Sopenharmony_ci</pre>
1047fb726d48Sopenharmony_ci        </li>
1048fb726d48Sopenharmony_ci      </ul>
1049fb726d48Sopenharmony_ci      <p class="fontColor">
1050fb726d48Sopenharmony_ci        框选Hangs的泳道图,展示Summary的tab页。
1051fb726d48Sopenharmony_ci      </p>
1052fb726d48Sopenharmony_ci      <img src="../figures/parsingability/Summary.jpg" alt="GitHub Logo" />
1053fb726d48Sopenharmony_ci      <ul class="fontColor">
1054fb726d48Sopenharmony_ci        <li>
1055fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1056fb726d48Sopenharmony_ciType/Process/Hang:根据类型显示挂起情况。
1057fb726d48Sopenharmony_ci</pre>
1058fb726d48Sopenharmony_ci        </li>
1059fb726d48Sopenharmony_ci        <li>
1060fb726d48Sopenharmony_ci          <pre class="smartperf-text fontColor light">
1061fb726d48Sopenharmony_ciCount:各类型的数量。
1062fb726d48Sopenharmony_ci</pre>
1063fb726d48Sopenharmony_ci        </li>
1064fb726d48Sopenharmony_ci      </ul>
1065fb726d48Sopenharmony_ci      <h4 class="mume-header fontColor">Hangs归一化泳道</h4>
1066fb726d48Sopenharmony_ci      <p class="fontColor">
1067fb726d48Sopenharmony_ci        为了方便查看hangs数据,对不同进程下的hangs泳道进行了归一化处理
1068fb726d48Sopenharmony_ci      </p>
1069fb726d48Sopenharmony_ci      <img src="../figures/parsingability/normalization.jpg" alt="GitHub Logo" />
1070fb726d48Sopenharmony_ci    </div>
1071fb726d48Sopenharmony_ci
1072fb726d48Sopenharmony_ci    <script>
1073fb726d48Sopenharmony_ci      window.onload = () => {
1074fb726d48Sopenharmony_ci        let isDark = getURLParameter('dark'); 
1075fb726d48Sopenharmony_ci        let targetId = getURLParameter('targetId'); 
1076fb726d48Sopenharmony_ci        let isBack = getURLParameter('isBack'); 
1077fb726d48Sopenharmony_ci        if (isDark === 'true') {
1078fb726d48Sopenharmony_ci          document.getElementById('body').setAttribute('style', 'background-color:#272C34;');
1079fb726d48Sopenharmony_ci          let header = document.getElementsByClassName('fontColor');
1080fb726d48Sopenharmony_ci          for (let i = 0; i < header.length; i++) {
1081fb726d48Sopenharmony_ci            header[i].style.color = '#fff';
1082fb726d48Sopenharmony_ci          }
1083fb726d48Sopenharmony_ci          let lightBackGround = document.getElementsByClassName('light');
1084fb726d48Sopenharmony_ci          for (let i = 0; i < lightBackGround.length; i++) {
1085fb726d48Sopenharmony_ci            lightBackGround[i].style.backgroundColor = '#32373F';
1086fb726d48Sopenharmony_ci          }
1087fb726d48Sopenharmony_ci        }
1088fb726d48Sopenharmony_ci        function getURLParameter(name) {  
1089fb726d48Sopenharmony_ci          return (new URL(document.location)).searchParams.get(name);  
1090fb726d48Sopenharmony_ci        }  
1091fb726d48Sopenharmony_ci  
1092fb726d48Sopenharmony_ci        if ( targetId !== null ) {
1093fb726d48Sopenharmony_ci          let targetElement = document.getElementById(targetId);
1094fb726d48Sopenharmony_ci          targetElement.scrollIntoView({ behavior: 'smooth' });
1095fb726d48Sopenharmony_ci        }
1096fb726d48Sopenharmony_ci      };
1097fb726d48Sopenharmony_ci    </script>
1098fb726d48Sopenharmony_ci  </body>
1099fb726d48Sopenharmony_ci</html>
1100