NOTE: This post will receive updates over time each time I come up with something new 😊

In this post I will give you a couple of tricks that I use more or less on daily basis. Hopefully, these will be something you would never think of. All of them are actually usefull and worth giving a try. All of them are framework-agnostic - just pure html, JS and CSS - so that you can easily apply it into your workflow.

1. Investigating weird overflows with outline

Ever had a weird horizontal scroll on your website and couldn't locate the problematic element. Try applying outline to every element. This will make it easier to notice which one intersects with viewport verticall. You can also us it to figure out other problematic overflows.

* {
    outline: 1px solid red;
}

I wish modern browsers would introduce something like that in their's debugging devtools, but so far we don't have it any. Bummer.

2. Testing the site at low bandwidth

Maybe there is a kid in Nigeria wanting to look up your 30MB portfolio site? He might be a prince giving out their wealth to strangers online. In that case you want his experience to be butter-smooth so he can scrap your contact of the site ASAP. But you live in, say, Sweden and have 1Tb/s bandwidth network, so how can you relate to someone surfing interwebs on 2/3G? There is a devtools feature that addresses exactly our problem.

Most modern browser's devtools provide a way to simulate yor network bandwidth to a given value. On the following screenshoot you can see where to find option to throttle the bandwidth.

3. Debugging iPhone using desktop devtools

You can debug your site straight from mobile phone just like you would do if it was being renedered on your desktop. That includes looking up DOM, network connection, console or setting up breakpoints. This can be super useful once you stumble uppon a bug that is only reproducable on mobile environments. There is some prerequirements though - that have to be iphone and Macbook and both have to be running Safari.

Here is how to successfully debug your iPhone on Mac's Safari:

1. (Optional) Enable developer features on Mac's Safari (Safari -> Settings -> Advanced -> Show features for web developers)
2. Connect your iPhone to Mac through USB. Tip: Mind the cable, if it doesn't support data transfer your Mac will not recognize the phone.
3. (Optional) Entrust Mac on your phone if prompted.
4. On desktop Safari go to *Develop -> [Your phone identifier] -> Safari -> [Click on particular website]

Now you can investigate what's going on your device using desktop inspector. Sweet.

4. Inserting code on at the time of execuction

You probably know that devtools let you set up breakpoints, but did you know you can inject javascript code on the fly?

All you need to do is to break code execution and insert code in the console.

5. Quick file look-up in devtools

If you'd like to move to a certain file inside devtools you can quickly do so using CMD/Ctrl + P. Then, simply write your file name.

6. (To be continued)

Once I come up with more.

About this post

I hope you're going to like this little series of quick and easy-to-digest hints. Certainly, I already do, so stay tuned for more!