-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<body onload="prettyPrint()" style="overflow: auto;">
-<div id="navigation">
+<div id="toc-navigation">
<div id="profile">
- <p><img alt="Mobile Web" src="../images/mw_icon.png"/></p>
+ <p><img alt="Mobile Web" src="../images/mw_icon.png" /> <img alt="Wearable Web" src="../images/ww_icon.png" /></p>
</div>
<div id="toc_border"><div id="toc">
<p class="toc-title">Content</p>
<ul class="toc">
- <li><a href="#use">Using the JavaScript Analyzer</a></li>
- <li><a href="#support">Supporting Rules</a></li>
+ <li>
+ <a href="#use">Using the JavaScript Analyzer</a>
+ <ul>
+ <li><a href="">Setting JavaScript Rules</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#support">Supporting Rules</a>
+ <ul>
+ <li><a href="#coding">Coding Rules</a></li>
+ <li><a href="#api">Web API Usage Rules</a></li>
+ </ul>
+ </li>
+ <li>
+ <a href="#stalechecker">Using the Stale Object Checker</a>
+ <ul>
+ <li><a href="#resultpage">Result Page View</a></li>
+ <li><a href="#samplecode">Sample Code</a></li>
+ </ul>
+ </li>
+
</ul>
</div></div>
</div>
<h1>JavaScript Analyzer</h1>
-<p>The JavaScript Analyzer (JSA) is an analysis tool, which helps to find problems in JavaScript code. When you develop a mobile Web application with a new project in the IDE, you can run JSA to detect potential problems in your JavaScript code. JSA supports 16 rules, including coding rules and Web API usage rules.</p>
+<p>The JavaScript Analyzer (JSA) is an analysis tool, which helps to find problems in JavaScript code. When you develop a mobile Web application with a new project in the IDE, you can run JSA to detect potential problems in your JavaScript code.</p>
+
+<ul>
+ <li>
+ <strong>JSA supports two types of analyzer</strong>
+ <ul>
+ <li><strong>Static Analyzer</strong>
+ <p>Checkers for a set of pre-defined coding rules. It supports 27 rules, including coding rules and Web API usage rules.</p>
+ </li>
+ <li><strong>Dynamic Analyzer</strong>
+ <p>Checker for stale objects that cause possible memory leak. </p>
+ </li>
+ </ul>
+
+
+ </li>
- <table class="note">
- <tbody>
- <tr>
- <th class="note">Note</th>
- </tr>
- <tr>
- <td class="note">This tool is supported in mobile applications only.</td>
- </tr>
- </tbody>
- </table>
+</ul>
-<p>To clean up JavaScript code by adding indentation and carriage returns, use the <a href="code_beautifier_w.htm">Code Beautifier</a>, and to remove unnecessary content from the JavaScript files, use the <a href="code_minifier_w.htm">Code Minifier</a>.</p>
+<p>The Coding Rule Checker is a static analysis tool that evaluates an application by examining the JavaScript code without its execution. This type of checkers examine all possible execution paths and variable values, and then provide its their analysis result.</p>
+
+<p>On the other hand, the Stale Object Checker is a dynamic analysis tool that requires executing the application on a runtime environment for its analysis. This checker examines all the JavaScript objects created during its execution and points out relatively critical staled objects.</p>
<h2 id="use" name="use">Using the JavaScript Analyzer</h2>
<p>To analyze a mobile Web application with the JSA in the IDE, select the target project in the Project Explorer and right-click the project icon. Then, the menu is shown like in Figure 1. and select Run JS Code Analysis.</p>
-<p class="figure">Figure: JavaScript Rule Checker</p>
+<<<<<<< HEAD
+<p class="figure">Figure1 : JavaScript Rule Checker</p>
<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_rule_checker.png" /></p>
<p>The JSA analyzes JavaScript codes in the selected mobile Web application project after selecting javaScript files and codes segment to analyze. This can be done by parsing the start html file (i.e., index.html, etc) specified in the config.xml.</p>
-<p class="figure">Figure: JavaScript Rule Checker</p>
+<p class="figure">Figure2: JavaScript Rule Checker</p>
<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_automatic_analysis.png" /></p>
<p>If Javascript Analyzer detects the codes which can cause potential problems during its analysis step, the problems are listed up in the JavaScript Problems view. If you want to locate a possibly problematic code line, double-click the alarm in the view.</p>
-<p class="figure">Figure: JavaScript Problems view</p>
+<p class="figure">Figure3: JavaScript Problems view</p>
<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_problems_view.png" /></p>
+=======
+<p class="figure">Figure: JavaScript Rule Checker</p>
+<p align="center"><img alt="JavaScript Rule Checker" src="../images/js_rule_checker.png" /></p>
+
+<p>The JSA analyzes JavaScript codes in the selected mobile Web application project after selecting javaScript files and codes segment to analyze. This can be done by parsing the start html file (i.e., index.html, etc) specified in the config.xml.</p>
+
+<p class="figure">Figure: JavaScript Rule Checker</p>
+<p align="center"><img alt="JavaScript Rule Checker" src="../images/js_automatic_analysis.png" /></p>
+
+<p>If Javascript Analyzer detects the codes which can cause potential problems during its analysis step, the problems are listed up in the JavaScript Problems view. If you want to locate a possibly problematic code line, double-click the alarm in the view.</p>
+
+<p class="figure">Figure: JavaScript Problems view</p>
+<p align="center"><img alt="JavaScript Rule Checker" src="../images/js_problems_view.png" /></p>
+>>>>>>> 194db40e03f72657faa176163193366380e463b6
+
+
+<h2 id="settingrules" name="settingrules">Setting JavaScript Rules</h2>
+
+<p>You can enabled or disable the JavaScript Rules in Preferences of JavaScript Analzer</p>
+<p>To enable or disable the JavaScript Rules :</p>
+ <ol>
+ <li>In the Tizen IDE, go to Window > Preferences > JavaScript Analzer</li>
+ <li>Select a checkbox of rule items to enable or disable</li>
+ </ol>
+
+<p class="figure">Figure4: Preferences Page</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_settings_rules.png" /></p>
<h2 id="support" name="support">Supporting Rules</h2>
<p>For example, if the functions that have a same name are defined as following example codes, the <span style="font-family: Courier New,Courier,monospace">foo</span> function is changed whenever the <span style="font-family: Courier New,Courier,monospace">func1</span> or <span style="font-family: Courier New,Courier,monospace">func2</span> function is called. The <span style="font-family: Courier New,Courier,monospace">foo</span> function can not be guaranteed.</p>
-<p>This rule is supported by the JSLint and the Google Closure Linter. They say that "When you fail to specify <span style="font-family: Courier New,Courier,monospace">var</span>, the variable gets placed in the global context, potentially clobbering existing values. Also, if there is no declaration, it is hard to tell in what scope a variable lives."</p>
+<p>This rule is supported by the JSLint and the Google Closure Linter. They say that "When you fail to specify <span style="font-family: Courier New,Courier,monospace">var</span>, the variable gets placed in the global context, potentially clobbering existing values. Also, if there is no declaration, it is hard to tell in what scope a variable lives."</p>
-<pre class="prettyprint">function func1()
-{
+<pre class="prettyprint">function func1() {
// The foo function is defined without the var keyword
- foo = function()
- {
+ foo = function() {
alert('func1');
};
// When the foo function is called, the foo function is not clear
foo();
}
-function func2()
-{
+
+function func2() {
// The other foo function is defined without var keyword.
- foo = function()
- {
+ foo = function() {
alert('func2');
};
<p>In the following example, the statement <span style="font-family: Courier New,Courier,monospace">var arguments = [];</span> in the function overwrites the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span>. As a result, the reserved keyword <span style="font-family: Courier New,Courier,monospace">arguments</span> in functions lose the feature to access the arguments of the function.</p>
-<pre class="prettyprint">function func()
-{
+<pre class="prettyprint">function func() {
// 'arguments' has been predefined as a reserved keyword
var arguments = [];
}</pre>
<p>This rule is introduced in the Google JavaScript Style Guide. They say that "The ability to create closures is perhaps the most useful and often overlooked feature of JS.One thing to keep in mind, however, is that a closure keeps a pointer to its enclosing scope. As a result, attaching a closure to a DOM element can create a circular reference and thus, a memory leak.".</p>
-<pre class="prettyprint">var outer = function()
-{
+<pre class="prettyprint">var outer = function() {
// Warning case, be careful
var x = 0;
- return function()
- {
+ return function() {
// Variable x of the outer function is captured in the inner function
return ++x;
<p>This rule is described in the Google JavaScript Coding Style Guide. They say that "Extra comma and semicolon can make error.".</p>
-<pre class="prettyprint">function func()
-{
- for(var i = 0; i < 10; i++)
- {
+<pre class="prettyprint">function func() {
+ for(var i = 0; i < 10; i++) {
// Extra semicolon
x++;;
// Extra semicolon after the 'for' statement
<p>This rule is introduced by the Google JavaScript Style Guide. They say that "In modern JavaScript engines, changing the number of properties on an object is much slower than reassigning the values. The delete keyword should be avoided except when it is necessary to remove a property from an object's iterated list of keys, or to change the result of if (key in obj)."</p>
-<pre class="prettyprint">function Obj()
-{
+<pre class="prettyprint">function Obj() {
this.value = 10;
};
var obj = new Obj();
<p>This rule is introduced by the Google Javascript Style Guide. They say that "Modifying builtins like Object.prototype and Array.prototype are strictly forbidden. It leads to hard to debug issues in production and should be avoided."</p>
<pre class="prettyprint">// Modifying the function in prototype of built-in object makes debugging difficult
-Object.prototype.create = function()
-{
+Object.prototype.create = function() {
alert('Warning!');
};</pre>
var bool = new Boolean(false);
// bool is always true
-if(bool)
-{
+if(bool) {
alert('true');
-}
-else
-{
+} else {
alert('false');
}</pre>
<pre class="prettyprint">var arr = ['a', 'b', 'c'];
// The variable key is not 'a', 'b', and 'c'. It is 0, 1, and 2
-for(var key in arr)
-{
+for(var key in arr) {
alert(key);
}</pre>
<pre class="prettyprint">[Coding Rule] Do not use for-in with arrays. </pre>
+<h4>Rule 11. Do Not Use Unclosed Braces</h4>
+
+<p>A method, an object , a code block and so on which has opening brace but no closing brace is not correct . The analysis will detect this and be stopped with error message.</p>
+<p>In the below example, function temp needs a closing brace to indicate that the function definition is finished. The JSA detects this and makes an alarm, the analysis is stopped because of this error.</p>
+
+<pre class="prettyprint">// The function temp needs the closing brace
+function temp() {
+ var a = 'ddd';</pre>
+
+<p>The JSA displays the following message:</p>
+<pre class="prettyprint">[Syntax Error]Missing closing brace } character.</pre>
+
+<h4>Rule 12. Do Not use unclosed Comments</h4>
+
+<p>Writing comment only with begin comment , but no closing comment is not correct. In some scenario, it will affect the implementation of function, code block, and so on. The analysis will detect this and be stopped with error message.</p>
+
+<p>In the below example, the comment has no closing comment, which causes the for loop can’t be completed. The JSA detects it and makes an alarm, the analysis is stopped because of this error.</p>
+
+<pre class="prettyprint">// The comment has no close comment
+var a = 10;
+var b = 5;
+for(var i = 0; i < b; i++){
+ a += i;
+ /* init i;
+}</pre>
+
+<p>The JSA displays the following message:</p>
+<pre class="prettyprint">[Syntax Error]Missing closing comment "*/".</pre>
+
+<h4>Rule 13. Do Not Use Unclosed Strings</h4>
+
+<p>String needs to be put in the quote, missing single quote is not allowed, analysis will be stopped with error message because of this error.</p>
+
+<p>In the below example, the string misses single quote, which causes the variable definition can’t be completed. The JSA detects it and makes an alarm, the analysis is stopped because of this error.</p>
+
+<pre class="prettyprint">// Setting value for MAX is not correct, missing single quote
+var MAX = 20;
+for (var i = 0; i < 10; i++) {
+ MAX = 'tt;
+}</pre>
+
+<p>The JSA displays the following message:</p>
+<pre class="prettyprint">[Syntax Error]Missing closing single-quote ' character.</pre>
+
+
+<h4>Rule 14. Do Not Omit Semicolons</h4>
+
+<p>Semicolon is needed in javascript to indicate that the declaration is finished. Missing Semicolon is not recommened, analysis will detect this, and be proceeded without stopping.</p>
+
+<p>In the below example, the variable a declared in function tempx without semicolon, the JSA detects it and makes an alarm.</p>
+
+<pre class="prettyprint">// The declaration of a need semicolon in the end.
+function tempx() {
+ var a = 'ddd'
+}</pre>
+
+<p>The JSA displays the following message:</p>
+<pre class="prettyprint">[CodingRule] Do not omit semicolon at the end of a declaration.</pre>
+
+<h4>Rule 15. Do Not Begin With Operators</h4>
+
+<p>Begining a line with the operator is not recommend, analysis will detect this, and be proceeded without stopping.</p>
+
+<p>In the below example, setting value for abc with operator = in the new line, this is not correct, here, operator = shoud be in the same line as abc, the JSA detects it and makes an alarm.</p>
+
+<pre class="prettyprint">// Setting value for abc is not correct, should not begin with operator=.
+var variable_sum = 1;
+var b = 2;
+var abc
+ = 10 + variable_sum + b;
+</pre>
+
+<p>The JSA displays the following message:</p>
+<pre class="prettyprint">[CodingRule] Do not begin a line with the operator =.</pre>
+
+<h4>Rule 16. Do Not Use Double-quoted Strings</h4>
+
+<p>Invoking a code block with double-quotes instead of single-quotes for string will be notified as CodingRule and the analysis will be proceeded without stopping.</p>
+
+<p>In the below example, "aa" should be 'aa'. Because of double-quotes being used, the JSA detects it and makes an alarm.</p>
+
+<pre class="prettyprint">
+if(true) {
+ var a = "aa";
+}</pre>
+
+<p>The JSA displays the following message:</p>
+<pre class="prettyprint">[[CodingRule] Do not use double-quotes instead of single-quotes for string. </pre>
+
+<h4>Rule 17. Do Not End With Commas In Literals</h4>
+
+<p>Invoking a code block with extra comma at the end of object/array literals will be notified as CodingRule and the analysis will be proceeded without stopping.</p>
+
+<p>In the below example, the last ',' must be removed. Because of extra comma at the end of object/array literals, the JSA detects it and makes an alarm.</p>
+
+<pre class="prettyprint">
+var abc = [1, 2, 3,];</pre>
+
+<p>The JSA displays the following message:</p>
+<pre class="prettyprint">[CodingRule] Do not use extra comma at the end of object/array literals.</pre>
+
+<h4>Rule 18. Do Not Use Wrong Opening Brace</h4>
+
+<p>Invoking a code block with opening brace '{' which does not appear in the same line with the statement will be notified as CodingRule and the analysis will be proceeded without stopping.</p>
+
+<p>In the below example, the opening brace '{' must appear in the same line with the statement. If not, the JSA detects it and makes an alarm. </p>
+
+<pre class="prettyprint">
+if(true) // Do Not Use Wrong Opening Brace
+{
+ var test = 'test';
+}
+</pre>
+
+<p>The JSA displays the following message:</p>
+<pre class="prettyprint">[CodingRule] Opening brace '{' character should appear in the same line with the statement. </pre>
+
<h3 id="api" name="api">Web API Usage Rules</h3>
<p>Tizen Web APIs extend JavaScript APIs to enable you using the device capabilities provided by Tizen devices. The Tizen Web APIs are designed to be simple and intuitive. The following rules notify you, when the APIs are used improperly.</p>
<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.filesystem.resolve()</span> function needs an error callback function as its third argument. Because the error callback function does not exist, the JSA detects it and creates an alarm.</p>
<pre class="prettyprint">tizen.filesystem.resolve('images',
- function(dir)
- {
- console.log("Mount point Name is " + dir.path);
+ function(dir) {
+ console.log('Mount point Name is ' + dir.path);
}
- // Error callback required as the third argument);</pre>
+ // Error callback required as the third argument);
+};</pre>
<p>The JSA displays the following message:</p>
<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.calendar.getCalendars()</span> is a method that can throw exceptions, so it must be wrapped by a <span style="font-family: Courier New,Courier,monospace">try-catch</span> statement. Because the <span style="font-family: Courier New,Courier,monospace">try-catch</span> statement does not exist, the JSA detects it and creates an alarm.</p>
<pre class="prettyprint">// tizen.calendar.getCalendars API can make exceptions, so it should be wrapped in a try-catch statement
-tizen.calendar.getCalendars("EVENT", calendarListCallback, errorCallback);</pre>
+tizen.calendar.getCalendars('EVENT', calendarListCallback, errorCallback);</pre>
<p>The JSA displays the following message:</p>
<p>In the following example, the <span style="font-family: Courier New,Courier,monospace">tizen.contact.getAddressBooks()</span> function needs arguments whose type is the <span style="font-family: Courier New,Courier,monospace">function</span> instead of the <span style="font-family: Courier New,Courier,monospace">string</span> and the <span style="font-family: Courier New,Courier,monospace">undefined</span>, so the JSA detects it and makes an alarm.</p>
-<pre class="prettyprint">var addressBooksCB = "notFucntion";
-try
-{
+<pre class="prettyprint">var addressBooksCB = 'notFucntion';
+try {
// The arguments of tizen.contact.getAddressBooks API must be function types instead of strings and undefined
tizen.contact.getAddressBooks(addressBooksCB, undefined);
-}
-catch (e) {}</pre>
+} catch (e) {
+ /* ... */
+}</pre>
<p>The JSA displays the following message:</p>
<p>In the following example, the constructor <span style="font-family: Courier New,Courier,monospace">tizen.Contact()</span> function needs a dictionary object as the first argument. If the keys of the dictionary object are different from the spec, the JSA detects it and creates an alarm.</p>
-<pre class="prettyprint">var validContactObj = new tizen.Contact(
-{
- name: new tizen.ContactName(
- {
+<pre class="prettyprint">var validContactObj = new tizen.Contact({
+ name: new tizen.ContactName({
firstName:'Jeffrey',
lastName:'Hyman',
nicknames:['joey ramone']
var invalidContactObj = new tizen.Contact(
{
// The first argument, whose type is dictionary, of tizen.Contact API does not have the property 'foo'
- foo: "I'm not an member of Contact"</pre>
+ foo: 'I'm not an member of Contact'</pre>
<p>The JSA displays the following message:</p>
<pre class="prettyprint">[Web API Rule] The property foo is not a member of the dictionary CantactNameInit.</pre>
+<h4>Rule 7. API Version Compatibility</h4>
+
+<p>Invoking API which is not defined in Current API version will be notified as Web API Rule and the analysis will be proceeded without stopping. If these Web API was defined in another API version or platform, notify user these version name.</p>
+
+<p>In the below example, Web App is developed for Tizen 2.3 wearable platform, but <span style="font-family: Courier New,Courier,monospace">tizen.archive.open()</span> is defined in mobile-2.3, so the JSA detects it and makes an alarm.</p>
+
+<pre class="prettyprint">
+function onsuccess() { /* ... */ }
+function onerror() { /* ... */ }
+
+try {
+ //Source code in Web App for Tizen 2.3 wearable platform, but 'open()' is defined in mobile-2.3
+ tizen.archive.open('downloads/some_archive.zip', 'r', onsuccess, onerror);
+} catch (e) {
+ /* ... */
+}
+</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Web API Rule] Tizen Wearable-2.3 API not support "open" API. It is defined in Tizen mobile-2.3.</pre>
+
+
+<h4>Rule 8. API Privilege Missing</h4>
+
+<p>To use Tizen Device API in target device, the 'config.xml' of Tizen Web App must have corresponding privilege url define. Web API Rule will be notified if not found the privilege in 'config.xml' file.</p>
+
+<p>In the below example, Web App is using <span style="font-family: Courier New,Courier,monospace">tizen.application.launch()</span>, this API need 'http://tizen.org/privilege/application.launch', which is commented in the config.xml. So an alarm raise.<p>
+
+
+<pre class="prettyprint">
+/* JavaScript File */
+function onsuccess() { /* ... */ }
+tizen.application.launch('targetApp0.main', onsuccess);
+
+/* config.xml File (Privilege commented) */
+<!--tizen:privilege name="http://tizen.org/privilege/application.launch"/-->
+</pre>
+
+<p>The JSA displays the following message:</p>
+
+<pre class="prettyprint">[Web API Rule] Tizen <span style="font-family: Courier New,Courier,monospace">tizen.application.launch</span> API need "http://tizen.org/privilege/application.launch" privilege in 'config.xml'.</pre>
+
+<h2 id="stalechecker" name="support">Using the Stale Object Checker</h2>
+
+<p>To analyze a web application with the Stale Object Checker in the IDE, select the target project in the Project Explorer and right-click the project icon. In other way, select the project, click Check Stale Object icon on tool bar. After those steps, select the testing platform.</p>
+
+<p class="figure">Figure5 : Stale Object Checker</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_checker_menu.png" /></p>
+
+<p>On Tizen device mode, it is packaged as a widget first, and then pushed to the Tizen device. At last it is launched automatically. After the application launched, user can follow the steps that designed for testing the application.</p>
+
+<p>On PC Browser mode, the web application will run at <strong>'http://localhost:8888'</strong>.</p>
+
+<p>When all operations are finished on the Tizen Device or PC Browser, click <strong>Stop Rcoding</strong> button on the Console toolbar or enter Alt + Shift + T key on PC Browser. Then a dialog like in figure 7 shows up on the page.</p>
+
+
+<p class="figure">Figure6 : Stop Recording</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_console.png" /></p>
+
+
+<p>After clicking OK button on the dialog in the figure 7, the Stale Object Checker continues to inspect the data collected and launch a result page on <strong>'http://localhost:9000'</strong>. And this result page can be accessed by any web browser in the PC.</p>
+
+<p class="figure">Figure7 : Stop Dialog Device and Browser mode</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_stop_alert.png" /></p>
+
+<h3 id="resultpage" name="resultpage">Result Page View</h3>
+
+<p>The first screen is given like the Figure 8. This analysis result page is composed with two parts. One is the <strong>Issue Table</strong>, and the other is the <strong>All-Sites Timeline</strong>. You can link to these pages by choosing the menu located on the main page.</strong></strong></p>
+
+<p class="figure">Figure8 : Issue Table Page</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_table_view.png" /></p>
+
+<p>Information of <strong>Site</strong>, <strong>Count</strong>, <strong>Kind</strong>, and <strong>Leak</strong> is provided in the Issue Table:<p>
+ <ul>
+ <li><strong>Site</strong> : Source location where allocations took place. Click the site, for more details about the allocation.</li>
+ <li><strong>Count</strong> : Number of objects allocated from a particular site during this execution.</li>
+ <li><strong>Kind</strong> : A site allocates a DOM object, a FUNCTION, or a regular OBJECT.</li>
+ <li><strong>Leak</strong> : Leak means that the count of stale instances is increasing over the life of execution.</li>
+ </ul>
+<p>To understand the result from the Stable Object Checker better, following concepts are necessary:</p>
+ <ul>
+ <li><strong>Stale instance</strong> : Instance whose staleness value is not zero at specific time.</li>
+ <li><strong>Staleness for object</strong> : Time interval between last use and unreachable time:</li>
+ <li><strong>Exapmle</strong> :
+ <ul>
+
+ <li>if object was used more than once : unreachable time – last use time</li>
+ <li>if object was never used : unreachable time – creation time</li>
+ </ul>
+ </li>
+ </ul>
+
+<h4 id="issuetable" name="resultpage">Issue Table</h4>
+
+<p>When clicking the site on the issue table, a set of detail information on a leak occurrence is given. In the source view, a code segment that creates stale objects steadily, which possibly cause memory leak, is marked with a colored box. So that you can find out the code location easiliy.</p>
+
+<p class="figure">Figure9 : Detail Information</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_detail_info.png" /></p>
+
+<p>For example, in the Figure 9, this page says that the anonymous event handler function at the line 10 is a stale object that might cause memory leak.</p>
+<p>In the call tree view, a call hierarchy of the method which contains the code that creates stale objects is shown. The name of a node in this call tree view indicates the file name, line number and column number.</p>
+<p>As illustrated in Figure 9, the root element "js/main_orig_.js:10:45" indicates that memory leak occurs at line 10, column 45 in "js/main_orig_.js" file. Click on the root element, the source view will skip to the location.</p>
+<p>Click the child node "js/main_orig_.js:27:5", the source view will skip to line 27 where the method that contains memory leak issue is called and highlight the method.</p>
+<p>In the timeline view, the x axis represents the time elapse and y axis represents the number of created object from this site. Move the mouse to a specific time, the number of stale instance and allocated instance will show on the graph.</p>
+<p>In the access paths view, you can find out the scope of an object at runtime which leads to the location of memory leak.</p>
+
+
+<h4 id="allsites" name="resultpage">All-Sites Timeline</h4>
+
+<p>In this page, the timeline for all the object created during the execution is given. The timeline graph in Figure 9 shows the diagram for specific diagram while the timeline in Figure 10 indicates the diagram for all sites in the application. The pie charts shows the proportion of each site in all allocated objects and stale objects.</p>
+
+<p class="figure">Figure10 : All-Sites Timeline Page</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_all_site.png" /></p>
+
+<ul>
+
+</ul>
+
+<h3 id="samplecode" name="samplecode">Sample Code</h3>
+
+
+
+<h4 id="allsites" name="resultpage">Example 1. Timer</h4>
+
+
+<p>When click "start" button, the Timer will start the time. If click again, it will stop the time. The "exitApp" function register a event handler for Tizen Back key. In function "runtime()", "exitApp()" function is added by mistake.</p>\r
+ \r
+ <p>So every time click "start" button, "exitApp" will be called, creates an anonymous function and register it to listen Back key event. When test this application with Stale Object Checker, if click "start" button many times, it should be figured out as a memory leak.\r
+</p>
+
+<pre class="prettyprint">
+//Javascript Snippets
+function exitApp( ) {
+ document.addEventListener('tizenhwkey', function(e) {
+ if(e.keyName == 'back') {
+ try {
+ tizen.application.getCurrentApplication().exit();
+ } catch (error) {
+ console.error('getCurrentApplication(): ' + error.message);
+ }
+ }
+ });
+}
+
+function runtime() {
+ exitApp(); // Add the function call for memory leak
+ // ...
+}
+</pre>
+
+<p>When testing the souce code, we get the result as the figure 11. It indicates that memory leak occurred at site "js/main_orig_.js:39:42". Clicking this site, detail information is retrieved.</p>
+
+
+<p class="figure">Figure11 : Example1. Issue Table</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_example_1_01.png" /></p>
+
+<p class="figure">Figure12 : Example1. Detailed Information</p>
+<p style="text-align:center;"><img alt="JavaScript Rule Checker" src="../images/js_stale_example_1_02.png" /></p>
+
+<p>Figure 12 shows that function object which is added to listen "tizenhwkey" caused memory leak. Click the "Call Tree" on the right of this page. Figure 3 shows that "exitApp()" function which has the memory leak issue is called in "runtime()" fucntion.</p>\r
+\r
+<p>This code site is detected as a leak because the handler function objects created from the site have not been used until this application exits. The call tree says that when function "runtime()" is executed, function "exitApp()" will be invoked.</p>\r
+<p> And every time function "exitApp()" is called, it will create an anonymous function and register it to document object. And you can find out this fact from the "Timeline" graph that the number of stale instances increased steadily.</p>\r
+\r
+<p>This graph show any objects created from this code site have not been used until this application exists.</p>
+
+
+<h4 id="allsites" name="resultpage">Example 2. Calculator</h4>
+
+<p>When click number button, "command" function will be executed. "init" function register a event handler for Tizen Back key. In function "command()", "init()" function is added by mistake. So every time click number button, "init()" will be called, creates an anonymous function and register it to listen Tizen Back key event.</p>
+<p>When test this application with Stale Object Checker, if click number button many times, it should be figured out as a memory leak. When testing the souce code, the result is the same as the Example 1.</p>
+
+<pre class="prettyprint">
+//Javascript Snippets
+var init = function() {
+ document.addEventListener('tizenhwkey', function(e) {
+ if (e.keyName == 'back') {
+ try {
+ tizen.application.getCurrentApplication().exit();
+ } catch (error) {
+ console.error('getCurrentApplication(): ' + error.message);
+ }
+ }
+ });
+}
+
+function command(num) {
+ init(); // Add the function call for memory leak
+ // ...
+}
+
+</pre>
+
<script type="text/javascript" src="../scripts/jquery.zclip.min.js"></script>
<script type="text/javascript" src="../scripts/showhide.js"></script>
projects / sdk / online-doc.git / commitdiff
