如何在DevTools中輸出/處理CSS文件路徑字符串？

在我工作的公司，我們有很多不同的CSS文件被拉進我們的頁面。顯然，作爲一個長字符串，很難閱讀。我想知道如何定位每個URL路徑並對其進行操作，以便輕鬆查看哪些CSS文件包含在頁面中？最終的結果是在開發工具中創建一個新選項卡的擴展，並在每行上顯示每個CSS文件。

來源

2016-02-19 user3521314

這是什麼都使用JavaScript或無禮的話怎麼辦？ – cimmanon

這是CSS和Sass文件的文件路徑，您可以通過JS操作字符串。所以任何有興趣的人都可以幫忙。 – user3521314

但作爲CSS或Sass的專家不會幫助您解決問題。除非您的目標是吸引這些領域的專家，否則不要使用標籤。 – cimmanon

作爲擴展的最終結果是在開發工具中創建一個新選項卡，並在每行上顯示每個css文件。

這裏是一個書籤它執行以上：

javascript:void(function print_css_files() { 'use strict'; print_css_files.arr = []; for (var i=0; i < document.styleSheets.length; i++) { if(document.styleSheets[i].href) { print_css_files.arr.push(document.styleSheets[i].href); } } return alert(print_css_files.arr.join().replace(/\,/g,"\n\n"));}());

其可以在控制檯上這樣運行：

void 
    (
    function print_css_files() 
    { 
    'use strict'; 
    print_css_files.arr = []; 
    for (var i = 0; i < document.styleSheets.length; i++) 
     { 
     if (document.styleSheets[i].href) 
      { 
      print_css_files.arr.push(document.styleSheets[i].href); 
      } 
     } 
    return alert(print_css_files.arr.join().replace(/\,/g, "\n\n")); 
    }() 
    )

或作爲userscript：

// ==UserScript== 
// @name   Print CSS Files 
// @namespace urn:print_css_files 
// @version  0.1 
// @description Print CSS Files 
// @author  upupdowndownleftrightleftrightbabastart 
// @match  * 
// @grant  none 
// ==/UserScript== 
void 
    (
    function print_css_files() 
    { 
    'use strict'; 
    print_css_files.arr = []; 
    for (var i = 0; i < document.styleSheets.length; i++) 
     { 
     if (document.styleSheets[i].href) 
      { 
      print_css_files.arr.push(document.styleSheets[i].href); 
      } 
     } 
    return alert(print_css_files.arr.join().replace(/\,/g, "\n\n")); 
    }() 
    )

參考文獻

來源

2016-09-02 21:29:47

如何在DevTools中輸出/處理CSS文件路徑字符串？

回答

相關問題