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.

  • To connect to a simulator, verify that the simulator is running.
  • Verify that your computer has the Google Chrome desktop browser installed.
  • Verify that development mode is enabled on your device or simulator.

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.

  1. On your computer, open Google Chrome.
  2. 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.
  3. 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:

  1. On the home screen, swipe down from the top of the screen or find the Settings app on your home screen.
  2. Navigate to Settings > About.
  3. In the Category drop-down list, click Network.
  4. 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:

  1. Start the BlackBerry 10 Device Simulator.
  2. In the lower-left corner of the simulator window, note the IP address:This image shows the location of the simulator 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

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-10-09



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

comments powered by Disqus