Как я могу выводить/управлять строкой пути файла CSS в DevTools?

В компании, в которой я работаю, у нас есть много разных CSS-файлов, которые можно найти на наших страницах. Очевидно, что в качестве одной длинной строки ее трудно прочитать. Мне интересно, как я могу настроить таргетинг на каждый URL-адрес и манипулировать им, чтобы легко увидеть, какие файлы CSS включены на странице? Конечным результатом является расширение, которое создает новую вкладку в Dev Tools и показывает каждый файл CSS в отдельной строке.

источник

2016-02-19 user3521314

Что это нужно делать с JavaScript или Sass? – cimmanon

Это файловый путь к файлам CSS и Sass, и вы будете манипулировать строкой через JS. Поэтому любой, кто заинтересован в этих двух вещах, может помочь. – user3521314

Но быть экспертом по CSS или Sass не поможет вам решить вашу проблему. Не используйте теги, если ваша цель не привлекать экспертов в этих областях. – cimmanon

Конечный результат - это расширение, создающее новую вкладку в инструментах dev и показывающее каждый файл 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:

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

Литература

источник

2016-09-02 21:29:47

Как я могу выводить/управлять строкой пути файла CSS в DevTools?

ответ

Смежные вопросы