Output separate resources for debug mode

Jan 22, 2011 at 11:29 AM


When I am developing my web app, I like to keep CSS and JS files not only uncompressed, but also as separate files. It makes it much easier to understand what is going on when debugging my code in Firebug. 

I'm not sure if this is still the case, but the (one year old) version of Combres does not seem to be able to do this. Fortunately it's very easy to write an HTML helper extension though:


public static string DebugFriendlyCombresLink(this HtmlHelper html, string setName,bool runningDebugVersion)
            if (runningDebugVersion)
                return SeparateResourceLinks(setName);
            return new MvcHtmlString(CombresLink(setName));

        public static string SeparateResourceLinks(string setName)

            var set = GetResourceSet(setName);
            var links = new StringBuilder();

            string resourceURL = set.Type == ResourceType.JS ?
            "<script type=\"text/javascript\" src=\"{0}\"></script>" :
            "<link rel=\"stylesheet\" type=\"text/css\" href=\"{0}\" />";

            foreach (var resource in set)
                links.Append(string.Format(CultureInfo.InvariantCulture,resourceURL, resource.Path.Replace("~/","/")));
            return links.ToString();

And in my view, I just write something like the following:
@Html.DebugFriendlyCombresLink("MyCSSSet", Globals.RunningDevelopmentVersion)

I'm just posting this here in case it might help others with the same issue. Or perhaps you would be interested in adding this feature to Combres itself :-)

-- Adrian

Jan 22, 2011 at 11:37 AM

Thanks for posting the solution, Adrian.  Since Combres 2.0, you should be able to achieve the same by setting the option defaultIgnorePipelineWhenDebug/ignorePipelineWhenDebug to true in combres.xml. No other changes are needed.