I just download my fresh copy of Windows 10, which if you haven't you can either wait for it to install automatically if you qualify for the free upgrade, or you can download it yourself from the official download page. Tons of new features to check out in Windows 10, and if you're a web developer then you can take a look at the newest f12 developer tools for Edge, Microsoft's newest web browser.
F12 dev tools
Many of the new features in the browser tools can already be found in other browsers, such as Chrome or Firefox. But there are some new welcomed additions that will make development a tad bit easier and overall it's definitely a step up from the older IE tools. It's always good to have some competition, and Microsoft did a great job at bringing it's browser tools up to par with the others out on the market. And for anyone unfamiliar with F12, it is the keyboard button associated with launching developer tools on a browser. Here you can look at and make changes to the DOM, view the different scripts on the page and look at network performance for your web page. Definitely a place that spend alot of time in, which means whichever browser I use better have a good one.
Improved CSS Editing
You can now update CSS files directly from the Debugger tab and save changes in real time. As I mentioned before, other browsers like Chrome already include this in their dev tools, but it's good to have competition sometimes. Both work fairly the same, the only different is their location.
So there's a new feature that you don't see too often. You can edit cookie information from the Debugger tab as well. Not just the content in the cookie, but also the cookie name itself. Convenient for testing and it avoids having to go some shady 3rd party website in order to download and install a cookie editor. However it does open up the door to possible XSS attacks. Editing values in cookies on a website can cause all kinds of trouble, however it is up to the developer to protect against such things.
This is my top feature. You can emulate any browser, screen resolution and even fake geolocation for the current session. This is something that would normally require hacks and 3rd party tools to accomplish, I know as I've needed to do this before, and now it's built right in to the browser. Great for working with complex designs and 3rd party libraries that may or may not render appropriately in different browsers.
We've lost the dock...
There currently is no way to dock the f12 window onto the active tab or even onto the browser really. And if you're familiar with Chrome dev tools, then you know that this is a must have feature. Particularly when working on a single screen. Currently in edge you can dock the f12 Developer Tools to a Windows region, and then dock the browser right next to it.
That's just a temporary solution though I'm sure, as IE 11 dev tools had the ability to be docked. Until that's fixed though, I probably won't be using this as much, as just testing it out right now was kind of a hassle that involved too much window juggling. When updated though, it definitely has some potential as a great web development tool.
Thumbs up if you enjoyed this post!
Suggest the next blog post
Walter G. is a software engineer with over 10 years of professional experience. When he isn't blogging or being a CTO he enjoys coding randomly complex things that he hopes many people will get a chance to use one day.