CSC 510 : Final Screencast

Note: Please make sure you watch in HD 1080P to see the text clearly. If this doesnt work on this site, watch on youtube with 1080P HD quality

References

  1. Reuven Lerner, At the Forge: Firebug, Linux Journal, v.2007 n.157, p.8, May 2007
  2. Junghoon Oh, Seungbong Lee, Sangjin Lee, Advanced evidence collection and analysis of web browser activity, Digital Investigation, Volume 8, Supplement, August 2011, Pages S62-S70, ISSN 1742-2876, http://dx.doi.org/10.1016/j.diin.2011.05.008.
  3. Olga Baysal, Ian Davis, and Michael W. Godfrey. 2011. A tale of two browsers. In Proceedings of the 8th Working Conference on Mining Software Repositories (MSR ’11). ACM, New York, NY, USA, 238-241. DOI=10.1145/1985441.1985481 http://doi.acm.org/10.1145/1985441.1985481
  4. Firefox and Firebug: A Developer’s Swiss Army Knife, http://www.htmlgoodies.com/beyond/webmaster/toolbox/article.php/3801831/Firefox-and-Firebug-A-Developers-Swiss-Army-Knife.htm

CSC 510 : Final Podcast

Show Notes
In this podcast we discuss the script and console panels of our three tools – Chrome Developer tools, Firebug, F12 developer tools.

The first section of our podcast focuses on the console and how it has made working with javascript a much more pleasant experience. We briefly discuss

  • using the console to log events
  • javascript execution on console
  • usability and layout of these panels
  • working with javascript errors

The next section focuses on the scripting panel and how to use it debug javascript errors. We show how these tools are moving towards acting as a runtime IDE for javascript. Here we look at

  • debugging a javascript error
  • sub-panels- watch, stack, breakpoints
  • layout and usabillity
  • how they went above and beyond

One Cool thing

We think the fact that these tools are coming coles to being IDEs is AWESOME

References

  • Reuven Lerner, At the Forge: Firebug, Linux Journal, v.2007 n.157, p.8, May 2007
  • S. Artzi, J. Dolby, S. Jensen, A. Møller, and F. Tip, “A Framework for Automated Testing of JavaScript Web Applications,” in Intl. Conference on Software Engineering (ICSE). ACM, 2011, pp. 571-580.
  • Derrell Lipman. 2012. LIBERATED: a fully in-browser client and server web application debug and test environment. In Proceedings of the 3rd USENIX conference on Web Application Development (WebApps’12). USENIX Association, Berkeley, CA, USA, 8-8
  • Brad Myers, Scott E. Hudson, and Randy Pausch. 2000. Past, present, and future of user interface software tools. ACM Trans. Comput.-Hum. Interact. 7, 1 (March 2000), 3-28. DOI=10.1145/344949.344959 http://doi.acm.org/10.1145/344949.344959


Raghav Tripathi & Roopak Venkatakrishnan

CSC510 : Final Blogpost

The front end of web development has always been seen as somewhat of a pain for developers. The reason for this, stems from the fact that there are many different non standard factors they have to account for along with the lack of tools provided to them for this purpose. Each of the major web browsers in the market today namely Google Chrome, Mozilla Firefox and Microsoft Internet Explorer[1] vary slightly in their implementation.

To help make web development easier some tools were introduced into the market. Some of them are Firebug for Firefox (v1.12.4)[2], Chrome developer tools (v30) and F12 developer tools for Internet Explorer (IE9). Each of the tools works with a different browser and has been implemented in a different way. We hope to study these tools and understand where these tools excel, and what they lack.

One has to understand that usability of these tools is very important. The easier it is to access the various features provided by these tools , the more of them that will be used. We will be looking into how the usability of the tools are important.

These tools have several areas they focus on and we hope to analyze each of these areas. This blog post focuses on the HTML, CSS and DOM panels. These are the basic components which define a web page and all of the tools have some features to assist in each of these areas. Some other things we will be looking at later include Script, Console, Network and other things which are tool specific.

Usability

As mentioned in the introduction, the usability of a web development tool is essential[3]. In addition to the features it provides the ease of use of a tool determines how easy is it for the developer to fix the issue using the tool. For this blogpost, we analyzed and evaluated the usability of only the HTML, DOM and CSS panels. We plan to do the same for other panels in the podcast and screencast submissions. Firebug is an add on which needs to be explicitly added to Mozilla Firefox. Whereas Chrome developer tools and F12 developer tools both are inbuilt features in the Google Chrome and Microsoft Internet Explorer browsers respectively. Hence, their updates are handled more seamlessly. It took us a while to determine the correct Firebug version for the Firefox browser on which we started to gather results for this blog. This is slightly user unfriendly and it would be better if Firebug displays the download link to the Firebug which is compatible with the browser version from which it is being downloaded.

Firebug Download page

Firebug has a particularly good feature of allowing the user to display only the panels of interest to the developer. So, for example if the developer is debugging a CSS related issue such as misalignment of text or image on a web page then the developer can hide all the other panels other than the CSS panel. We found that this seemingly simple feature which is not available in Chrome Developer tools and F12 developer tools can help the user have more focus on the task at hand by not showing other panels which are irrelevant to current issue.

Firebug Showing only relevant panels

The Chrome developer tools use a search icon () at the bottom of the panel to indicate the “Inspect” functionality. This is a little unintuitive as the regular mouse pointer icon () as used in Firebug and F12 developer tools are more indicative of that feature. So, it took us a while to find how to inspect an element in Chrome developer tools. Both Chrome developer tools and F12 developer tools also don’t allow the developer to collapse and hide the right window in the HTML panel. Firebug has this option which again gives the developer the option to reduce clutter and give a much more cleaner user interface to focus on during the task.

The F12 developer tools user interface is clunky because of the Windows style menus displayed in addition to the panels. We feel that the menu options don’t provide any added functionality to F12 developer tools but only result in UI bloat.

UI Bloat on F12 Dev Tools

Menu UI Bloat on F12 Dev Tools

However, a particularly useful feature we noticed in F12 developer tools was the presence of compatibility views for Internet Explorer versions ranging from 7 to 10. This enables the web developer to look at the web page in context of different Internet Explorer browser versions without the possible need to have multiple versions installed on the host. This is a must have with Internet Explorer to help maintain backward compatibility of web sites because of significant change in the way it interprets web standards like HTML, CSS etc from major version 7 to 10.

F12 Developer tools has a link which quickly allows for the page to be validated for HTML, CSS, Javascript errors. This is handy and would be a good addition to Firebug and Chrome Developer Tools. It would be interesting if this checking could be done offline.

HTML

The main HTML panel is quite similar in all tools and renders the web page in a tree like structure consisting of tags which can be expanded as required by the developer.

All of the tools we are studying, Firebug, Chrome developer tools and F12 developer tools allows the user to inspect various elements on a page. When hovering over a tag in the HTML panel the tools highlights the corresponding part of the page and vice versa. This is pretty helpful as it helps the user quickly determine where the tag is on the page, how big it is, its margins etc.

Hover functionality for inspecting elements

Hover functionality for inspecting elements

Firebug   also draws out the path to each node on top of the HTML panel. It puts down the path starting with the node itself on the right and working its way to the html tag on the left. We felt that this may be misleading considering the fact that a web page starts with a html tag and works its way to each node.

F12 developer tools[4] renders the word “Text” before putting down any plain text within a tag. This is definitely very confusing and none of the other tools exhibit this behavior. We are unable to determine why this is done in the first place and cannot find a place where this might be of any use. It should be noted that this behavior is not uniform and F12 does not put down the word “Node” or something similar before any other node.

Text pre-pended to node

Text pre-pended to node

One of the features that we found really useful in Chrome Developer tools was its ability to help debug web pages on a mobile device. It requires the developer to connect the system to a device running Chrome and the tool on the desktop would offer the same functionality as it offered for debugging the web page in a desktop environment.

Both Chrome and Firebug offer tools to help with the debugging of actions caused by change in the DOM of the page due to javascript etc[5] . This can be seen in the DOM breakpoints subpanel. It is particularly useful because of the way web pages of today are being designed. We will look into this in more detail when we analyze the javascript and scripting console.

The HTML panel in Chrome Dev tools also allow the user to force a particular element into the hover state, or active or visited. We didn’t seem to find an equivalent capability in the other tools. We thought this could be a useful feature but also that it could be extended to force an element into more than the simple states offered here.

One flaw which we saw while using F12 developer tools on IE, was that the layout sub-panel which shows the box model for each node has no scroll-bar. It makes it very hard for the user to make changes using the panel without resizing F12.

Layout flaw in F12

Layout flaw in F12

The HTML panels on all the tools are somewhat similar, and there are no striking features that sets any of them apart, however each of the tools have small nits which the providers of the tools could work on to make the use of the tools easier.

DOM & CSS

Only Firebug has a separate panel for DOM. Whereas Chrome developer tools displays DOM related data as a “Properties” sub panel in the right window of their HTML panels and F12 developer tools doesn’t have a panel to display information specific to the DOM. The separate panel for DOM in Firebug allows the developer to view all the objects and arrays of a web page in an expandable tree view.

Overall the CSS panel is one of the most recently used panels as it allows the developers to fix alignment related issues. Since, each browser interprets CSS in a different manner the same web page can look very different in different browsers. All three of the tools allow editing of the CSS element values and see the effects of the change rendered.

For example: we found a user interface bug in www.csc.ncsu.edu when being viewed in Internet Explorer v9 with compatibility for IE7. When hovering over any of the menus like “About Us”, “Academics”, “Research” etc the corresponding entries were getting hidden underneath the Feature stories.  The CSS panels of all 3 tools can be used to fix such issues.

Dropdown hidden

Dropdown hidden

It is worth mentioning that both Firebug and F12 developer tools have an explicit CSS panel while Chrome developer tools has a Styles subpanel in Elements to display CSS related information. Firebug and F12 developer tools edges the Chrome developer tools when it comes to CSS panel as they show both

  1. CSS of an element being inspected
  2. Contents of the entire CSS file loaded for a web page

Chrome developer tools shows only the CSS of an element being inspected. In Firebug and F12 the developer can select from a dropdown all the CSS files loaded to render this page. However, we noticed that F12 developer tools possibly downloads the CSS file again as there is a noticeable delay after selecting the CSS file from the drop down till when the file’s contents are displayed. Also, the check-boxes next to CSS elements in F12 developer tools are unintuitive as to what they enable the developer to perform.

Though the CSS panels are useful in analyzing and playing around with the layout of a web page, it is worth noting that none of the three tools provide the functionality to view the webpage and its elements in a 3D layout. This is a particularly useful feature to view elements that mistakenly are hidden due to incorrect values in the z-index of of the page.

References

  1. http://www.netmarketshare.com/browser-market-share.aspx?qprid=2&qpcustomd=0
  2. Reuven Lerner, At the Forge: Firebug, Linux Journal, v.2007 n.157, p.8, May 2007 (http://dl.acm.org/citation.cfm?id=1243939)
  3. Brad Myers, Scott E. Hudson, and Randy Pausch. 2000. Past, present, and future of user interface software tools. ACM Trans. Comput.-Hum. Interact. 7, 1 (March 2000), 3-28. DOI=10.1145/344949.344959 http://doi.acm.org/10.1145/344949.3449590
  4. http://blogs.msdn.com/b/cbowen/archive/2011/06/17/internet-explorer-9-developer-tools-deep-dive-part-2-html-amp-css.aspx
  5. S. Oney and B. Myers, “FireCrystal: Understanding interactive behaviors in dynamic web pages,” in Proc. of the Symposium on Visual Languages and Human-Centric Computing (VLHCC). IEEE, 2009, pp. 105-108.(http://citeseerx.ist.psu.edu/viewdoc/summary?doi=10.1.1.149.9682)

By
Raghav Tripathi & Roopak Venkatakrishnan

CSC 510 : midterm screencast

In this screencast we look into a couple of papers and discuss how they are relevant.



References

Front End Developer Tools – Where are they going?

        Working on the front end code for a web site or web application has never been the best part of a programmer’s day. Typically User Interface for software moved from text based to a more GUI based approach. As discussed by Myers et al. [Mye00], this pushed tools for UI development to a more GUI and window based approach as well. Web development tools following this GUI based approach sprung up, each having its own merits and demerits. Microsoft FrontPage for example, one of the older more popular web page authoring tools offered the user a WYSIWYG editor [Fra99]. These visual editors, gave users the ability to develop the front end of web applications pretty easily, but  one of the major drawbacks was that the architecture these tools supported, dealt with static content, like a group of HTML files . Working with web applications which had front ends which interacted with databases did not benefit majorly from such WYSIWYG tools. These limitations however are slowly disappearing, and the definition of a web-application front end is changing.

FrontPage, offered not only development, but also management of “web-sites”

        The front end of web applications has moved over the years from simple dynamically generated HTML pages to a more interactive type of application which uses JavaScript and technologies like AJAX to make the applications, light, faster, more intuitive and user friendly. However debugging JavaScript, has for the most part been a tough process. JavaScript cannot be run like a simple program and tested. It involves simulating the JavaScript environment, the DOM of the HTML page etc.[Art11] One crucial step however which had made JavaScript hard to work with, was debugging the errors. Before tools like Firebug, and Chrome Developer tools came along, JavaScript developers relied on the “alert” function [Ler07].

When javascript didn’t work, developers ended up throwing in a bunch of such alert statements all over the place

        As the definition of web front end is changing, the tools used to develop the front end is also constantly evolving. Starting from notepad about a decade ago, we moved to GUI tools, and are now moving to combination of many kinds of tools, starting from a simple text IDE combined with a web debug and testing toolkit like Chrome Developer tools and its competitors like Firebug and F12 Developer tools.

References:


Raghav Tripathi & Roopak Venkatakrishnan

April 11 2012 -> Earthquake at Sumatra, -> Indonesia, Chennai , Bombay

And for the second time this blog posts live about an earthquake!

Apparently a huge earthquake off the coast of Northen Sumatra…. 8.9 in the richter scales….

Reports are coming from everywhere… here are the links i could find….

http://earthquake.usgs.gov/earthquakes/recenteqsww/Quakes/pt12102000.php

It is reported to be from a tsunami… Did anyone else feel anything??? Please post any interesting stories/information

Update :
Earthquake felt at Singapore, Thailand and southern India!

The richter scale was at 8.7

Update 2:
tsunami alert in tamil nadu and Andhra Pradhesh, india

Update 3:

http://ptwc.weather.gov/ptwc/?region=3&id=indian.TSUIOX.2012.04.11.0845&msg for tsunami arrival times

Update 4:
People in chennai feel a second tremor!

 

Update 5:
On the lighter side :

  •     People think rajinikanth had something to do with this
  •     Kevin William David claims that facebook and twitter are the most affected areas