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

【问题标题】：How can I output/manipulate the CSS filepath string in DevTools?如何在 DevTools 中输出/操作 CSS 文件路径字符串？
【发布时间】：2016-06-01 12:04:21
【问题描述】：

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

【问题讨论】：

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

标签： javascript css google-chrome-extension google-chrome-devtools pretty-print

【解决方案1】：

最终结果是扩展程序在开发工具中创建了一个新选项卡，并在自己的行上显示每个 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==
// @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"));
    }()
   )

参考文献

【讨论】：