• Google Chrome™ Developer Tools

• Webkit Web Inspector Wiki

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. 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 devices based on Tizen support the Web Inspector. It is also fully supported on the TV emulator since Tizen TV Extension 2.1.2.

Note

Web Inspector measurements can differ between the TV emulator and an actual Samsung TV.

Because the application launches before the Web Inspector does, you cannot use the Web Inspector to check any performance issues, such as memory usage, at the point of application initialization.

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

TV Emulator or Device

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

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 or device using the Web Inspector:

1. Launch the emulator from the Emulator Manager, or connect the device.

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

3. In the Tizen Studio Device Manager, right-click the emulator or device, and select "Permit to install application".

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

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

   Figure 5. Emulator with Web Inspector

5. 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

Known Issues

The Web Inspector has the following known issue:

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