In this article I will demonstrate how you can make live changes to your CSJS using firebug and chrome deveveloper tools and figure out where your bugs are happening before committing them to your XPages database.

Introduction 

First rule of thumb – put as much of your XPages Client Side JavaScript (CSJS) in a JavaScript script library as possible. The reasons are compelling and simple:

• Separation of code makes for much easier maintenance
• Changing CSJS libraries required a CTRL-F5 to view the changes and no BUILDING of the database code

The demonstration

I have created a very simple XPage and my code is not working – I want to find out why not. I could use the console to test my code and just run it before updating the CSJS library – but I wanted to show this method of debugging because it is probably more applicable to a more complex function than this simple one. The XPage source looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core">
	<xp:this.resources>
		<xp:script src="/csjsFirebugChromeDemo.js" clientSide="true"></xp:script>
	</xp:this.resources>

	<xp:br></xp:br>
	<xp:button value="Click me" id="button1">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script><![CDATA[changeMe();]]></xp:this.script>
		</xp:eventHandler></xp:button>
	<xp:br></xp:br>
	<xp:br></xp:br>
	<xp:br></xp:br>
	<div class="change"></div>
</xp:view>

As you can see I have a button, a div and an included CSJSFireBugChrome resource This is the library

function changeMe(){
	$('change').html('this changed')
}

When I load the XPage and click the button nothing happens – why not? Well it is because the jQuery selector is wrong.

$(‘change’) will select all the elements with a Tagname CHANGE rather than selecting the class change which is really what I was looking to do. Let’s see how we can play with this in two dev environments.

Firebug console

As I have mentioned in other articles – a JavaScript function is easy to over-ride in the console. The global namespace for web browser Javascript is “window” and all functions live there by default. To over ride them we just use window.functionname in the console and create our own function. This demonstration is also applicable to Chrome Dev Tools console.

The example below shows what happens when I over-ride the function through the console. Not that I have added the .changeMe in the jQuery selector.

Then when I run the script and click the button again – success

Chrome live editing

Opening Chrome Developer tools allows you to view the “Source” of the files used in your XPage and edit them. This technique only works on the scripts which are loaded through a library – you cannot edit the code if it is inline within your HTML code. When we look in the chrome source we can see the CSJS function already there – hit F12 to make it come up and select the source option. Click on the arrow top left

Which then gives us the function

This is editable !! All you need to do is make the change and then do a CTRL-S the save the change. (This is of course only changing the cached version of the function in the browser and not saving it back in your XPage). When we click the button again it now works 🙂

Advanced changes using breakpoints

This is where it can get really cool 🙂 As I mentioned before you cannot make changes to code which has already executed and code which in inline – but what you can do is set a breakpoint in the code and edit it before it is executed…..

In my EXTJS locking grid article I demonstrated that you can lock a certain column. Once the EXTJS code is run I cannot edit it through the Chrome source but I can make changes the code pre-execution using a break point. This way I do not have to keep saving  the XPage I can just reload the page and make changes as I see fit until I am happy with the code. This is the code and you can see the locked column is the lastname one.

    var grid = Ext.create('Ext.grid.Panel', {
        renderTo: 'gridHere',
        frame: true,
        features: [filters],
        height: 400,
        title: 'Users',
        store: store,
        iconCls: 'icon-user',
        columns: [{
            header: 'First123',
            sortable: true,
            dataIndex: 'firstname',
            filterable: true
        }, {
            text: 'Last',
            sortable: true,
            dataIndex: 'lastname',
            locked: true,                //here is the locked on lastname
            field: {
                xtype: 'textfield'
            },
            filterable: true
        }, {
            text: 'Address',
            sortable: true,
            dataIndex: 'address',
            field: {

I add a breakpoint in the code by clicking on the line number in the source code

I then reload the page and the breakpoint stops where I told it to in the code execution

I then change the code to lock the First123 column and not the lastname column by editing the JavaScript in the source

et voila 🙂

Conclusion

In this article we have seen how using the Chrome Developer tools we can effect change to our CSJS without having to resort to re-saving anything in out XPage application. I especially like the breakpoint editing which *really* helps me to pinpoint my code errors and make sure they work before I change my XPage.

This is extremely productive