20+ Questions to learn Chrome Developer Tools — Moderate Level

If you are not so familiar with Chrome Web Developer Tools, I suggest you to see Basic Level first.

10. Any chance I can say like “If an element is deleted or its children are changed, report me immediately”?

Yep. One of my favorite features of Chrome DevTools. You can add a break-point for example the change of data-attribute of a div element or an addition of new class or addition of li element inside an ul element so it will stop execution and stops before the element changes. Simply right click on an element and select break on and event you want.

11. How can I emulate an X device on my browser?

When focused on DevTools, hit Esc button so you will see Emulation tab. Select the device you want to emulate or arbitrarily assign properties such as device-pixel-ratio (for retina & 3x), user-agent, touch screen. If you can’t find a specific device, find its properties on the product site and fill them. Small note: some sites detect screen size as soon as you visit them so width and height might be miscalculated. For a healthy emulation, it’s better to restart the page.

12. How can I make a mobile device seem like it’s in Russia and upside down?

Specifically for mobile devices, you might want to use new technologies like accelerometer and geolocation so you might want to retrieve information of GPS coordinates and rotation in three dimensions for a game or a navigation web app. Move to emulation tab and change the required parameters.

13. How can I monitor WebSocket traffic?

Lately, WebSocket has become a significant technology specifically with socket.io. On a web app, you can see your WebSocket traffic on Network tab, optionally choosing WebSockets filter. You need to start DevTools before WebSocket connection starts otherwise it won’t capture any WebSocket data at all.

14. JS and CSS code is minimized/obfuscated. Can I see its readable format?

Of course. Click { } icon on the left button and it will generate a better one. This can be applied for both JS and CSS.

15. I’m creating a CSS animation but things animate so quickly, I can’t see the changes. Wish I could slow down time.

I heard you. I can’t help you with slowing down time but I suggest you a simple method to slow down animations. See the play icon on the top right corner? Click on that and move the slider. Now time flows slowly.

16. Alright we solved time speed problem but I have another: I have high speed internet connection (#firstworldproblems) and I can’t know how people having slow internet connection feel on my website?

Click on device icon and you will see a bar on top which gives an opportunity to throttle the network speed.

Let’s move to advanced part now.

Anything wrong? missed? Let’s fix it.