Remote Web Inspector
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.
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.
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 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.
- Login with "develop" ID (password leave blank)
- ID : develop
- Password : (password leave blank)
- Setting the Develop IP
- Download your Web Application to Smart TV using “Start User App sync”
- Execute the Explorer in your PC (Chrome, Safari).
- 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")
- 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
There are several tabs for your development.
Editing Nodes To edit the markup of an element, double-click on element name, attribute name or attribute value
Layout the area You can see the element’s area directly by putting cursor on elements.
Computed styles Tab shows all of CSS styles associated with the selected element.
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.
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.
Properties You can edit the element's DOM 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.
Resource tab lets you inspect resources that are loaded in the inspected page.
Frames This lets you see the resource loaded for the page.
SQL Databases If your webpage uses SQL Databases, they appear as an offline resource under Databases in the Resources
Application Cache You can inspect all the current contents of the application cache by clicking Application Cache.
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.
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.
Debugging with Breakpoint
Call Stack The call stack lists the functions that have been called and have not yet finished returning.
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
Timelines Tab are a graphical representation of activity that occurs during the lifetime of the open page.
Profiles Tab lets you profile the execution time and memory usage of a web app or page.
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
Console Tab offers a way to inspect and debug your Webpage.