簡體   English   中英

檢測並觀察在Chrome Devtools中對樣式表所做的更改

[英]Detecting and observing changes made to stylesheets in Chrome Devtools

我要做的是檢測使用Chrome devtools進行的樣式更改(通過修改現有規則或創建規則進行更改),以便在Web應用程序中通過保存更改來保留這些更改。

到目前為止,我唯一想到的方法是遍歷所有元素並獲得其計算出的樣式,但是該方法不適用於類。 除非有某種方法可以獲取類的樣式信息,而無需將其實際分配給元素-或循環遍歷所有已知的類,將其應用於元素並使用其計算出的樣式? 無論哪種方式,這似乎都是一個非常棘手的解決方案,我想知道是否有更好的方法來解決這個問題。

我應該澄清-我不想使用devtools本身將更改保存為完整文件。 我只想在javascript的應用程序本身的上下文中跟蹤單個更改 這不是鏈接問題的重復項

因此,用戶打開了開發工具,對樣式進行了更改,在我的應用程序中運行的javascript想要知道更改了樣式以及如何更改了樣式,而無需任何額外的最終用戶步驟。

可以按照此答案進行操作 它建議使用MutationObserver監聽更改。

另外,由於這個問題是專門針對Chrome Devtools的,因此可以將chrome擴展掛接到chrome.debugger API中 這當然意味着檢測將僅限於具有擴展名的人員,但可以為您提供很大的靈活性。

我出於以下原因引用@Bronzdragon答案。

在這種情況下,您必須使用CSS對象模型(CSSOM) 關於CSSStyleSheet接口

由於document.styleSheets列表無法直接修改 ,因此沒有手動創建新CSSStyleSheet對象的有用方法(盡管有時可構造樣式表對象可能已添加到Web API中)。 要創建新的樣式表,請在文檔中插入或元素。

因此,顯然沒有辦法定義setter函數跟蹤 CSSRule對象的屬性更改

否則,現代更好的觀察對象的方式似乎是Proxies ,它迫使腳本對代理本身進行更改。 因此,無法以某種方式訪問​​瀏覽器行為(在本例中為Chrome Web Tools動作),無法設置BROWSERPROXYCSSRule過濾器來跟蹤更改。

最后的機會

我不想毫無理由地深入CSS對象模型的JSON.stringify()並嘗試找出類似這樣的字符串差異,它具有很多循環並且無法使用JavaScript API。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM