Testing DevTools, take 2

This is my second day testing Firefox Developer edition.

Almost right after start, I get a notice that there's an update ready, clicking it a dialog was shown stating that the update was ready to be applied. So I agreed and waited, this should be transparent and done without such dialog, specially when frequent updates are expected due to the usage of the alpha channel.

The prompt to save passwords has changed, I'm not sure if previously it showed the user name, but now it has a field with the masked password below it that it's absolutely useless, it can't be edited, it doesn't provide any info, Why are they wasting time and effort in things like this?

So I started working, the first changes were mostly server-side to send new data and modify some JS, then I added two breakpoints to check that it was working as expected, some adjustments, I browsed a little, took a quick look at the network tab, its layout is somewhat different like the Clear button at the bottom right instead of the top left like all the other tools so at first I thought that it wasn't available.

Then I went back to debugging, but now those two breakpoints no longer work. No matter if I remove and add them again, reload the page..., the script isn't stopped and so I can't use Firefox to debug javascript. After restarting Firefox and adding again the breakpoint at the same place this time worked, but my usual reaction at this point is just to switch to another browser and go back to Firefox only when everything works perfectly in other browsers and I have to review Firefox.

I want to check as I'm not sure the value of the document.ELEMENT_NODE constant so I type document.EL and as it's already shown in the autocomplete I press Enter and it uses only "document.EL" so it says that it's undefined, so I press Up arrow, Tab and it shows in light gray "<- again="" autocomplete="" br="" english="" exact="" i="" if="" in="" is="" m="" makes="" not="" pressing="" results="" sentence="" so="" spanish="" sure="" tab="" the="" this="" without="" work.="">In Firebug and IE the first Enter does the autocomplete and then pressing it again shows the result. Chrome behaves like Firefox on the first step but after pressing Up arrow no matter how many times you press Tab, the autocomplete doesn't work.

Back to CSS, trying to add or edit a pseudo-element like a::before it's not possible, the rest of the tools allow it; Chrome even shows them in the DOM tree.

Trying to do some basic testing with Mobile isn't even fair. IE11 has the very minimum, Firefox improves it a little, although not really too much and Chrome is hands down the absolute king. Several features really useful that makes it a non-sense try to use any other tool to start checking for mobile:
Touch emulation: the pointer turns into a fingertip and :hover no longer works. Absolutely a must.
Device list: instead of a list of sizes, it shows devices by their name, and it also adjust other things like the device pixel ratio, so it's easy to get a good view of how it will be viewed on such screens.
Rule with @media rules in the page, good to find the breaks and verify them.
Zoom control, nice.
Network emulation, so far I haven't used it too much, but it has obvious benefits without the need of using external tools to simulate throttling. I know that I'll use it because otherwise it's impossible to test how a remote server works with different conditions.

I've decided to test now the WebIDE to connect to my phone. Yesterday I did a quick test and I gave up. I saw "Chrome on Android" listed and I picked it but nothing happened, and today I realized that then I must go to the left and click on "Open application" and the open tabs are listed there and debugging starts.
So then I tried to debug Firefox as I already debugged Firefox on Android some time ago, and then I realized that it's not done automatically and I had to enable the remote debugging on it, this should be hinted more clearly, when an Android device is detected, create an entry linking to how to enable debugging of Firefox.

One "annoying" thing is that every time that I connect again to Firefox on Android it prompts me to accept the connection, with the only options as "Disable", "Cancel" and "Accept", but not a "Yes, always allow this device", Chrome doesn't do such things.

When connection to a device Chrome clearly shows the list of open tabs and allows to close, open a new one or change the url, as well as proxying the request to localhost, another must have to be able to test changes without having to upload to a server.

Firefox DevTools, a long way to go

This Monday I tweeted about the bad state  of JS debugging in the current releases of Firefox where both Firebug and DevTools are no longer useful because they ignore most of the breakpoints.

I got a reply from Jeff Griffiths suggesting me to use the alpha version AKA as Firefox Dev edition, but I pointed him that it's known that it lacks behind all the other tools, so I would prefer to wait until the most obvious bugs are fixed (I linked some that are important for me).

Yesterday I got another reply suggesting me to give DevEdition another try, and so this evening I've started by opening a document where I've been writing down this experience of installing and trying to use the latest version. It's not from the point of view of a new user because I've tested it a little bit, but I might not be aware of awesome things just because the problems that I find force me to use other tools.

The first step is instaling the Firefox Dev edition, I picked the custom install and of course I rejected the option to install it as my default browser, that's a non-sense that when you install a new browser you're going to make it the default right from the start (yes I know that everyone does this since Netscape times).

After launching the first thing that I notice is that the UI lacks the rounded borders of the normal Firefox. I notice also how slow are the UI animations (it feels the same way in the normal Firefox, but I don't see them because I've added the Classic Theme Restorer and that way I don't have to use the hamburger menu). That's a problem with Firefox itself trying to create useless animations, not with the DevEdition.

Then I try to use it on a site and the obvious first stones appear in my path, the history, autocomplete, credentials, everything is empty so I have to type everything again. Not a big problem, but it will force me to waste my time. It should have prompted me to import such data from Firefox or to use Sync as this seems a sensible use-case. As it didn't offer me to use Sync I'm not sure if that would be a good idea or it's risky to use it with different versions at the same time.

So let's start testing it.

I add a new CSS property "max-wi" TAB, now I type 0 and press Arrow UP, it changes to 1 but it's unitless so it doesn't work. Firebug and Chrome correctly change from "0" to "1px", IE11 behaves like Firefox.

Now it's time to save the changes, I adjusted only one rule but when I try to use the context menu there's no "Copy rule" like Firebug or IE11, I have to manually select the text like in Chrome.

Extra Bonus points and the main reason that IE11 it's now mostly my prefered tool for CSS adjustment is its Changes pane that shows all the CSS changes made in the page. Certainly it's a little buggy sometimes and it could have several enhancements, but all the rest of developer tools lacks anything like this and it's precious to be sure to know all the adjustments made across different elements.
Chrome seems to have something related with the History pane, but honestly I haven't figured out how to make it work as I want.

One thing that DevTools doesn't seems to know is that "0" is "0", it's unitless so when I write "margin: 0 auto;" it's wrong to change it to "margin: 0px auto;". Firefox and Chrome respect my 0 and IE11 does it correctly for "margin: 0 auto;" but not for "height: 0;" (test by checking a property written in the stylesheet that way or modifying a property and switch to another element and back to the modified element)

Other clear sign that these tools aren't ready: Use the context menu and select "Add rule", change the selector or leave it as is, now Tab and you'll find that you're now nowhere, you have to click inside the rule to add a new property. All the other developer tools correctly place you ready to type your new property as that's the only logical thing to do after creating a rule. This breaks the workflow and makes me waste my time moving my hands from the keyboard to the mouse.

Bonus points go to Firebug because while editing a rule you have a super useful autocompleter based on the parent node names, ids and classes. No other tool has this.

Trying to work a little with javascript, put a breakpoint, check the DOM, reload the page. All the tools except Firefox DevTools correctly switch the selected pane to the script that has the breakpoint and DevTools just show that tab in green stating that execution is stopped and waiting for you to click.

Another day I will keep on testing and reporting the differences, but so far I haven't seen anything in Firefox that made me want to use it.

Making the ImagePaste plugin compatible with IE11

Now that it's summer time and I have some free time I decided to take a look at the beta of IE 11 to check how well does it work with some of my CKEditor plugins.

The first thing to remember is that CKEditor itself isn't compatible with IE11 and if we are to base our guesses on previous history I don't think that they will really work on it until sometime after IE11 has been released and people start complaining seriously, but I prefer to look ahead and try to work now instead of having to rush later.

So I've focused my tests on the image paste plugin, specially because in their release notes they talk about the new ability to use the .files property in the clipboardData object as well as the base64 encoding performed by default (like Firefox).

Well, using base64 on the image is a nice little trick, but I think that it's really a bad option in the real world. I guess that if any performance guru would have been consulted they would have answered that this feature shouldn't have been added (at least not by default).

Testing IE nowadays it's much simpler than it used to be. Microsoft provides virtual machines ready to use with almost any combination of supported OS and IE as well as the virtual machine environment (at least I didn't miss anything). So after downloading the Win 8.1 preview and "installing" it, I was ready to test.

Ok, almost ready to test: no network connection. It turns out that the default network configuration is set up to work as a private network with the host. After changing it to my default bridged preference I had Internet again :-)

So I launched my demo with CKEditor 3 and... nothing. Nothing is pasted there. Not only the image is ignored from the clipboard, also any text can't be pasted. As the argument will be that CKEditor is "old" and it's not supported I moved then to the CKEditor 4 demo to check it, and yes, now it "works". The image is pasted but as base64 data. That means that neither my direct paste listener on the element is working to detect the files and the default CKEditor paste event is also failing to provide me the base64 so I could try to use the same Firefox trick.

A little debugging shows that the CKEditor paste isn't fired at all and my listener on the editable element works, but the event doesn't seem to include the .files property. Debugging that info isn't as easy as it seems, despite the claim that after pressing F12 the debugger is ready isn't true for me, breakpoints doesn't work, the files show up as a huge list of "plugin.js" files...

At this point a very important suggestion for Microsoft: Show folder names in the pane with the loaded scripts, having around 30 or 50 files named "plugin.js" and no way to tell them apart is not fun.

In order to debug correctly I restart the machine (maybe it's usual for people to start debuggin on the first IE & OS launch, but I don't see any other reason to fire up that VM, Win8.1 still tries to force "metro" too much so it doesn't fit my tastes) and now things seem to work a little better. To find the place for my breakpoints I search the files for the some function name specific to that file and that way I can avoid the mess of "plugin.js" .

And now looking at their documentation I notice something interesting, instead of using a clipboardData object on the paste event data, they are using one one the window object (like old IEs), so now it's obvious why this detection wasn't working. I add a workaround to try to use it and now when I copy an image from Paint I can detect and upload it like it happens in Firefox and Chrome. Due to the way that they have written their documentation I think that this feature isn't complete, after all I haven't managed to get an event if I try to paste a file from the desktop (like Firefox does) and if I create a document in WordPad with an image only the text is copied and no image is inserted, although given the way that they have chosen to write the documentation I think that some other feature should be available in the final version besides pasting a simple image from the clipboard.

After noticing that issue and given that this is a problem that shouldn't exist (providing files in the clipboard data is a feature that currently only Firefox and Chrome support, so if Microsoft want existing code to work they should use exactly the same APIs and objects) I filed a bug in their tracker to check if they care about compatibility or not. To my surprise this morning I had a reply, stating that obviously they can't reproduce the bug and the best course of action is to close it. I've replied providing the test file as a live url instead of an attachment (they didn't allow .html attachments so finding a .txt page might have been too hard for them). Of course this probably means the end of my efforts to report any issue in IE11 to Microsoft, if they don't care about something so simple and basic according to their goal of treating IE11 as any other modern browser then I'm not gonna waste my time trying to explain more complex things.

Back to my testings on IE11 and image paste, I noticed that dropping a file doesn't upload it and instead tries to open it as if I hadn't added any drop listeners. In this case the problem is that CKEditor at the moment detects IE11 as a gecko, but in this case Microsoft is aligning their behavior to old Chrome and requires that the drag over event is prevented. This is the kind of bug that Microsoft should also fix, but I don't have hope on them so I just add a line to detect "IEmodern" and it works (yes, this is the kind of bug/browser behavior that can't be changed based on feature detection but instead it relies on hardcoding which are the buggy browsers)

So now I tested again the CKEditor 3 demo and everything related to my plugin works. Images can be pasted, dragged, uploaded with the toolbar button... CKEditor itself has its own set of bugs (like not being able to paste at all in 3.6 or that the paste event isn't fired in 4.2) but that's outside my control. I could try to debug and provide patches if I really cared, but given that some of the patches that I provided for CKEditor have been ignored for years I prefer to not waste the time that way.

BTW, soon I might replace all the CKEditor 4 demos with the "Moono color" skin, being forced to see those black and white icons is really depressing.