Devtools Essentials for Web Developers

The Chrome DevTools is a powerful set of tools that can help you identify and fix issues in your web application. With its various panels and features, you can inspect elements, debug code, and optimize performance.

One of the most useful features of DevTools is the Elements panel, which allows you to inspect and edit the HTML and CSS of any element on the page. This is especially useful when you need to troubleshoot a specific issue or make quick changes to your code.

The Console panel is another essential tool in DevTools, providing a real-time output of errors and warnings in your code. By using the Console panel, you can identify and fix issues quickly and efficiently.

Inspecting elements with the Elements panel can save you a lot of time and effort, especially when working on complex web applications.

You can open DevTools in Microsoft Edge using the mouse or keyboard.

Pressing Ctrl+Shift+I (Windows, Linux) or Command+Option+I (macOS) will open the previously used tool, or the Welcome tool.

To open DevTools using the mouse, right-click any item on a webpage and select Inspect. This will open the Elements tool with the DOM tree expanded to show the right-clicked page element.

Pressing F12 will also open the previously used tool, or the Welcome tool.

If you want to open the Console tool, press Ctrl+Shift+J (Windows, Linux) or Command+Option+J (macOS).

Customizing DevTools gives you the power to tailor the tool to your needs. You can change settings to suit your work style by clicking the Customize and control DevTools button and selecting Settings, or by pressing F1.

In the Settings > Preferences page, you can change several parts of DevTools, such as using the Browser UI language setting to use the same language in DevTools as in your browser. The Theme setting lets you change the color theme of DevTools.

You can also customize advanced features like adding local files to a Workspace, filtering library code by using the Ignore List, and defining simulated Locations. To customize keyboard Shortcuts, select Match shortcuts from preset and choose a preset like Visual Studio Code.

Customizing DevTools is a breeze, and you can do it in just a few clicks. You can change the settings by clicking the Customize and control DevTools () button, and then selecting Settings (), or pressing F1.

You can use the Browser UI language setting to use the same language in DevTools that is used in your browser. For example, if you're using a French browser, you can switch to French in DevTools too.

To change the color theme of DevTools, select the Theme setting. You can choose from a variety of themes, or even create your own custom theme.

You can also customize advanced features, such as adding local files to a Workspace, filtering library code by using the Ignore List, and defining simulated Locations. These settings can be accessed by clicking the Customize and control DevTools () button and selecting Settings ().

You can customize keyboard Shortcuts to use the same shortcuts in DevTools as in Visual Studio Code, for example. To do this, select Match shortcuts from preset > Visual Studio Code.

Here are some of the advanced features you can customize in DevTools:

By customizing these advanced features, you can tailor DevTools to your specific needs and work style.

Trying experimental features can be a great way to stay ahead of the curve with DevTools. You can turn each of the experiments on or off by selecting Settings and then Experiments in DevTools.

If you want to preview the latest features coming to DevTools, download Microsoft Edge Canary, which builds nightly. This will give you a sneak peek at what's to come.

The DevTools team provides new features as experiments in DevTools, and you can access them by selecting Settings and then Experiments. This is a great way to try out new tools and features before they become standard.

Here are some of the experimental features you can try:

The Quick View toolbar is a handy feature in DevTools that allows you to open additional tools below or to the right of the tool that's already selected in the Activity Bar. It's easily accessible by clicking the More tools () button in the Quick View toolbar.

You can use the Quick View panel to open a second tool, such as the Rendering tool, below the Network tool that's open in the Activity Bar. To do this, select a tool from the Activity Bar, click More tools () in the Quick View toolbar, and then select a different tool from the list.

To hide or expand the Quick View panel, you can click Collapse Quick View () or Expand Quick View (), or press the Escape key. This will give you more space to work with or bring back the Quick View panel when you need it.

Here are some key tasks you can perform with the Quick View toolbar:

The Console tool is always present on the Activity Bar and on the Quick View toolbar, allowing you to view and filter logged messages from network requests or from JavaScript log statements.

The Close Button is a simple yet essential feature in DevTools. Click the Close DevTools () button in the upper right corner of DevTools to close DevTools and use the entire window to display the current webpage.

The color palette is a powerful tool in DevTools, allowing you to customize the colors used in your website.

You can access the custom color palette by clicking on the color block in the style panel. This will pull the colors from your website's style sheet.

A color picker is also available, enabling you to pick out colors from a web page directly.

You can customize the color format in DevTools to suit your needs. Pressing Shift + Click on the color block allows you to toggle between RGBA, HSL, and hexadecimal formatting.

If you're working on a project that requires specific color formats, this feature can save you time and effort.

The Activity Bar is a powerful tool in DevTools that allows you to customize your workflow. You can change the location of the Activity Bar to the left side of the DevTools window or to be automatically set depending on the DevTools window docking location.

The Activity Bar can be in one of three locations: Top (default), Left side, or Adapt to dock location. If you choose the Top location, tool names appear next to tool icons if there is enough space, but if there isn't enough space, the horizontal Activity Bar shows some tabs with tool icons and names, and some tabs with icons that have a tooltip instead.

To change the location of the Activity Bar, you can click the Customize and control DevTools button, select a location in Activity Bar location, or use the Command Menu by pressing Ctrl+Shift+P (Windows, Linux) or Command+Shift+P (macOS).

You can change the location of the Activity Bar to make the most of your screen space.

To move the Activity Bar, click the Customize and control DevTools button, and then select a location in Activity Bar location. You can also use the Command Menu by pressing Ctrl+Shift+P (Windows, Linux) or Command+Shift+P (macOS), entering the words activity bar, and then selecting Move Activity Bar to left or Move Activity Bar to top.

The Activity Bar can be in one of three locations: Top, Left side, or Adapt to dock location. If you choose Left side, the Activity Bar will always be vertical. If you choose Adapt to dock location, the Activity Bar will be in a horizontal or vertical orientation depending on where DevTools is docked.

Here are the different locations for the Activity Bar:

If you choose to move the Activity Bar to the left side, tool names will appear next to tool icons if there is enough space to display them.

The Activity Bar is a powerful feature in DevTools that gives you an amazing amount of power to inspect, debug, and change the website currently displayed in the browser.

Most of the tools in the Activity Bar display changes live, making it useful to refine the appearance and navigation or functionality of a webpage without the need to refresh or build it.

To open a tool in the Activity Bar, click the More tools button () and select a tool from the list. You can also use the Command Menu by pressing Ctrl+Shift+P (Windows, Linux) or Command+Shift+P (macOS) and typing the name of the tool.

The Activity Bar can be moved to the left side of the DevTools window or set to adapt to the dock location for maximum usable screen space.

Here are the possible locations of the Activity Bar:

To change the location of the Activity Bar, click the Customize and control DevTools button, or use the Command Menu to select a new location.

Quick File Switching is a game-changer for productivity.

You can easily access any file within a current project or web page by pressing Cmd + P (Ctrl + P) when Chrome DevTools is open and searching for the name.

This shortcut saves you time and effort by allowing you to quickly find the file you need without having to navigate through multiple menus or panels.

With this feature, you can stay focused on your work and complete tasks more efficiently.

Tool Panels are divided into a set of tabbed tools, such as the Elements tool, the Console tool, and the Sources tool. Each tool has a tab that can be present on the Activity Bar and Quick View toolbar.

A tool's tab contains a panel which contains the tool's UI. Tools are organized into a set of tabs on the Activity Bar and on the Quick View toolbar. Most tools are also called panels.

Some tools have lower-level tabs, like the Elements tool, which contains a set of tabs that includes Styles, Event Listeners, and Accessibility tabs.

Tabbed tool panels are a key feature of DevTools, allowing you to organize and access various tools with ease.

The Elements tool is a great example of a tabbed tool panel, with a set of tabs that includes Styles, Event Listeners, and Accessibility tabs.

Each tool has a tab that can be present on the Activity Bar and Quick View toolbar, making it easy to switch between different tools.

A panel is the inner UI of a tool, containing all the necessary features and functions.

Some tools have lower-level tabs within their panels, such as the Elements tool's Styles tab.

The Console tool and the Sources tool are also examples of tabbed tool panels, each with their own unique features and functions.

The tabbed structure of these tool panels makes it simple to navigate and access the features you need.

Device Emulation is a powerful tool that lets you see how your website will look on different devices. It's like having a magic window into the world of mobile devices!

To access Device Emulation, click the Device Emulation button in Chrome DevTools. This will display your current website in an emulated device mode. You can then test how your product reacts when you resize the browser.

Device Emulation also gives you an estimation of the layout and behavior on a mobile device. This is super helpful when you're designing a responsive website and want to see how it will behave on different devices.

By using Device Emulation, you can run and test your website to see if it's breaking anywhere. This will help you identify areas where you need to apply media queries to fix the layout.

The Console tool is a powerful feature that allows you to view and filter logged messages from network requests or JavaScript log statements. It's always present on the Activity Bar and Quick View toolbar.

You can enter JavaScript statements to evaluate in real-time, and expressions are evaluated in the current context, such as when the JavaScript debugger is paused at a breakpoint.

The Console tool is a great way to troubleshoot issues, and you can find errors by scrolling up through the history, particularly looking for errors highlighted in red.

To access the console log on a specific page, right-click an element on the page, select Inspect, and then navigate to the Console tab.

Here are the steps to access the console log:

By following these steps, you can provide your support team with more information to troubleshoot issues.

The Sources tool is a code editor and JavaScript debugger, making it a go-to panel for developers.

You can edit projects, maintain snippets, and debug your current project with ease.

The Sources tool is always present on the Activity Bar, making it easily accessible whenever you need it.

It's perfect for when you're working on a project and need to make some quick changes or track down a bug.