Sorry about the red box, but we really need you to update your browser. Read this excellent article if you're wondering why we are no longer supporting this browser version. Go to Browse Happy for browser suggestions and how to update.

Getting started with Web
Inspector

Web
Inspector functionality is made available using a client-server
architecture. On the device (or simulator), 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 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

To connect to a
device, verify that your computer is connected to your BlackBerry device via a USB connection, or is communicating on
the same Wi-Fi network as the BlackBerry device.

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

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

On your
computer, open Google
Chrome.

In the address
bar, type the IP address of the BlackBerry device or simulator, 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. Typically, port numbers are assigned starting at 1337,
and increase sequentially for each additional WebWorks app or browser tab that
you choose to inspect. 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.

Click any of the
available links to view the content in Web
Inspector.

Finding the IP address used to connect to the BlackBerry device

On a BlackBerry 10 device:

On the home screen, swipe down from the top of the screen
or find the Settings app on your home screen.

Navigate to Settings > About.

In the Category
drop-down list, click Network.

Under the Wi-Fi
heading, note the value under IPv4.
This is the IP address you should be supplying when setting up the device as
a test target.

To view the Wi-Fi section on the Network Settings page, you
must have Wi-Fi turned on, and the device must be connected
to the Wi-Fi network.

On the BlackBerry 10 Device Simulator:

Start the BlackBerry 10 Device Simulator.

In the lower-left corner of the simulator window, note the
IP address:

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 at the
top of the Web
Inspector window.

Web
Inspector includes the
following panels:

Panel

Icon

Description

Elements

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

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

Network

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

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

Timeline

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

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

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

Console

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

Last modified: 2014-10-09

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