This document will discuss the Developer Tools, what they are, and how to use portions of them to troubleshoot web based issues. This document is only going to provide an introduction to the Developer Tools and how some of it's features can help with troubleshooting Ivanti Products but the tools have a lot more capability than what is covered here. As with any tool the more practice you get the easier and more profitable the tool becomes.
Note: The available options and where they are located may vary depending on the version of the Browser and the Tools in use. For the most current information please reference the additional information link at the bottom of this article.
Launching the Developer Tools
There are several ways to launch the Developer Tools:
- To launch the Developer Tools (in most browsers) press F12 in one of the tabs.
- Keyboard. Ctrl + Shift + I, except
- Internet Explorer. F12
- Mac OS X. ⌘ + ⌥ + I
- Menu bar.
- Firefox. Menu ➤ ➤ Toggle Tools, or Tools ➤ Web Developer ➤ Toggle Tools
- Chrome. View ➤ Developer ➤ Developer Tools
- Safari. Develop ➤ Show Web Inspector. If you can't see the Develop menu, go to Safari ➤ Preferences ➤ Advanced, and check the Show Develop menu in menu barcheckbox.
- Opera. Developer ➤ Web Inspector
You can change the location of the tools. Some find it easier to read the tools at the bottom of the page. Click on the Main Menu (3 dots in the upper right corner) and you will have options on where to locate the tools.
You also have the option to undock the devtools.
1- Open the Main Menu (3 dots in the upper right corner)
2- Select "Undock into separate window" which is the first icon below the Main Menu in the screen shot above.
There is also an option "Console Drawer" that displays the console window all the time. The console windows will always be on top allowing it to display on every tab. This can help with finding errors.
Changing the Theme to Dark
1- Open the Main Menu
2- Select Settings
3- You'll see a "Theme" option as shown in the screen shot below
These are just some of the options available that most users like. For many more settings explore or reference the Additional Information section at the bottom of this article.
What is the Network Tab used for?
Depending on the circumstances the network tab can be extremely helpful. This tab has the ability to capture web information as it's passed between the browser and the web server or application. You can see content, the type of request, errors, and much more.
Status Errors and Their Meaning
Status codes are results that are sent back with each GET, POST, etc command in the browser. These codes have different meaning and may be client or server specific. For example codes with a 200 response are normal but anything else would be an error. See the link below for a complete listing of codes. These codes will help with narrowing down the cause of any problems the browser experiences.
Working with HAR Files
Exporting Network Information
The Network Tab information can be exported and then imported into another browser instance or sent to support.
- Open the Network Tab and make sure the red button is on. This indicates that it's recording.
- Duplicate whatever problem you are experiencing.
- Network information should appear in the Window below
- In the Network Windows press Control + A. This should highlight all of the entries in the Network View.
- Right-click one of the entries and select "Save as HAR with content" as shown in the screen shot below. Send this information to support.
Importing Network Information
Importing a Network Capture is as easy as dragging and dropping the HAR file into the Network View.
The Network Tab can also be helpful in analyzing performance information. The Developer Tools has a much more detailed Performance Tab however that tab can be confusing to those who are not web developers. In the image below the mouse is hovering over the bars on the "photo.jpg" line and displays performance statistics for each piece of the process.
What is the Console Tab used for?
The console is a general log of sorts for the web page. Error messages from the browser will show up here along with any other messages. Some of these errors will not display on the page of course. There are many ways to use this tab in Web Development but for general troubleshooting you'll want to reproduce the problem and then look for error in the Console. You can also (like the Network Tab) save the messages to send to support.
Clearing the Console History
There are several ways of accomplishing this:
- Right-click in the Console and press "Clear console"
- Type clear() in the Console
- Type Control + L
Saving the Console History
- Right-click in the console and select "Save As"
Filtering the Console
- Use the drop down menu to filter
Additional Information and Resources
Note: Most developer tools seem to look similar and function relatively the same but there are differences. Below are online guides for several developer tools.