Recently, I needed to figure out what is happening under the hood in a web application, which involved understanding few JavaScript snippets. Being new to JavaScript and all web stuff involved in it, I had to do a quick study of the fundamentals including setting up a development environment and performing run-time debugging.
This is a quick note on the steps followed to debug a JavaScript running on Chrome web browser using Eclipse Integrated Development Environment (IDE), noted down mainly to prevent my self from reinventing the wheel, every time I have to do the same procedure.
- Setup Chrome development tools on Eclipse
- On Help menu, select Install New Software option.
- On Install popup window enter the URL http://chromedevtools.googlecode.com/svn/update/dev/ to install the Chrome development tools.
- Select Google Chrome Developer Tools to be installed by checking the relevant options.
- Click Next button, select the options to agree to the license agreement and complete the process by clicking Finish button.
- Create a JavaScript project on Eclipse
- On File menu, select New -> Project. From the project wizard, select JavaScript Project and click Next.
- Enter project details including Project name and Directory and click Finish button.
- Add html and JavaScript files to the project.
To get familiar with the debug process, two test files named Test.html and Test.js were used.Test.html<!DOCTYPE html><html><head><meta charset="ISO-8859-1"><script type="text/javascript" src="Test.js"></script><title>Test</title></head><body><button onclick="onTryItClick()">Try it</button></body></html>Test.jsfunction onTryItClick() {alert("Try it clicked");} - Launch Chrome web browser
The web browser should be launched with remote debugging feature enabled to allow Eclipse to communicate with the browser."C:\Program Files (x86)\Google\Chrome\Application/chrome" --remote-debugging-port=9222 --enable-file-cookies
Note down the port number to be used in the next step. The --enable-file-cookies option allows saving cookie files for local files.
After launching the web browser, open the target html file (Test.html in this case).
- Create Eclipse Debug Configuration
- Right click on the project and select Debug As -> Debug Configurations.
- On the Debug Configurations popup dialog box, select WebKit Protocol and create a new debug configuration.
- Edit debug configuration settings (Name, Port etc.). Enter the port number used in previous step to launch the web browser as Port parameter.
- Click Debug button to start debugging the code.
The debug perspective will be opened on Eclipse. - Select the web page to be debugged if multiple tabs are open on Chrome, from the popup window.
Once the debug perspective is active, set breakpoints on the required code lines to pause the execution while the web page is active on the browser.
No comments:
Post a Comment