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

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

最佳答案

最终结果是扩展名，在开发工具中创建了一个新选项卡，并在其单独的行中显示了每个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"));
    }()
   )

参考文献


Chromium: User Scripts
Chromium: Blink-in-JavaScript