DevTools: Everything You Need To Know

Every modern web browser includes a powerful suite of developer tools, also known as DevTools. These tools do a range of things, from inspecting currently-loaded HTML, CSS and JavaScript to showing which assets the page has requested and how long they took to load.

Web developer tools help developers in the process of testing as well as debugging their codes. These development tools are utterly different from IDEs and other website builders. It is because these are not meant to help in the direct process of a webpage creation. Instead, they help in testing web pages or web applications.

Overview of DevTools

Web developer tools allow professionals to create software and debug and test their code on web development projects. These tools also help individuals review the user interface of a web application or website. While these tools may not help developers build an application or website, they allow them to review the security and aesthetic features and design custom website elements.

They may be available to web developers as add-ons and built-in features in web browsers.

When choosing a program, professionals may consider various factors, including ease of use, scalability, security, functionality, and cost.

While web designers and developers may use several programs to create, manage, and assess a website or application, such as DevTools and website builders, these resources have distinct differences. Website builders assist with the direct process of web application and site creation.

Alternatively, DevTools are programs that allow web developers to test and analyze the performance of their code. They also make improvements to existing web pages and apps.

Examples of DevTools

Notepad++

Notepad++ is a powerful open-source code editor that Windows users can rely on to review and improve text within a website or web application. Although it may not have a unique aesthetic theme, it offers web developers a variety of features that can help them edit their projects and debug their code when necessary.

Professionals may also prefer this DevTool because it supports 27 programming languages and provides synchronized views and edits.

Django

Django is a Python framework that web developers can use on complex and popular websites and applications. This program is scalable and secure, and professionals can use it for small-scale projects or large web development projects. It helps create sites with less code, which can make the testing and revision process more efficient.

Users may also enjoy a variety of Django’s utilities and packages that focus on creating a straightforward design and optimizing development.

REST Assured

REST Assured may benefit web developers who work with Java because they can use it without HTTP expertise, and it allows users to validate and test code using simple programming languages. By automating elements of the boilerplate code, REST Assured can save professionals time.

It also allows individuals to use notifications, such as given, when, and then, to simplify the testing process and send and receive requests and responses.

Meteor

Meteor is a full-stack open-source framework that allows web developers to deploy and maintain desktop, web and mobile applications. It can easily integrate with a professional’s tech-stack, allowing users to devote their time to building and testing rather than identifying tools that can operate together. It can also provide professionals with application metrics in real-time allowing web developers to track the performance of their project and identify any issues that may require testing.

Vim

Vim is a highly configurable code editor that professionals can also use to revise other content, including blog posts and emails. It provides users with over 200 syntax files and integrations with Python and TCL.

It may require more time to understand than other options, but users may prefer it because it allows them to develop the ideal programming environment.

Ruby on Rails

Ruby on Rails is a DevTool that may make it easy for users to read, write, maintain, test and deploy code, which means web developers may find it helpful for a variety of projects. It can also integrate with third-party applications and provide users with a straightforward design language.

It may be useful for web developers who work independently rather than with a team of professionals because its intuitive workflow design can help them launch projects and make changes efficiently.

Atom

Atom is a text editing DevTool that offers users a variety of customizable features that allow them to make the program meet their unique project testing requirements. Professionals can choose from thousands of Atom’s open-source packages and may use this tool with Linux, Mac, and Windows.

It can also help individuals who are members of a professional team, as it provides users with several real-time collaboration tools to help professionals work alongside each other on a project.

Ember

Ember is an open-source JavaScript tool and web framework with a user experience that professionals may prefer compared to other DevTools. The built-in development features include auto-reload, test runners and efficient rebuilds.

It also allows users to create asynchronous relationships and may be ideal for remote work because it can keep models up to date across the platform.

Foundation

Foundation is a front-end framework and DevTool that provides users with HTML, CSS and JavaScript templates to create and maintain code for websites and applications. This tool may be accessible to web developers with various levels of experience and training, and professionals can use it on a variety of devices.

Users can also use it to create HTML code for emails that viewers can access on various platforms.

HoppScotch

HoppScotch is an open-source web development tool with an appealing aesthetic design that professionals may prefer because of its advanced functionality. It can handle a variety of tasks, including creating full-duplex communication channels and adding translations for users with preferred languages other than English.

It also provides users with collections to help them organize API requests and the ability to request and restore edits with a single click.

How to open DevTools in your browser

Microsoft Edge

In Microsoft Edge, you can open DevTools by using the mouse or keyboard, in any of the following ways. Which tool is opened depends on how you open DevTools.

Main ways:

Additional ways:

Action	Resulting tool
On the Microsoft Edge toolbar, select Settings and more () > More tools > Developer tools.	The previously used tool, or the Welcome tool.
Press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS).	The Console tool.
Press Ctrl+Shift+C (Windows, Linux) or Command+Option+C (macOS).	The Elements tool, with the DOM tree expanded to show the <body> element.
Press Shift+F10 to open the right-click menu. To select the Inspect command, press Up Arrow and then Enter.	The Elements tool, with the DOM tree expanded to show the <html> element.
Press Tab or Shift+Tab to put focus on a page element. Then press Shift+F10 to open the right-click menu. To select the Inspect command, press Up Arrow and then Enter.	The Elements tool, with the DOM tree expanded to show the focused page element.

Chrome

There are many ways to open Chrome DevTools. Choose your favorite way from this comprehensive reference.

You can access DevTools using Chrome UI or keyboard:

• From drop-down menus in Chrome.
• With dedicated shortcuts that open Elements, Console, or the last panel you used.

Open the Elements panel to inspect the DOM or CSS

To inspect, right-click an element on a page and select Inspect. DevTools opens the Elements panel and selects the element in the DOM tree. In the Styles pane, you can see CSS rules applied to the selected element.

Open the last panel you used from Chrome’s main menu

To open the last DevTools panel, click the  button to the right of the address bar and select More Tools > Developer Tools.

Alternatively, you can open the last panel with a shortcut. See the next section to learn more.

Open panels with shortcuts: Elements, Console, or your last panel

If you prefer a keyboard, press a shortcut in Chrome depending on your operating system:

Here’s an easy way to memorize the shortcuts:

• C stands for CSS.
• J for JavaScript.
• I designates your choice.

The C shortcut opens the Elements panel in  inspector mode. This mode shows you helpful tooltips when you hover over elements on a page. You can also click any element to view its CSS in the Elements > Styles pane.

Mozilla Firefox

To open the developer tools in Mozilla Firefox:

1. Open the browser.
2. Press F12 on the keyboard.
   • Optional: Press the Ctrl+Shift+I keys or click Menu > Web Development > Inspector.

You can open the developer tools by inspecting the element:

1. Open the browser
2. Right-click on the element to inspect.
3. Choose the option Inspect or Inspect element.
4. Optional: In the developer tools window, switch to the Elements panel.

Internet Explorer

To open the developer tools in Internet Explorer:

1. Open the browser.
2. Press F12 on the keyboard.
   • Optional: Click Tools > F12 Developer Tools.

You can open the developer tools by inspecting the element:

1. Open the browser
2. Right-click on the element to inspect.
3. Choose the option Inspect or Inspect element.
4. Optional: In the developer tools window, switch to the Elements panel.

Useful DevTools tips and tricks

Disable abusive debugger statements

Some websites aren’t very nice to web developers. While they seem normal at first, as soon as you open DevTools, they immediately get stuck and pause at a JavaScript breakpoint, making it very hard to inspect the page.

These websites achieve this by adding a debugger statement in their code. This statement has no effect as long as DevTools is closed, but as soon as you open it, DevTools pauses the website’s main thread.

If you ever find yourself in this situation, here is a way to get around it:

1. Open the Sources tool (called Debugger in Firefox).
2. Find the line where the debugger statement is. That shouldn’t be hard since the debugger is currently paused there, so it should be visible right away.
3. Right-click on the line number next to this line.
4. In the context menu, choose Never pause here.
5. Refresh the page.

Visualize a page in 3D

The HTML and CSS code we write to create webpages gets parsed, interpreted, and transformed by the browser, which turns it into various tree-like data structures like the DOM, compositing layers, or the stacking context tree.

While these data structures are mostly internal in-memory representations of a running webpage, it can sometimes be helpful to explore them and make sure things work as intended.

A three-dimensional representation of these structures can help see things in a way that other representations can’t. Plus, let’s admit it, it’s cool!

Edge is the only browser that provides a tool dedicated to visualizing webpages in 3D in a variety of ways.

1. The easiest way to open it is by using the Command Menu. Press Ctrl+Shift+P (or Cmd+Shift+P on macOS), type “3D” and then press Enter.
2. In the 3D View tool, choose between the three different modes: Z-Index, DOM, and Composited Layers.
3. Use your mouse cursor to pan, rotate, or zoom the 3D scene.

The Z-Index mode can be helpful to know which elements are stacking contexts and which are positioned on the z-axis.

The DOM mode can be used to easily see how deep your DOM tree is or find elements that are outside of the viewport.

The Composited Layers mode shows all the different layers the browser rendering engine creates to paint the page as quickly as possible.

Edit & resend network requests

When working on your server-side logic or API, it may be useful to send a request over and over again without having to reload the entire client-side webpage and interact with it each time. Sometimes you just need to tweak a couple of request parameters to test something.

One of the easiest ways to do this is by using Edge’s Network Console tool or Firefox’s Edit and Resend feature of the Network tool. Both of them allow you to start from an existing request, modify it, and resend it.

In Firefox:

• Open the Network tool.
• Right-click the network request you want to edit and then click Edit and Resend.
• A new sidebar panel opens up, which lets you change things like the URL, the method, the request parameters, and even the body.
• Change anything you need and click Send.

In Edge:

• First, enable the Network Console tool by going into the Settings panel (press F1) → Experiments → Enable Network Console.
• Then, in the Network tool, find the request you want to edit, right-click it and then click Edit and Resend.
• The Network Console tool appears, which lets you change the request just like in Firefox.
• Make the changes you need, and then click Send.

Copy Element styles 

Sometimes it’s useful to extract a single element from a webpage, maybe to test it in isolation. To do this, you’ll first need to extract the element’s HTML code via the Elements tool by right-clicking the element and choosing Copy → Copy outer HTML.

Extracting the element’s styles, however, is a bit more difficult as it involves going over all of the CSS rules that apply to the element.

Chrome, Edge, and other Chromium-based browsers make this step a lot faster:

1. In the Elements tool, select the element you want to copy styles from.
2. Right-click the selected element.
3. Click Copy → Copy styles.
4. Paste the result in your text editor.

You now have all the styles that apply to this element, including inherited styles and custom properties, in a single list.

View console logs on non-Safari browsers on IOS 

As you might know, Safari isn’t the only browser you can install and use on an iOS device. Firefox, Chrome, Edge, and others can also be used. Technically, they all run on the same underlying browser rendering engine, WebKit, so a website should more or less look the same in all of these browsers in iOS.

However, it’s possible to have bugs on other browsers that don’t replicate in Safari. This can be quite tricky to investigate. While it’s possible to debug Safari on an iOS device by attaching the device to a Mac with a USB cable, it’s impossible to debug non-Safari browsers.

Thankfully, there is a way to at least see your console logs in Chrome and Edge (and possibly other Chromium-based browsers) when using iOS:

1. Open Chrome or Edge on your iOS device and go to the special about:inspect page.
2. Click Start Logging.
3. Keep this tab open and then open another one.
4. In the new tab, go to the page you’re trying to debug.
5. Return to the previous tab. Your console logs should now be displayed.

Recommended Articles

• Python Selenium: Everything You Need To Know
• What Is Lift and Shift in Cloud Migration: All You Should Know
• How to Learn JavaScript Effectively: Proven Tips & Tricks
• On-Premises vs Cloud Computing: What’s The Difference?
• Data Normalization: What It Is and Why It Is Important
• Python Cryptography: Ultimate Beginners Guide

References

• IBM
• Indeed
• Microsoft
• Smashing Magazine