#Firefox developer edition tutorial how to
#Firefox developer edition tutorial windows

Because of my preference for FireBug, I found Gareth HuntвЂ™s Modify Headers 0.7.1.1 to be the tool that solved my problem. I prefer to do as much of my front-end grunt-work as possible in FireFox because I still work faster when using FireBug. Choosing the right tool depends on your needs. SafariвЂ™s user-agent spoofing is quite helpful, Google ChromeвЂ™s Device Mode Mobile Emulation Emulation feature is simply outstanding, and FireFox Developer Edition shows great promise. There are multiple options when it comes to emulating a mobile device in a desktop browser. What I liked most about this add-on is that the features are few, itвЂ™s easy to configure, and it just works.

#Firefox developer edition tutorial how to

Without the use of a manual, it is easy to figure out how to save and edit headers, as well as change their order.

Accept, User-Agent, Cache-Control, etc.). You can add new headers or override existing ones (e.g. By default, it appears in a new window, but can also be set to appear in a new tab via the options pane. The Modify Headers add-on is simple and easy to use.

#Firefox developer edition tutorial windows

I then set my FireBug location to вЂњdetachedвЂќ, and set these two windows side-by-side. I quickly re-sized the browser down to 320px (or as close as FF would allow me to get to that). In less than five minutes, I had successfully forced the site to serve-up itвЂ™s mobile version in my desktopвЂ™s FireFox browser. Nearly exasperated, I thought to myself: вЂњWait a minute, there has to be a plugin that lets me spoof the headersвЂ¦вЂќ After about 7 seconds with Google search, I came across Modify Headers 0.7.1.1В by Gareth Hunt.Problem solved. Now while it clearly had some pretty cool features, I wasnвЂ™t getting what I needed quickly (and to be fair, this may be purely due to my inexperience with the new FireFox developer edition). cnn.com in desktop FireFox AFTER using Modify HeadersД¬oincidentally, I also just checked out FireFox Developer Edition. But when it comes to the first 90% of the general development grunt-work, FireBugвЂ™s CSS panel and JavaScript console just always feel more natural to me. I cannot stress enough, how outstanding ChromeвЂ™s developer tools are, and how much they are improving every day. The main reason for this is that even though FireFox has become possibly the slowest browser and always feels painfully sluggish, I still prefer FireBug over ChromeвЂ™s built-in developer tools. But I still prefer to do my front-end development in FireFox. Also, Google ChromeвЂ™s Device Mode Mobile Emulation is awesome, especially for testing mobile-specific gestures. Given the amount of work ahead of me, I preferred to work in a desktop browser.

But that is mainly useful for previewing my work and interacting with the DOM through the console. I knew I could leverage Safari to view the page on my iPhone and yet have complete control of the DOM via the JavaScript console.

There were a few obvious options that first came to mind. cnn.com in desktop FireFox before using Modify Headers Device detection is done on the back-end, and then either the desktop or mobile version of the page is served. But the most significant challenge has been the fact that there is no dedicated mobile URL for this site. It requires not only a complex reworking of an existing slideshow, but back-end reporting on the userвЂ™s choices, form submission and exit point as well. This has been one of the more ambitious experiments IвЂ™ve developed. This past week, IвЂ™ve been developing an optimizely experiment for a new client. If you prefer to develop in FireFox, but need to emulate a mobile experience, the Modify Headers add-on is very helpful Resizing your browser down to 320px doesnвЂ™t always do the trick.