top

Remote Web Inspector

Published 2014-10-28 | (Compatible with SDK 5.0,5.1 and 2014 models)

Remote Web Inspector (RWI for short) helps TV Web Application Developers can debug and optimize their Web Applications.

If your PC’s Web Browser follows HTML5 Features, you can access the Your Web Application installed by Samsung TV’s SDK Connection, using your PC’s Browser.

A Remote Web Inspector is allowed to only User Web Application in Smart TV Develop environment. That means Only Develop setting IP is allowed to inspect your User Web Application. If you use Samsung Smart TV SDK, You can download your Web Application in Smart TV by “App sync” function. After then you can inspect to your Web Applications by Remote Web Inspector.

Prerequisites

To use the Remote Web Inspector, you need :

  • Connected your PC and Smart TV to the network.
  • Download and connect to SDK with Smart TV.
  • Open the Web Browser (chrome, safari) on your PC.

Download Smart TV SDK

To set up the environment of Remote Web Inspector, SDK Connection is necessary. You will need to install the Samsung SmartTV SDK. Please refer to these instructions for download and installation.

Connect SDK to Smart TV

Connect TV to PC using Smart Feature Setting. See the below SDK’s Guide page. Specially refer to Login to User App and Install an application.

  1. Login with "develop" ID (password leave blank)
    1. ID : develop
    2. Password : (password leave blank)
  2. Setting the Develop IP
  3. Download your Web Application to Smart TV using “Start User App sync”

Inspect Your Web Application in Smart TV

  1. Execute the Explorer in your PC (Chrome, Safari).
  2. Execute your Web Application in your Smart TV was downloaded by “Start User App sync”. (RWI Supports only your installed App by "Start User App syn")
  3. Insert your SMART TV's IP and Port in URL path. (http://<ip>:<port>) Remote Web Inspector port number is “7011”.

If Remote Web Inspector server is connected with your PC, Your WebBrowser shows the screen & log like above picture. please click to page list.

“page” is dummy page, that means the empty page for next excutable WebApp. So, if you want to inspect whole sequence of your WebApp, click the dummy page, and then Start your User WebApp, that dummy page shows your User App’s information from starting time of your User App.

You can inspect your WebApp.

If Inspectable pages are not loaded, RWI shows the screen & log like above picture. please refresh your WebBrowser.

The page number is variable in realtime, So, If you have seen the like above screen , Go back previous : page and refresh. You need to wait & refresh the page until All pages are loading(dummy page number is stable time).

Feature of Remote Web Inspector

There are several tabs for your development.

Element

Element Tab shows the HTML Structure before any JavaScript is loaded. You can inspect, or locate within the DOM tree, a specific element on the page.

Figure 1: Viewing the Source & DOM.

Editing Nodes To edit the markup of an element, double-click on element name, attribute name or attribute value

Figure 2: Editing Nodes.

Layout the area You can see the element’s area directly by putting cursor on elements.

Figure 3: Layout the area.

Computed styles Tab shows all of CSS styles associated with the selected element.

Figure 4: Computed styles.

Style The style details sidebar shows all of the CSS styles that pertain to the selected element. It also contains a series of checkboxes representing the element's active, focus, hover, and visited pseudo-state. To see every CSS property, click on the Show All checkbox. This shows properties and their default values.

Figure 5: Style sidebar.

Metrics This lets you edit any of the absolute, relative or fixed CSS box model metrics. You’ll see the corresponding areas on the page flash with colour.

Figure 6: Metrics.

Properties You can edit the element's DOM properties.

Figure 7: Properties.

Event Listeners The event listeners shown for the selected node are in the order in which they are fired through the capturing and bubbling phases.

Figure 8: Event Listeners.

Resource

Resource tab lets you inspect resources that are loaded in the inspected page.

Frames This lets you see the resource loaded for the page.

Figure 9: Frames.

SQL Databases If your webpage uses SQL Databases, they appear as an offline resource under Databases in the Resources

Figure 10: SQL Databases.

Cookies If your webpage uses Cookies, they appear as an offline resource in the Resources

Figure 11: Cookies.

Application Cache You can inspect all the current contents of the application cache by clicking Application Cache.

Figure 12: Application Cache.

Network

Network Tab lets you see the inside resources that are requested and downloaded over the network in real time.

Preserving the network log upon navigation This lets you see the resource loaded for the page.

Figure 13: Network Tab.

Timeline view The Timeline view in the Network panel graphs the time it took to load each resource.

Sorting and filtering by the click the tab(size, status, type.. etc) , you can sort and filter the resource list.

Figure 14: Timeline view.

Source

Source Tab lets you debug your JavaScript code inside, but temporary. If loaded page is refreshed, your modification is also refreshed to origin.

Debugging with Breakpoint

Figure 15: Debugging with Breakpoint.

Call Stack The call stack lists the functions that have been called and have not yet finished returning.

Figure 16: Call Stack.

Debugger Controls The call stack lists the functions that have been called and have not yet finished returning

Continue - continues execution until the next breakpoint.

Step over - steps to the next line, without descending into any functions called on the current line.

Step into - steps to the next line, descending into any functions called on the current line first. If there are no function calls on the current line, this button behaves like the step over button.

Step out - steps to the preceding frame in the call stack

Timeline

Timelines Tab are a graphical representation of activity that occurs during the lifetime of the open page.

Recording and checking the timeline You can record the main execute time like network request, paint, JavaScript functions.

JavaScript Heap memory You can see the usage of JavaScript heap memory in real time

Figure 17: JavaScript Heap Memory.

Profiles

Profiles Tab lets you profile the execution time and memory usage of a web app or page.

CPU Profiles Where execution time is spent in your page’s JavaScript functions

Figure 18: CPU Profiles

Audits

Audits Tab can analyse a page as it loads and provide suggestions and optimizations for decreasing page load time and increase perceived (and real) responsiveness

Figure 19: Audits

Console

Console Tab offers a way to inspect and debug your Webpage.