Cross browser debugging of javascript code with ExtJS debug console

I have came across a nice new javascript debugging console from ExtJS.

It is a simplified version of firebug but the good thing is that it works in any browser so you can use debigging and inspecting of your code and pages in any browser in the same way.

Download the ExtJS library from this page ExtJS library from Sencha.

Then create a sample minimum page in the root folder of the library. Put a code like this inside:

<html>
<head>
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/debug.css" />
<script type="text/javascript" src="adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-all.js"></script>
<script type="text/javascript" src="src/debug.js"></script>
</head>
<body>

<a href="#" onclick="Ext.log('Hello from the Ext console.');return false;">
open log
</a>

</body>
</html>

It will load some css and javascript and you will be able to use the console.

Further reading on ExtJS Javascript debugging console

You can find generic description of ExtJS componenets and debugging console here

You can find a bigger example of cross browser debugging console here

ExtJS also provides a nice tutorial how to use firebug lite and how to log etc here

Finally a Firebug Lite another crossbrowser debugger available can be found here

Comments

Post new comment

Image CAPTCHA