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
- Open Chrome.
- Hit F12 or Control+Shift+I (Command+Shift+I on Mac) to open the 'DevTools' pane.
- Reload or navigate to the page you want to analyze / debug.
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.
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).
- Official documentation of Chrome DevTools.