Top Banner
Tizen Debugging Debugging Web Applications
18

Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Jun 19, 2020

Download

Documents

dariahiddleston
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
Page 1: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Tizen – Debugging

Debugging Web Applications

Page 2: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Contents

• Debugging Web Applications

• Web Inspector

• Debugging Native Applications

Page 3: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Web Applications

Page 4: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Web Applications with Tizen Emulator

• Start Tizen emulator

Page 5: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Web Applications with Tizen Emulator

• Right click on your project• Select Debug As – Tizen Web Application

Page 6: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Web Applications with Tizen Emulator

• Use Web Inspector and Tizen Emulator to debug web applications

Page 7: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Web Applications with Tizen Device

• Make sure your device is connected and recognized by Tizen IDE

• Then, you can debug your web applications using Web Inspector

Tizen Device should be displayed here

Page 8: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Web Inspector

Page 9: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Web Inspector

• Tizen SDK uses Google Chrome Web Inspector

• You can use Web Inspector to:• Check CSS

• Check JavaScript

• Check resources

• Check network statistics

Page 10: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Web Inspector

• Checking CSS• Selected element is highlighted

• Style rules applied to the element are displayed on the right

Page 11: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Web Inspector

• Checking JavaScript• In the sources panel, you can browse JavaScript codes and set

breakpoints

• At breakpoints, your web application will be paused and:• call stack, scope variables will be displayed

Source Browser

Source code

Call stack

Scope variables

Page 12: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Web Inspector

• Other functions of Web Inspector• The second pane, resources, provides information about the

resources associated with web applications’ page• E.g) external scripts or stylesheets

• The network panel logs all network requests made by web applications

Page 13: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Native Applications

Page 14: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Native Applications with Tizen Emulator

• Start Tizen Emulator

Page 15: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Native Applications with Tizen Emulator

• Right click on your project

• Select Debug As – Tizen Native Application

Page 16: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Native Applications with Tizen Emulator

• Tizen IDE will switch to Debug Perspective

• If not, click debug button to change perspective

Debug Button

Page 17: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Debugging Native Applications with Tizen Emulator

• Check Log view for log, debug, and exception messages

• Check Variables tab for variable value changes

Variables tab

Log view

Source code

Page 18: Tizen Debugging - Tizen Wiki · • Select Debug As –Tizen Web Application. Ajou Univrsity Debugging Web Applications with Tizen Emulator •Use Web Inspector and Tizen Emulator

Ajou Univrsity

Known Issues with Debugging Native Applications

• Do not step out during debugging inside of OspMain()• This is the entry point for Tizen Native Apps