Using Developer Tools in your browser to troubleshoot issues

Developer tools can be a great tool when troubleshooting an issue with your website.


Let’s start with how to open dev tools in common browsers:

Chrome:
Load the website you are testing in your browser
Hit F12 on your keyboard to open Dev tools
(or image image image )

Firefox:
Load the website you are testing in your browser
Hit Ctrl+Shift+K on your keyboard to open Dev tools (Cmd+Shift+K on a mac)
(or image image image )

MVPs/Regulars - Please add other browsers to this list!


Once in developer tools, there are various common uses (way more than I can list here!:

Checking that your connection is going through Cloudflare:
Sometimes, DNS values can be cached locally so if you enable Cloudflare on your site, there may be a delay before you see the changes - such as the Cloudflare SSL certificate.
You can check this in the ‘Network’ tab of your dev tools:
Open dev tools as above
Select the network tab
Hit Ctrl+R or click image to refresh the page
Click the main URL of your site in the dev tools
Firefox:


Chrome: image
You will then see various pieces of useful information about the request, including the IP address (which you can then check whether it is a Cloudflare IP or that of your server), the status code received and under ‘Response Headers’ you will see ‘server’
This should show as image /image if your connection is going through Cloudflare.

Checking the response code of your request
You can check this in the ‘Network’ tab of your dev tools:
Open dev tools as above
Select the network tab
Hit Ctrl+R or click image to refresh the page
You can then see the status codes of your main page and any resources loaded in the left column in Firefox or the second column in Chrome - shown as 200 in the screenshots here
Firefox:


Chrome: image

MVPs/Regulars - Please add other uses to this list!

4 Likes