WebFund 2013F: Tutorial 4 - Revision history

Soma at 04:30, 4 October 2013

2013-10-04T04:30:17Z

← Older revision		Revision as of 04:30, 4 October 2013
Line 1:		Line 1:
	~~'''This lab is not yet finalized'''~~

	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]].

Soma at 15:33, 27 September 2013

2013-09-27T15:33:46Z

← Older revision		Revision as of 15:33, 27 September 2013
Line 31:		Line 31:
	*<tt>o</tt> step out		*<tt>o</tt> step out
	*list(x) show x number of lines around current line		*list(x) show x number of lines around current line

	~~==Node inspector==~~


	==Brackets and Theseus==		==Brackets and Theseus==

Soma: /* Node debugger */

2013-09-27T15:33:19Z

Node debugger

← Older revision		Revision as of 15:33, 27 September 2013
Line 23:		Line 23:
	debugger;		debugger;
	</source>		</source>
	You can run <tt>node debug app.js</tt>~~. This will~~ start the debugger which will stop on the first line of the file (<tt>var x = 5;</tt>). If I 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.		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:

Soma: /* Node debugger */

2013-09-27T15:32:33Z

Node debugger

← Older revision		Revision as of 15:32, 27 September 2013
Line 16:		Line 16:
	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, ~~given the~~ source		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 23:
	debugger;		debugger;
	</source>		</source>
	~~you~~ can run <tt>node debug app.js</tt>. This will start the debugger which will stop on the first line of the file (<tt>var x = 5;</tt>). If I 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.		You can run <tt>node debug app.js</tt>. This will start the debugger which will stop on the first line of the file (<tt>var x = 5;</tt>). If I 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:

Soma: /* Node debugger */

2013-09-27T15:31:24Z

Node debugger

← Older revision		Revision as of 15:31, 27 September 2013
Line 12:		Line 12:
	==Node debugger==		==Node debugger==

	Node has a ~~built-in debugger~~[http://nodejs.org/api/debugger.html]. 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.		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.
Line 23:		Line 23:
	debugger;		debugger;
	</source>		</source>
	~~You~~ can run <tt>node debug app.js</tt>. This will start the debugger which will stop on the first line of the file (<tt>var x = 5;</tt>). If I 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.		you can run <tt>node debug app.js</tt>. This will start the debugger which will stop on the first line of the file (<tt>var x = 5;</tt>). If I 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:

Soma: /* Browser-based debugging */

2013-09-27T15:30:06Z

Browser-based debugging

← Older revision		Revision as of 15:30, 27 September 2013
Line 7:		Line 7:
	* 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 debugger==		==Node debugger==

Soma: /* To get Theseus working in Brackets */

2013-09-27T15:29:10Z

To get Theseus working in Brackets

← Older revision		Revision as of 15:29, 27 September 2013
Line 46:		Line 46:

	===To get Theseus working in Brackets===		===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==

Soma: /* Brackets and Theseus */

2013-09-27T15:14:55Z

Brackets and Theseus

← Older revision		Revision as of 15:14, 27 September 2013
Line 37:		Line 37:
	'''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!		'''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:		===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.		* 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>		* Install it: <tt>sudo dpkg -i ~/Downloads/brackets-sprint-31-LINUX32.deb</tt>
Line 45:		Line 45:
	* Edit the source and watch the getting started page change as you type!		* Edit the source and watch the getting started page change as you type!

	To get Theseus working in Brackets:		===To get Theseus working in Brackets===

	==Tasks==		==Tasks==

Soma: /* Brackets and Theseus */

2013-09-27T15:14:29Z

Brackets and Theseus

← Older revision		Revision as of 15:14, 27 September 2013
Line 37:		Line 37:
	'''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!		'''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 ~~Theseus and~~ Brackets running in the class VM:		To get Brackets running in the class VM:
	* ~~Install~~ Brackets: visit http://download.brackets.io/ and download the DEB file. It should go in your Downloads folder.		* Download Brackets: visit http://download.brackets.io/ and download the DEB file. It should go in your Downloads folder.
	* <tt>sudo dpkg -i Downloads/brackets-sprint-31-LINUX32.deb		* 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:

	==Tasks==		==Tasks==

Soma at 15:09, 27 September 2013

2013-09-27T15:09:24Z

← Older revision		Revision as of 15:09, 27 September 2013
Line 10:		Line 10:
	Select Inspector (Firefox) or Elements (Chrome/Chromium) to see HTML document		Select Inspector (Firefox) or Elements (Chrome/Chromium) to see HTML document

	==Node ~~debugging~~==		==Node debugger==

	Node has a built-in debugger[http://nodejs.org/api/debugger.html]. 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.		Node has a built-in debugger[http://nodejs.org/api/debugger.html]. 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.
Line 29:		Line 29:
	*<tt>o</tt> step out		*<tt>o</tt> step out
	*list(x) show x number of lines around current line		*list(x) show x number of lines around current line

			==Node inspector==


	==Brackets and Theseus==		==Brackets and Theseus==