Question

我的代码是：

<!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>

我尝试在chrome devtools时间线上捕获css代码执行，但什么都没有。那我该怎么办？

我找到了如何捕获css代码＆＃34;执行＆＃34;细节以及何时发生。根据{{3}}，您应该检查＆＃34; paint＆＃34;要捕获的框：

Chrome DevTools时间轴中有一个选项可供您使用更多信息：油漆分析器。要启用它，请转到时间轴并检查顶部的“Paint”框。

并且油漆发生在＆＃34;解析作者样式表＆＃34;事件： this article

这是我关于stackoverflow的第一个问题，谢谢大家的帮助。

Answer 1

CSS不是命令式语言，它不会执行＆＃34;本身。但是，当样式表内容或DOM结构发生更改时，将应用CSS规则。＆＃34; Style Recalculate＆＃34;时间轴上的事件表示渲染器花费时间计算并根据CSS规则将样式应用于从DOM节点生成的各个渲染对象。事件的详细信息提供了有关受影响的节点数的信息。

如何在chrome devtools时间轴上捕获css代码执行？

1 个答案: