Visual Studio 2010 and javascript debugging in external javascript files (embedded and minified).

Posted by OKB on Stack Overflow See other posts from Stack Overflow or by OKB
Published on 2010-06-15T06:13:25Z Indexed on 2010/06/15 14:42 UTC
Read the original article Hit count: 841

Hi,

The asp.net web application I'm working on is written in asp.net 3.5, the web app solution is upgraded from VS 2008 (don't know if that matter).

The solution had javascript in the aspx files before I moved the javascript to external files. Now what I have done is to set all the javascript files to be embedded resource (except the jquery.js file) and I want to minify them when building for release by using the MS Ajax Minifier. I want to use the minified javascript files when I'm in the RELEASE mode and when I'm in DEBUG mode I want to use the "normal" versions.

My problem now is that I'm unable to debug the javascript code in debug mode. When I set a break point a javascript function, VS is not breaking at all when the function is executed.

I have added this entry in my web.config:

<system.web> 
  <compilation defaultLanguage="c#" debug="true" />
</system.web>

Here how I register the jquery in an aspx-file:

<asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
    <Scripts>
        <asp:ScriptReference Path="~/Javascript/jquery.js"/>
    </Scripts>   
</asp:ScriptManagerProxy>

External javascript registration in the code-behind:

#if DEBUG
[assembly: WebResource("braArkivWeb.Javascript.jquery.js", "text/javascript")]
[assembly: WebResource(braArkivWeb.ArkivdelSearch.JavaScriptResource, "text/javascript")]
#else
[assembly: WebResource("braArkivWeb.Javascript.jquery.min.js", "text/javascript")]
[assembly: WebResource(braArkivWeb.ArkivdelSearch.JavaScriptMinResource, "text/javascript")]
#endif

public partial class ArkivdelSearch : Page
{        
public const string JavaScriptResource = "braArkivWeb.ArkivdelSearch.js";
public const string JavaScriptMinResource = "braArkivWeb.ArkivdelSearch.min.js";

protected void Page_Init(object sender, EventArgs e)
{
InitPageClientScript();
}

private void InitPageClientScript()
{            
#if DEBUG
   this.Page.ClientScript.RegisterClientScriptResource(typeof(ArkivdelSearch),    "braArkivWeb.Javascript.jquery.js");
this.Page.ClientScript.RegisterClientScriptResource(typeof(ArkivdelSearch), JavaScriptResource);
#else
this.Page.ClientScript.RegisterClientScriptResource(typeof(ArkivdelSearch), "braArkivWeb.Javascript.jquery.min.js");
this.Page.ClientScript.RegisterClientScriptResource(typeof(ArkivdelSearch), JavaScriptMinResource);
#endif

StringBuilder sb = new StringBuilder();
Page.ClientScript.RegisterStartupScript(typeof(ArkivdelSearch),
           "initArkivdelSearch",
            sb.ToString(),
            true);
}
}

In the project file I have added this code to minify the javascripts:

<!-- Minify all JavaScript files that were embedded as resources -->
<UsingTask TaskName="AjaxMin" AssemblyFile="$(MSBuildProjectDirectory)\..\..\SharedLib\AjaxMinTask.dll" />
<PropertyGroup>
  <ResGenDependsOn>
   MinifyJavaScript;
   $(ResGenDependsOn)
</ResGenDependsOn>
</PropertyGroup>
<Target Name="MinifyJavaScript" Condition=" '$(ConfigurationName)'=='Release' ">
<Copy SourceFiles="@(EmbeddedResource)" DestinationFolder="$(IntermediateOutputPath)" Condition="'%(Extension)'=='.js'">
  <Output TaskParameter="DestinationFiles" ItemName="EmbeddedJavaScriptResource" />
</Copy>
<AjaxMin JsSourceFiles="@(EmbeddedJavaScriptResource)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".js" />
<ItemGroup>
  <EmbeddedResource Remove="@(EmbeddedResource)" Condition="'%(Extension)'=='.js'" />
  <EmbeddedResource Include="@(EmbeddedJavaScriptResource)" />
  <FileWrites Include="@(EmbeddedJavaScriptResource)" />
 </ItemGroup>
 </Target>

Do you see what I'm doing wrong? Or what I'm missing in order to be able to debug my javascript code?

Best Regards,

OKB

© Stack Overflow or respective owner

Related posts about ASP.NET

Related posts about JavaScript