New color picker in Chrome dev tools

I just noticed – in chrome dev tools when you click on a color – you can use a selector to pick an existing color from the page

cd2

cd3

chromedev

 

SWEET !

Advertisements

Multiple Chrome Incognito browsers share the same data

In a previous post I talked about how going porn-mode on your browser is great for a developer. What I didn’t realize until today is that incognito mode is not as unique as I want it to be.

We use localStorage in one of the applications we are developing and I had issues when I was opening up multiple Chrome Incognito mode browsers, assuming they were unique….I wanted to compare separate instances in separate windows

Mr. Genius (Toby) pointed out to me that localStorage is shared amongst Incognito windows – and that was causing things to screw up for me.

This is simple to demonstrate – open up an incognito window

a1

Then go to a site (http://demo.xomino.com) in my case

Open up developer, go to the console and create a localStorage item (.marky in this case)

a2

Then open a new incognito window, go to the same site and check out the Resources, localStorage. As you can see from the image below – the second incognito window has the localStorage values that were created in the first one.

It also appears that cookies are shared between then as well – they are not at all unique.

a4

Good to know !! Bad for my testing

 

PS

I was dared to call this post “multiple porn windows…sharing porn.”…..I resisted 😉

 

 

Finding your localStorage values – Chrome Developer Tools

Just a quick tip – if you use localStorage and you need to find out what values you have in localStorage you can see them through developer tools easily.

  • F12 to pull up developer tools
  • Resources
  • Local Storage is right there

a1

 

PS

A similar feature will be release in the next Firefox (34) developer tools – https://developer.mozilla.org/en-US/docs/Tools/Storage_Inspector

Simple examples of how Google Developer Tools can aid Mobile Development

In this article I will show some simple examples of how Google Developer Tools can be used to help in mobile (responsive) development.

Introduction

Google Developer Tools (F12) within Chrome is one of those things which you *know* is way more powerful that you have ever cared to look at but this week I was introduced to a very cool new feature – thanks to @simonreid123. The ability to control the veiwport and size of the viewing window, as well as being able to throttle the speed of page load has helped me better design a site for mobile. This does not obviously replace real testing on aa real device, but definitely helps !!

The Mobile button in Developer Tools

In this example we are going to look at the BBC website from today. In a normal browser it looks like this.

a1

Bringing up developer Tools (F12) we can see a mobile button on the toolbar

a2

Clicking on that brings up a new view of the page.

a3

Once I do that I can select a “Device” from the menu

a5

 

After then refreshing the page (as it tells me to) I can see the page as if it were an iPad.a4

I then chose iPhone 4 and got a smaller screen

Across the top you can see the screen width and markers – and in orange the media queries (as specified by the style sheet) where there are going to be changes

a6

 

Dragging the tab to resize the browser you can see the changes on the orange lines

a7

Throttling

Another nice feature is the ability to arbitrarily slow the page load down as if we were on a slow network (more like a phone)

a8

 

Conclusion

This is a very useful and cool feature I was not aware of. I *know* there are many many many other things I do not know about developer tools….it’s all a great learning experience 🙂

 

Discovering Page Audits in Chrome Dev tools – apparently I am bloated !

I came across a “tooling” presentation by Addy Osmani which is mostly not relevant to XPages development but in there I saw a nugget about Page auditing within Chrome Dev tools. I am staggered about what I found about the site I am working on site and apparently I need to learn more, quickly……….

Bring up the site and open Chrome dev tools

ch1

 

And then after running it – WOW…apparently I could be doing a better job in here…..

ch2

I have no idea if I can do anything about some of these – but some I definitely can and if it makes for a faster website load time then it can only be a good thing.

ch5

jQueryUI I can definitely make smaller because you can do custom builds of the functionality you need – I need drag and drop, sortable and accordion.

Bootstrap – I think I am stuck with although according to the presentation grunt-uncss looks promising!

Font-awesome – do I REALLY need it for 3 icons? Maybe I don’t now I look at it !!

The rest are used in this single page app – just not right on the front page

ch3

I could combine the CSS and JS files using XPages application properties – but it breaks when I do that. Some manual combining could be done.

ch4

 

“Always include external CSS files before external JavaScript” – I did not know this – good to know and these are all in the XPages theme so might be able to reorganize – unfortunately with dojo always inserted at the top of the page I do not know if that can be overcome – I think so…..

 

I will make some changes and post an update in a few days to see if there is a noticeable difference in page load speed. When developing I always have cache turned off anyway so I will be able to tell if the pages load faster.

 

Editing and testing your XPages CSJS “in real time” using Chrome Developer Tools

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.

fire1

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

fire2

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

ch1

Which then gives us the function

h2

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 🙂

ch3

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

br1

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

br2

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

br3

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