如何捕获铬devtools时间线上的css代码执行？

我的代码是：如何捕获铬devtools时间线上的css代码执行？

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

我试图捕捉的CSS代码执行对铬devtools时间表，但落空。那我该怎么办？

我发现如何捕获css代码“执行”的细节，以及何时发生。据this article，您应检查“油漆”框捕捉：

有在Chrome DevTools时间表的选项，这将给你更多信息：油漆探查。要启用它，请转至时间线并选中顶部的“绘制”框。

和油漆的“解析作者样式表”事件发生后：

这是我在计算器的第一个问题，谢谢大家帮助我。

来源

2015-08-20 Dophin

你不能。 CSS不是编程语言，它只是一组样式规则。 –

'width：100px'会使div.test为100px，所以css代码必须做些什么，我如何捕捉'东西'？我对这个过程感到好奇，特别是当它发生时。 – Dophin

CSS不是一种命令式语言，它本身并不“执行”。不过，当CSS样式表内容或DOM结构发生变化时，就应用CSS规则。时间线上的“样式重新计算”事件指示时间渲染器花费计算并将基于CSS规则的样式应用于从DOM节点生成的单个渲染对象。该事件的详细信息提供了有多少节点受到影响的信息。

来源

2015-08-20 16:55:08 caseq

thx为您的概念，但我发现“解析作者样式表”事件后，而不是“风格重新计算”的相关油漆。我的铬版本是44.0.2403.155（64位）的Mac。 – Dophin

Parse Author Style Sheet（在最新版本的BTW中为“Parse Stylesheet”）有所不同 - 也就是说，只是解析样式表，即在接收文本内容时将其转换为内部样式模型表示。 – caseq

在你的屏幕截图的特定情况下，你的onload事件处理程序中似乎有“强制布局”警告，我期望风格重新计算作为其一部分发生，即在加载事件处理程序中。 – caseq

如何捕获铬devtools时间线上的css代码执行？

回答

相关问题