How To: Use the Developer Tools in Chrome, IE, Safari, Opera, and Edge Browsers to Troubleshoot Web Pages, Web Consoles, Web Applications, and Cloud Based Products

Version 3

     

    Introduction

    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

     

    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.

     

    DevTools1.png

     

    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

    DevTools2.png

     

    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 browser instance or sent to support.

     

    1. Open the Network Tab and make sure the red button is on. This indicates that it's recording.
    2. Duplicate whatever problem you are experiencing.
    3. Network information should appear in the Window below
    4. In the Network Windows press Control + A. This should highlight all of the entries in the Network View.
    5. 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.

     

    DevTools3.png

     

    Importing Network Information

     

    Importing a Network Capture is as easy as dragging and dropping the HAR file into the Network View.

     

    DevTools4.png

     

    Performance Data

    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.

     

    DevTools5.png

     

    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"

     

    DevTools6.png

     

    Filtering the Console

     

    • Use the drop down menu to filter

     

    DevTools7.png

     

    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.

     

    Chrome Developer Tools Online Reference

    What are browser developer tools? (Firefox Site)

    Microsoft Edge Developer Tools