top

Web Inspector

The Tizen Studio TV Extension provides the Web Inspector as a debugging tool. This topic describes how to use the Web Inspector to test applications running on the simulator, emulator, or a target device.

The Web Inspector helps you to debug and optimize your Web Applications. It provides a debugging environment, where you can pause JavaScript execution and observe the values of variables as they are defined. It also allows you to inspect the CSS and layout of HTML pages.

The Web Inspector is based on the Webkit Web Inspector and the Google Chrome™ Developer Tools.

Figure 1. Web Inspector

Figure 1. Web Inspector

Using the Web Inspector

You can use the Web Inspector to debug applications running on the simulator, the emulator, or a target device.

TV Simulator

To launch the Web Inspector with the simulator, right-click the simulator and select “Web Inspector”.

Figure 2. Launch Web Inspector with the simulator

Figure 2. Launch Web Inspector with the simulator

TV Emulator

The Google Chrome™ Web browser is required to use the Web Inspector with the TV emulator. Before using the Web Inspector, you must first configure the Tizen Studio settings:

  1. In the Tizen Studio menu, select “Window > Preferences > Tizen Studio > Web > Chrome”.

    Figure 3. Tizen Studio preferences

    Figure 3. Tizen Studio preferences

  2. In the “Location” field, enter the path to your Google Chrome™ browser installation. The Tizen Studio automatically detects your installation, but if you have installed the browser in a custom location, you must set the location manually.

  3. In the “Extra parameters” field, enter the following parameters:

    --no-first-run --activate-on-launch --no-default-browser-check --allow-file-access-from-files --disable-web-security --disable-translate --proxy-auto-detect --proxy-bypass-list=127.0.0.1
    

    The extra parameters are needed for the application to work properly.

To debug an application on the emulator using the Web Inspector:

  1. Make sure that you have already created a certificate profile.

  2. Launch the emulator from the Emulator Manager.
    When the emulator has successfully booted, it appears in the “Connection Explorer” view in the Tizen Studio.

  3. In the “Connection Explorer” view, right-click the emulator, and select “Permit to install application”.

  4. To launch the application on the emulator in debug mode, in the “Project Explorer” view, right-click on the project you want to debug and select “Debug As > Tizen Web Application”.

    Figure 4. Launch application in debug mode

    Figure 4. Launch application in debug mode

Note

Because the application launches before the Web Inspector does, you cannot check the JavaScript console log at the point of application initialization.

Figure 5. Emulator with Web Inspector

Figure 5. Emulator with Web Inspector

  1. To use breakpoints, enable debugging in the Web Inspector options.

    Figure 6. Enable debugging

    Figure 6. Enable debugging

  2. To end the debugging session, simply close the Web Inspector window.

Note

If Rapid Development Support (RDS) is enabled, and you have made changes in the application source code since the last time it was run, launching in debug mode can fail.
To disable RDS, in the Tizen Studio menu, select “Window > Preferences > Tizen Studio > Rapid Development Support”, and clear the “Enable rapid development mode” check box.

TV Device

To use the Web Inspector remotely with a TV:

  1. Connect the TV to the Tizen Studio as a remote device.
  2. Deploy the application in debug mode by right-clicking the project in the Tizen Studio “Project Explorer” view, and selecting “Debug As > Tizen Web Application”.
  3. On the TV, launch the application you want to test.
  4. On your computer, launch the Google Chrome™ or Safari browser, and use the browser address bar to connect to your TV’s IP on port 7011.
    Figure 7. Connect to the TV

    Figure 7. Connect to the TV


    The “Inspectable web views” page is shown in the browser. If you see a “None found” message, refresh your browser window.
    Figure 8. No inspectable Web views found

    Figure 8. No inspectable Web views found

  5. Click the page you want to inspect.
    You can now use the Web Inspector features to test your Web application.
    Figure 9. Web Inspector in browser

    Figure 9. Web Inspector in browser

If you want to inspect the launch process of your application, open the test page before launching the application on the TV:

  1. On the “Inspectable web views” page, click “Test Page”.
    The test page is an empty page that waits for the next executable Web application.
    Figure 10. Empty test page

    Figure 10. Empty test page

  2. On the TV, launch the application you want to test.

If you see a “Detached from the target” message in your browser, click “Back” and then “Refresh” to reload the page.

Figure 11. Web Inspector detached from the target

Figure 11. Web Inspector detached from the target

Web Inspector Features

The Web Inspector has multiple tabs with a variety of features.

General Features

The Web Inspector has the following tabs:

  • Elements
    The “Elements” tab allows you to see the Web page components (the DOM tree, CSS style, and Document Object Model).

    Figure 12. "Elements" tab

    Figure 12. “Elements” tab

  • Resources
    The “Resources” tab allows you to inspect resources. You can interact with frames containing resources, such as HTML, JavaScript, CSS, images, and fonts. You can also inspect WebSQL and HTML5 databases, local storage, cookies, and application cache.

    Figure 13. "Resources" tab

    Figure 13. “Resources” tab

  • Network
    The “Network” tab allows you to inspect resources downloaded over the network. You can also inspect the HTTP header, response, cookies, and preview.

    Figure 14. "Network" tab

    Figure 14. “Network” tab

  • Sources
    The “Sources” tab allows you to inspect the JavaScript source page. You can debug your JavaScript code. This tab supports watch expressions, callstack, scope variables, and break point operation. In addition, it supports basic debugging operations: continue, step over, step into, and step out.

    Figure 15. "Sources" tab

    Figure 15. “Sources” tab

  • Timeline
    The “Timeline” tab allows you to perform advanced timing and speed analysis. You can see how long the browser takes to handle DOM events, and render and paint windows.

    Figure 16. "Timeline" tab

    Figure 16. “Timeline” tab

  • Profiles
    The “Profiles” tab allows you to inspect the JavaScript performance analyses. You can inspect CPU profiles or CSS Select profiles.

    Figure 17. "Profiles" tab

    Figure 17. “Profiles” tab

  • Audits
    The “Audits” tab allows you to analyse a page as it loads and provide suggestions and optimizations for decreasing load time and increase perceived (or real) responsiveness.

    Figure 18. "Audits" tab

    Figure 18. “Audits” tab

  • Console
    The “Console” tab allows you to inspect the JavaScript console operation. You can interact with your page programmatically. Any errors or warnings on your page are shown in the console.

    Figure 19. "Console" tab

    Figure 19. “Console” tab

Web Engine Development Features

The following Web Inspector tabs support Web engine development:

  • Memory Observer
    The “Memory Observer” tab allows you to measure the Web engine memory usage in real time. You can also view the SMAPS statistics for specific processes.

    Figure 20. Memory measurement

    Figure 20. Memory measurement


    Figure 21. SMAPS statistics

    Figure 21. SMAPS statistics

  • Log Monitor
    The “Log Monitor” tab allows you to view all hooked logs from the Web engine. You can use filters to show only the logs you want to view.

    Figure 22. Log monitor

    Figure 22. Log monitor

  • Rendering Debug
    The “Rendering Debug” tab allows you to monitor, control, and capture the Smart TV’s graphic rendering, such as painting and compositing. You can also monitor the frame rate in real time.

    Figure 23. Frame rate monitor

    Figure 23. Frame rate monitor


    Figure 24. Scene capture

    Figure 24. Scene capture

  • Layer Tree
    The “Layer Tree” tab allows you to view detailed information about the Render Tree and Layer Tree of the current page.

    Figure 25. Render tree

    Figure 25. Render tree


    Figure 26. Layer tree

    Figure 26. Layer tree

Web Inspector Settings

You can access the internal Web Inspector settings panel and a list of available keyboard shortcuts by clicking the settings icon in the bottom-right corner of the Web Inspector window.

FIgure 27. General settings panel

FIgure 27. General settings panel

Known Issues

The Web Inspector has the following known issue:

  • When debugging remotely on a TV using the Web Inspector, closing the application does not terminate the application process but sends it to the background. To relaunch an application, reboot the TV.