Documentation and Books

Recent site activity

Blog‎ > ‎

My first impression of Google Chrome Part II

posted ‎‎Sep 5, 2008 1:24 AM‎‎ by Ronald Mathies   [ updated ‎‎Sep 5, 2008 4:53 AM‎‎ ]
In my previous post i talked about the installation process, the general browsing experience, the view page source option, the DOM inspector and the JavaScript console. This time i take a closer look at the JavaScript debugger (including a simple how to use), the Task Manager.

But first i would like to point out some information that was in the news for the last few days.

  • Within 10 hours Google Chrome had a market share of 1% which is equal to that of the Opera browser. This is not really a surprise since Google is a well known company and they had really a lot of free advertisement.
  • What i did find interesting was the first bug that was found, apparently when you enter a URL like http:% the browser crashes, now according to the feature list this should not happen. Only the tab in which you type this URL should 'crash' but the rest of the browser should remain in tact.

So, now lets continue with looking at the features of the browser. First up is the Task Manager. The task manager is something new in the browser world, it allows you to see the memory usage, processor load of each tab. This is very interesting because with this you can for example see if the web page doesn't consume too much memory (for example by JavaScript variable storage).

Another interesting feature i found, which i think is undocumented is that you can see a lot more statistics. If you use right mouse click above the table (in the gray area) you get a menu which enables you to see a lot more information. Just click on a menu item to add it.


Here there are also statistics of Google Gears, the V8 JavaScript engine and much more. On the bottom of the screen there is a Stats for nerds link, when you press this a new tab is opened that will show some other details that you might find interesting.


So now for the JavaScript debugger, when you open the screen and type ? and then press enter you can see all available commands:


Most of the commands explain themselves and if you need help then just type help [command] to see more information about a command. I am going to use the following document to show how to use it:

<html>
  <head>
    <script language="javascript">
      function sayHello(name) {
        var text = 'Welcome ' + name;
        var result = addHowAreYou(text);
        alert(result);
      }
     
      function addHowAreYou(text) {
        text += ', how are you?';
        return text;
      }
    </script>
  </head>
  <body>
    <input type="button" onclick="sayHello('Ronald');" value="Say hello!"/>
  </body>
</html>

So i load this page and i fire up the JavaScript debugger. First we set a breakpoint so that Chrome knows when to stop. Setting the breakpoint is done on for example a name of a function. In this case i will set the breakpoint on the sayHello function.


So now we can click on the button in the browser to see the action, when you click on the button the debug window will display a message that it paused at a point in the code and what the line is that still needs to be executed. So here we can see that the addHowAreYou method has not yet been called.


Now that we are in debug mode we can ask Chrome again to see what the available commands are, this changes according to the mode that we are working.

So now we would like to know what the variable name contains, to see this type in print name, when we do that we get the following result:



If we now want to let the script continue to run we can close the window or we can type continue.



And the result is that we get an Alert message on the screen. So the debugger is quite simple and also quite a lot of manual work, but still it can be useful.

Another command is the next command which acts like a step action. So it executes the line where it was waiting and then stops at the line after that.


And the last command that i will explain here is the step command, this allows you to step into a calling method, whereas the next method steps over the calling method and waits at the next line.



The debugger can do a lot more but i will write a separate article about this. Here i just wanted to tell you about the existence and how it works in basic.

So this concludes my second part of my first impression, hope you learned something from it. Up till now i am not sure if i will create a third part since most of the other functions have been handled in detail on other blogs.

The JavaScript debugger will be explained in more detail on this wiki but it could take some time before that is finished.