When reporting a possible bug in the Prevalent system, our Support team will sometimes request that you submit a video recording of your experience with Developer Tools open. When this recording is attached to your Support Ticket with the accompanying .har file, our internal teams will be equipped to appropriately investigate your issue.
This article is a step by step guide on how to access and use the Web Developer Tools for Chrome, Firefox, and Microsoft Edge web browsers. We also provide steps for navigating Dev Tools and how to download the .har file.
This article is a step by step guide on how to access and use the Web Developer Tools for Chrome, Firefox, and Microsoft Edge web browsers. We also provide steps for navigating Dev Tools and how to download the .har file.
Please note that Chrome is the optimal choice for accessing the platform and gathering data with Web Developer Tools.
- Chrome
- Firefox
- Microsoft Edge
1. Chrome (recommended)
1.1 The Web Developer Tool can be accessed in three ways, review Step 1.2 — Step 1.5
1.2 Press the F12 KEY on your keyboard to open Web Developer Tools
1.3 Press CONTROL (ctrl) + SHIFT + I (letter i) to open Web Developer Tools
1.4 Click the 3 DOTS in the top right corner of the browser
1.5 Hover cursor over MORE TOOLS and click DEVELOPER TOOLS
1.3 Press CONTROL (ctrl) + SHIFT + I (letter i) to open Web Developer Tools
1.4 Click the 3 DOTS in the top right corner of the browser
1.5 Hover cursor over MORE TOOLS and click DEVELOPER TOOLS
1.6 If not already on Network, click the NETWORK tab
TIP: you may want to drag the panel to expand it for easy navigation
TIP: you may want to drag the panel to expand it for easy navigation
1.7 Network Tab displays all function calls that are done to load in the web page / the data being loaded / any errors / how long functions take to complete
1.8 The Time Column displays the loading times for the functions listed in the Name column
1.9 An error will appear in red text across the Name, Status, Type, Initiator, Size, Time columns
1.11 Click the DOWNLOAD ARROW ICON to export the .har file and save it to your system
2. Firefox
2.1 The Web Developer Tool can be accessed in three ways, review Step 2.2 — Step 2.6
2.2 Press the F12 KEY on your keyboard to open Web Developer Tools
2.3 Press CONTROL (ctrl) + SHIFT + E to open Web Developer Tools on Network Tab
2.4 Click the HAMBURGER ICON in the top right corner of the browser
2.5 Click MORE TOOLS
2.6 Click DEVELOPER TOOLS
2.3 Press CONTROL (ctrl) + SHIFT + E to open Web Developer Tools on Network Tab
2.4 Click the HAMBURGER ICON in the top right corner of the browser
2.5 Click MORE TOOLS
2.6 Click DEVELOPER TOOLS
2.7 If not already on Network, click the NETWORK tab
TIP: you may want to drag the panel to expand it for easy navigation
TIP: you may want to drag the panel to expand it for easy navigation
2.8 Network Tab displays all function calls that are done to load in the web page / the data being loaded / any errors / how long functions take to complete
2.9 The 0 ms columns display the loading times for the functions listed in the Status column
2.10 An error will appear in red text across the Status, Method, Domain, File, Initiator, Type, Transferred, Size and 0 ms columns
2.11 After you've recorded yourself navigating the platform and completing the replication steps, please download the .har file
2.12 Right click anywhere under the File column, click SAVE ALL AS HAR and save it to your system
2.12 Right click anywhere under the File column, click SAVE ALL AS HAR and save it to your system
3. Microsoft Edge
3.1 The Web Developer Tool can be accessed in three ways, review Step 3.2 — Step 3.5
3.2 Press the F12 KEY on your keyboard to open Web Developer Tools
3.3 Press CONTROL (ctrl) + SHIFT + I (letter i) to open Web Developer Tools
3.4 Click the 3 DOTS in the top right corner of the browser
3.5 Hover cursor over MORE TOOLS and click DEVELOPER TOOLS
3.3 Press CONTROL (ctrl) + SHIFT + I (letter i) to open Web Developer Tools
3.4 Click the 3 DOTS in the top right corner of the browser
3.5 Hover cursor over MORE TOOLS and click DEVELOPER TOOLS
3.6 If not already on Network, click the NETWORK tab
3.7 Network Tab displays all function calls that are done to load in the web page / the data being loaded / any errors / how long functions take to complete
3.8 The 0 ms column displays the loading times for the functions listed in the Result column
3.9 After you've recorded yourself navigating the platform and completing the replication steps, please download the .har file
3.10 Click the DOWNLOAD ARROW ICON to export the .har file and save it to your system
3.10 Click the DOWNLOAD ARROW ICON to export the .har file and save it to your system
Comments
0 comments
Article is closed for comments.