Integrated toolsets for Web designers, developers and testers.
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.
The tutorials below walk you through how to access these developer tools in several popular Web browsers.
Chrome’s 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.
- Click on Chrome’s main menu button, 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.
Elements: Provides the ability to inspect CSS and HTML code as well as edit CSS on-the-fly, seeing the effects of your changes in real time.
Network: Categorizes and displays detailed information about each related operation on the active application or page, including complete request and response headers as well as advanced timing metrics.
Timeline: Allows for in-depth analysis of every activity that takes place within the browser as soon as a page or app load request is initiated.
- In addition to these sections you can also access the following tools via the >> icon, located to the right of the Timeline tab.
Profile: Broken down into CPU profiler and Heap profiler sections, provides comprehensive memory usage and overall execution time of the active application or page.
Security: Highlights certificate problems and other security-related issues with the active page or application.
Resources: This is where you can inspect cookies, local storage, app cache, and other local data sources used by the current Web page or application.
Audits: Offers ways to optimize a page or application’s load time and general performance.
- 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 clicking on 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.
- Click on Firefox’s main menu button, represented by three horizontal lines and located in the upper right-hand corner of the browser window.
- When the drop-down menu appears, select the icon labeled Developer. The Web Developer menu should now be displayed, containing the following options. You’ll notice that most menu items have keyboard shortcuts associated with them.
Toggle Tools: Displays or hides the developer tools interface, typically positioned at the bottom of the browser window. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+I), Windows (CTRL+SHIFT+I)
Inspector: Allows you to inspect and/or tweak CSS and HTML code on the active page as well as on a portable device via remote debugging. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+C), Windows (CTRL+SHIFT+C)
Style Editor: Allows you to create new stylesheets and incorporate them with the active Web page, or edit existing sheets and test how your changes render in a browser with just one click. Keyboard shortcut: Mac OS X, Windows (SHIFT+F7)
Network: Lists each network request initiated by the browser along with the corresponding method, origin domain, type, size, and time elapsed. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+Q), Windows (CTRL+SHIFT+Q)
Developer Toolbar: Opens an interactive command line interpreter. Enter help into the interpreter for a list of all available commands and their proper syntax. Keyboard shortcut: Mac OS X, Windows (SHIFT+F2)
WebIDE: Provides the ability to create and execute Web apps through an actual device running Firefox OS or via the Firefox OS Simulator. Keyboard shortcut: Mac OS X, Windows (SHIFT+F8)
Browser Console: Provides the same functionality as the Web Console (see above). However, all data returned is for the entire Firefox application (including extensions and browser-level functions) as opposed to just the active Web page. Keyboard shortcut: Mac OS X (SHIFT+COMMAND+J), Windows (CTRL+SHIFT+J)
Responsive Design View: Allows you to instantly view a Web page in different resolutions, layouts and screen sizes to mimic multiple devices including tablets and smartphones. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+M), Windows (CTRL+SHIFT+M)
Eyedropper: Displays the hex color code for individually selected pixels.
Page Source: The original browser-based developer tool, this option simply displays the available source code for the active page. Keyboard shortcut: Mac OS X (COMMAND+U), Windows (CTRL+U)
Get More Tools: Opens the Web Developer’s Toolbox collection on Mozilla’s official add-ons site, featuring about a dozen popular extensions such as Firebug and Greasemonkey.
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.
- Click on the More actions menu, represented by three dots and located in the upper right-hand corner of the browser window. When the drop-down menu appears, select the option labeled F12 Developer Tools. As I already mentioned, you can also access the tools via the F12 keyboard shortcut.
- 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. 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 click on 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, click on the button represented by 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 (OS X 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.
- Click on 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. Click on 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 menu bar, accompanied by a check box. If there is no check mark shown in the box, click on it once to place one there.
- Close the Preferences interface by clicking on the red ‘x’ found in the upper left-hand corner.
- You should now notice a new option in the browser menu named Develop, located between Bookmarks and Window. Click on this menu item. A drop-down menu should now be displayed, containing the following options.
Open Page With: Allows you to open the active Web page in one of the other browsers currently installed on your Mac.
User Agent: Lets you select from over a dozen pre-defined user agent values including several versions of Chrome, Firefox and Internet Explorer, as well as define your own custom string.
Enter Responsive Design Mode: Renders the current page as it would appear on various devices and at different screen resolutions.
Show Web Inspector: Launches the main interface for Safari’s dev tools, typically placed at the bottom of your browser screen and containing the following sections: Elements,Network, Resources, Timelines, Debugger, Storage, Console.
Show Error Console: Also launches the dev tools interface, directly to the Console tab which displays errors, warnings and other searchable log data.
Show Page Source: Opens the Resources tab, which displays source code for the active page categorized by document.
Show Page Resources: Performs the same function as the Show Page Source option.
Show Snippet Editor: Opens a new window where you can enter CSS and HTML code, previewing its output on-the-fly.
Empty Caches: Deletes the entire cache currently being stored on your hard drive.
Disable Caches: Stops Safari from caching so that all content is retrieved from the server upon each page load.
Disable Images: Prevents images from rendering on all Web pages.
Disable Styles: Ignores CSS properties when a page is loaded.
Disable Extensions: Prohibits all installed extensions from running within the browser.
Disable Site-specific Hacks: If Safari has been modified to explicitly handle issue(s) specific to the active Web page, this option will block those changes so that the page loads as it would have prior to these modifications being introduced.
Disable Local File Restrictions: Allows the browser to have access to files on your local disks, an action that is restricted by default for security reasons.
Disable Cross-Origin Restrictions: These restrictions are put in place by default to prevent XSS and other potential dangers. However, they often need to be temporarily disabled for development purposes.
Treat SHA-1 Certificates as Insecure: SSL certificates using the SHA-1 algorithm are widely considered to be out-of-date and vulnerable.