Devtool tips to increase efficiency 🤹‍♀️

·3 min read
Priya Jain

Priya Jain

@priyajaindev

Devtool tips to increase efficiency 🤹‍♀️

To some people, DevTools can look complex and sometimes scary. Many developers stick to just a few basic features, never really exploring the full potential of these tools. DevTools, are actually pretty amazing once you get to know them.

This article is all about making DevTools less scary and more useful with small tips.

WHO'S THIS FOR

  • Web developers who are familiar with navigating through browser developer tools or inspecting elements.
  • If you want to learn basics about Devtools

Tip 1 - Enable Console Timestamps

Console Timestamps offers a simple way to see how long JavaScript operations are taking to execute.

Google Chrome:

  1. In the settings menu, find the "Preferences" section.
  2. Check the "Show timestamps" option under the "Console" heading.

Firefox and Edge:

  1. Go to the "Settings" menu by clicking the gear icon (⚙️) in the top-right corner of the Developer Tools window.
  2. In the settings menu, find the "Console" section.
  3. Check the box labeled "Enable timestamps".
devtool-tip2

Tip 2 - Get the selected element in the console

  1. Navigate to the "Elements" tab.
  2. Inspect the element you're interested in.
  3. Once the element is selected, go to the console.
  4. Simply type $0 in the console and press Enter.
devtool-tip1

Chrome even hints at this by showing == $0 next to the HTML.

They can be used to access the recently selected DOM nodes:

$1 returns the DOM node you selected just before the currently selected one. $2 returns the DOM node you selected before that. And so on!

Tip 3 - Replay a network request using cURL

By using cURL in developer tools, you can quickly and easily test API endpoints and debug HTTP requests without the need for external tools or command-line interfaces.

To copy a request as cURL:

  1. Find the request you want to edit in the Network tool.
  2. Right-click the request and select Copy > Copy as cURL.
  3. Paste the command in your terminal app, make any changes you need, and then run it.
devtool-tip3

Tip 4 - Find inactive CSS styles

writing CSS code that has no effect can indeed be frustrating. This often occurs due to specificity issues, conflicting styles, or CSS rules that are overridden by other styles.

devtool-tip3

Tip 5 - CSS Overview of website

Imagine you're tasked with reviewing and understanding the CSS styles used in a website. This could be for maintenance, optimization, or redesign purposes.

devtool-tip3

Happy Coding👩‍💻