BROWSER-BASED DEVELOPMENT & NETWORK MONITORING UTILITIES

Transcription

1 BROWSER-BASED DEVELOPMENT & NETWORK MONITORING UTILITIES This document and the information contained herein are the property of L.L.C. and should be considered business sensitive. Copyright 2008 L.L.C. 333 Texas Street Suite 300 Shreveport, LA (318)

2 OBJECTIVE is dedicated to providing our users with the best possible experience when using our suite of products. In an effort to identify and troubleshoot customer issues involving network activity that may be impacting your ServicePoint 5 experience. We have identified some browser-based utilities to assist you in reporting these issues to as they occur. The output data when running these utilities will give us the opportunity to identify potential network/internet connectivity and/or make optimizations to better enhance the user s experience where needed. INTERNET EXPLORER VS. FIREFOX AND CHROME While the latest version of Internet Explorer has an integrated suite of developer tools available within the browser, there is a missing component that specifically handles network monitoring. Because of this, we request that users who are experiencing issues with latency use either Firefox or Chrome along with the utilities specified below. In this document you will find specific instructions on how to activate the utilities for these two browsers in order to capture relevant data, and deliver that data to. If you do not have Firefox or Chrome installed on your machine, you can access the installers by visiting the URLs below: Mozilla Firefox Installer: Google Chrome Installer: BRIEF DESCRIPTION OF BROWSER UTILITIES Firefox & Firebug Firebug is a free add-on that integrates with the Firefox browser. Utilizing Firebug requires that you download and install the browser add-on to Firefox. This tool is used to examine browser content and provide the user with a comprehensive interface to see activity occurring in the background in real-time. Chrome & Developer Tools Chrome has an integrated suite of developer tools built into the browser itself and is included by default upon installation. Chrome s Developer Tools work very similar to Firebug for Firefox, and do not require the user to install an add-on. INSTALLING AND USING FIREBUG FOR FIREFOX Downloading and Installing Add-On

3 1. Within Firefox click the Tools menu at the top of the screen, and select Add-Ons. 2. When the Add-Ons window appears, click the Get Add-Ons icon at the top of the window to access the search bar. (Fig 1.1) Fig Enter Firebug in the search bar and click the magnifying glass icon to search. 4. When the Firebug Add-On appears, click the Add to Firefox button displayed for the search item. (Fig 1.2) Fig Next, the Software Installation window will appear. When the install countdown completes, click the Install Now button to install the Add-On to the browser. Fig When you complete installation, the Add-Ons window will prompt you to restart Firefox so the Add-On is available for use. Click the Restart Firefox button in the dialog to do so. (Fig 1.4)

4 Fig The Firebug Add-On has been successfully installed. Enabling Firebug Add-On 1. You can find the Firebug icon in your Firefox browser s status bar in the lower right-hand corner of the browser screen. To open the Add-On, click the Firebug icon. (Fig 2.1) Fig Once opened, the Firebug module will appear in the lower section of your active Firefox browser. We recommend that you detach Firebug by clicking the Open Firebug in New Window icon located in the top right corner of the Add-On in order to maintain your area of visibility within ServicePoint. (Fig 2.2) Fig The utility opens displaying the HTML tab at default. For the purposes outlined in this document, we are interested in the network activity occurring when in ServicePoint. Click on the Net tab to view network activity for the website displayed in your browser. If you see a message indicating that the Net Panel is disabled, click the arrow icon on the Net tab and choose Enable. (Fig 2.3) Fig 2.3

5 Capturing Data with the Firebug Add-On When the user experiences slow performance or latency while using ServicePoint, we ask that the user activate Firebug immediately and repeat the actions in ServicePoint in order to capture the issue. It is not necessary to run at all times, however, depending on how intermittent the issues may occur -- it may be worthwhile. To capture data, simply ensure that Firebug is activated and resume work in ServicePoint as you would regularly. The Add-On will capture information in real-time as you navigate and perform functions in the ServicePoint Interface. Fig 2.4 below displays the network activity occurring with ServicePoint. The area outlined in blue is the data we are looking for in order to determine where issues with performance and latency are occurring. Please include this entire area in your screenshot. Instructions for taking screenshots can be found below. Fig 2.4 Submitting Captured Firebug Data to Bowman Support Unfortunately, Firebug does not support exporting data it collects into a separate file. To save the results of a capture, you must create a screenshot of the Firebug window. There are several free Add- On utilities available in Firefox to create screenshots, or you can create one using native Windows functionality. Firefox Screenshot add-ons can be found in Mozilla s library. To download and install a screenshot add-on, simply follow the instructions at the top of this document, and search for screenshot in the Add-Ons window. Instructions for employing an alternative to downloading a screenshot add-on in Firefox can be found here: USING DEVELOPER TOOLS FOR CHROME When using the Google Chrome web browser and ServicePoint, there is no need to install an additional Add-On to capture network activity. Google has an integrated suite of developer tools in the default install to assist their users.

6 Accessing Developer Tools within Chrome 1. To access the Developer Tools, click on the Settings icon and go to the Tools section. Click on Developer Tools. (Fig 3.1) Fig 3.1 Configuring Chrome Developer Tools 1. Once you have opened the Developer Tools window, confirm that you are looking at the network related section of the tool by clicking the Network icon at the top of the screen. (Fig 3.2)

7 Fig Take note of the following icons located at the bottom of the tool s console. (Fig 3.3) Fig 3.3 a. Resource Row Control Toggle this setting to reduce or increase the detail captured in each row of the console. We recommend that you use small resource rows. This will make taking screenshots somewhat easier for the user and will allow for more rows to be included in those screenshots. b. Clear Function Clicking this icon will clear the console window of captured data. If you are continuously capturing data, and encounter a performance issue within ServicePoint that you can consistently replicate, we ask that you clear the console window and capture that single event to send to Support. Capturing Data with Chrome Developer Tools We request that you open the console when you encounter instances of performance degradation in an effort to capture the event. If you can consistently replicate the performance issue, open the console to capture the issue as you experience it, and send that information to Bowman for investigation. It is not necessary to have the console running at all times; however this may be necessary depending on how intermittent the performance issues may be. Below is an image (Fig 3.4) of the Google Developer Tools console after capturing data within ServicePoint. Note the area outlined in blue. This is the information we will need to investigate the issue. Your screenshot should include this entire area. Fig 3.4 Capturing Chrome Developer Tool Output Chrome Developer Tools does not have an export feature to save the results to a separate file. To save the results of a capture, you must create a screenshot of the Developer Tool console. Chrome

8 has extensions available to capture screenshots; however we suggest using the native Windows screenshot functionality. This is due to the Developer Tools console opening in a window outside of the main Chrome browser outside of typical extension s capture abilities. Instructions for creating a screenshot using Windows can be found here: USING DEVELOPER TOOLS FOR CHROME Once you have created a screenshot, we ask that you please attach it to the respective case in CollaboranGo along with any other pertinent details regarding the issue such as user ID, exact area where the issue is occurring, and any other details needed for replication (client ID, etc.). If you have any questions regarding any information in this document, please feel free to contact your Bowman CSS representative.

9 2011 L.L.C. All Rights Reserved. ServicePoint and the ServicePoint logo are trademarks of L.L.C. All other brand or product names are trademarks or registered trademarks of their respective holders. 333 Texas Street, Suite 300 Shreveport, LA Toll Free: (888) Direct: (318) Fax: (318)