DevTools tips — day 19: drawer tips
part of the “Advent calendar for front-end developers” series
Over the 24 days leading to the holidays I am publishing short articles with tips on how to use DevTools in more performant and fun way. Yesterday we’ve started looking into the drawer, today see a couple of interesting tools hidden in there.
52. Control the sensors
If you are using a geolocation API in your application and want to test it, you probably wouldn’t want to drive around all over the world just to do that (there are far better reasons to travel 😉).
Sensors panel located in the Drawer lets you emulate a specific location. You can choose from the predefined places, add your own, or just type latitude/longitude by hand. The selected values will be the ones that navigator.geolocation.watchPosition (or .getCurrentPosition) will report.
If your app uses accelerometer, the Sensors panel allows to emulate the position of your device in 3D space too!
53. Simulate network conditions
Just as with faking your location you can use the Network conditions drawer panel to simulate a specific network behaviour: pretend the internet is a typical 3G network or even offline! That should help appreciate the size of your page’s assets.
Or test the offline capabilities of an app.
The Network conditions panel has also a possibility to impersonate a specific user agent.
54. Have the source by hand
In a similar way to how it’s useful to peek into Console while simultaneously having a different panel opened, I sometimes want to see my source code when e.g. I’m mainly focusing on the Elements panel. And just as with the drawer console, you can show Sources in the drawer.
As you can notice it doesn’t have all the bells and whistles of the “main” Sources panel, e.g. there is no call stack or control (pause, step over, etc.) buttons. And if the breakpoint will be triggered it won’t be shown in the drawer’s Quick sources but in the main Sources.
But it’s still useful to have that quick look at the code and for setting up breakpoints.
If you like this article series, please:
→ clap 👏 button below️ so more people can see this
→ follow me on Twitter (@sulco) so you won’t miss future posts:
Also, the 20th day is already published, read it here:
