[Youtube Video] Debugging a Samsung Smart TV Application: Elements and Resources Panels

Debugging is an essential part of Samsung Smart TV application development, and the SDK provides a rich set of tools to help you identify and fix issues efficiently. This tutorial walks through the debugging workflow using Samsung Smart TV SDK version 5.1, focusing on the Elements panel and the Resources panel inside the Chrome-based debugger.

Setting Up the Debugging Session

Before you can debug, a few prerequisites need to be in place. First, confirm that the Chrome browser path is configured correctly in the SDK under Windows > Preferences > Samsung Smart TV SDK. Next, manually start the VirtualBox web server from the Run menu — while it sometimes starts automatically, starting it manually avoids connection issues. Once both are ready, right-click your project in the Project Explorer, choose Debug As > Samsung Smart TV Emulator, and the SDK will launch the emulator alongside a Chrome debugging window automatically.

Navigating the Debugger Interface

The Chrome debugging window will be familiar to anyone who has used browser developer tools. The top bar contains tabs for Elements, Resources, Network, Sources, Timeline, Profiles, Audits, and Console. This part-one tutorial covers Elements and Resources in detail; the remaining tabs will be covered in part two.

Using the Elements Panel

The Elements panel shows the live HTML that is rendered in the emulator, along with its associated styles. You navigate between elements with the up and down arrow keys and expand or collapse nodes with the left and right arrow keys. Selecting any element immediately shows its CSS rules in the Styles pane on the right.

A key time-saving feature is inline style editing. Instead of modifying a stylesheet, saving the file, and relaunching the emulator to see the result, you can edit styles directly in the panel and see the change reflected in the emulator instantly. Common edits include changing colors, adjusting positioning with pixel values, and toggling individual style rules on and off with a checkbox. Note that these edits are temporary — refreshing the app resets everything to the original source — so once you find a style that works, copy it back into your actual stylesheet.

You can also edit HTML attributes directly in the Elements panel by right-clicking an element and choosing Edit Attribute, though these changes are equally temporary.

Using the Resources Panel

The Resources panel gives you a view into the data stores your application uses. The tutorial demonstrates the Local Storage section, showing how values written to localStorage during app initialization appear here for inspection. Values are editable by double-clicking, and new key-value pairs can be added directly in the panel. Unlike the Elements panel, local storage changes made here persist across app refreshes until the storage is programmatically cleared or times out.

The panel also surfaces Session Storage, Cookies, Application Cache, and WebSQL/IndexedDB. A notable difference between storage types:

• Local Storage — persists until explicitly cleared; stores key-value pairs up to several megabytes
• Session Storage — cleared when the session ends; same key-value API as local storage
• Cookies — limited to 4 KB; useful for small pieces of data
• IndexedDB — stores complex JavaScript objects and JSON; replaces the deprecated WebSQL

What Comes Next

Part two of this series covers the Network, Sources, and Console panels — including how to set breakpoints, step through code, and use the console as a live scratch pad for testing JavaScript expressions. Watch the full video to see every technique demonstrated step by step inside a real Samsung Smart TV project.