painful to debug with ext-all-debug.js

[aj3423]

when using Firefox & firebug to debug ext-all-debug.js, the performance is really low, is there anyway can solve this, how do you guys always do? Thanks in advance.

[arthurakay]

The only problems I've ever had were related to working on a localhost - Firefox has (or used to have?) some bug which made JavaScript run like molasses when running a localhost.

Firebug also makes things run more slowly... don't know if that or other Firefox plugins are slowing you down.

Otherwise, I haven't had any problems.

Maybe you can offer a bit more information about your site/application, like how you're importing the files.

[aj3423]

it is slow even if there is only one firebug addon installed, when debugging in ext-all-debug.js, each single step takes about 1 second, and the scroller is something I never want to use. I wonder if there is some convenient way to load the files under 'src' folder. once I found a thread which looks has something to do with this, but that time I didn't follow up, now I search over but failed to find it anymore:(

[evant]

A technique I sometimes use is if I want to debug a specific class/method, I will copy it into my testing js file as an override. Can be useful.

[aj3423]

A technique I sometimes use is if I want to debug a specific class/method, I will copy it into my testing js file as an override. Can be useful.
that's a good suggestion~:)

[danguba]

I always include src files when developing. It is much easier to debug that way. And when everything is fine you can include only ext-all.js

[stephen.friedrich]

Yes, it's much nicer to include individual files.
Here are the script tags needed for Ext 3:

<script type="text/javascript" src="js/ext-base-debug.js"></script>

<script type="text/javascript" src="js/ext-foundation-debug.js"></script>
<script type="text/javascript" src="js/cmp-foundation-debug.js"></script>
<script type="text/javascript" src="js/ext-dd-debug.js"></script>
<script type="text/javascript" src="js/data-foundation-debug.js"></script>
<script type="text/javascript" src="js/data-json-debug.js"></script>
<script type="text/javascript" src="js/data-xml-debug.js"></script>
<script type="text/javascript" src="js/data-grouping-debug.js"></script>
<script type="text/javascript" src="js/direct-debug.js"></script>
<script type="text/javascript" src="js/resizable-debug.js"></script>
<script type="text/javascript" src="js/window-debug.js"></script>
<script type="text/javascript" src="js/state-debug.js"></script>
<script type="text/javascript" src="js/data-list-views-debug.js"></script>
<script type="text/javascript" src="js/pkg-tabs-debug.js"></script>
<script type="text/javascript" src="js/pkg-buttons-debug.js"></script>
<script type="text/javascript" src="js/pkg-toolbars-debug.js"></script>
<script type="text/javascript" src="js/pkg-history-debug.js"></script>
<script type="text/javascript" src="js/pkg-tips-debug.js"></script>
<script type="text/javascript" src="js/pkg-tree-debug.js"></script>
<script type="text/javascript" src="js/pkg-charts-debug.js"></script>
<script type="text/javascript" src="js/pkg-menu-debug.js"></script>
<script type="text/javascript" src="js/pkg-forms-debug.js"></script>
<script type="text/javascript" src="js/pkg-grid-foundation-debug.js"></script>
<script type="text/javascript" src="js/pkg-grid-editor-debug.js"></script>
<script type="text/javascript" src="js/pkg-grid-property-debug.js"></script>
<script type="text/javascript" src="js/pkg-grid-grouping-debug.js"></script>
There is a thread somewhere that describes how to let the server genererate this dynamically - which has the advantage to work in newer ExtJS version where the list may be different.

If you need to change the style of your app it also helps a lot to include individual CSS files. To work around the IE limitation of max. 30 CSS files I include these two files:

<link rel="stylesheet" type="text/css" href="css/ext-structure.css"/>
<link rel="stylesheet" type="text/css" href="css/ext-visual.css"/>
that contain imports for the real CSS files:


@import url('../structure/reset.css');
@import url('../structure/core.css');
@import url('../structure/tabs.css');
@import url('../structure/form.css');
@import url('../structure/button.css');
@import url('../structure/toolbar.css');
@import url('../structure/resizable.css');
@import url('../structure/grid.css');
@import url('../structure/dd.css');
@import url('../structure/tree.css');
@import url('../structure/date-picker.css');
@import url('../structure/qtips.css');
@import url('../structure/menu.css');
@import url('../structure/box.css');
@import url('../structure/debug.css');
@import url('../structure/combo.css');
@import url('../structure/panel.css');
@import url('../structure/panel-reset.css');
@import url('../structure/window.css');
@import url('../structure/editor.css');
@import url('../structure/borders.css');
@import url('../structure/layout.css');
@import url('../structure/progress.css');
@import url('../structure/list-view.css');
@import url('../structure/slider.css');
@import url('../structure/dialog.css');and


@import url('../visual/core.css');
@import url('../visual/tabs.css');
@import url('../visual/form.css');
@import url('../visual/button.css');
@import url('../visual/toolbar.css');
@import url('../visual/resizable.css');
@import url('../visual/grid.css');
@import url('../visual/dd.css');
@import url('../visual/tree.css');
@import url('../visual/date-picker.css');
@import url('../visual/qtips.css');
@import url('../visual/menu.css');
@import url('../visual/box.css');
@import url('../visual/debug.css');
@import url('../visual/combo.css');
@import url('../visual/panel.css');
@import url('../visual/window.css');
@import url('../visual/editor.css');
@import url('../visual/borders.css');
@import url('../visual/layout.css');
@import url('../visual/progress.css');
@import url('../visual/list-view.css');
@import url('../visual/slider.css');
@import url('../visual/dialog.css');

[danguba]

Yes, it's much nicer to include individual files.
Here are the script tags needed for Ext 3:

<script type="text/javascript" src="js/ext-base-debug.js"></script>

...


Or if you want to go even deeper



<script type="text/javascript" src="ext/adapter/ext/ext-base-debug.js"></script>
<script type="text/javascript" src="ext/src/core/core/DomHelper.js"></script>
<script type="text/javascript" src="ext/src/core/DomHelper-more.js"></script>
<script type="text/javascript" src="ext/src/core/core/Template.js"></script>
<script type="text/javascript" src="ext/src/core/Template-more.js"></script>
<script type="text/javascript" src="ext/src/core/core/DomQuery.js"></script>
<script type="text/javascript" src="ext/src/util/core/Observable.js"></script>
<script type="text/javascript" src="ext/src/util/Observable-more.js"></script>
<script type="text/javascript" src="ext/src/core/core/EventManager.js"></script>
<script type="text/javascript" src="ext/src/core/EventManager-more.js"></script>
<script type="text/javascript" src="ext/src/core/core/Element.js"></script>
<script type="text/javascript" src="ext/src/core/Element-more.js"></script>
<script type="text/javascript" src="ext/src/core/Element.alignment.js"></script>
<script type="text/javascript" src="ext/src/core/core/Element.traversal.js"></script>
<script type="text/javascript" src="ext/src/core/core/Element.insertion.js"></script>
<script type="text/javascript" src="ext/src/core/Element.insertion-more.js"></script>
<script type="text/javascript" src="ext/src/core/core/Element.style.js"></script>
<script type="text/javascript" src="ext/src/core/Element.style-more.js"></script>
<script type="text/javascript" src="ext/src/core/core/Element.position.js"></script>
<script type="text/javascript" src="ext/src/core/Element.position-more.js"></script>
<script type="text/javascript" src="ext/src/core/core/Element.scroll.js"></script>
<script type="text/javascript" src="ext/src/core/Element.scroll-more.js"></script>
<script type="text/javascript" src="ext/src/core/core/Element.fx.js"></script>
<script type="text/javascript" src="ext/src/core/Element.fx-more.js"></script>
<script type="text/javascript" src="ext/src/core/Element.keys.js"></script>
<script type="text/javascript" src="ext/src/core/core/Fx.js"></script>
<script type="text/javascript" src="ext/src/core/core/CompositeElementLite.js"></script>
<script type="text/javascript" src="ext/src/core/CompositeElementLite-more.js"></script>
<script type="text/javascript" src="ext/src/core/CompositeElement.js"></script>
<script type="text/javascript" src="ext/src/data/core/Connection.js"></script>
<script type="text/javascript" src="ext/src/util/UpdateManager.js"></script>
<script type="text/javascript" src="ext/src/util/Date.js"></script>
<script type="text/javascript" src="ext/src/util/core/DelayedTask.js"></script>
<script type="text/javascript" src="ext/src/util/MixedCollection.js"></script>
<script type="text/javascript" src="ext/src/util/core/JSON.js"></script>
<script type="text/javascript" src="ext/src/util/Format.js"></script>
<script type="text/javascript" src="ext/src/util/XTemplate.js"></script>
<script type="text/javascript" src="ext/src/util/CSS.js"></script>
<script type="text/javascript" src="ext/src/util/ClickRepeater.js"></script>
<script type="text/javascript" src="ext/src/util/KeyNav.js"></script>
<script type="text/javascript" src="ext/src/util/KeyMap.js"></script>
<script type="text/javascript" src="ext/src/util/TextMetrics.js"></script>
<script type="text/javascript" src="ext/src/util/Cookies.js"></script>
<script type="text/javascript" src="ext/src/core/Error.js"></script>
<script type="text/javascript" src="ext/src/widgets/ComponentMgr.js"></script>
<script type="text/javascript" src="ext/src/widgets/Component.js"></script>
<script type="text/javascript" src="ext/src/widgets/Action.js"></script>
<script type="text/javascript" src="ext/src/widgets/Layer.js"></script>
<script type="text/javascript" src="ext/src/widgets/Shadow.js"></script>
<script type="text/javascript" src="ext/src/widgets/BoxComponent.js"></script>
<script type="text/javascript" src="ext/src/widgets/SplitBar.js"></script>
<script type="text/javascript" src="ext/src/widgets/Container.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/ContainerLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/FitLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/CardLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/AnchorLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/ColumnLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/BorderLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/FormLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/AccordionLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/TableLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/AbsoluteLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/layout/BoxLayout.js"></script>
<script type="text/javascript" src="ext/src/widgets/Viewport.js"></script>
<script type="text/javascript" src="ext/src/widgets/Panel.js"></script>
<script type="text/javascript" src="ext/src/widgets/Editor.js"></script>
<script type="text/javascript" src="ext/src/widgets/ColorPalette.js"></script>
<script type="text/javascript" src="ext/src/widgets/DatePicker.js"></script>
<script type="text/javascript" src="ext/src/widgets/LoadMask.js"></script>
<script type="text/javascript" src="ext/src/widgets/Slider.js"></script>
<script type="text/javascript" src="ext/src/widgets/ProgressBar.js"></script>
<script type="text/javascript" src="ext/src/dd/DDCore.js"></script>
<script type="text/javascript" src="ext/src/dd/DragTracker.js"></script>
<script type="text/javascript" src="ext/src/dd/ScrollManager.js"></script>
<script type="text/javascript" src="ext/src/dd/Registry.js"></script>
<script type="text/javascript" src="ext/src/dd/StatusProxy.js"></script>
<script type="text/javascript" src="ext/src/dd/DragSource.js"></script>
<script type="text/javascript" src="ext/src/dd/DropTarget.js"></script>
<script type="text/javascript" src="ext/src/dd/DragZone.js"></script>
<script type="text/javascript" src="ext/src/dd/DropZone.js"></script>
<script type="text/javascript" src="ext/src/core/Element.dd.js"></script>
<script type="text/javascript" src="ext/src/data/Api.js"></script>
<script type="text/javascript" src="ext/src/data/Response.js"></script>
<script type="text/javascript" src="ext/src/data/SortTypes.js"></script>
<script type="text/javascript" src="ext/src/data/Record.js"></script>
<script type="text/javascript" src="ext/src/data/StoreMgr.js"></script>
<script type="text/javascript" src="ext/src/data/Store.js"></script>
<script type="text/javascript" src="ext/src/data/DataField.js"></script>
<script type="text/javascript" src="ext/src/data/DataReader.js"></script>
<script type="text/javascript" src="ext/src/data/DataWriter.js"></script>
<script type="text/javascript" src="ext/src/data/DataProxy.js"></script>
<script type="text/javascript" src="ext/src/data/Request.js"></script>
<script type="text/javascript" src="ext/src/data/ScriptTagProxy.js"></script>
<script type="text/javascript" src="ext/src/data/HttpProxy.js"></script>
<script type="text/javascript" src="ext/src/data/MemoryProxy.js"></script>
<script type="text/javascript" src="ext/src/data/JsonWriter.js"></script>
<script type="text/javascript" src="ext/src/data/JsonReader.js"></script>
<script type="text/javascript" src="ext/src/data/ArrayReader.js"></script>
<script type="text/javascript" src="ext/src/data/ArrayStore.js"></script>
<script type="text/javascript" src="ext/src/data/JsonStore.js"></script>
<script type="text/javascript" src="ext/src/data/XmlWriter.js"></script>
<script type="text/javascript" src="ext/src/data/XmlReader.js"></script>
<script type="text/javascript" src="ext/src/data/XmlStore.js"></script>
<script type="text/javascript" src="ext/src/data/GroupingStore.js"></script>
<script type="text/javascript" src="ext/src/data/DirectProxy.js"></script>
<script type="text/javascript" src="ext/src/data/DirectStore.js"></script>
<script type="text/javascript" src="ext/src/direct/Direct.js"></script>
<script type="text/javascript" src="ext/src/direct/Transaction.js"></script>
<script type="text/javascript" src="ext/src/direct/Event.js"></script>
<script type="text/javascript" src="ext/src/direct/Provider.js"></script>
<script type="text/javascript" src="ext/src/direct/JsonProvider.js"></script>
<script type="text/javascript" src="ext/src/direct/PollingProvider.js"></script>
<script type="text/javascript" src="ext/src/direct/RemotingProvider.js"></script>
<script type="text/javascript" src="ext/src/widgets/Resizable.js"></script>
<script type="text/javascript" src="ext/src/widgets/Window.js"></script>
<script type="text/javascript" src="ext/src/widgets/WindowManager.js"></script>
<script type="text/javascript" src="ext/src/widgets/MessageBox.js"></script>
<script type="text/javascript" src="ext/src/widgets/PanelDD.js"></script>
<script type="text/javascript" src="ext/src/state/Provider.js"></script>
<script type="text/javascript" src="ext/src/state/StateManager.js"></script>
<script type="text/javascript" src="ext/src/state/CookieProvider.js"></script>
<script type="text/javascript" src="ext/src/widgets/DataView.js"></script>
<script type="text/javascript" src="ext/src/widgets/list/ListView.js"></script>
<script type="text/javascript" src="ext/src/widgets/list/ColumnResizer.js"></script>
<script type="text/javascript" src="ext/src/widgets/list/Sorter.js"></script>
<script type="text/javascript" src="ext/src/widgets/TabPanel.js"></script>
<script type="text/javascript" src="ext/src/widgets/Button.js"></script>
<script type="text/javascript" src="ext/src/widgets/SplitButton.js"></script>
<script type="text/javascript" src="ext/src/widgets/CycleButton.js"></script>
<script type="text/javascript" src="ext/src/widgets/Toolbar.js"></script>
<script type="text/javascript" src="ext/src/widgets/ButtonGroup.js"></script>
<script type="text/javascript" src="ext/src/widgets/PagingToolbar.js"></script>
<script type="text/javascript" src="ext/src/util/History.js"></script>
<script type="text/javascript" src="ext/src/widgets/tips/Tip.js"></script>
<script type="text/javascript" src="ext/src/widgets/tips/ToolTip.js"></script>
<script type="text/javascript" src="ext/src/widgets/tips/QuickTip.js"></script>
<script type="text/javascript" src="ext/src/widgets/tips/QuickTips.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreePanel.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeEventModel.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeSelectionModel.js"></script>
<script type="text/javascript" src="ext/src/data/Tree.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeNode.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/AsyncTreeNode.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeNodeUI.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeLoader.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeFilter.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeSorter.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeDropZone.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeDragZone.js"></script>
<script type="text/javascript" src="ext/src/widgets/tree/TreeEditor.js"></script>
<script type="text/javascript" src="ext/src/widgets/chart/swfobject.js"></script>
<script type="text/javascript" src="ext/src/widgets/chart/EventProxy.js"></script>
<script type="text/javascript" src="ext/src/widgets/chart/FlashComponent.js"></script>
<script type="text/javascript" src="ext/src/widgets/chart/Chart.js"></script>
<script type="text/javascript" src="ext/src/widgets/menu/Menu.js"></script>
<script type="text/javascript" src="ext/src/widgets/menu/MenuMgr.js"></script>
<script type="text/javascript" src="ext/src/widgets/menu/BaseItem.js"></script>
<script type="text/javascript" src="ext/src/widgets/menu/TextItem.js"></script>
<script type="text/javascript" src="ext/src/widgets/menu/Separator.js"></script>
<script type="text/javascript" src="ext/src/widgets/menu/Item.js"></script>
<script type="text/javascript" src="ext/src/widgets/menu/CheckItem.js"></script>
<script type="text/javascript" src="ext/src/widgets/menu/DateMenu.js"></script>
<script type="text/javascript" src="ext/src/widgets/menu/ColorMenu.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/Field.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/TextField.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/TriggerField.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/TextArea.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/NumberField.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/DateField.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/DisplayField.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/Combo.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/Checkbox.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/CheckboxGroup.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/Radio.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/RadioGroup.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/Hidden.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/BasicForm.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/Form.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/FieldSet.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/HtmlEditor.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/TimeField.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/Label.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/Action.js"></script>
<script type="text/javascript" src="ext/src/widgets/form/VTypes.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/GridPanel.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/GridView.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/GridDD.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/ColumnModel.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/AbstractSelectionModel.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/RowSelectionModel.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/Column.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/ColumnDD.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/ColumnSplitDD.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/RowNumberer.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/CheckboxSelectionModel.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/CellSelectionModel.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/EditorGrid.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/GridEditor.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/PropertyGrid.js"></script>
<script type="text/javascript" src="ext/src/widgets/grid/GroupingView.js"></script>
<script type="text/javascript" src="ext/src/debug.js"></script>

[stephen.friedrich]

I had problems with including each individual file.
IIRC there are some files that are not complete by itself (syntactically speaking), but need a "header" and "footer" that only gets attached when packaging to those intermediate files.

[danguba]

Hmmm... I never had that problem...

[aj3423]

see this thread
http://www.extjs.com/forum/showthread.php?t=64920