How to use developer tools on web browsers

In addition to focusing on everyday users who want to surf the web, most browser makers also cater to both web developers, designers and quality assurance experts who help build applications. and the website the user is accessing, by integrating many powerful tools into the browser.

The days when the only testing and programming tools found in the browser, only allowing you to view the source code of the page, are over. Today's browsers allow you to go much deeper, by performing operations such as executing and debugging snippet JavaScript, checking and editing DOM elements, and monitoring real-time network traffic when load the application or page, to determine congestion status, analyze CSS performance, make sure your code doesn't use too much memory or CPU cycles, etc.

From an experimental perspective, you can replicate the way applications or websites display in browsers, as well as on many different devices and platforms, through the magic of responsive design (responsive. ) and integrated emulator. The best part is that you can do all of this without leaving your browser!

The instructions below show you how to access developer tools in some popular web browsers.

Google Chrome

Chrome's developer tools allow you to edit and debug code, test individual components to find all performance issues, simulate different device screens including both applications running Android or iOS, as well as perform some other useful functions.

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

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

How to use developer tools on web browsers Picture 1

3. A submenu will appear. Select the option with the Developer tools label . You can also use the following shortcut instead of this menu item: Chrome OS / Windows ( CTRL + SHIFT + I ), Mac OS X ( ALT / OPTION ) + COMMAND + I ).

How to use developer tools on web browsers Picture 2

4. The Chrome Developer Tools interface will be displayed, as shown in the screenshot below. Depending on the version of Chrome you are using, the initial layout you see may be slightly different from the version shown here. The main center of developer tools, usually at the bottom or right of the screen, contains the following tabs.

1. Elements: Provides the ability to test CSS and HTML code as well as quick CSS editing, see the impact of changes you make in real time.
2. Console: Chrome's JavaScript control panel allows direct input as well as diagnostic debugging.
3. Sources: Allows you to debug JavaScript code through a powerful graphical interface.
4. Network: Sort and display detailed information about each related operation on the active application or page, including completing response and request headers as well as advanced time data.
5. Performance: Check website performance by monitoring load time. You can also simulate different cases, like the ability of mobile CPU.

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

How to use developer tools on web browsers Picture 3

1. Memory: Track and record memory usage on a web page. You can see the 'weight' of JavaScript on your website.
2. Security: Highlight certificate issues and security-related problems other than the active page or application.
3. Application: Checks the resources being used by a web application. Get a complete, detailed report of what is being used.
4. Audits: Provides ways to optimize the page or application load time and overall performance.

6. Device Mode allows you to view the activity page in the emulator, displaying nearly exactly the same as when it appeared on one of dozens of devices, including some famous Android and iOS models like the iPad , iPhone and Samsung Galaxy. You are also provided with the ability to simulate custom screen resolutions to suit your specific development or testing needs.

To turn on and turn off Device Mode, select the mobile phone icon to the left of the Elements tab .

How to use developer tools on web browsers Picture 4

7. You can also customize the look of the developer tools, by first selecting the menu button indicated by three vertical dots, located on the right side of the aforementioned tabs. .

How to use developer tools on web browsers Picture 5

From within this drop-down menu, you can reposition the dock, show or hide different tools, and launch more advanced items, such as device inspectors. You will find that the very interface of the developer tool is also highly customizable through the settings found in this section.

Mozilla Firefox

Firefox's Web Developer section includes tools for designers, developers, and testers, such as style editors and target eyedropper for pixels.

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

How to use developer tools on web browsers Picture 6

2. When the drop-down menu appears, select Web Developer. The Web Developer menu will now be displayed, containing the following options. You will notice that most menu items have shortcuts related to them.

How to use developer tools on web browsers Picture 7

1. Toggle Tools: Show or hide the developer tool interface, usually located at the bottom of the browser window. Keyboard shortcuts: Mac OS X ( ALT / OPTION + COMMAND + I ), Windows ( CTRL + SHIFT + I )
2. Inspector: Allows you to check and / or adjust CSS and HTML code on the page as well as on mobile devices, via remote debugging. Keyboard shortcuts: Mac OS X ( ALT / OPTION + COMMAND + C ), Windows ( CTRL + SHIFT + C ).
3. Web Console: Allows you to execute JavaScript expressions in the active page, as well as review a diverse set of recorded data, including security alerts, network requests, CSS notifications, etc. . Keyboard shortcuts: ( ALT / OPTION + COMMAND + K ), Windows ( CTRL + SHIFT + K )
4. Debugger: The JavaScript debugger allows you to identify and correct errors by setting breakpoints, checking DOM nodes, black box external sources, etc. As in the case of Inspector, this feature also supports Remote debugging. Keyboard shortcuts: Mac OS X ( ALT / OPTION + COMMAND + S ), Windows ( CTRL + SHIFT + S ).
5. S tyle Edito r: Allows you to create new stylesheets and combine them with an active website, or edit existing tables and check how changes have been made to display in the browser with just one click. Keyboard shortcuts: Mac OS X, Windows ( SHIFT + F7 ).
6. Performance: Provides a detailed analysis of the active page network performance, frame rate data, JavaScript execution time and status, etc. Keyboard shortcuts: Mac OS X, Windows ( SHIFT + F5 ).
7. Network: Lists each network request initiated by the browser along with the corresponding method, the root domain, type, size and duration have passed. Keyboard shortcuts: Mac OS X ( ALT / OPTION + COMMAND + Q ), Windows ( CTRL + SHIFT + Q ).
8. Storage Inspector: See the cache and cookies stored by a website. Shortcut on keyboard: SHIFT + F9 .
9. Developer Toolbar: Open the interactive command line interpreter. Enter help in the interpreter to get a list of all available commands and their appropriate syntax. Keyboard shortcuts: Mac OS X, Windows ( SHIFT + F2 ).
10. WebIDE: Provides the ability to create and execute web applications through an actual device running Firefox OS or Firefox OS Simulator (Firefox operating system emulator). Keyboard shortcuts: Mac OS X, Windows ( SHIFT + F8 ).
11. Browser Console: Provides the same functionality as the Web Console (see above). However, all data returned is for the entire Firefox application (including browser-level extensions and functions), not just the active site. Keyboard shortcuts: Mac OS X ( SHIFT + COMMAND + J ), Windows ( CTRL + SHIFT + J ).
12. Responsive Design View : Allows you to view a web page right at different resolutions, layouts and screen sizes, mimicking many devices, including tablets and smartphones. Shortcut: Mac OS X ( ALT / OPTION + COMMAND + M ), Windows ( CTRL + SHIFT + M ).
13. Eyedropper: Displays hex color code for individual selected pixels. Scratchpad: Allows you to write, edit, integrate and execute snippet JavaScript from within the Firefox window that appears.
14. Scratchpad: Open an interactive JavaScript document that allows you to write code and test it with a web page. Keyboard shortcuts: Shift + F4 .
15. Service Workers: Debugging Service Worker (the script that the browser runs in the background, separating from the site, performing features that do not need a website or user interaction) for your web application. Get detailed information about their performance and errors.
16. Page Source: Original browser-based developer tool. This option simply displays the source code available for the active page. Keyboard shortcuts: Mac OS X ( COMMAND + U ), Windows ( CTRL + U ).
17. Get More Tools : Open Web Developer 's Toolbox collection on Mozilla's official add-on page, which includes about a dozen popular extensions like Firebug and Greasemonkey.

Microsoft Edge / Internet Explorer

Often referred to as the F12 Developer Tools , a reverence for shortcuts that launch the interface since previous versions of Internet Explorer, the developer toolkit in IE11 and Microsoft Edge has come a long way. Since its inception, by providing a very handy set of trackers, debuggers, emulators and compilers.

1. Select More actions , indicated by three dots and in the upper right corner of the browser window. When the drop-down menu appears, select the option labeled Developer Tools .

How to use developer tools on web browsers Picture 8

2. The development interface will be displayed, usually at the bottom of the browser window. The following tools are available, each tool is accessible by clicking on the corresponding tab title or using the included shortcut.

How to use developer tools on web browsers Picture 9

1. DOM Explorer : Allows you to edit the stylesheet and HTML in the active page, rendering modified results. Use IntelliSense to automatically complete code where applicable. Shortcut: CTRL + 1 .
2. Console: Provides the ability to submit debugging information including counters, timers and custom notifications via the integrated API. In addition, allows you to add code to an active website and modify the values ​​assigned to individual variables in real time. Shortcut on keyboard: CTRL + 2 .
3. Debugger: Allows you to set breakpoints and debug your code while it's executing, line by line if necessary. Keyboard shortcut: CTRL + 3 .
4. Network: List each network request initiated by the browser during the page load, including protocol details, content type, bandwidth usage, etc. Shortcut: CTRL + 4 .
5. Performance: Detailed frame rates, CPU usage and other performance-related metrics, help you speed up page load times and other operations. Shortcut: CTRL + 5 .
6. Memory: Helps you isolate and fix potential memory leaks on the current web page, by displaying the timeline using memory along with snapshots from different time periods. Shortcut: CTRL + 6 .
7. Emulation: Shows you how the active page will display in different screen resolutions and sizes, simulating smartphones, tablets and many other devices. Provides the ability to modify user agents and page orientation, as well as simulate different geographical locations by entering latitude and longitude. Keyboard shortcut: CTRL + 7 .

3. To display the Console while inside any other tool, press the square button with the right bracket inside it, located in the upper right corner of the development tool interface.

How to use developer tools on web browsers Picture 10

4. To unlock the developer tool interface, turn it into a separate window, select the two-tiered rectangle icon or use the following shortcut: CTRL + P You can put the tools back to their original position by pressing CTRL + P for the second time.

Apple Safari (OS X only)

Safari's diverse development toolset reflects a large developer community, using Macs for their design and programming needs. In addition to the powerful control panel, as well as traditional logging and debugging features, the responsive, easy-to-use design mode and your own browser extension tool 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 shortcut instead of this menu item: COMMAND + Comma ( , ).

2. Safari's Preferences interface will now be displayed, located on your browser window. Select the Advanced icon , located on the right side of the title.

3. Advanced options will be displayed. 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 displayed in the box, click the option once to select it.

4. Close the Preferences interface by clicking on the red X found in the upper left corner.

5. You should now see a new option in the browser menu called Develop, located between Bookmarks and Window. Click this menu item. A drop-down menu will be displayed, containing the following options.

1. Open Page With : Allows you to open an active website in one of the other browsers currently installed on your Mac.
2. User Agent : Allows you to choose from many predefined user agent values, including some versions of Chrome, Firefox and Internet Explorer, as well as define your own custom string.
3. Enter Responsive Design Mode : Render the current page as it will appear on many devices and in different screen resolutions.
4. Show Web Inspector : The main interface launch for Safari's development tools, usually located at the bottom of the browser screen and contains the following sections: Elements, Network, Resources, Timelines, Debugger, Storage, Console .
5. Show Error Console : Also launch the development tool interface directly to the Console tab , which displays errors, warnings and other searchable log data.
6. Show Page Source : Open the Resources tab , display the source code for the active page, sorted by document.
7. Show Page Resources : Perform the same function as Show Page Source .
8. Show Snippet Editor : Open a new window where you can enter CSS and HTML code, preview its output quickly.
9. Show Extension Builder : Provides the ability to create or edit Safari extensions with CSS, HTML and JavaScript.
10. Show Timeline Recording : Open the Timelines tab and start displaying network requests, layouts and rendering information as well as implementing JavaScript in real time.
11. Empty Caches : Clear all cache currently stored on the hard drive.
12. Disable Caches : Stop Safari from logging to cache so that all content is retrieved from the server after each page load.
13. Disable Images : Prevent rendered images on all websites.
14. Disable Styles : Ignore CSS properties when a page is loaded.
15. Disable JavaScript : Restrict JavaScript execution on all pages.
16. Disable Extensions : Prohibits all installed extensions from running in the browser.
17. Disable Site-specific Hacks : If Safari has been modified to handle specific problem (s) for the active site, this option will block those changes to load as before the modifications were made. given.
18. Disable Local File Restrictions : Allows the browser to access files on your local drive, an action that is restricted by default for security reasons.
19. Disable Cross-Origin Restrictions : These restrictions are set by default to prevent XSS and other potential risks. However, they often need to be temporarily disabled for development purposes.
20. Allow JavaScript from Smart Search Field : When enabled, users are provided the ability to enter URLs using javascript: integrated directly into the address bar.
21. Treat SHA-1 Certificates as Insecure : SSL certificates using SHA-1 algorithms are considered obsolete and vulnerable to attack.