Skip to main content

  • morocco, ag

BACK TO BLOG

DevTools Tips to Boost Your Web Development

Published at
Duration
3m 50s read
Listen
Listen 00:00

DevTools is a powerful set of tools for web development. Here are some handy tips to help you work more efficiently

Simulate Pseudo CSS Classes

Testing CSS pseudo-classes like :hover or :active can be tricky because you can’t always use your mouse. In DevTools, you can easily simulate these states without any hassle. Simply inspect the element and click the :hov button to enable the desired pseudo-class.
Simulate Pseudo CSS Classes



Select Elements with pointer-events:none

Sometimes, you may need to select elements that have the pointer-events:none CSS property.
Can't select elements with pointer-events:none
To do this, hold down the Shift key while hovering over the elements. This allows you to select them even if they are not normally clickable.
Select elements with pointer-events:none with shift



Setting Event Breakpoints

When dealing with events like mouseover and mouseleave, you can set breakpoints in the Debugger tab of DevTools to pause your code at the exact moment an event is triggered.

For example, if you have a dropdown menu that is created on mouseover and deleted on mouseleave, setting a breakpoint on the mouseover event allows yout to work on your menu without being bothered.

The advantage here is that even if you leave the hoverable item, the menu won’t hide immediately because the browser pauses the execution. You can resume the code by clicking the Play button in the Debugger when you’re ready to continue.


Here is a demonstration :


Zoom the DevTools UI

If you find the DevTools interface too small, you can zoom in or out. Click inside the DevTools and use Ctrl + + to zoom in or Ctrl + - to zoom out and Ctrl + 0 to reset (use Cmd on a Mac).

Find and Export CSS Changes

After modifying CSS in DevTools, you can save your changes.

In Firefox, use the Changes panel to copy all edits.
find-and-export-css-changes-firefox
In Chrome and Edge, access the Changes panel from the command menu by pressing Ctrl + Shift + P.
find-and-export-css-changes-chrome-and-edge



Test Slower Network Speeds

It’s important to see how your site performs on slower connections. In the Network panel, select a throttling option from the dropdown to simulate a slow network speed. This helps you understand how users with slower connections experience your site for both api and SEO score.
test-slower-network-speeds



Expand DOM Nodes Recursively

To save time while navigating the DOM tree, you can expand all child nodes of a selected element at once. Right-click on the node and choose Expand Recursively (in Chrome and Edge) or Expand All (in Firefox and Safari).
Expand DOM nodes recursively



Search by Selector

Use the search bar in the Inspector to find elements by their CSS selectors.
Search by selector



Scroll Element into View

Quickly scroll an element into view by right-clicking and selecting the option to bring it into focus.
Scroll an element into view



Drag and Drop Nodes

Rearrange elements in the DOM tree by clicking and dragging them to your desired position.
Drag and drop nodes in the DOM

That’s all for now!

These tips can help you navigate DevTools more effectively, saving you time and effort while developing your web applications. Happy coding!