DevTools
Developer tools (or simply DevTools) are debugging tools inside browsers that allows users and developers to gather as much information possible to help debug applications and diagnose errors that may happen.
DevTools are easily accessible on Desktop, following will include steps for Microsoft Edge. Each browser has its own way to enable it, google is your friend 😉.
On mobile devices it's way more complicated, but if you got the courage that's still possible 💪.
How to view console errors
- Open DevTools by pressing F12 (or Fn+F12 if it doesn't work)
- Open the "Console" tab
- Errors should be highlighted in red, don't forget to click on the arrow in the top-left corner to show the complete error stacktrace.
Here's what it would look like on Edge, other browsers may have a similar layout.
How to view network requests
- Open DevTools by pressing F12 (or Fn+F12 if it doesn't work)
- Select the "Network" tab
- Adjust filters to improve visibility
Here's what it would look like on Edge, other browsers may have a similar layout.
When clicking on a row, it will display some more information on the request.
To include the maximum amount of information in your report you can include a screenshot of the headers and payload* tab.
*The payload tab may not be visible, that means we don't need it