Question

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

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

<强>参考

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

1 个答案: