Javascript 如何在DevTools中输出/操作CSS文件路径字符串？

在我工作的公司，我们有很多不同的CSS文件，这些文件会被拉到我们的页面中。显然，作为一个长字符串，它很难读取。我想知道如何定位每个URL路径并对其进行操作，以便更容易地看到页面上包含哪些CSS文件？最终结果是一个扩展名，它在Dev工具中创建了一个新选项卡，并在自己的行中显示每个CSS文件

最终的结果是扩展在dev工具中创建一个新选项卡，并在自己的行中显示每个css文件

下面是一个bookmarklet，它实现了上述功能：

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") );}() );

javascript:void（函数print_css_files（）{'use strict'；print_css_files.arr=[]；for（var i=0；i

可以在控制台上运行，如下所示：

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
(
函数print_css_files（）
{
"严格使用",；
print_css_files.arr=[]；
for（var i=0；i

或者作为用户脚本：

// ==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"));
    }()
   )

/==UserScript==
//@name打印CSS文件
//@namespace urn:print_css_文件
//@version 0.1
//@description打印CSS文件
//@author UpUpUpDownLeftRightLeftRightBabastart
//@匹配*
//@grant none
//==/UserScript==
无效的
(
函数print_css_files（）
{
"严格使用",；
print_css_files.arr=[]；
for（var i=0；i

参考资料

---

这与JavaScript或Sass有什么关系？它是CSS和Sass文件的文件路径，您可以通过JS操作字符串。因此，任何对这两件事感兴趣的人都可以提供帮助，但作为CSS或Sass方面的专家并不能帮助你解决问题。除非你的目标是吸引这些领域的专家，否则不要使用标签。你可以只使用网络面板和应用“CSS”过滤器来显示样式请求。如果您碰巧通过XHR加载CSS并通过标记将其附加到页面，您可以应用“XHR”过滤器，然后在文件名中搜索“.CSS”。