Expertiza_Wiki - User contributions [en]

File:Samplepdf.png

2013-10-31T00:39:58Z

Vseth: Screenshot of the pdf generated for the sample report

Screenshot of the pdf generated for the sample report

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:38:37Z

Vseth:

[[File:sahana.jpg|right]]
This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

[[File:userscreen.png]]

[[File:samplepdf.png]]

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java script.

The base class is Exporter, defined as:

[[File:classDiagram.png]]

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

The code makes use of following external java-script libraries to achieve the objective.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

Future development of the project can be implementation of following functionalities.

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

File:Sahana.jpg

2013-10-31T00:37:50Z

Vseth: Sahana Software Foundation

Sahana Software Foundation

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:37:04Z

Vseth:

[[File:sahana.png|right]]
This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

[[File:userscreen.png]]

[[File:samplepdf.pdf]]

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java script.

The base class is Exporter, defined as:

[[File:classDiagram.png]]

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

The code makes use of following external java-script libraries to achieve the objective.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

Future development of the project can be implementation of following functionalities.

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:30:04Z

Vseth: /* Description and Objective */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

[[File:userscreen.png]]

[[File:samplepdf.pdf]]

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java script.

The base class is Exporter, defined as:

[[File:classDiagram.png]]

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

The code makes use of following external java-script libraries to achieve the objective.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

Future development of the project can be implementation of following functionalities.

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:29:26Z

Vseth: /* Description and Objective */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

[[File:userscreen.png]]

[[File:samplepdf.jpg]]

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java script.

The base class is Exporter, defined as:

[[File:classDiagram.png]]

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

The code makes use of following external java-script libraries to achieve the objective.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

Future development of the project can be implementation of following functionalities.

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

File:Userscreen.png

2013-10-31T00:28:50Z

Vseth: Screen shot of pivot table

Screen shot of pivot table

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:26:26Z

Vseth: /* Description and Objective */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

[[File:userscreen.jpg]]

[[File:samplepdf.jpg]]

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java script.

The base class is Exporter, defined as:

[[File:classDiagram.png]]

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

The code makes use of following external java-script libraries to achieve the objective.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

Future development of the project can be implementation of following functionalities.

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:23:17Z

Vseth: /* Implementation */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java script.

The base class is Exporter, defined as:

[[File:classDiagram.png]]

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

The code makes use of following external java-script libraries to achieve the objective.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

Future development of the project can be implementation of following functionalities.

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

File:ClassDiagram.png

2013-10-31T00:22:03Z

Vseth: Diagram shows the relationships between the classes.

Diagram shows the relationships between the classes.

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:09:08Z

Vseth: /* Implementation */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java scripts.

The base class is Exporter, defined as:

[[File:classDiagram.jpg]]

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

The code makes use of following external java-script libraries to achieve the objective.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

Future development of the project can be implementation of following functionalities.

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:08:12Z

Vseth: /* Dependency */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java scripts.

The base class is Exporter, defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

The code makes use of following external java-script libraries to achieve the objective.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

Future development of the project can be implementation of following functionalities.

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:06:42Z

Vseth: /* Future */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java scripts.

The base class is Exporter, defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

Future development of the project can be implementation of following functionalities.

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:03:28Z

Vseth: /* Subscription */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java scripts.

The base class is Exporter, defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user can subscribe to receive reports daily/weekly/monthly through emails. The format of this report can be PDF or Excel.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-31T00:01:27Z

Vseth: /* Export to Excel File */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java scripts.

The base class is Exporter, defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting graph and pivot table(generated interactively by user) to a PDF. In future, graphs and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excels are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T23:59:54Z

Vseth: /* html2canvas.js */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java scripts.

The base class is Exporter, defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to take "screenshots" of webpages or parts of it opened on users' browser. The screenshot is created by parsing several DOM objects.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to a PDF. In future, the grahps and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excel are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T23:57:37Z

Vseth: /* Implementation */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==
Exporting of reports is implemented using java scripts.

The base class is Exporter, defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Currently we are focusing on exporting report to a PDF. PdfExporter Class serves this purpose. It is a sub-class of Exporter Class

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are reusing the code. TableRenderer can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to a PDF. In future, the grahps and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excel are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T23:51:41Z

Vseth: /* Setup (Installation) */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku. Pycharm IDE can be used for development.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==

The base class Exporter is defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Since we have implemented the Pdf functionality, a PdfExporter is defined for this.

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are achieving code reuse. This can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to a PDF. In future, the grahps and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excel are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T23:50:10Z

Vseth: /* Setup (Installation) */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on different operating systems:Linux,Windows,Mac. Sahana Eden is written in Javascript, Perl, HTML, Python. To run Eden then you will need to run Python. Sahana Eden requires web2py framework. Eden uses SQLite database. Sahana Eden can be easily deployed on Amazon EC2, Heroku.

To contribute to Eden foundation, you can fork repository from
https://github.com/flavour/eden

==Implementation==

The base class Exporter is defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Since we have implemented the Pdf functionality, a PdfExporter is defined for this.

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are achieving code reuse. This can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to a PDF. In future, the grahps and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excel are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T23:32:22Z

Vseth: /* Description */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description and Objective==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. The objective of the project is to export reports in the form of downloadable format, so that user can see view reports offline. Currently we focused on exporting report to a PDF.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on several different operating systems:Linux,Windows,Mac. The installation of Sahana eden requires web2py framework. Sahana Eden can be easily deployed on Amazon EC2, Heroku.

To contribute to Eden foundation, fork repository from
https://github.com/flavour/eden

==Implementation==

The base class Exporter is defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Since we have implemented the Pdf functionality, a PdfExporter is defined for this.

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are achieving code reuse. This can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytescoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to a PDF. In future, the grahps and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excel are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T23:21:05Z

Vseth: /* Description */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description==
Sahana Eden can be used to collect and manage a large variety of data. For the data to be useful and share-able, it needs to be presented in a way that can help users to make decisions and plan activities. To achieve this Sahana Eden produce reports that are flexible and user friendly.

Reports can be in the form of: Pivot Table, Bar Chart, or Pie chart. Our work includes the exporting the generated report to user's computer so that user can see the generated report offline. Currently we focused on exporting report to PDF document.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on several different operating systems:Linux,Windows,Mac. The installation of Sahana eden requires web2py framework. Sahana Eden can be easily deployed on Amazon EC2, Heroku.

To contribute to Eden foundation, fork repository from
https://github.com/flavour/eden

==Implementation==

The base class Exporter is defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Since we have implemented the Pdf functionality, a PdfExporter is defined for this.

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are achieving code reuse. This can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytesscoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to a PDF. In future, the grahps and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excel are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T23:13:59Z

Vseth: /* History */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is one of the unique strength of Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)", Sahana Software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization, registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description==
Sahana Eden can be used to collect and manage a large variety of data. For this data to add value it needs to be processed and shared in a way in which it can present the information people need to make decisions and plan activities. To achieve this Sahana Eden should be able to produce reports which analyse and visualize data in a flexible, user friendly and configurable way.
The types of the report can be Pivot Table, Bar Chart, or Pie chart. Our work includes the exporting the generated report to user's computer so that user can see the generated report offline. Currently we focused on exporting report to PDF document.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on several different operating systems:Linux,Windows,Mac. The installation of Sahana eden requires web2py framework. Sahana Eden can be easily deployed on Amazon EC2, Heroku.

To contribute to Eden foundation, fork repository from
https://github.com/flavour/eden

==Implementation==

The base class Exporter is defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Since we have implemented the Pdf functionality, a PdfExporter is defined for this.

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are achieving code reuse. This can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytesscoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to a PDF. In future, the grahps and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excel are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T23:10:57Z

Vseth: /* History */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of the 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is a unique strength of the Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)" Sahana software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?

How can responsible authorities find hospitals that can accommodate more patients?

How can family members be reunited who were separated during evacuation?

==Description==
Sahana Eden can be used to collect and manage a large variety of data. For this data to add value it needs to be processed and shared in a way in which it can present the information people need to make decisions and plan activities. To achieve this Sahana Eden should be able to produce reports which analyse and visualize data in a flexible, user friendly and configurable way.
The types of the report can be Pivot Table, Bar Chart, or Pie chart. Our work includes the exporting the generated report to user's computer so that user can see the generated report offline. Currently we focused on exporting report to PDF document.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on several different operating systems:Linux,Windows,Mac. The installation of Sahana eden requires web2py framework. Sahana Eden can be easily deployed on Amazon EC2, Heroku.

To contribute to Eden foundation, fork repository from
https://github.com/flavour/eden

==Implementation==

The base class Exporter is defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Since we have implemented the Pdf functionality, a PdfExporter is defined for this.

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are achieving code reuse. This can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytesscoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to a PDF. In future, the grahps and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excel are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T22:38:03Z

Vseth: /* Export to Excel File */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of the 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is a unique strength of the Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)" Sahana software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?
How can responsible authorities understand where hospitals that can accommodate additional patients are located?
How can family members remaining in villages be reunited with their parents, spouses, and children separated by evacuation?

==Description==
Sahana Eden can be used to collect and manage a large variety of data. For this data to add value it needs to be processed and shared in a way in which it can present the information people need to make decisions and plan activities. To achieve this Sahana Eden should be able to produce reports which analyse and visualize data in a flexible, user friendly and configurable way.
The types of the report can be Pivot Table, Bar Chart, or Pie chart. Our work includes the exporting the generated report to user's computer so that user can see the generated report offline. Currently we focused on exporting report to PDF document.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on several different operating systems:Linux,Windows,Mac. The installation of Sahana eden requires web2py framework. Sahana Eden can be easily deployed on Amazon EC2, Heroku.

To contribute to Eden foundation, fork repository from
https://github.com/flavour/eden

==Implementation==

The base class Exporter is defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Since we have implemented the Pdf functionality, a PdfExporter is defined for this.

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are achieving code reuse. This can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytesscoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to a PDF. In future, the grahps and pivot table can be exported to an excel(.xls). Exporting to an excel will require significant amount of effort as excel are interactive. User should be able to manipulate the generated excel document.(Not required in the case of PDF as they are static).
XLS would ideally include raw Data on one or more sheets, the Pivot table on another sheet & Graphs on one or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T22:37:23Z

Vseth: /* Dependency */

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of the 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is a unique strength of the Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)" Sahana software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?
How can responsible authorities understand where hospitals that can accommodate additional patients are located?
How can family members remaining in villages be reunited with their parents, spouses, and children separated by evacuation?

==Description==
Sahana Eden can be used to collect and manage a large variety of data. For this data to add value it needs to be processed and shared in a way in which it can present the information people need to make decisions and plan activities. To achieve this Sahana Eden should be able to produce reports which analyse and visualize data in a flexible, user friendly and configurable way.
The types of the report can be Pivot Table, Bar Chart, or Pie chart. Our work includes the exporting the generated report to user's computer so that user can see the generated report offline. Currently we focused on exporting report to PDF document.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on several different operating systems:Linux,Windows,Mac. The installation of Sahana eden requires web2py framework. Sahana Eden can be easily deployed on Amazon EC2, Heroku.

To contribute to Eden foundation, fork repository from
https://github.com/flavour/eden

==Implementation==

The base class Exporter is defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Since we have implemented the Pdf functionality, a PdfExporter is defined for this.

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are achieving code reuse. This can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

We have implemented the code using external java-script libraries.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytesscoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to the PDF version of it. In future newer implementation can include exporting the pivot table and graph to the excel(.xls) version. This implementation may requires significant efforts as excel documents are interactive. So a user should able to manipulate the generated excel document.(Not required in the case PDF document as they are static documents).
XLS would ideally include the raw Data on 1 or more sheets, the Pivot table on another sheet & Graphs on 1 or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/oss fmv

2013-10-30T22:36:13Z

Vseth:

This project is developed as a contribution to Sahana Software Foundation (Eden).

==History==

Sahana Software Foundation was originally developed by members of the Sri Lankan IT community who wanted to apply their talent and help their country to recover from the aftermath of the 2004 Indian Ocean earthquake and tsunami. The word “Sahana” means “relief” in Sinhalese, one of the national language of Sri Lanka. Sahana community has since grown to include experts from emergency and disaster management as partners in software development process. This is a unique strength of the Sahana Software Foundation.

Under the stewardship of "The Lanka Software Foundation (LSF)" Sahana software grew into a free and open source software project. Hundreds of volunteers, contribute and support both local and national relief agencies in their response to numerous large-scale, sudden-onset disasters. The Sahana Software Foundation was established in 2009 as a non-profit organization registered in the State of California to serve diverse group of customers. SSF partners together with disaster and technologies experts address following questions:

How can an urgent requirement be effectively communicated to international donor community?
How can responsible authorities understand where hospitals that can accommodate additional patients are located?
How can family members remaining in villages be reunited with their parents, spouses, and children separated by evacuation?

==Description==
Sahana Eden can be used to collect and manage a large variety of data. For this data to add value it needs to be processed and shared in a way in which it can present the information people need to make decisions and plan activities. To achieve this Sahana Eden should be able to produce reports which analyse and visualize data in a flexible, user friendly and configurable way.
The types of the report can be Pivot Table, Bar Chart, or Pie chart. Our work includes the exporting the generated report to user's computer so that user can see the generated report offline. Currently we focused on exporting report to PDF document.

==Design==

==Setup (Installation)==

Sahana Eden can be installed on several different operating systems:Linux,Windows,Mac. The installation of Sahana eden requires web2py framework. Sahana Eden can be easily deployed on Amazon EC2, Heroku.

To contribute to Eden foundation, fork repository from
https://github.com/flavour/eden

==Implementation==

The base class Exporter is defined as:

<pre>
function Exporter(exp)
{
this.exporter = exp;
this.tableExporter = null;
}

Exporter.prototype.setExporter = function(exp)
{
this.exporter = exp;
}

Exporter.prototype.setTableExporter = function(exporter)
{
this.tableExporter = exporter;
}

Exporter.prototype.renderTable = function()
{
this.tableExporter.render();
}
</pre>

Since we have implemented the Pdf functionality, a PdfExporter is defined for this.

<pre>

function PdfExporter(exp)
{
this.exporter = exp;
}

PdfExporter.prototype = new Exporter();

PdfExporter.prototype.getPdf = function()
{
return this.exporter;
}

PdfExporter.prototype.export = function(imageObj, json)
{
this.exportImage(imageObj);
this.exportPivotTable(json);
}

PdfExporter.prototype.exportImage = function(imageObj)
{
this.exporter.pageAdd();

// load image from canvas into BytescoutPDF

this.exporter.imageLoadFromUrl(imageObj);

// place this mage at given coordinates and dimesionson on the page
this.exporter.imagePlaceSetSize(50, 50, 0, 750, 500);
}

PdfExporter.prototype.exportPivotTable = function(json)
{
this.exporter.pageAdd();

if(this.tableExporter == null || this.tableExporter == undefined)
{
this.setTableExporter(new PdfTableRenderer(json, this.exporter));
}

this.renderTable();
}

</pre>

Now, Table exporter is written only for table creation in Pdf. This can even be used for table creation in XLS or RSS or so. Thus, we use strategy pattern here.

Table renderer is defined as below:

<pre>
function TableRenderer()
{
this.X = 50;
this.Y = 50;
this.PageWidth = 750;
this.PageHeight = 500;
this.numcols = 0;
}

TableRenderer.prototype.constructor = function(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

TableRenderer.prototype.render = function()
{
// this method is abstract and does nothing
}

</pre>

And Pdf table renderer having functionality of exporting table to Pdf, is defined as:

<pre>
function PdfTableRenderer(json_data, exp)
{
this.json = json_data;
this.exporter = exp;
}

PdfTableRenderer.prototype = new TableRenderer();

PdfTableRenderer.prototype.render = function()
{
// render code here
}
</pre>

By setting TableRenderer in Exporter class to an instance of PdfTableRenderer, we are achieving code reuse. This can be extended for XLS by writing XLSTableRenderer class which inherits from TableRenderer and overrides the render() method.

At last, the final Pdf object which needs to be downloaded, is generated by PdfFactory. Here we have used Factory pattern to achieve the same. getPdf() method of PdfFactory hides all the implementation details from outside of the library.

PdfFactory is defined as:

<pre>
function PdfFactory()
{

}

PdfFactory.getPdf = function()
{
//... code to extract canvas image

var pe = new PdfExporter(pdf);

pe.export(dataURL, json_data);

return pe.getPdf(); // gets final pdf object
}

</pre>

==Dependency==

During implementation of this project we used external java-script library.

===html2canvas.js===

The purpose of this file is to having ability to take "screenshots" of webpages or parts of it, directly on the users browser. The screenshot is based on the DOM.

===bytesscoutpdf.js===

The purpose of this client-side Javascript library to generate PDF with text, images and graphics.It Works with mainstream desktop and mobile browsers, iPhone and iPad.

==Summary==

==Future==

===Export to Excel File===

Currently our work is restricted to exporting the graph and pivot table-generated interactively by user to the PDF version of it. In future newer implementation can include exporting the pivot table and graph to the excel(.xls) version. This implementation may requires significant efforts as excel documents are interactive. So a user should able to manipulate the generated excel document.(Not required in the case PDF document as they are static documents).
XLS would ideally include the raw Data on 1 or more sheets, the Pivot table on another sheet & Graphs on 1 or more additional sheets. The Pivot Table & Graphs should be linked to the raw data using XLS functionality.

===Subscription===

A user would like to subscribe to a report to receive by email daily/weekly/monthly. The format of this report can be PDF or Excel document.

==External Links==

:1. [https://github.com/flavour/eden Git repository]
:2. [http://demo.eden.sahanafoundation.org/eden/ Sahana Eden Demo]
:3. [http://bytescout.com/ Bytescout]
:4. [http://html2canvas.hertzen.com/ Html2Canvas]

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T03:58:37Z

Vseth: /* References */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----
----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===
----
----

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken for each response. By laying the load time out in a timeline various sources of delay can be tracked. The sources includes html, css, javascript, images etc. Options to see the analysis of these sources appear on the menu bar of net tab.

It also shows the start and finish time of loading a file relative to the other files. This helps in tuning the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Other web development tools ==

Other web development tools available are :

*[http://en.wikipedia.org/wiki/Internet_Explorer_Developer_Tools Internet Explorer Developer Tools]
*[http://en.wikipedia.org/wiki/Opera_Dragonfly Opera Dragonfly]
*[https://developer.apple.com/technologies/safari/developer-tools.html Safari's Web Inspector]
*[https://developers.google.com/chrome-developer-tools/ Google Chrome Developer Tool]

All these tools work like firefug with their own minor variances, which make various actions a tiny bit easier or harder. Since websites should be cross-browser compatible, one have to be really comfortable in the debugging tools of every browser. Firebug can be good starting point for a naive developer as it is very easy to use.

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx
* http://www.smashingmagazine.com/2008/11/18/15-helpful-in-browser-web-development-tools/

== See More ==

For better understanding [http://www.youtube.com/watch?v=sHbYpl1XFiM see this video]

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T03:46:17Z

Vseth: /* Other web development tools */

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T03:39:27Z

Vseth: /* Other web development tools */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----
----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===
----
----

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken for each response. By laying the load time out in a timeline various sources of delay can be tracked. The sources includes html, css, javascript, images etc. Options to see the analysis of these sources appear on the menu bar of net tab.

It also shows the start and finish time of loading a file relative to the other files. This helps in tuning the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Other web development tools ==

Other web development tools available are :

*[http://en.wikipedia.org/wiki/Internet_Explorer_Developer_Tools Internet Explorer Developer Tools]
*Opera Dragonfly
*Safari's Web Inspector
*Google Chrome Inspector

All these tools work like firefug with their own minor variances, which make various actions a tiny bit easier or harder. Since websites should be cross-browser compatible, one have to be really comfortable in the debugging tools of every browser. Firebug can be good starting point for a naive developer as it is very easy to use.

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx
* http://www.smashingmagazine.com/2008/11/18/15-helpful-in-browser-web-development-tools/

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T03:36:02Z

Vseth: /* Other web development tools */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----
----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===
----
----

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken for each response. By laying the load time out in a timeline various sources of delay can be tracked. The sources includes html, css, javascript, images etc. Options to see the analysis of these sources appear on the menu bar of net tab.

It also shows the start and finish time of loading a file relative to the other files. This helps in tuning the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Other web development tools ==

Other web development tools available are :

*Internet Explorer Developer Tools
*Opera Dragonfly
*Web Inspector
*Google Chrome Inspector

All these tools work like firefug with their own minor variances, which make various actions a tiny bit easier or harder. Since websites should be cross-browser compatible, one have to be really comfortable in the debugging tools of every browser. Firebug can be good starting point for a naive developer as it is very easy to use.

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx
* http://www.smashingmagazine.com/2008/11/18/15-helpful-in-browser-web-development-tools/

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T03:20:37Z

Vseth: /* Comparison with other web development tools */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----
----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===
----
----

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken for each response. By laying the load time out in a timeline various sources of delay can be tracked. The sources includes html, css, javascript, images etc. Options to see the analysis of these sources appear on the menu bar of net tab.

It also shows the start and finish time of loading a file relative to the other files. This helps in tuning the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Other web development tools ==

Other web development tools available are :

*Internet Explorer Developer Tools
*Opera Dragonfly
*Web Inspector
*Google Chrome Inspector

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx
* http://www.smashingmagazine.com/2008/11/18/15-helpful-in-browser-web-development-tools/

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T03:11:30Z

Vseth: /* References */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----
----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===
----
----

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken for each response. By laying the load time out in a timeline various sources of delay can be tracked. The sources includes html, css, javascript, images etc. Options to see the analysis of these sources appear on the menu bar of net tab.

It also shows the start and finish time of loading a file relative to the other files. This helps in tuning the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx
* http://www.smashingmagazine.com/2008/11/18/15-helpful-in-browser-web-development-tools/

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:57:51Z

Vseth: /* Network Performance Analysis */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----
----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===
----
----

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken for each response. By laying the load time out in a timeline various sources of delay can be tracked. The sources includes html, css, javascript, images etc. Options to see the analysis of these sources appear on the menu bar of net tab.

It also shows the start and finish time of loading a file relative to the other files. This helps in tuning the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:56:28Z

Vseth: /* Network Performance Analysis */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----
----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===
----
----

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. By laying the load time out in a timeline various sources of delay can be tracked. The sources includes html, css, javascript, images etc. Options to see the analysis of these sources appear on the menu bar of net tab.

It also shows the start and finish time of loading a file relative to the other files. This helps in tuning the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:34:56Z

Vseth: /* Network Performance Analysis */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----
----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===
----
----

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:34:40Z

Vseth: /* Debugging XmlHttpRequest */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----
----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:33:44Z

Vseth: /* CSS Debugging */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color. Thus inspecting styles of any element is very easy with firebug.

The style of any html element can be tweaked and checked in real-time. In the below snapshot, background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:30:27Z

Vseth: /* CSS Debugging */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----
----

Firebug shows the styles that cascade together for each element. Style rules are viewed in the order of precedence. The overridden properties are struck out. Eg if body have style {text-color : red;}. Every element in body follow this style(known as cascading of styles). But if an element (element1) have its own style like .element1 {text-color :blue;} then the body style is struck out and the text in element1 are in blue color.
The style of any html element can be tweaked and checked in real-time. In the below snapshot,background-color of .body1 is changed to blue. This change is applied immediately. But, as mentioned earlier, these tweaks are not permanent. This tools is of great help to web/css designers.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:20:54Z

Vseth: /* HTML Debugging */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page. The below snapshot depicts the editing of title. This change is applied immediately as you type.

[[File:Edit_title.png]]

=== CSS Debugging ===

----

Firebug shows the styles that cascade together for each element. Rules are viewed in the order of precedence. The overridden properties are struck out.
The style of any html element can be tweaked and checked in real-time. This tools is of great help to web/css designers.
While editing a CSS property, the up and down arrow keys can be used to see all possible properties in alphabetical order. Firebug has the complete dictionary of standard CSS keywords in its memory.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:16:39Z

Vseth: /* HTML Debugging */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]]

Once an element is selected, you can change its value to see its affect on the page. These edits are not permanent. It just provide a kind of visual aid to web designer in enriching the look and feel of the page.

[File:Edit_title.png]]

=== CSS Debugging ===

----

Firebug shows the styles that cascade together for each element. Rules are viewed in the order of precedence. The overridden properties are struck out.
The style of any html element can be tweaked and checked in real-time. This tools is of great help to web/css designers.
While editing a CSS property, the up and down arrow keys can be used to see all possible properties in alphabetical order. Firebug has the complete dictionary of standard CSS keywords in its memory.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:12:08Z

Vseth: /* HTML Debugging */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type. The below snapshot depicts the position of selected "h1" element in html.

[[File:inspect_html_2.png]] [[File:Edit_title.png]]

=== CSS Debugging ===

----

Firebug shows the styles that cascade together for each element. Rules are viewed in the order of precedence. The overridden properties are struck out.
The style of any html element can be tweaked and checked in real-time. This tools is of great help to web/css designers.
While editing a CSS property, the up and down arrow keys can be used to see all possible properties in alphabetical order. Firebug has the complete dictionary of standard CSS keywords in its memory.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:08:00Z

Vseth: /* HTML Debugging */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===
----
----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type.

[[File:inspect_html_2.png]] [[File:Edit_title.png]]

=== CSS Debugging ===

----

Firebug shows the styles that cascade together for each element. Rules are viewed in the order of precedence. The overridden properties are struck out.
The style of any html element can be tweaked and checked in real-time. This tools is of great help to web/css designers.
While editing a CSS property, the up and down arrow keys can be used to see all possible properties in alphabetical order. Firebug has the complete dictionary of standard CSS keywords in its memory.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:07:27Z

Vseth: /* Debugging XmlHttpRequest */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===

----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type.

[[File:inspect_html_2.png]] [[File:Edit_title.png]]

=== CSS Debugging ===

----

Firebug shows the styles that cascade together for each element. Rules are viewed in the order of precedence. The overridden properties are struck out.
The style of any html element can be tweaked and checked in real-time. This tools is of great help to web/css designers.
While editing a CSS property, the up and down arrow keys can be used to see all possible properties in alphabetical order. Firebug has the complete dictionary of standard CSS keywords in its memory.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T02:06:53Z

Vseth: /* Network Performance Analysis */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===

----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type.

[[File:inspect_html_2.png]] [[File:Edit_title.png]]

=== CSS Debugging ===

----

Firebug shows the styles that cascade together for each element. Rules are viewed in the order of precedence. The overridden properties are struck out.
The style of any html element can be tweaked and checked in real-time. This tools is of great help to web/css designers.
While editing a CSS property, the up and down arrow keys can be used to see all possible properties in alphabetical order. Firebug has the complete dictionary of standard CSS keywords in its memory.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----

----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

To view the net panel, right click on net tab menu and enable net panel as shown in the screenshot below.

[[File:net_enable.png]]

Another important consideration when designing a website is the page load time. This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-25T01:47:25Z

Vseth: /* Debugging Using Firebug */

= Debugging Using Firebug =
[[File:firebug.png|right]]

Firebug is a Firefox browser add-on that puts together various web development tools to facilitate web development. It enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites. It is widely used in major companies such as Amazon, eBay, ThoughtWorks etc. by web developers to test and fix bugs in their code.

__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different versions of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here]. A cross-browser version is in development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provides different tabs to examine HTML(Markup), CSS(Styling), DOM(Document Object Model), Scripts, Net (Network Analysis) etc. This section briefly explains the various tools available by Firebug and how to use them to debug web applications. To start with debugging, you should right click on the browser and select "Inspect element with Firebug", which will show the Firebug panel.

[[File:inspect element.png ]]

=== HTML Debugging ===

----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type.

[[File:inspect_html_2.png]] [[File:Edit_title.png]]

=== CSS Debugging ===

----

Firebug shows the styles that cascade together for each element. Rules are viewed in the order of precedence. The overridden properties are struck out.
The style of any html element can be tweaked and checked in real-time. This tools is of great help to web/css designers.
While editing a CSS property, the up and down arrow keys can be used to see all possible properties in alphabetical order. Firebug has the complete dictionary of standard CSS keywords in its memory.

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step. Following are some ways in which you can stop the execution of script and use execution control buttons listed below to continue debugging your code.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

if(var == 0){
debugger;
}

In the above example if value of var becomes equal to 0, the control would go to the next statement which is debugger. This statement would make the execution to halt at this line and a notification for the break point would be shown.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
Following is a brief description of the tools available in script panel toolbar.

* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

Firebug provides the option to show each of these types of scripts in the following combinations which makes debugging easier.

[[File:script type-wiki.png]]

* '''Execution Control Buttons'''

The following buttons are available to step through the code once the control is provided to the developer at a break point.

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Debugging XmlHttpRequest ===

----

----

Firebug can also be used to debug XmlHttpRequest. To enable select "Show XmlHttpRequests" in the options menu. Once you enable this, whenever an XmlHttpRequest is made, the request made, response received, time taken, value of the headers for the request etc. can be seen on the console panel. Refer to [http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx Debug XmlHttpRequest with Firebug]

=== Network Performance Analysis ===

----

To view the net panel, enable the panel using net' tab menu

[[File:net_enable.png]]

This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
Another important consideration when designing a website is the page load time.As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You can also filter files by their type and organize them by amount of activity which can help in debugging. By laying the load time out in a timeline various sources of delay can be tracked. For example in the screenshot above the main document takes just short of half a second to load.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== Comparison with other web development tools ==

== Conclusion ==

To summarize Firebug is the most popular and powerful web development tool. It provides features to modify style and layout in real time and uses the most advanced JavaScript debugger available for a large number of browsers. It also has a lot of support available on the web to learn and use its capabilities to develop advanced websites. It is highly recommended for web developers to use this tool, as it will certainly make web development much easier.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)
* http://www.ulancer.com/2012/01/firebug-tutorial-getting-started/
* http://codeclimber.net.nz/archive/2007/08/01/How-to-debug-XmlHttpRequest-with-Firebug.aspx

File:Net perf 2.png

2013-09-18T20:56:06Z

Vseth: uploaded a new version of "File:Net perf 2.png"

File:Net perf 2.png

2013-09-18T20:54:31Z

Vseth:

CSC/ECE 517 Fall 2013/ch1 1w11 sv

2013-09-18T20:54:16Z

Vseth: /* Network Performance Analysis */

= Debugging Using Firebug =
[[File:firebug.png|right]]
Firebug is a tool that enables web developers to debug, edit and inspect websites' components like CSS, HTML, DOM, JavaScripts. Firebug is free and open source software distributed under the BSD License. Apart from providing debugging, Firebug is also used to analyse performance of websites.
__TOC__
== Installation and Activation ==
Firebug can be installed as a Add-On/Plugin for Firefox. Firebug compatibility for different version of Firefox can be looked [https://addons.mozilla.org/en-US/firefox/addon/firebug/ here].

Version for other browsers is under development.

Following are the ways to activate Firebug
<ul>
<li>Click F12 => Activates Firebug on same window as a bar at the bottom.
<li>Click Ctrl+F12 => Activates Firebug on a separate window
<li> Right click on the webpage and click on "Inspect Element with Firebug".
</ul>

== Debugging ==

Firebug provide different tabs to examine HTML(Markup), CSS(Styling), DOM(Object Model, Scripts, Net (Network Analysis) etc.

=== HTML Debugging ===

----

Firebug can point any HTML element with precision. HTML elements' attributes and text can be created, deleted, or edited just by clicking them. The changes will be reflected immediately as one type.

[[File:inspect_html_2.png]] [[File:Edit_title.png]]

=== CSS Debugging ===

----

Firebug shows the styles that cascade together for each element. Rules are viewed in the order of precedence. The overridden properties are struck out.
The style of any html element can be tweaked and checked in real-time. This tools is of great help to web/css designers.
While editing a CSS property, the up and down arrow keys can be used to see all possible properties in alphabetical order. Firebug has the complete dictionary of standard CSS keywords in its memory

[[File:edit_css_1.png ]][[File:edit_css_2.png ]]

=== JavaScript Debugging ===

----

----

Firebug can be used to debug JavaScript code using the Console and Script Panel provided by this tool. These panels allow you to step-debug your code, profile performance, log errors and information and other useful functionality.

==== Console Panel ====
This panel primarily allows you to log information and shows errors and warnings in your code.
First you need to enable logging of debug information which can be done by checking "Show JavaScript Errors" and "Show JavaScript Warnings" in the options menu.The options menu can be found by clicking on the little arrow in the panel tab or right clicking on the panel tab. This makes all the errors and warnings in the JavaScript code be displayed on the console tab. You can also enable "Show Stack Trace with Errors", a small icon will be shown besides the run-time errors which on expanding will show the stack trace. The console panel also allows to log user defined messages.

[[File:Console_panel.png]]

==== Script Panel ====
The script panel provides powerful functionality of step-debugging your code. In order to step debug your code, Firebug has various methods to stop the execution of code at specific point and continue watching or inspecting the outcome at each step.

* '''Breakpoints'''
You can set breakpoint on the line you want to stop execution by clicking on the breakpoint column on the left side inside the Script Panel. In some of the breakpoints, firebug allows you to set a condition to control when they trigger. There is a breakpoint side Panel to manage breakpoints.

* '''Using Debugger keyword'''
The keyword <code>debugger;</code> can be placed in the code at the point where you want to stop execution.

* '''Break On'''
Firebug also has a break on feature which stops the script execution when a specific event occurs. This feature is present in several panels.

===== Script Panel Toolbar =====
* '''Break On Features'''
There is a break on Next button([[File:Break_On_Next_Button.png‎]]) which allows you to stop the script execution at the next executed command. When you click on the button and a script execution comes, the debugger halts the script and you can step through the script using the execution control buttons.

* '''Menu for Script Types'''
There are 3 different types of scripts.
{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || Description
|-
|static || Scripts loaded together with the page (via the <script> tag)
|-
|event || Scripts generated through an event
|-
|eval() || Scripts executed using the eval() function (e.g. scripts loaded via an XMLHttpRequest)
|}

* '''Execution Control Buttons'''

{| class="wikitable" style="vertical-align:top;"
|- bgcolor=lightgrey
! style="width:60px" | Type || style="width:50px" | Button || Description
|-
| Rerun || [[Image:rerunButton.png|center]] || Reruns the current call stack
|-
| Continue || [[Image:continueButton.png|center]] || To continue the script execution until the next breakpoint or the execution ends
|-
| Step Into || [[Image:stepIntoButton.png|center]]|| Get inside the body of the function to debug it.
|-
| Step over || [[Image:stepOverButton.png|center]] || Executes functions,moves to the next line of the same scope does not go inside the function.
|-
| Step out || [[Image:stepOutButton.png|center]] || Executes the rest of the current function and jumps back to it's caller
|}

The attached screenshot shows the script panel, the breakpoint at line 6074 stops execution of code at that line which is also highlighted in yellow. On the right side, the values of the variables like "state" can be seen at runtime under the Watch panel.

[[File:script-debug.png]]

==== Step Debugging ====
Once the script execution is stopped at a particular step, detailed information about values of variables, stack trace and method parameters can be seen on the Watch and Stack side panel. You can continue the execution of your script slowly watching the behavior of your script using the Execution control buttons. Hovering on the variables and functions in script panel will also give you information about their values.

=== Network Performance Analysis ===

----

To view the net panel, enable the panel using net' tab menu

[[File:net_enable.png]]

This panel shows the network performance of each request and also the time taken by the response. Net tab shows when the file started and stopped loading relative to all the other files. This helps to tune the order of files to show up in the page, so that the users don't have to wait for the important information to be displayed.

[[File:net_perf_2.png]]

== Advantages and Disadvantages ==

=== Advantages ===
* '''Inspecting and Editing HTML'''
Firebug allows you to inspect HTML code as it currently appears not after JavaScript has modified it. It therefore gives you the flexibility to debug more efficiently and reduces the overall time to debug. If you edit the code the changes are reflected immediately and are highlighted in yellow in the firebug window.

* '''Ability to find errors quickly'''
One of major advantage of Firebug is that it shows the errors in your code in the bottom left corner of the firebug window in bold red. You can examine all the errors pertaining to the webpage you are editing. The errors are organized so that it is easy to find and address it.

* '''Editing CSS'''
You can easily tweak CSS features using the cascading style sheet. When you click on a CSS feature, an editor pops up which allows you to edit the code and the changes are immediately reflected and are reversible.

* '''Monitoring Network Activity and Performance'''
As explained in the above section, Firebug has the Net panel which is a powerful tool to monitor network activity and performance. It allows you to monitor the activity of every single file on the website. You have complete information about file activity. You can also filter files by their type and organize them by amount of activity which can help in debugging.

=== Disadvantages ===
* May cause Firefox slightly slower since firebug is relatively big.
* It is not available for Internet Explorer.
* May sometimes(though rarely) make Firefox unstable.

== References ==

* http://getfirebug.com/
* http://getfirebug.com/wiki/index.php/Script_Debugging
* http://www.ehow.com/info_8544247_advantages-firebug.html
* https://addons.mozilla.org/en-US/firefox/addon/firebug/
* http://getfirebug.com/wiki/index.php/Script_Panel
* http://en.wikipedia.org/wiki/Firebug_(software)

File:Net perf.png

2013-09-18T20:53:37Z

Vseth: uploaded a new version of "File:Net perf.png": Reverted to version as of 20:52, 18 September 2013

File:Net perf.png

2013-09-18T20:53:08Z

Vseth: uploaded a new version of "File:Net perf.png"