Getting started with Web Inspector

Web Inspector functionality is made available using a client-server architecture. On the device, the BlackBerry WebWorks app or BlackBerry Browser acts as a web server and serves the webpage over HTTP over a USB or Wi-Fi connection. Using the Google Chrome or Safari browser on your desktop, you can navigate to the IP address and port number used by the server app and begin inspecting the code.

Launch Web Inspector to remotely inspect and modify content

  • Verify that your computer is connected to your computer via a USB connection, or is communicating on the same Wi-Fi network as the BlackBerry smartphone or BlackBerry tablet.

    Note that Web Inspector only provides a USB IP address (required if you intend to use Web Inspector over a USB connection) if your device is already connected via a USB connection when Web Inspector is enabled.

  • Verify that your computer has the Google Chrome or Safari desktop browser installed.
  • Verify that development mode is enabled on your device.

Once you have enabled Web Inspector in your BlackBerry WebWorks app or in the BlackBerry Browser, you can remotely connect to your BlackBerry smartphone or BlackBerry tablet to inspect and modify the content.

  1. On your computer, open Google Chrome or Safari.
  2. In the address bar, type the IP address of the BlackBerry smartphone or BlackBerry tablet, and specify the port number used by the app serving the content. The port number is displayed when you open a BlackBerry WebWorks app that is Web Inspector enabled, or when you first enable Web Inspector in the BlackBerry Browser. For example:
    http://<IP_address>:<port_number>
    A list of one or more links is displayed in your browser, representing the webpage currently displayed in each of the tabs open in the BlackBerry Browser.
  3. Click on any of the available links to view the content in Web Inspector.

Finding the IP address used to connect to the BlackBerry device

  • If you are running a BlackBerry WebWorks app, the app displays the IP address when it is launched. To view the IP address, close the app, then restart it.

Web Inspector panels

Web Inspector contains a number of panels, each of which provides different functionality that you can use to help you to improve the appearance and performance of your webpage. You can display a panel by clicking the icons in the toolbar that is located at the top of the Web Inspector window.

Web Inspector includes the following panels:

Panel

Icon

Description

Elements

Elements Icon

The Elements panel allows you to inspect the DOM of the current webpage or your BlackBerry WebWorks app, and adjust settings for attributes and CSS properties. Changes you make are reflected in the content.

Resources

Resources Icon

The Resources panel displays information about all the resources that are used by the current webpage or in your BlackBerry WebWorks app.

Network

Network Icon

The Network panel displays information about each HTTP request made as resources are requested, received, and displayed in the BlackBerry Browser or in your BlackBerry WebWorks app.

Sources

Sources Icon

The Sources panel allows you to debug JavaScript code. You can set breakpoints and step through your code to locate and correct issues.

Timeline

Timeline Icon

The Timeline panel allows you to view how much time it takes for the browser to load and render the webpage and its resources.

Profiles

Profiles Icon

The Profiles panel allows you to examine how your JavaScript code is utilizing memory. With the Profiles panel, you can determine where programmatic inefficiencies exist.

Audits

Audits Icon

The Audits panel allows you to examine the network utilization and webpage performance and suggests areas where performance can be improved.

Console

Console Icon

The Console panel provides a command-line driven utility that allows you to debug JavaScript errors or HTML parsing errors.

Last modified: 2014-05-14



Got questions about leaving a comment? Get answers from our Disqus FAQ.

comments powered by Disqus