PDA

View Full Version : [CLOSED] Debugging java script code - my classes are ending up in eval code



matt
Jan 03, 2015, 8:58 PM
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:

http://forums.ext.net/attachment.php?attachmentid=18141&stc=1

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)

http://forums.ext.net/attachment.php?attachmentid=18151&stc=1

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

RaphaelSaldanha
Jan 04, 2015, 4:44 AM
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>

matt
Jan 04, 2015, 6:52 AM
Hi Raphael,

This is not what I exactly meant. I checked the "debugger" keyword here:
http://msdn.microsoft.com/en-us/library/ie/0bwt76sk%28v=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

RaphaelSaldanha
Jan 04, 2015, 8:49 AM
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_Started/Introduction/Overview/

matt
Jan 04, 2015, 4:06 PM
That's not the setting either. I am investigating Ext.Loader now ... and the settings.

Thank you for the reply. Any thoughts count :)

matt
Jan 05, 2015, 11:25 AM
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

matt
Jan 05, 2015, 4:34 PM
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

matt
Jan 05, 2015, 10:43 PM
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

Daniil
Jan 06, 2015, 1:57 AM
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?

matt
Jan 06, 2015, 9:05 AM
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:

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

RaphaelSaldanha
Jan 06, 2015, 10:46 AM
Microsoft Visual Studio Premium 2013
Version 12.0.31101.00 Update 4
Microsoft .NET Framework Version 4.5.51209

Internet Explorer 11.0.9600.17358

I was able to debug
18301

and the js was in a separate file
18311

matt
Jan 06, 2015, 11:04 AM
Hi Raphael,


Thanks, so there must be some simple explanation to this.
I can see we are testing it on nearly the same versions (except the IE)

I have noticed that I have got few updates to be installed for my Windows 8.1.
I am trying this now.

Raphael, can you please check what you get in network monitor ? (what is the initiator)

18321

Thank you

Daniil
Jan 06, 2015, 11:15 AM
Raphael, can you please check what you get in network monitor ? (what is the initiator)

It is <script> for me.


I have noticed that I have got few updates to be installed for my Windows 8.1.

I am testing on Windows 7. It might also be a reason.

As for IE11, I am going to test it right away in IE11 on the colleague's machine.

RaphaelSaldanha
Jan 06, 2015, 11:19 AM
The initiator equals Script

18331

RaphaelSaldanha
Jan 06, 2015, 11:21 AM
Daniil, i got the results above on IE 11.

Daniil
Jan 06, 2015, 11:23 AM
Daniil, i got the results above on IE 11.

Aha. I just want to test it once more on some different machine.

By the way, do you use Windows 7 or 8?

RaphaelSaldanha
Jan 06, 2015, 11:26 AM
Windows 7, but if you want, i can test on Windows 8.

matt
Jan 06, 2015, 11:27 AM
Thanks!

I use Windows 8.1 Pro.

I have notice something... I am not gonna ask to install latest updates of IE ... but please have a look how my F12 tool looks like... I remember few weeks ago (as I was using it every day) ... that the GUI has changed (after some of the IE upgrades) ...

I don't think it is the Windows version. My second test environment (where I had VS2012 and 2013) was machine with Window 7 too, but the IE 11 was with the higher version than Raphael's)

If you have an option to test it on IE version either: 11.0.9600.17498 or 11.0.9600.17501 that would be great.

This way we could eliminate IE issue.

RaphaelSaldanha
Jan 06, 2015, 11:33 AM
More details about my current IE version.
18341

I am gonna update to latest IE version and retest.

Daniil
Jan 06, 2015, 12:06 PM
I just tested on
Windows 8.1 64bit (no updates available)
IE 11.0.9600.17498, update 11.0.15 (KB3008923)

and the issue is reproducible.


The initiator is XMLHttpRequest.

I also see the difference in the request's type.

When it works (on my Windows 7 machine) it is application/x-javascript.

When it doesn't work (on the colleague's Windows 8 machine) it is application/javascript.

At this moment I don't quite have any idea what is going wrong and who (Windows 8/IE11/ExtJS 5) is a culprit. Maybe, each.

RaphaelSaldanha
Jan 06, 2015, 12:09 PM
I get the following result on Windows 8

18361

IE version IE 11.0.9600.16438

18351

Dimitris
Jan 06, 2015, 12:48 PM
Check this out:

http://www.sencha.com/forum/showthread.php?290137-JS-files-don-t-load-separately-anymore

Daniil
Jan 06, 2015, 3:33 PM
Thank you, @Mimisss. I were going to test with ExtJS 5.1.0, but somehow I forgot it. You reminded that to me.

Yes, it hits the breakpoint with ExtJS 5.1.0.

One more issue that is fixed in ExtJS 5.1.0.

Matt, once I commit my ExtJS 5.1.0 to SVN, I will post a follow-up here.

Apologize for the inconvenience.

matt
Jan 06, 2015, 3:50 PM
Thanks Guys for all the time you have put into resolving this problem !
I was very close from stepping away from Ext.Net 3.0. Now I can move on to the other challenges with the upgrade. I hope with normal debugging it will be pretty straight forward.

Daniil
Jan 06, 2015, 3:58 PM
Excellent! We are here to do our best helping you.


Matt, once I commit my ExtJS 5.1.0 to SVN, I will post a follow-up here.

It is going to happen later this week or very early next week.

RaphaelSaldanha
Jan 06, 2015, 4:12 PM
+1 to ExtJS 5.1.0.

matt
Jan 06, 2015, 4:16 PM
Superb, until then I will be using my small "hack" :)

matt
Jan 14, 2015, 6:56 PM
PLEASE IGNORE... not related to the thread... function complete was triggering onReady where I had error. (in previous release the error was not detected)

Hi,

I have upgraded to the latest version in trunk 6248 (Ext.Net 3.0.0.34915 with Ext JS 5.1.0.107).
My hardware and software configuration has not changed.

The debugging issue is fixed in this version. Although another issue was introduced. For some reason following error is called


Element cache already contains an entry for id 'ext-window'. Use Ext.get() to create or retrieve Element instances.


Ext.Boot:


loadElement: function() {
var me = this,
complete = function(){
me.loaded = me.evaluated = me.done = true;
me.notifyRequests();
};
if(me.isCss()) {
return me.loadCrossDomain();
} else {
me.createLoadElement(function(){
EXCEPTION THROWN BY -------> complete();
});
me.evaluateLoadElement();
}
return true;
}


I will try to create sample where we can reproduce the problem.

Matt

matt
Jan 14, 2015, 8:01 PM
Hi,

I have located real problem of the error I was receiving (my previous reply)

Once we have 3.1 (extjs 5.1.0) released this thread can be closed.

Thank you

Daniil
Jan 15, 2015, 6:34 AM
Thank you for the confirmation that the debugging issue is fixed. Do you mind I close the thread right away since it is fixed in SVN?

matt
Jan 15, 2015, 12:04 PM
Yes, please.

Thank you