3 tricks on browser web tool you may not know

Diep Thanh Tu
Aug 31, 2018 · 2 min read

Beautiful scrip code {}

If you have to step into the script minified source code to debugger for example, this feature is really handy. It will helps you to format the source code, make it easier to review.

Before formatting
After formatting

Selecting elements in console

There are also some handy magic variables and functions for selecting DOM elements:

  • document.getElementById(): Returns the element have id attached.
  • document.querySelector(): Returns the first element, matching a CSS selector, differ to document.getElementById(), this function can select more than just Id.

Go to line

After you’ve opened a file in the Sources tab, dev tools allows you to easily jump to any line in it. To do so press Ctrl + G for chrome and Ctrl + L for Firefox, and type in your line number.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade