How to use web browser developer tool

In addition to making browser developers want users to have a better web experience, they also serve web developers, designers, and quality assurance professionals. 

Gone are the days when the only testing and development tools available in a browser allowed you to view only one page’s source code and no other capabilities. Nowadays browsers allow you to take a closer look at web content through features like run and debug JavaScript.

Web Browser Developer Tools is a unique feature embedded in most web browsers that makes it possible to do so.

Nowadays browsers allow you to take a closer look at web content through features such as executing and debugging JavaScript, checking and editing DOM elements, monitoring network traffic real-time while running apps or web pages, and Identify bottlenecks, analyze CSS performance status, show if your code is using too much memory and CPU, and many more.

In an experimental environment you can reproduce how an app or webpage works in different browsers as well as devices and platforms through interactive design magic and embedded simulators. The best part is that you can do all this directly from the browser. Web Browser Developer Tools is a unique feature embedded in most web browsers that makes it possible to do so.

The following guide will help you find out how to access these special developer tools in a few popular browsers.

Google Chrome

Chrome Developer Tools allow you to edit and debug code, monitor standalone components for performance issues, simulate the display of various devices, including those running on Android and iOS, and several Other functionality.

  1. Click the Chrome main menu button, consisting of three horizontal lines, in the upper right corner of the browser screen.
  2. When the drop-down menu appears, hover over the More tools option.
  3. A submenu should now appear. Select Developer tools from those options. You can also open the Developer Tools keyboard directly with this keyboard shortcut: In Windows shortcut CTRL + SHIFT + I and in Mac OS X ALT (OPTION) + COMMAND + I shortcut
  4. The Chrome Developer Tools interface should now be displayed. Based on your Chrome version, the interface you’ll see is a bit different. The Chrome Developer Tools homepage usually appears at the bottom or right of the screen and includes these tabs:

    Elements : Allows you to review CSS and HTML code as well as CSS editing in real time,

  5. and you can see the changes made instantly.

    Console : Chrome’s JavaScript console allows you to enter commands directly and debug code.

    Sources : Allows you to debug JavaScript code through a powerful graphical interface.
    Network : Classifies and displays detailed information about each operation related to an active app or page.
    Timeline : Allows in-depth analysis of any activity that occurs in the browser.

  6. In addition to these sections you can access the following tools via the icons on the right of the Timeline tab:
    Profile : It is divided into CPU profiler and Heap profiler and provides comprehensive information on memory usage and overall running time of the application or active page.
    Security : Announces certification issues and other security issues regarding the active app or page.
    Resources : This is where you can check for cookies, local space, app cache, and other local data sources used by the current app or web page.
    Audits : Provides ways to optimize the loading time and overall performance of a page or app.
  7. Device Mode lets you view the current page in a simulated window from what is visible on more than a few different devices,
  8. including several well-known models of Android and iOS devices such as the iPhone, iPad and Galaxy Samsung. You will also be able to simulate different screen resolutions to suit your needs. To activate or deactivate Device Mode,
  9. select the Mobile Phone icon on the left of the Elements tab.
  10. You can customize the look and feel of the developer tools via the menu button (three vertical dots on top) at the bottom right of the existing tabs. With the options in this menu you can change the appearance of this tool, hide or hide different tools, and enable or disable advanced settings options.

Mozilla Firefox

Firefox’s Web Developer section includes a variety of tools for web content designers, developers, and testers.

  1. Click the Firefox main menu button (three horizontal lines) in the upper right corner of the browser window.
  1. From the options in this menu, select the Developer Tag Icon. This will make the Web Developer menu appear. Note that each of the options in this menu is equipped with a keyboard shortcut.
    Toggle Tools : Displays or hides the developer tools interface. Its location is also usually at the bottom of the browser window. You can open the Developer Tools keyboard directly with this keyboard shortcut: In Windows shortcut CTRL + SHIFT + I and in Mac OS X ALT (OPTION) + COMMAND + I shortcut
    Inspector : Allows you to examine and manipulate CSS and HTML code of the active page.
    Web Console : Allows you to run JavaScript commands on the active page. A variety of log data sets including security alerts, network requests, CSS messages, etc. are also available here.
    Debugger : The JavaScript debugger allows you to identify and resolve defects caused by DOM nodes, external resources, and more. This feature supports remote debugging.
    Style Editor : Allows you to create new stylesheets and paste them into the current webpage or edit existing stylesheets and see changes made in the browser with just one click.
    Performance : Provides you with the status of the current page’s performance, data exchange rate, duration, and execution status of JavaScript and more.
    Network : Lists the network request initiated by the browser along with the corresponding method, origin domain, type and size.
  2. Developer Toolbar : Opens an interactive command line interpreter. Enter the help command in this interpreter to give you a list of available commands and how each one works.

  3. WebIDE : Allows you to build and run web applications through Firefox OS or Firefox OS Simulator.
    Browser Console : It does something similar to the Web Console described above. However, here all the back-end data pertains to the entire Firefox application (including browser-level extensions and functions) and not just the active web page.
    Responsive Design View : Allows you to instantly view a webpage with different resolution, layout, and screen size. This will simulate a variety of devices, including tablets and smartphones.
    Eyedropper : Provides the hexadecimal code corresponding to the color of the selected pixels.
    Scratchpad : Allows you to write snippets of Javascript code and run it through an existing page through a floating Firefox window.
    Page Source : This option only shows you the source code of the active page.

Microsoft Edge / Internet Explorer

Formerly known as F12 Developer Tools,

a shortcut key on the home screen that opens the developer tool interface

from the same old versions of Internet Explorer. The post-IE11 and Microsoft development toolkit has provided many applications for monitoring, debugging, simulating and compiling.

  1. Click the More Actions menu button in the top-right corner of the browser screen in the form of three dots. After opening this menu, select Developer Tools.
  2. Selecting this option will show the development tool interface at the bottom of the browser window. The tools in this interface include the following.
    DOM Explorer : Allows you to edit the stylesheets and HTML codes on the active page and see the result of these changes instantly. You can also use IntelliSense code to auto-complete if necessary.
    Console : Enables debugging information including counters, timers, trackers and custom messages through a single API. It also allows you to inject your code into active web pages and change the value for each variable in real time.
    Debugger : Allows you to debug separate portions of your code line by line at run time.
    Network : Lists all network requests made by the browser at the time of page download, along with details on the type of content, bandwidth used, and the type of protocol.
  3. To separate the developer tools interface from the browser window and display it as a separate window,

  4. click on the double-rectangle button or use the CTRL + P key on the keyboard.

  5.  Pressing the CTRL + P keys again brings the toolbar back to its original position.

Leave a Reply

Your email address will not be published. Required fields are marked *