Random thoughts shooting out of volatile mind
Help for Developer in Google Chrome
Chrome a browser from Google Inc came into market recently. I think is a fastest browser to browse in the web. According to me it is not good for downloading things compared to Mozilla. Chrome has many feature unlike any browser its very light weight browser, doesn't take time to load and of the all features this is a browser meant for developer.
 
How I came across the development features of the Chrome?
Well I'm doing a Web based project and I wrote a java script to validate the form in a html page. This script is triggered when user clicks on the submit button. The main purpose of the script is to see that user fills in all the required fields before the form is processed by Java Server Pages. If form is incomplete page will not be submitted for further processing. A warning message box appears and error messages will be written below all the required & incomplete fields. When you submit incomplete form Screen looks some what like this.
Coming back to the developper support in Chrome, I got this problem in the script even when i complete the form and submit still alert box used to pop up and page will not be processed, of the all I was new to javascript and i don't know what was the problem. But when I looked in the File>Developer section of Chrome i came across the javascript debugger. The debugger console looks like this 
 
After launching java script debugger just type help you will get few commands and their usage. The commands are
1.break : Used to setup break points in the java script. 
usage: break [location]
location is one of | | |

You can specify function name or the line in the java script file. If there multiple scripts for a HTML page then you can specify it as script name:function or script name:line.
2. Once break point is set then do the action which triggers the java script. (in my case the event is onsubmit i.e on pressing submit button.) Script starts running and you will get a message some what like this
paused at breakpoint 1: checkform(form=#), file:///D:/Programming/project/checkform.js
5: if(form.password.value != form.cpassword.value)
3. break_info : gives number of break points in current script and information about each break point.
4. scripts : This command gives name of the scripts associated with current web page.
5. clear : This command takes the break point number returned by break or break_info command. Is used to clear the break points

6. print : Takes expression or variable name as argument. Used to check the values of variables or expression in the script.
 Once script starts running you will get few more commands.
1.step : Used to step into the function, if current statement is not a function it just executes one statement and stops
2. next : Similar to step but instead of stepping into function this will execute entire function and stops at next line to function
3.locals : Gives the value of all the local variables in current context.
4. stepout : Resumes normal execution from current break point, ignores any further break point.
5. continue : Similar to stepout but stops at next break point.
This is a really helpfull tool for a developer to find faults in their scripts, and is not present in any browser.
Next development tool provided by Chrome is java script console which allows to find errors in the java scripts and is also a DOM inspector.
Last but not the least is the task manager which allows the developer to see how much memory is his web page consuming. Not only that it tells how much memory each tab in Chrome is consuming and if flash contents are present it tells how much memory the Shock Wave Plugin is consuming. Following is a view of task manager
 
Whether people like Chrome or not but it is a really a gift for the developers, and I thank google for providing us such a good web browser. 
Posted by: copyninja on Wednesday, 8 October 2008

blog comments powered by Disqus
Fork me on GitHub