In addition to most browser makers focusing on the everyday user looking to surf the web, they also cater to the web developers, designers and quality assurance professionals who help build the apps and sites that those users are accessing by integrating powerful tools right into the browsers themselves.
From a testing perspective, you can reproduce how an app or web page will render in different browsers as well as on different devices and platforms through the magic of responsive design and built-in simulators. The best part is that you can do all of this without having to leave your browser!
The tutorials below walk you through how to access these developer tools in several popular web browsers.
The Chrome developer tools allow you to edit and debug code, audit individual components to expose performance issues, simulate different device screens including those running Android or iOS, and perform several other useful functions.
Select Chrome's main menu, marked with three horizontal lines and located in the upper right-hand corner of the browser.
When the drop-down menu appears, hover your mouse cursor over the More tools option.
A sub-menu should now appear. Select the option labeled Developer tools. You can also use the following keyboard shortcut in place of this menu item: Chrome OS/Windows (CTRL+SHIFT+I), Mac OS X (ALT(OPTION)+COMMAND+I)
The Chrome Developer Tools interface should now be displayed, as shown in this example screenshot. Depending on your version of Chrome, the initial layout that you see may be slightly different from the one presented here. The main hub of the developer tools, typically located on either the bottom or right-hand side of the screen, contains the following tabs.
Device Mode allows you to view the active page in a simulator which renders it almost exactly as it would appear on one of over a dozen devices, including several well-known Android and iOS models such as the iPad, iPhone, and Samsung Galaxy. You are also given the ability to emulate custom screen resolutions to fit your particular development or testing needs.
To toggle Device Mode on and off, select the mobile phone icon located directly to the left of the Elements tab.
You can also customize the look and feel of your developer tools by first selecting the menu button represented by three vertically-placed dots and located on the far right-hand side of the aforementioned tabs.
From within this drop-down menu, you can reposition the dock, show or hide different tools as well as launch more advanced items such as a device inspector. You'll find that the dev tools interface itself is highly customizable via the settings found in this section.
Firefox's web developer section includes tools for designers, developers, and testers alike such as a style editor and pixel-targeting eyedropper.
Select Firefox's main menu, represented by three horizontal lines and located in the upper right-hand corner of the browser window.
When the drop-down menu appears, select Web Developer.
Microsoft Edge/Internet Explorer
Commonly referred to as the F12 Developer Tools, an homage to the keyboard shortcut that has launched the interface since earlier versions of Internet Explorer, the dev toolset in IE11 and Microsoft Edge has come a long way since its inception by offering a very handy group of monitors, debuggers, emulators, and on-the-fly compilers.
Select More actions, represented by three dots and located in the upper right corner of the browser window.
When the drop-down menu appears, select the option labeled Developer Tools.
The development interface should now be displayed, typically at the bottom of the browser window. The following tools are available, each accessible by clicking on their respective tab heading or using the accompanying keyboard shortcut.DOM Explorer: Allows you to edit stylesheets and HTML in the active page, rendering the modified results as you go. Utilizes IntelliSense functionality to autocomplete code where applicable. Keyboard shortcut: (CTRL+1)Console: Provides the ability to submit debugging information including counters, timers, traces, and customized messages via an integrated API. Also, lets you inject code into an active web page and modify the values assigned to individual variables in real-time. Keyboard shortcut: (CTRL+2)Debugger: Lets you set breakpoints and debug your code while it executes, line by line if necessary. Keyboard shortcut: (CTRL+3)Network: Lists each network request initiated by the browser during page load and execution including protocol details, content type, bandwidth usage, and much more. Keyboard shortcut: (CTRL+4)Performance: Details frame rates, CPU utilization, and other performance-related metrics to help you speed up page load times and other activities. Keyboard shortcut: (CTRL+5)Memory: Helps you isolate and correct potential memory leaks on the current web page by displaying a memory usage timeline along with snapshots from different time intervals. Keyboard shortcut: (CTRL+6)Emulation: Shows you how the active page would render in various resolutions and screen sizes, emulating smartphones, tablets, and other devices. It also provides the ability to modify the user agent and page orientation, as well as simulate different geolocations by entering a latitude and longitude. Keyboard shortcut: (CTRL+7)
To display the Console while within any of the other tools press the square button with a right bracket inside of it, located in the upper right-hand corner of the development tools interface.
To undock the developer tools interface so it becomes a separate window, select the two cascading rectangles or use the following keyboard shortcut: CTRL+P. You can place the tools back in their original location by pressing CTRL+P a second time.
Apple Safari (Mac Only)
Safari's diverse dev toolset reflects the large developer community that utilizes a Mac for their design and programming needs. In addition to a powerful console and traditional logging and debugging features, an easy-to-use responsive design mode and a tool to create your own browser extensions are also provided.
Select Safari in the browser menu, located at the top of your screen. When the drop-down menu appears, select Preferences. You can also use the following keyboard shortcut in place of this menu item: COMMAND+COMMA(,)
Safari's Preferences interface should now be displayed, overlaying your browser window. Select the Advanced icon, located on the far right-hand side of the header.
The Advanced preferences should now be visible. At the bottom of this screen is an option labeled Show Develop menu in the menu bar, accompanied by a checkbox. If there is no checkmark shown in the box, click on it once to place one there.
Close the Preferences interface.