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.
Mozilla Firefox
Firefox’s web developer section includes tools for designers, developers, and testers alike such as a style editor and pixel-targeting eyedropper.
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.
To toggle Device Mode on and off, select the mobile phone icon located directly to the left of the Elements tab. 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.
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.
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.
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.
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)
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 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.
