[CLOSED] Debugging java script code - my classes are ending up in eval code

Page 1 of 4 123 ... LastLast
  1. #1

    [CLOSED] Debugging java script code - my classes are ending up in eval code

    Hi,

    After upgrading my code to version 3 (still have a lot of changes to do :) ) I have noticed that my classes are ending up in eval code.

    In version 2.5.3 when I ran my code in debug mode I could see all my classes as separate files loaded dynamically (using Ext.require, or extend or mixins) like below:



    I could easily debug the code etc...

    In version 3 all my classes are presented as "eval code". (except App.js which is statically linked in main.aspx header)



    When my code is loaded as "eval code" I cannot simply set break point in my code (would have to find it in eval code in run time etc...)

    What is the reason of that behavior ?

    PS. I am using Visual Studio 2013.

    Thank you,

    Matt
    Attached Thumbnails Click image for larger version. 

Name:	debug.png 
Views:	27 
Size:	14.2 KB 
ID:	18141   Click image for larger version. 

Name:	eval code.png 
Views:	22 
Size:	5.4 KB 
ID:	18151  
    Last edited by Daniil; Jan 15, 2015 at 12:09 PM. Reason: [CLOSED]
  2. #2
    Assuming that you are using IE and that your javascript is placed within aspx file you have two options

    #1
    Place your javascript code in a separated file

    #2
    Use debugger keyword, as shown below:
    <!DOCTYPE html>
    <html>
    <head id="Head1" runat="server">
        <script type="text/javascript">
            var func = function () {
                debugger;
            }
        </script>
    </head>
    <body>
        <ext:ResourceManager runat="server" ScriptMode="Debug" />
        <ext:Button Text="Click Me" runat="server">
            <Listeners>
                <Click Handler="func();" />
            </Listeners>
        </ext:Button>
    </body>
    </html>
  3. #3
    Hi Raphael,

    This is not what I exactly meant. I checked the "debugger" keyword here:
    http://msdn.microsoft.com/en-us/libr...=vs.94%29.aspx


    This is my basic code layout: I have got Main.aspx file which has only App.js statically linked to it.

    App.js

    Ext.define('theApp', {
    
    	requires: [
    		'MyApp.Core.Session',
    		'MyApp.Core.Router',
    		'MyApp.Core.Utils',
    		'MyApp.Core.Message'
    	]
    ...
    }

    When I run the code above in version 2.5.3, the array of required classes is used by the extjs and every module is loaded dynamically from MyApp\Core folder.

    Every module is already separate *.js file (one class -> one file) so in my case I have Session.js, Router.js, Utils.js, Message.js located in MyApp\Core folder.

    My issue is presented in the first entry of this thread. In version 3 my files instead load as separate files (like it was before) they end up in "eval code" instead.


    Yes, I am using Internet Explorer and Visual Studio 2013. I have not changed any settings. Just removed Ext.Net 2.5.3 and installed 3.0 in my vs2013 solution.

    I am trying to figure it out and writing something from scratch now, but if anyone know any "magic" setting to bring my previous behavior, please share a thought.

    Thank you,

    Matt
  4. #4
    Ah, sorry for misunderstanding.

    I am not 100% sure but you may be able to achieve it by using ResourceManager's RenderScripts. For more information: http://examples3.ext.net/#/Getting_S...tion/Overview/
    Last edited by RaphaelSaldanha; Jan 04, 2015 at 8:58 AM.
  5. #5
    That's not the setting either. I am investigating Ext.Loader now ... and the settings.

    Thank you for the reply. Any thoughts count :)
  6. #6

    Still investigating...

    Obviously Ext.Loader has changed. I am trying to figure out if it is still possible to debug it with VS2013 and IE11 in the same way like in version 2.5.3.

    I have discovered that the scripts are not injected in the same way: You can see the difference in Network Monitor in IE11.

    v2.5.3
    URL	Protocol	Method	Result	Type	Received	Taken	Initiator	Wait‎‎	Start‎‎	Request‎‎	Response‎‎	Cache read‎‎	Gap‎‎
    /ICE/Core/Message.js?_dc=1420460204940	HTTP	GET	200	application/javascript	1.10 KB	15 ms	<script>	5781	0	15	0	0	0
    v3.0.0
    URL	Protocol	Method	Result	Type	Received	Taken	Initiator	Wait‎‎	Start‎‎	Request‎‎	Response‎‎	Cache read‎‎	Gap‎‎
    /ICE/Core/Message.js?_dc=1420460266030	HTTP	GET	200	application/javascript	1.10 KB	31 ms	XMLHttpRequest	3547	0	31	0	0	0

    In version 3.0.0 the Initiator is set to XMLHttpRequest and in version 2.5.3 was set to <script>

    Maybe anyone know anything about that ? ... or any advice you do you debug your code?

    Thank you
  7. #7

    ...

    After further investigation... I found that VS2013 doesn't support //#sourceURL which is added to dynamic script.

    By default ExtJs is using "fetch" method of the Entry script. That method doesn't create <script> element in header of the document and Visual Studio doesn't recognize it as separate script but "eval code"

    Boot.scripts['http://localhost:50725/MyApp/Core/Message.js'].fetch

    During debug, if I "force" to use loadCrossPlatform then <script> element is added (due to cross domain loading) and Visual Studio is showing my files (fully debugable from start like in previous version of ExtJs)

    Boot.scripts['http://localhost:50725/MyApp/Core/Message.js'].loadCrossDomain


    I am getting to the unfortunate conclusion here... without setting like "createScriptElement" for dynamically loaded js files I might not be able to debug my javascript code like it was in version extjs 4 using Visual Studio 2013 :(


    My question now is ... how do you debug you JS code (dynamically loaded files by Ext) using Visual Studio... or what do you use ?

    Thank you
    Last edited by matt; Jan 05, 2015 at 4:37 PM.
  8. #8

    The Final Hour

    Hi,

    After more than few hours of research I have made my mind and decided to modify extjs 5 Loader by adding "one line" of code. It is not recommended solution but for the debugging purposes will do. The solution is for those who are using Visual Studio with IE and like me were using debugging capabilities of VS running app on IE.

    The ExtJs Loader was changed in version 5. (Please read my previous replies if you decided to read the solution only)

    Solution:

    Download the latest Ext.Net trunk. Open Ext.Net\Build\Ext.Net\extjs\ext-all-debug.js

    Locate following code and add return me.loadCrossDomain(); line to "force" cross domain loading. This will handle all loads in the same way with the exception that the scripts or css will be added to the head of the document. (I have not investigated loadSynch() as I don't use synch loads yet)


    Entry.prototype = { 
    
    ...
    
    load: function (sync) {
        var me = this;
        if (!me.loaded) {
            if (me.loading) {
            	return false;
            }
            me.loading = true;
    
            if (!sync) {
    
    // ----------------------------------------------------------------------- //
            	return me.loadCrossDomain();                  
    // ----------------------------------------------------------------------- //
            	if (me.isCrossDomain()) {
            		return me.loadCrossDomain();
            	}
            	else if (!me.isCss() && Boot.hasReadyState) {
            		me.createLoadElement(function () {
            			me.loaded = true;
            			me.notifyRequests();
            		});
            	}
            	else {
            		me.fetch({
            			async: !sync,
            			complete: function (response) {
            				me.onContentLoaded(response);
            				me.notifyRequests();
            			}
            		});
            	}
            }
            else {
            	me.loadSync();
            }
        }
    
        return true;
    }
    
    ...

    After that modification Visual Studio will be able to recognize separate files loaded dynamically by Ext.require, extend or mixin. Your classes will become fully debuggable in Visual Studio - You can set the break point before you run your code and VS can handle it even it was loaded dynamically.

    Please notice, I have modified only debug version of extjs so you must set your ScriptMode="Debug" in ResourceManager.

    <ext:ResourceManager
    	runat="server"			
    	ScriptMode="Debug">
    </ext:ResourceManager>



    Hope this will be helpful for someone and can save few hours/days of frustration. On the other hand it would be nice to have an option in ExtJS5 to set the loader to load script files like that. The same I could say about Visual Studio to support //#sourceURL dynamic comments.


    I am still happy to hear any advice about debugging your js code in Visual Studio.

    Thank you
  9. #9
    Hi Matt,

    Thank you for that comprehensive investigation! Though, currently I ended up that I cannot reproduce the initial issue.

    It is what I am doing.

    1. Create this test page.
    <%@ Page Language="C#" %>
    
    <!DOCTYPE html>
    
    <html>
    <head runat="server">
        <title>Ext.NET v3 Example</title>
    
        <script>
            Ext.define("theApp", {
                requires: [
                    "MyApp.Core.Test"
                ],
                doSomething: function() {
                    Ext.create("MyApp.Core.Test").doSomething();
                }
            });
    
            Ext.onReady(function() {
                Ext.create("theApp").doSomething();
            });
        </script>
    </head>
    <body>
        <form runat="server">
            <ext:ResourceManager runat="server" />
        </form>
    </body>
    </html>
    2. Create this JavaScript file in the MyApp/Core folder.
    Test.js
    Ext.define('MyApp.Core.Test', {
        doSomething: function() {
            var a = 1 + 2 + 3;
        }
    });
    3. Set the breakpoint inside the Test.js file inside the doSomething method.

    4. Choose Internet Explorer and press F5 and...

    5. It hits the breakpoint.

    I also see that the Test.js file is loaded as a separate file into Visual Studio Script Documents.

    I tested with both VS 2012 (exact version 11.0.61030.00 Update 4) and 2013 (exact version 12.0.21005.1 REL).

    I tested with IE10 (exact version 10.0.9200.17183, update version 10.0.23 KB3008923). Yes, I know you test with IE11. I am currently cannot test it with IE11. Could you test with IE10?

    Also could you, please, check/ensure that everything - Visual Studio, IE and Windows (who knows?) - have got all the recent updates? Maybe, this issue has been recently fixed.

    Raphael, were you able to test it and reproduce or not?
  10. #10

    Tested only in IE11

    Hi Daniil,

    Thank you for testing it... You might be right. I have only IE11 (cannot get IE10 anymore)
    My current development environment versions are:

    Internet Explorer 11
    Version: 11.0.9600.17498
    Update Version: 11.0.15 (KB3008923)

    Visual Studio Professional 2013
    Version 12.0.31101.00 Update 4


    I have tested your code in new project. Created empty ASP website project. Downloaded Ext.Net 3.0.0 via nuget manager.

    No luck... again this is what I got:

    Click image for larger version. 

Name:	eval code 2.png 
Views:	7 
Size:	41.0 KB 
ID:	18291


    I have also tested it in following versions of Visual Studio: (I had already IE11 installed on that machine too; slightly different version).

    Internet Explorer 11
    Version 11.0.9600.17501

    Visual Studio Professional 2012
    Version 11.0.61030.00 Update 4

    Visual Studio Professional 2013
    Version 12.0.21005.1 REL


    I can't get IE10 anymore so cannot test it in IE10.

    I was thinking about some setting in Visual Studio that I have might missed, but again... I have not changed my environment but only the version of Ext.Net.

    Thank you
Page 1 of 4 123 ... LastLast

Similar Threads

  1. [CLOSED] set value of CheckColumn in java script
    By elke.schreiber in forum 2.x Legacy Premium Help
    Replies: 2
    Last Post: Jun 03, 2014, 9:31 AM
  2. Replies: 2
    Last Post: Jul 26, 2013, 10:17 PM
  3. [CLOSED] java script error
    By elke.schreiber in forum 2.x Legacy Premium Help
    Replies: 11
    Last Post: May 13, 2013, 2:19 PM
  4. Replies: 1
    Last Post: Mar 10, 2012, 3:58 PM
  5. C# Code in Markup-Script-Tag or Codebehind
    By macap in forum Open Discussions
    Replies: 5
    Last Post: Apr 07, 2010, 3:58 AM

Tags for this Thread

Posting Permissions