Tag Archives: debug

May 18 2013

Things I didn’t Know about Chrome DevTools

Posted on by

I have been using Firebug as my debugging tool since I started web development. Firebug has been very helpful and the one thing I knew Chrome DevTools has that Firebug doesn’t is performance profiling which helps finding signs of memory leaks on a web page. I have wanted to take the free course Explore and Master Chrome DevTools for a while and I finally cross it out of my to-do list. It took me about four hours to complete the course and I have learned a few cool features of Chrome DevTools that I didn’t know about.

Explore and Master DevTools

  • Ways of get a DOM node
    Besides using the magnifier to select the DOM node on the web page, you can use the jQuery style of getting the DOM node with “$” sign. For example, $(“#name”) will give you the DOM node with id as name. If you select a DOM node in the Elements tab, you can then type in “$0″ in the Console tab to get the DOM node. On the other hand, you can type “inspect($0)” in the Console tab to show the DOM node in the Element tab.
  • Show style for different states
    lunapic_136720788190059_6There is a Toggle Element States option in the Elements -> Styles tab which will open the section for you to set the element state to active, focus, hover, and visited. I found this very helpful to debug the style issue for these states as the style definitions won’t be shown in the Styles tab unless they are in that state.
  • Dynamical editing source files and data source and view the change history
    You can edit CSS files or JavaScript files under the Sources tab. Right click in the file, you will see the option “Local modifications…” to see the change history and revert them. While we are used to editing CSS files, dynamically being able to update JavaScript is very useful.
  • Save updated file locally
    The changes were saved in the Chrome local storage if you edit them in the Sources tab and you can also save the updated files in your computer and override the original ones.
  • Events/Frames view in Timeline
    Frames view in Timeline
    The Timeline tab provides three types of views for the recording: Events, Frames, and Memory. The Events/Frames view shows the time spent on HTML parsing(blue), JavaScript rendering(yellow), style calculation(purple), and CSS rendering(green). The memory view is for detecting the sign of memory leaks.
  • Other plugins
    Page speed: It’s similar to YSlow. It gives you the suggestions of improving performance. After it’s installed, it’s will be shown as a new tab in the devTools.
    Google Closure: Compress multiple JavaScript files into one to reduce the number of HTTP requests.

Above are just new things that I learned in the class and I enjoyed taking this interactive class. Visit this link for more details about how to improve the performance of your application with Chrome DevTools.

Apr 23 2012

JavaScript Memory Leaks

Posted on by

1. What is memory leak?
Memory leak refers to memory allocated for the application which is unable to be reallocated even after it’s not being used. Normally, garbage collectors collect the DOM elements and event handlers when they are not referenced or unreachable. However, memory leaks are unforgiving for earlier versions of IE, IE 7 and before, because the memory manager does not understand the JavaScript cycle and will not reclaim the memory until the cycles are broken explicitly which can be done by assigning to null.

2. Why do you need to be aware?
Memory leak is a common unintentional programming mistake in large web applications. Memory leaks reduce the performance of a web application until it becomes unusable when the wasted memory grows beyond what the system can afford. As a web developer, developing a web application to meet the functional requirements is just the first step, performance requirements are as important for the success of a web application, not to mention the possible failure of the application or a browser crash.

3. What are the major causes for memory leak in JavaScript?
1) Circular References
A simple example is a DOM object which is referred by a JavaScript object and at the same time is referring to the same or another JavaScript object, this DOM object may cause memory leak. The reference of the DOM object won’t be collected by garbage collector even after the script stops. This pattern usually happens with a chain of object references and it’s hard to detect. To beak the circular reference, either the object referencing the DOM object or the reference of the DOM object needs to be assigned as null.

2) JavaScript Closure
Because of the limitation of the JavaScript scope, a lot of implementations rely on the JavaScript closure. Please check out my previous blog post JavaScript Scope and Closure if you want to know more about closures.

Closure can cause memory leak because the inner function holds a reference to the outer function’s variables so the inner function can continually access private variables defined in the outer function even after the function has returned. It is the best practice for JavaScript programmer to disconnect all the event handlers before the page unloads.

3) DOM Insertion Order
A temporary object is created whenever two DOM objects with different scopes attached together. When the DOM objects changes the scope to document, the temporary object is trapped. With that said, DOM objects should be attached in the order from the current existing DOM element on the page top down to the rest of the DOM objects so they will always share the document scope and no temporary objects are created.

4. How to detect?
Memory leaks are usually hard to detect for developer because they are caused by some unintentional mistakes within large amount of code and it doesn’t affect the functionality of the application until the memory starvation occurs in the system. It is why there is performance testing when performance metrics of the application are collected during a long term testing period.

The simplest way to detect memory leak is to check the memory usage with task manager. Open the application in a separate tab in chrome and check if the memory usage keeps going up as time passes. There are other debugging tools providing memory monitor feature such as Chrome Developer Tools. Here is a tutorial in Google Developers on the Heap Profiling feature.

References:
1. http://javascript.crockford.com/memory/leak.html
2. http://msdn.microsoft.com/en-us/library/Bb250448
3. http://www.ibm.com/developerworks/web/library/wa-memleak/

Mar 4 2012

Debugging Javascript

Posted on by

You may be able to get away without debugger with Java, but not javascript. As a dynamic web scripting language, javascript creates amazing visual effects on a web page; at the same time it is easy to come up with unexpected results which makes you scratch your head and ask “how did this happen?”. It is very hard to find out the problem by just looking at the code because the values are changing in various ways that you overlooked. By saying that, knowing how to debug javascript is crucial for everyone wants to program with javascript. First of all, I want to thank the wonderful debuggers which come with the browser.

Debugging in Firefox

If a defect is found in Firefox, it is the best case it can be since you can use the most famous and powerful debugger called Firebug. With Firebug, you are able to trace down the problematic code with the least amount of time. The second icon shown on the top menu is the element selector so you can hover the element and look at the dom.

Debugging in Chrome

Chrome seems to have better performance than Firefox and it has a similar debugger – Developer Tools. There are more advanced features come with Developer Tools while there are many extensions available for Firebug. For basic debugging features, it is more of a personal preference to use Firebug or Developer Tools.

IE

IE is very unforgiving for any tiny programming mistakes. Sadly, the debugger in IE, which happened to be called as Developer Tools also, is not as powerful as the other two but still better than without it. The best thing of it is there is a clear cache button and the worst thing is it doesn’t show most of the related javascript files. One thing you should be aware of is that even thought IE 9 provides options for previous version modes, it’s not accurate so use the real version of IE to do the testing.

Although the functionality and design for different debuggers vary, they all try to provide those basic debugging features, like console, style, and network. The first thing you should check when you start the debugging process is to check if there are some major errors shown on the console cause it may interrupt the rendering of javascript. Also check the Net/Network tab of the debugger to see if all the required files are loaded correctly in case you missed the path of the file. If there are REST calls, check the request and response for the calls in the console tab.

The most common way to debug is to use console.log and set the break points in javascript files. Console.log comes in handy but you have to define all the variables that you are interested in. Setting break points are likely to be used so you can do further investigation. Also, you can add the variables to watch list and trace down the code with the stack when you set the break points. If you need to change the styling of the web page, it’s much better to do it in debugger so you can see the result instantly. Pro JavaScript Techniques by John Resig is a reference for the usage of different debuggers.

In the end, programming is such an interesting thing that makes your patience shines as it involves thinking processes in every phase of software development from design to testing. Debugging is just a process of correcting incorrect outcome discovered in certain circumstances. It takes time to trace down the code and find out the root cause of the defect. Depends on your experience and time with the code base, you may get an idea about what you should look into first. It is why programmers have higher job satisfaction than in other fields. You just feel good during the process of making better software.