How to Use Web Browser Developer Tools

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.

Gone are the days where the only programming and testing tools found within a browser allowed you to view a page's source code and nothing more. Today's browsers let you take a much deeper dive by doing things like executing and debugging JavaScript snippets, inspecting and editing DOM elements, monitoring real-time network traffic as your app or page loads to identify bottlenecks, analyzing CSS performance, ensuring that your code is not utilizing too much memory or too many CPU cycles, and much more.

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.

Google Chrome

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.

1. Select Chrome's main menu, marked with three horizontal lines and located in the upper right-hand corner of the browser.

2. When the drop-down menu appears, hover your mouse cursor over the More tools option.

3. 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)

4. 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.

5. In addition to these sections, ​you can also access the following tools via the >> icon, located to the right of the Performance tab.

   • Memory: Monitor and record memory usage on a web page. You can see how heavy the JavaScript on your site is.
   • Security: Highlights certificate problems and other security-related issues with the active page or application.
   • Application: Inspect the resources being used by a web application. Get a complete breakdown of what's being used.
   • Audits: Offers ways to optimize a page or application's load time and general performance.

6. 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.

7. 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.

Mozilla Firefox

Firefox's web developer section includes tools for designers, developers, and testers alike such as a style editor and pixel-targeting eyedropper. 

1. Select Firefox's main menu, represented by three horizontal lines and located in the upper right-hand corner of the browser window.

2. When the drop-down menu appears, select Web Developer.

3. 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)
   • Web Console: Allows you to execute JavaScript expressions within the active page as well as review a diverse set of logged data including security warnings, network requests, CSS messages, and more. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+K), Windows (CTRL+SHIFT+K)
   • Debugger: The JavaScript Debugger lets you pinpoint and fix defects by setting breakpoints, inspecting DOM nodes, black boxing external sources, and much more. As is the case with the Inspector, this feature also supports remote debugging. Keyboard shortcut: Mac OS X (ALT(OPTION)+COMMAND+S), Windows (CTRL+SHIFT+S)
   • 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)
   • Performance: Provides a detailed breakdown of the active page's network performance, frame rate data, JavaScript execution time and state, paint flashing, and much more. Keyboard shortcut: Mac OS X, Windows (SHIFT+F5)
   • 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)
   • Storage Inspector: Take a look at the cache and cookies being stored by a website. Keyboard shortcut: (SHIFT+F9)
   • 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.
   • Scratchpad: Scratchpad lets you write, edit, integrate and execute snippets of JavaScript code from within a pop-out Firefox window. Open up an interactive JavaScript document that lets you write in code and test it against a website. Keyboard shortcut: (SHIFT+F4)
   • Service Workers: Debug service workers your web application. Get detailed information on their performance and errors.
   • 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

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 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.

1. Select More actions, represented by three dots and located in the upper right corner of the browser window.

2. When the drop-down menu appears, select the option labeled Developer Tools.

3. 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)

4. 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.

5. 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.

1. 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(,)

2. 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.

3. 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.

4. Close the Preferences interface.

5. 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 popular browsers, 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 the 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.
   • Show Extension Builder: Provides the ability to create or edit Safari extensions with CSS, HTML, and JavaScript.
   • Show Timeline Recording: Opens the Timelines tab and begins displaying network requests, layout, and rendering information as well as JavaScript execution in real-time.
   • 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 JavaScript: Restricts JavaScript execution on all pages.
   • 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.
   • Allow JavaScript from Smart Search Field: When enabled, it provides the ability to enter URLs with javascript: incorporated directly into the address bar.
   • Treat SHA-1 Certificates as Insecure: SSL certificates using the SHA-1 algorithm are widely considered to be out-of-date and vulnerable.