CODEWITHSUNDEEP
cssgoogle-chrome-devtools
Dophin
Dophin

Reputation: 83

How can i capture the css code execution on chrome devtools timeline?

my code is:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>dom</title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" type="text/css" href="css/test.css">
</head>
<body>
    <div class="test"></div>
    <div class="test2"></div>
</body>
</html>

I try to capture the css code execution on chrome devtools timeline,but come to nothing. So what should I do?

I find how to capture the css code "execution" details and when it happens. According to this article,you should check the "paint" box to capture:

There’s an option in the Chrome DevTools timeline which will give you more information: a paint profiler. To enable it, go to the Timeline and check the “Paint” box at the top.

and the paint happened after the "parse author style sheet" event: css paint

This is my first question on stackoverflow,thanks for everyone helping me.

Upvotes: 2

Views: 513

Answers (1)

caseq
caseq

Reputation: 1959

CSS is not an imperative language, it does not "execute" per se. The CSS rules are applied, though, when either stylesheet contents or DOM structure change. The "Style Recalculate" event on the Timeline indicates the time renderer spends calculating and applying styles based on CSS rules to individual render objects produced from the DOM nodes. The details of the event provide information on how many nodes were affected.

Upvotes: 1

Related Questions