We are trying to optimize our dojo code prior to going into production. I have created a custom build and grouped our modules into separate layer files. I am now trying to debug the application with these custom build files as we are seeing problems we didn't see with the files separated.
The following are some of the problems and questions I have for working with “layers” and a custom build. I would appreciate any suggestions from the group.
When I use the uncompressed layer file for source code debugging in Firebug (e.g. Layname.js.uncompressed.js) firebug becomes very slow and sometimes my browser (Firefox) will hang. I am trying to find a work around for this behavior so I can continue to troubleshoot the problem.
- Is it possible to include the separated class file and the layer file which includes the class code at the same time. Then set a break point in the separate class file as it doesn't slow down firebug.
For example:
< script language="javascript" src="/dojo/mymodule/MyClass.js" >< /script >
< script language="javascript" src="/dojo/mymodule.js.uncompressed.js" >< /script >
< script type="text/javascript">
dojo.require("dojo.mymodule.MyClass");
< /script>
What code would the browser use to render the class? Would it use the MyClass found in the MyClass.js file or the MyClass found in the mymodule.js.uncompressed.js file?
- Another help for us would be to enable logging so our console.log() messages would show up in firebug. I have tried using the build.bat with the log=0 as a parameter but the log messages are still disabled. What am I doing wrong to turn on logging and still use a custom build?
Thanks in advance for your help.
Brett
1) uncompressed files
1) uncompressed files slowing firebug: you might try the build option layerOptimize=comments. That will make the layers just not have comments, but still keep line breaks and not change the variable names. That will allow you to read the code easier. Then you can just load the layer.js file for debugging. Hopefully it will be a smaller file, and maybe firebug can handle that better. When you are ready to ship, you can then use layerOptimize=shrinksafe or just remove that build option, since shrinksafe is the default option.
2) The question of MyClass.js vs. mymodule.js.uncompressed.js: the last definition of dojo.mymodule.MyClass will win, so the one in mymodule.js.uncompressed.js will be where you should set your breakpoint.
3) log=0 controls the logging of the messages during the build process. It does not affect console.log() calls. In Dojo 1.2, there is a stripConsole=normal feature that will strip all console.* calls except console.error and console.warn. However, if you are not using Dojo 1.2, or if you do not have stripConsole in your build command, then console.log calls should show up in the Console tab in Firefox.
maybe
If you can, maybe post the profile.js file you're using with your layer definitions .. perhaps there's an error in there.
So when you run your build.sh (or build.bat), it appears to run fine & you get all the files in your release directory, it sounds like.... On the Net tab, in Firebug, are you seeing it load up your layered files w/no errors (the normal ones, not the uncompressed versions)?
What are the problems you see with the layered files (again, not the uncompressed ones)? I can't quite remember exactly what i did, but I recall having a problem when I first went to a layered build that was basically related to loading the layered files because (in my setup), those were living in a different path ... basically had issues getting the right files pulled in. That's a useless description really, but it's what makes me wonder if you're seeing red error messsages in the Net tab in firebug (sometimes you have to scroll back a ways to see if everything loaded).
Dylan Tynan
More information on debug problem
Thanks for the suggestions so far. They have been helpful.
I tried the layerOptimize=comments in the build and that appears to have helped when I try to debug the .js.uncompressed.js file.
But I am still not able to get any of the console.log (includes console.error, console.warn, etc) messages to work. If I edit the .js.uncompressed.js file and put in "alert" methods to display debug information those work correctly.
I have tried setting the global djConfig property isDebug to true but still the console messages do not get displayed.
Below is a sample of my profile file (pe.profile.js). I am not using the pe_dijit or pe_dojox right but in instead using the dojo.js.uncompressed.js that comes with the release build. I am also using the pe_admin.js.uncompressed.js file for debugging.
dependencies = {
layers: [
{
name: "../prx/pe_admin.js",
dependencies: [
"prx.testmgr.tests.AddNewTestDialog",
"prx.testmgr.tests.AssessManageTest",
"prx.testmgr.tests.AssessManageTestList",
"prx.testmgr.tests.AssessManageTestProctor",
"prx.testmgr.classes.AddNewAdultStudentToClassDialog",
"prx.testmgr.classes.AddNewClassDialog",
"prx.testmgr.classes.AddNewStudentToClassDialog",
"prx.testmgr.classes.AssessClassEdit",
"prx.testmgr.classes.AssessClassStudentList",
"prx.testmgr.classes.AssessClassTab",
"prx.testmgr.classes.AssessManageClass",
"prx.testmgr.classes.AssessManageClassesList"
]
},
{
name: "../dijit/pe_dijit.js",
dependencies: [
"dijit.dijit.js",
"dijit.dijit-all.js",
"dijit._Widget.js",
"dijit._Container.js",
"dijit.Editor.js",
"dijit.Dialog.js",
"dijit.form.Button.js",
"dijit.form.CheckBox.js",
"dijit.form.ComboBox.js",
"dijit.form.FilteringSelect.js",
"dijit.form._FormWidget.js",
"dijit.form.Form.js",
"dijit._Container.js",
"dijit._Templated.js",
"dijit.layout._LayoutWidget.js",
"dijit.layout.LayoutContainer.js",
"dijit.layout.BorderContainer.js",
"dijit.layout.StackContainer.js",
"dijit.layout.TabContainer.js",
"dijit.layout.ContentPane.js",
"dijit.layout.AccordionContainer.js",
"dijit.Tree.js",
"dijit._tree.dndContainer.js",
"dijit._tree.dndSelector.js",
"dijit._tree.dndSource.js",
"dijit.ProgressBar.js.js",
"dijit.themes.dijit.css"
]
},
{
name: "../dojox/pe_dojox.js",
dependencies: [
"dojox.data.jsonPathStore.js",
"dojox.layout.FloatingPane.js",
"dojox.grid._Grid.js",
"dojox.grid.DataGrid.js",
"dojox.grid._EditManager.js",
"dojox.grid._Events.js",
"dojox.grid._FocusManager.js",
"dojox.grid._Layout.js",
"dojox.grid._RowManager.js",
"dojox.grid._RowSelector.js",
"dojox.grid._Scroller.js",
"dojox.grid._View.js",
"dojox.grid._ViewManager.js",
"dojox.grid.cells.js",
"dojox.grid.Selection.js",
"dojox.grid.util.js",
"dojox.grid.cells._base.js",
"dojox.data.QueryReadStore.js",
"dojox.string.sprintf.js",
"dojox.grid.resources.nihiloGrid.css",
"dojox.layout.resources.FloatingPane.css"
]
}
],
prefixes: [
[ "prx", "../../../../../pe/webapp/pe/images/prx" ],
[ "dijit", "../dijit" ],
[ "dojox", "../dojox" ]
]
};
I'm not seeing any "red" error indicators in firebug as the JS files are loading until I get to the error I am trying to resolve, but I also don't see any console messages in firebug.
Thanks again for your suggestions.
Brett
console.log (console.dir, etc.)
Ok, first let's find out what's up with console debugging. Pull up firebug, make sure it's on the "Console" tab, then go to this URL:
http://archive.dojotoolkit.org/nightly/checkout/dojox/form/tests/test_Dr...
You should see a number of lines of test information appear in the Console pane. You can also click the "Get Values" button, which should print a list of values & states in the Console area. Is that working?
Assuming that works, then all you should need to do is put console.log("some text"); into your code somewhere. You can drop a line like that just one line up from your dojo.require's, if you'd like, and that should cause it to spit out a line of info before it even attempts to load anything. If that doesn't work, then there is likely a problem with the top of your script where you're pulling in the required dojo statements (in other words, dojo isn't working, but js probably still is, thus you could do an alert() )
Try that real quick & let's get that working first.
Dylan
Tried suggestion
Yes, console messages are correctly displayed in firebug when I go to the suggested test page.
There must be something wrong with my dojo initialization with the layers. The weird part is that the application is functioning mostly except that none of the console messages display and there are a few bugs that need to be resolved - thus the need for the console.log() to work.
I'm going to try changing the profile file and how I include dojo.js to see if this makes a difference.
Thanks,
Brett
css in layer file
I might be wrong, but I don't think you're supposed to put .css files in your layer definitions. I think you just put javascript resources.
There is a cssOptimize command-line option for the build script. I think it causes @import lines in your js to get replaced with the inlined css file (I haven't used it). It looks like, according to the docs, it determines CSS files from looking at the import lines in your js code, not from the layer definition in the build profile (though perhaps you know something I don't on this). Maybe try removing the css lines from your layers & making sure you @import all your needed css in your js or html files and see if that helps?
Dylan
Dylan is correct, you should
Dylan is correct, you should not have .css files in the dependencies list. Also the dependencies should use the resource names (the strings in the dojo.provide() calls, and not .js names -- the dependencies section should just have things like dijit.layout._LayoutWidget and not dijit.layout._LayoutWidget.js.
Remove CSS in layers
These were entered by mistake. They were never intended to be added as a layer. I am removing them as suggested.
Brett
more on layer dependencies
This isn't really a problem, I don't think, but just an fyi ... the build scripts will handle pulling in dependent required files for a given module. So, for example, you could probably get rid of all those individual grid-related file dependencies and just put "dojox.grid.DataGrid". If you follow through it's list of requires, and so on down the tree, you're going to end up with the grid files you're requiring by hand (especially since you're also already requiring dojox.grid.DataGrid anyway).
As an example, I have a page that displays a single grid from an ItemFileReadStore, so my layer for that page is very simple:
{
name: "matrix-grid.js",
dependencies: [
"dojox.grid.DataGrid",
"dojo.data.ItemFileReadStore",
]
},
Or, I have a completely unrelated section (thus the separate layers), that has some form input, so for that I've got a bunch of dijit stuff, but not all of it of course:
{
name: "matrix-form.js",
dependencies: [
"dijit.form.FilteringSelect",
"dijit.form.Form",
"dijit.form.TextBox",
"dijit.form.Button",
"dijit.form.ValidatationTextBox",
"dijit.Tooltip",
"dijit.ProgressBar",
]
},
Dunno if that's helpful at all, I guess you might want to be that specific, just a thought...
Dylan