Languages Magazine

How to Use Chrome DevTools

By Expectlabs @ExpectLabs

Get a behind-the-scenes look at how our team uses Chrome DevTools, as explained by Software Engineer Suvda Myagmar.

Pair with this video about how to choose the perfect integrated development environment. 


Hi, my name is Suvda Myagmar, and I’m a software engineer at Expect Labs. Today I’m going to talk about productivity tools for developers. Chrome DevTools makes it easy for web developers to debug Javascript code. When I’m working with Javascript, I usually put breakpoints in the Sources panel and watch variable values and call stack. Another useful thing a developer can do in Chrome is monitor Ajax and, in general, HTTP requests and responses. You can view exactly what’s being sent to the backend server and what’s being received. Also, in Chrome, it’s easy to examine particular HTML elements and their CSS properties. I usually make CSS changes right there in the Elements panel of the DevTools and observe the resulting effect on the web page. If I like the effect, I apply it in the source code.

Back to Featured Articles on Logo Paperblog