Introduction
This document will discuss the Chrome 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 Chrome 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 Chrome and the Tools in use. For the most current information please reference the additional information link at the bottom of this article.
Launching the Chrome Developer Tools
- To launch the Chrome Developer Tools press F12 in one of the tabs in Chrome.
Interface Options
Docking
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.
Console Drawer
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.
Network Tab
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.
List of IIS Status Codes and their Meaning
Working with HAR Files
HAR files are the file type when you export Network information. The file itself appears to be JSON (Javascript Object Notation) in format. HAR files make it possible to move recorded Network information between browsers or other applications.
Exporting Network Information
The Network Tab information can be exported and then imported into another Chrome 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.
Performance Data
The Network Tab can also be helpful in analyzing performance information. The Chrome 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.
Console Tab
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