Must Have Developer Tools! Some tricks to develop quicker

Below are some of the must have developer tools that I use. End of the day developers need to be very productive and if we have the right tools in our arsenal then we are half way there.

  1. View Source => By going through menu navigation or Ctrl-Shit-I on windows or Cmd-option(alt)-I on mac.
  2. Or for particular element, just right click on it and choose inspect element.
  3. For fast navigation, prefer keyboard arrow keys to collapse or expand DOM elements. You will find the width and height of that active element as you move in Developer Tool.
  4. To get the full view of the page, try Ctrl – (minus) to zoom out so as to see your whole page with developer tools open without scrolling. Sometimes useful to me.
  5. You can copy the the content or the DOM elements by using your mouse, but you might like to do this by using console’s copy() method. For example, copy(document.body.innerText) and then paste that anywhere. Its handy if you know the DOM element and may help for productivity.
  6. Use clear(); function to clear the console, however the developer tool has a GUI for that.
  7. Use inspect(body) to inspect body element of the DOM, just pass any element in the function.
  8. Under Network tab, the blue line in the waterfall chart shows that the DOM is ready or the DOMContentLoaded Event fire and the read line shows the windows load event which waits for the documents to load images, iframes, etc.
  9. You an see the cookies information by going through the Network tab and then selecting Header or Cookies tab.
  10. For javascript debugging, we can edit the script file of the page on the fly and it will render it as this feature is unique to Chrome because of its V8 JavaScript engine.
  11. Sometimes, its hard for us to find where the error is in our script, so you might want to open the script in developer tools and then click the pause button, now chrome will set a breakpoint when it find the statement because of which the error is being logged in console.

Siddharth Pandey

Siddharth Pandey is a Software Engineer with thorough hands-on commercial experience & exposure to building enterprise applications using Agile methodologies. Siddharth specializes in building, managing on-premise, cloud based real-time standard, single page web applications (SPAs). He has successfully delivered applications in health-care, finance, insurance, e-commerce sectors for major brands in the UK. Other than programming, he also has experience of managing teams, trainer, actively contributing to the IT community by sharing his knowledge using Stack Overflow, personal website & video tutorials.

Advertisment ad adsense adlogger