2015/05/21

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.


No comments: