PDA

View Full Version : Debugging Ext


jsakalos
15 Dec 2008, 8:51 AM
I've been debugging my applications in Firefox3@Linux + Firebug and I included ext-all-debug.js on the development system until now. Although it worked quite fine, I was able to set breakpoints and trace my applications with Firebug, I've always had two problems:




When stepping into an Ext routine I'd always had to wait a couple of seconds until Firebug got responsive again. Also, each single step through code took a couple of seconds. I attribute it to the slowness of processing of ext-all-debug.js that has 53000+ lines.
Documentation is stripped off in ext-all-debug so I had to switch back and forth between docs Firefox tab and debugging tab.


The idea is to include individual Ext source files. Sure, the loading time gets a bit longer as we need to include 150+ files instead of one but this will pay back many times while stepping through code. For those using PHP the code is:



$jsTpl = '<script type="text/javascript" src="{file}"></script>';
$doc = new DOMDocument();
$doc->load("ext/src/ext.jsb");
$xpath = new DOMXPath($doc);
$includes = $xpath->query("//project/target[@name='Everything']/include");
foreach($includes as $include) {
$file = "ext/src/" . preg_replace("/\\\/", "/", $include->getAttribute("name"));
echo preg_replace("/\{file\}/", $file, $jsTpl) . "\n";
}
This fragment reads ext/src/ext.jsb file (ExtJS project file) and generates corresponding tags. This ensures that the individual files are included in the exactly same order that is used for ext-all-debug.js generation.

I'm very satisfied with the result; let me please know your experiences.
jay@moduscreate.com
15 Dec 2008, 9:01 AM
....... or you can install Firebug's latest beta, which uses 'live templates' to speed up your debugging.

This doesn't help the comments though.

I do like your idea though. I think it would be better to have a "Super" file, that has all of the code concatenated into one large file with comments.
jsakalos
15 Dec 2008, 9:06 AM
I was thinking about that one big file but it wouldn't solve the Firebug slowness problem. I haven't tried beta yet; I'll rather wait for a final release anyway.
jay@moduscreate.com
15 Dec 2008, 9:07 AM
I try betas using different profiles in Fx. it's worth it to see what's coming up :)
jay@moduscreate.com
15 Dec 2008, 9:08 AM
One bad reason for doing it this way is that your script list in firebug grows to be crazy. One benefit is that firebug's script list does allow you to do keyboard filtering. None the less, still will be huge.
jsakalos
15 Dec 2008, 9:14 AM
I don't have enough time for FB betas... :(

Yes, list is huge but I don't care because it has already been huge for my application that has 137 files. So it makes no difference (for me) if I have 137 or 300 files. On-type filtering does its job very well here.
oxymoron
16 Dec 2008, 5:24 AM
To generate template HTML files locally at my windows PC (with all the source ExtJS files included separately) I usually use:

ext.xsl



<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="xml" indent="yes" encoding="utf-8"/>
<xsl:template match="/">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<link rel="stylesheet" type="text/css" href="ext/resources/css/ext-all.css"/>
<script type="text/javascript" src="ext/source/core/Ext.js"></script>
<script type="text/javascript" src="ext/source/adapter/ext-base.js"></script>
<xsl:apply-templates/>
<script type="text/javascript" src="index.js"></script>
<title>Test</title>
</head>
<body></body>
</html>
</xsl:template>
<xsl:template match="project/target[@name='Everything']/include">
<script type="text/javascript" src="{translate(concat('ext/source/',(@name)),'\','/')}"></script>
</xsl:template>
</xsl:stylesheet>


msxml.js


var xml = WScript.CreateObject("Microsoft.XMLDOM"); //input
xml.validateOnParse=false;
xml.load(WScript.Arguments(0));
var xsl = WScript.CreateObject("Microsoft.XMLDOM"); //style
xsl.validateOnParse=false;
xsl.load(WScript.Arguments(1));
var out = WScript.CreateObject("Microsoft.XMLDOM"); //output
out.async = false;
out.validateOnParse=false;
xml.transformNodeToObject( xsl, out );
out.save(WScript.Arguments(2));


generate.bat


@echo off
cscript //nologo msxml.js ext\source\ext.jsb ext.xsl index-template.html


ExtJS should be in ext folder
jsakalos
16 Dec 2008, 5:29 AM
Thank you for providing the solution for windows users.