[英]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動作),無法設置BROWSER → PROXY → CSSRule過濾器來跟蹤更改。
https://developer.mozilla.org/zh-CN/docs/Web/API/CSS_Object_Model
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
我不想毫無理由地深入CSS對象模型的JSON.stringify()並嘗試找出類似這樣的字符串差異,它具有很多循環並且無法使用JavaScript API。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.