This has been a feature request for Ext.Net too, i.e. to provide a configuration option somewhere that if true emits out properly formatted script generated for initial GET request and for subsequent Ajax responses (an implementation might require considerable server resources is an altogether different story, especially as the script size grows).
I often find myself needing to format Ext.Net ajax responses (and sometimes the responses from initial page loads too) for debugging. In an ideal world, the task could have easily been handled by Fiddler’s Javascript Formatter extension. However, as it turns out, the script generated for Ajax responses by Ext.Net is sent to the client as a string (and not regular javascript) which is eval’ed on the client. See the script below for an example:
{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }{script:”TaskManager1.stopTask(‘longactionprogress’);Progress1.updateProgress(1.0,\”All finished!\”);”}{/syntaxhighlighter}
You would notice that the actual script is escaped as a string, and then sent to the client as a json object with “script” being the key. This effectively renders javascript beautifiers useless as you cannot simple copy-paste the script and expect the beautifiers to format it. Remember, the script is a string and not regular javascript. Here’s the formatted version of the above example produced through a beautifier:
{syntaxhighlighter brush: jscript;fontsize: 100; first-line: 1; }{
script: “TaskManager1.stopTask(‘longactionprogress’);Progress1.updateProgress(1.0,\”All finished!\”);”
}{/syntaxhighlighter}
But what you actually want is this:
TaskManager1.stopTask('longactionprogress');
Progress1.updateProgress(1.0, "All finished!");
No matter how long or short your Ext.Net ajax response is, javascript formatters see it as an escaped string, and you would get nothing out of formatting the response. In fact, this was the reason I wrote the jsBeautifier.net, to automate formatting of Ext.Net ajax responses. Let me explain in a bit more detail.
To make your Ext.Net Ajax responses readable, you first need to convert the Ajax response back to its javascript notation for formatting it effectively (i.e. extract the actual script, and unescape it back to script). This can easily be done in Powershell. Here’s the Powershell code to translate the Ajax response back to javascript that can be formatted:
$index = $text.IndexOf("""");
$text = $text.Substring($index + 1);
$index = $text.LastIndexOf("""");
$text = $text.Substring(0, $index);
$text = $text.Replace("\""", """");
$text is initially assumed to contain Ext.Net’s ajax response. The code extracts the script from the Ajax response, and then unescapes it. Now the only thing left is formatting it, that can be done with any formatter available freely on the net. However, I decided to make the process a bit more efficient.
Earlier what I was doing was to copy paste Ext.net ajax response in a text file, pass it through Powershell to convert it to a script, then copy-paste the resultant script to a formatter, manually select options for formatting, and then open the formatted script in Visual Studio or a similar tool to analyze it (you can also use jsFiddle.net to format and analyze the unescaped script simultaneously).
But this still involved some manual processes that could be automated. So, as the first step, I created jsBeautifier.net, which supported command-line mode for formatting javascript. Then I wrote a Powershell script to take the raw Ext.Net ajax response in a file and provide back the formatted javascript in the same file. The complete Powershell code is as follows:
#requires -version 2.0
$text = [string]::Join("`n", (Get-Content C:\TextToJs.js))
$index = $text.IndexOf("""");
$text = $text.Substring($index + 1);
$index = $text.LastIndexOf("""");
$text = $text.Substring(0, $index);
$text = $text.Replace("\""", """");
$text | Set-Content C:\TextToJs.js
&'jsBeautifier.net' "sourceFile=C:\TextToJs.js" "indent=4" "detectPackers=false" | Out-Null
So, now I save the Ext.Net Ajax response to a file, run the Powershell script and double-click the output file to open it in my default javascript editor. This has saved me more than a minute each time I need to analyze Ext.Net ajax response (which is very frequently).
I was thinking that the above process might be optimized a more by creating a Fiddler plugin that does the entire task just by right-clicking and selecting a menu option for an Ajax response. I will try to create the plugin when I get time, but I am definitely using the above approach regularly till then.
You can download jsBeautifier.net here, and the Powershell code is attached as a script below.
Recent Comments