How can I output/manipulate the CSS filepath string in DevTools?

Question

At the company I work for, we have a LOT of different CSS files that get pulled into our pages. Obviously, as one long string, it's hard to read. I'm wondering how I can target each URL path and manipulate it in order to much easily see which CSS files are being included on a page? The end result being the an extension which creates a new tab in Dev Tools and shows each CSS file on its own line.

Answer 1

The end result being the extension creates a new tab in dev tools and shows each css file on its own line.

Here is a bookmarklet which does the above:

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

which can be run on the console as such:

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

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

References

• Chromium: User Scripts

• Chromium: Blink-in-JavaScript