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.
- View Source => By going through menu navigation or Ctrl-Shit-I on windows or Cmd-option(alt)-I on mac.
- Or for particular element, just right click on it and choose inspect element.
- 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.
- 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.
- 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.
- Use clear(); function to clear the console, however the developer tool has a GUI for that.
- Use inspect(body) to inspect body element of the DOM, just pass any element in the function.
- 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.
- You an see the cookies information by going through the Network tab and then selecting Header or Cookies tab.
- 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.