GUIDE

GUIDE


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 or a target device.

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

To debug application using Web Instpector, need to apply RWI Settings on target LFD.

The Web Inspector Features are organized in various tabs.
The Web Inspector is based on the Webkit Web Inspector and the Google Chrome™ Developer Tools.

All Samsung Singnages since 2016 support the Web Inspector.


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 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 Simulator / Device

The Google Chrome™ Web browser is required to use the Web Inspector. 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 device using the Web Inspector:

  1. Connect the device.
  2. Make sure that you have already created a certificate profile.
  3. In the Tizen Studio Device Manager, scan the device, and select for remote debugging.
  4. To launch the application 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


    After the application is installed, it is executed and the Web Inspector is displayed automatically.


Figure 5. Emulator with Web Inspector

Figure 5. Emulator with Web Inspector


  1. To end the debugging session, close the Web Inspector window.
Note

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

If you want to inspect the launch process of your application, in the Web Inspector, press F5 to reload the application.

Web Inspector Settings

You can access the internal Web Inspector settings panel and a list of available keyboard shortcuts by clicking the 3 dots icon in the top-right corner of the Web Inspector window, and selecting "Settings".

FIgure 6. General settings panel

FIgure 6. General settings panel


Known Issues

The Web Inspector has the following known issue:

  • When debugging remotely on a Signage 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 Signage.

enter image description here.png "Emulator with Web Inspector"


위로가기