Difference between revisions of "WebFund 2013F: Tutorial 4"
Jump to navigation
Jump to search
| (11 intermediate revisions by 2 users not shown) | |||
| Line 1: | Line 1: | ||
In this lab you will be learning the basics of debugging Node-based web applications. All of the following assumes you have <tt>form-demo</tt> setup and running from [[WebFund 2013F: Assignment 1|Assignment 1]]. | In this lab you will be learning the basics of debugging Node-based web applications. All of the following assumes you have <tt>form-demo</tt> setup and running from [[WebFund 2013F: Assignment 1|Assignment 1]]. | ||
| Line 7: | Line 5: | ||
* Chrome/Chromium: Tools->Developer Tools | * Chrome/Chromium: Tools->Developer Tools | ||
Select Network tab to see HTTP traffic | Select the Network tab to see HTTP traffic. | ||
Select Inspector (Firefox) or Elements (Chrome/Chromium) to see HTML document | Select Inspector (Firefox) or Elements (Chrome/Chromium) to see the HTML document (DOM). | ||
==Node | ==Node debugger== | ||
Node has a | Node has a [http://nodejs.org/api/debugger.html built-in debugger]. Start it by running <tt>node debug app.js</tt>. This will stop on the first line of the file. Type <tt>n</tt> to step to the next line of the file. Type <tt>c</tt> to continue to the next breakpoint. Breakpoints are set by adding a <tt>debugger;</tt> statement to the javascript source. | ||
At any time you can type <tt>repl</tt> into the debugger to drop into a read-eval-print loop where you can evaluate JavaScript statements in the current context. Ctrl-C will get you out of the REPL. | At any time you can type <tt>repl</tt> into the debugger to drop into a read-eval-print loop where you can evaluate JavaScript statements in the current context. Ctrl-C will get you out of the REPL. | ||
For example, | For example, consider this source for <tt>app.js</tt>. | ||
<source line lang="javascript"> | <source line lang="javascript"> | ||
var x = 5; | var x = 5; | ||
| Line 23: | Line 21: | ||
debugger; | debugger; | ||
</source> | </source> | ||
You can run <tt>node debug app.js</tt> | You can run <tt>node debug app.js</tt> to start the debugger. | ||
It which will stop on the first line of the file (<tt>var x = 5;</tt>). If you enter <tt>c</tt> node will continue executing until the <tt>debugger;</tt> statement where it will stop. From here if you enter <tt>repl</tt> you can execute Javascript in the current context. In the <tt>repl</tt> prompt if you enter <tt>x;</tt> it will return 5. If you enter <tt>x + y;</tt> it will return 15, etc. | |||
More commands: | More commands: | ||
| Line 31: | Line 31: | ||
==Brackets and Theseus== | ==Brackets and Theseus== | ||
'''Note:''' Theseus and Brackets are purely optional. They are both still in active development. THEY HAVE BUGS. But when they work, they are pretty amazing! | |||
===To get Brackets running in the class VM=== | |||
* Download Brackets: visit http://download.brackets.io/ and download the DEB file. It should go in your Downloads folder. | |||
* Install it: <tt>sudo dpkg -i ~/Downloads/brackets-sprint-31-LINUX32.deb</tt> | |||
* Make an alias for google-chrome: <tt>sudo ln -s /usr/bin/chromium-browser /usr/bin/google-chrome</tt> | |||
* Run it: <tt>brackets &</tt> | |||
* Select "Live Preview" from the File Menu. | |||
* Edit the source and watch the getting started page change as you type! | |||
===To get Theseus working in Brackets=== | |||
* Select File->Extension Manager in Brackets. | |||
* Under the Available tab. search for Theseus. Click the "Install" button. | |||
* Install node-theseus globally: <tt>sudo npm install -g node-theseus</tt> | |||
* Select File->Open Folder with the <tt>form-demo</tt> folder. | |||
* Run the app: <tt>node-theseus app.js</tt> | |||
* Note how you now see information on how each file is called. | |||
==Tasks== | ==Tasks== | ||
Latest revision as of 00:30, 4 October 2013
In this lab you will be learning the basics of debugging Node-based web applications. All of the following assumes you have form-demo setup and running from Assignment 1.
Browser-based debugging
- Firefox: Tools->Web Developer->Toggle Tools
- Chrome/Chromium: Tools->Developer Tools
Select the Network tab to see HTTP traffic. Select Inspector (Firefox) or Elements (Chrome/Chromium) to see the HTML document (DOM).
Node debugger
Node has a built-in debugger. Start it by running node debug app.js. This will stop on the first line of the file. Type n to step to the next line of the file. Type c to continue to the next breakpoint. Breakpoints are set by adding a debugger; statement to the javascript source.
At any time you can type repl into the debugger to drop into a read-eval-print loop where you can evaluate JavaScript statements in the current context. Ctrl-C will get you out of the REPL.
For example, consider this source for app.js.
var x = 5;
var y = 10;
debugger;
You can run node debug app.js to start the debugger.
It which will stop on the first line of the file (var x = 5;). If you enter c node will continue executing until the debugger; statement where it will stop. From here if you enter repl you can execute Javascript in the current context. In the repl prompt if you enter x; it will return 5. If you enter x + y; it will return 15, etc.
More commands:
- s step in
- o step out
- list(x) show x number of lines around current line
Brackets and Theseus
Note: Theseus and Brackets are purely optional. They are both still in active development. THEY HAVE BUGS. But when they work, they are pretty amazing!
To get Brackets running in the class VM
- Download Brackets: visit http://download.brackets.io/ and download the DEB file. It should go in your Downloads folder.
- Install it: sudo dpkg -i ~/Downloads/brackets-sprint-31-LINUX32.deb
- Make an alias for google-chrome: sudo ln -s /usr/bin/chromium-browser /usr/bin/google-chrome
- Run it: brackets &
- Select "Live Preview" from the File Menu.
- Edit the source and watch the getting started page change as you type!
To get Theseus working in Brackets
- Select File->Extension Manager in Brackets.
- Under the Available tab. search for Theseus. Click the "Install" button.
- Install node-theseus globally: sudo npm install -g node-theseus
- Select File->Open Folder with the form-demo folder.
- Run the app: node-theseus app.js
- Note how you now see information on how each file is called.
Tasks
- Observe the request and response for the app's home page (http://localhost:3010). Look at both the network panel (load the page after selecting the network panel) and the HTML DOM view (Inspector/Elements)
- Observe the contents of the form submit POST request: how much data is sent to the server? Observe it both from the browser side (to see what is sent) and inside of node, particularly where the POST results are returned.
- Look at other web pages!