This document includes a step by step guide on how to access and use the Web Developer Tools for Chrome, Firefox, Microsoft Edge and Internet Explorer. Please note that Chrome is the preferred browser of choice when accessing the platform / gathering data with the Web Developer Tools.
Chrome
The Web Developer Tool can be accessed three ways:
1. Clicking the 3 dots in the top right corner of the browser, go into More Tools and the clicking the option for Developer Tools.
2. Pressing the F12 key on your keyboard
3. Pressing Control (ctrl) + Shift + I (the letter i).
When you have opened up the Developer Tools, click the Network Tab to have this be the main display of the Developer Tool.
The Network Tab will show all the function calls that are done to load in the web page / the data being loading / any errors / how long functions take to complete. Below are two examples of what loading times appear as and what an error will appear as.
NOTE: The Down facing arrow with the line underneath it is the .har file download option
FireFox
The Web Developer Tool can be accessed three ways:
1. Clicking the 3 lines in the top right corner of the browser, go into Web Developer and then click the option for Network.
2. Pressing the F12 key on your keyboard
3. Pressing Control (ctrl) + Shift + E (the letter e).
When you have opened up the Developer Tools, click the Network Tab to have this be the main display of the Developer Tool.
The Network Tab will show all the function calls that are done to load in the web page / the data being loading / any errors / how long functions take to complete. Below are two examples of what loading times appear as and what an error will appear as.
Microsoft Edge
The Web Developer Tool can be accessed three ways:
1. Clicking the 3 dots in the top right corner of the browser, go into More Tools and the clicking the option for Developer Tools.
2. Pressing the F12 key on your keyboard
3. Pressing Control (ctrl) + Shift + I (the letter i).
When you have opened up the Developer Tools, click the Network Tab to have this be the main display of the Developer Tool.
The Network Tab will show all the function calls that are done to load in the web page / the data being loading / any errors / how long functions take to complete. Below are two examples of what loading times appear as and what an error will appear as.
Comments
0 comments
Article is closed for comments.