Basic analysis and debugging with Chrome DevTools

A very basic understanding of Chrome DevTools will already help you to resolve issues quicker.

How to open DevTools

  1. Open Chrome.
  2. Hit F12 or Control+Shift+I (Command+Shift+I on Mac) to open the 'DevTools' pane.
  3. Reload or navigate to the page you want to analyze / debug.

Console tab

In the DevTools pane, there is a tab called 'Console'. Take a look in the console to see if there are errors on the page. You may encounter errors like these:

  • 'Uncaught TypeError: ... is not a function'
  • 'Mixed Content: 'The page at ... was loaded over HTTPS, but requested an insecure ... This content should also be served over HTTPS.
  • 'GET http://...... NET::ERR_ABORTED 404 (NOT FOUND)'

Console errors should be prevented. They could explain why for example the layout is distorted, the editor doesn't load, a save action doesn't respond, etc. If you encounter an error, but you don't know how to solve it, make sure you copy the error or make a screenshot. Developers love to see bug reports that contain an error message, as it helps them to resolve issues more quickly.

Example errors in Chrome DevTools

Network tab

This tab lists the requests that have been made. Use this tab if you want to find out how quickly a page loads, for example. You can also use it to see which assets are cached and how big the assets are (tip, sort on Size).

In the screenshot below, you see that the HTML of the page was returned very quickly, it only took 86ms. This is because Full Page Caching is enabled for that page. You can also see that various assets are loaded "from memory", that means they are in the browser cache. It currently shows "All" requests, but you can filter it to e.g. only "XHR" (AJAX calls), or "JS" (JavaScript). If you want to keep the log of requests while navigating through your site, make sure the "Preserve log" checkbox is checked.

Chrome DevTools

Further reading