20+ Questions to learn Chrome Developer Tools — Advanced Level

If you haven’t seen the first parts, see Basic and Moderate.

17. I have redundant rules in my CSS. Can I find them?

Audits tool is for this job. Select this tool from the tabs then it will do the rest for you and show you redundant CSS rules. In addition, it will suggest you a couple of tips to increase the performance of website. I don’t recommend you to remove all the rules the tool shows because it doesn't know if some rules are bound to dynamically created elements which are currently don’t exist. It’s better to check manually before removing.

18. How performant is my website? If it’s slow how can I find the source of it?

Render performance is related to mostly how much heavy CSS rules are and how many elements exist on the page. On timeline tab, click on top left circular button and you will see what’s the FPS (Frames per Second) value on that page. FPS gives you a crucial idea about how much performance your page has. Making FPS close to 60 feels right for users. If you see a FPS drop in a specific region, zoom in that area and examine the processes. It will tell you image resize, repaint of a specific area, recalculation of position of elements. In any case of a performance problem, — when we think about mobile, most of time we have — this tool will be a lifesaver.

19. How can I find out if my code has memory leak?

JavaScript engines work in garbage collection method so any unused element deleted automatically. Sometimes, you need to explicitly say that you don’t use an object. Otherwise, device memory gradually is filled up. After a point your page crashes. This happened me while I was using a SVG graphics library. Memory usage was starting from 60MB and reaches up to 2GB and crashes the app. I discovered Profiles tool which helped me a lot on memory management. You can also discover your memory and CPU issues with that tool.

20. There are asynchronous events in my script. I can’t see which one fired which event. How can I find out that?

This is relatively new feature and provides you with an option to track asynchronous events. For example, you send two different requests and one has its response. If you don’t know the response belongs to which request, click Async checkbox and it will keep an event monitoring since the initial execution. You can examine the data before and after request.

21. I use LESS/SASS to generate CSS. Can I edit files in real-time and reflect to the browser?

Although vanilla CSS is fun most of time, you are required to use a CSS preprocessor for standardized and serious jobs. The difficulty here is that you should always compile code and run the result on browser which generally takes a couple of seconds. This is against to the CSS logic, WYSIWYG, you can’t see the result without compiling. However, you can enable CSS sourcemaps for LESS/SASS or Stylus files and introduce them to DevTools so you can change your files almost live without refreshing your browser.

22. I’m a Node.js programmer. It’s difficult to debug the code on command line. Apparently, it’s javascript. Any suggestions?

Sure there is. It’s a carefully designed system that you can debug your Node.js code on Chrome DevTools live! Event better, you can edit and save Node.js app file while debugging! No need to restart your Node.js app. It will refresh your code immediately and save to server. Awesome. Imagine you find out a bug in your code while your app is serving 100+ concurrent users. You can open DevTools, edit the code, hit Ctrl+S/Cmd+S and yes, it will not lose any of clients but will fix the the bug immediately. For this, you need to install a module called Node Inspector and npm install -g node-inspector.

That’s not all. I just wanted to give the basic features. If you need more, visit their website. Also, don’t forget to check some cool extensions listed below.

• Batarang: A high quality plugin for Angular.js developers. If you’re coding an Angular.js app and haven’t used before, you should definitely check it out.
• Web Developer: A plugin for web developers has a dozen of features such as page resize, displaying all element ids, analysis of depth of elements, line guidelines, source validations.
• Cookie Inspector: As chrome doesn't allow editing cookies directly, I suggest this plugin.
• Postman: It’s a cool extension to test your requests. It gives you a chance to add headers, post data, cookies and examine the response in detail. As Chrome chanced policy, it cannot send custom some headers like user-agent, accept-encoding.

Anything wrong? missed? Let’s fix it.