如何捕獲鉻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代碼執行？

回答

相關問題