Visit the Pages of this repository to see the projects live state
A tutorial-driven WebApp as an exam for the module 12431 Web Applications | SS 2021 at the Brandenburg Technical University. Group 3
- Christian Prinz (prinzach@b-tu.de)
- Max Bergmann (bergmmax@b-tu.de)
- Clone the project:
git clone https://github.com/pcprinz/webapp-group3.git
- install VSCode
- open the folder in VSCode
- Search and install the following VSCode extensions:
-
ESLint (dbaeumer.vscode-eslint)
-
Debugger for Firefox (firefox-devtools.vscode-firefox-debug)
-
[optional] SonarLint (sonarsource.sonarlint-vscode)
-
[optional] JS Refactor (cmstead.jsrefactor)
-
[optional] XML (redhat.vscode-xml)
-
[optional] HTML CSS Support (ecmel.vscode-html-css)
-
[optional] Parameter Hints (dominicvonk.parameter-hints)
-
OR just accept the workspace reccomendations
-
- Install Firefox Developer Edition
That's it.
Debugging code allows you to go through your code line by line while running it. You can than see how the app behaves and what's happening way more detailed than you can do with console.log
s
The .vscode/launch.json
in the root folder already has a working debug configuration. In case you want to debug a different project (than MovieDatabase_alt
) you have to change the "file"
path to the .../index.html
of the project you want to debug in the "Launch index.html"
configuration (the first one).
- After that you can open the Debug Tab (CTRL + SHIFT + D)
- Choose
"Launch index.html"
in the drop-down menu on the top-left, if not already done. - Press the green Start-Symbol right beneath it.
Now your Firefox Browser opens in Debug Mode.
- you can now set BreakPoints in your
.js
files by clicking on the line number on the right side (a red dot will appear) - your app will stop at the BreakPoints.
- on the left you'll then see
VARIABLES
containing all local and global variables that are currently declared - there is also a small control overlay appearing while debugging:
- Continue (F5) continues the app until it will be stopped by the next BreakPoint
- Step Over (F10) will jump to the next line of code (skipping functions)
- Step into (F11) will jump into a fuction if there is one at the current position
- Step out (SHIFT + F11) will jump out of the current function, continuing with the line, after the function was called.
- Restart (CTRL + SHIFT + F5) restarts the app
- Stop (SHIFT + F5) stops the debugging session
- The
DEBUG CONSOLE
appearing where the Terminal was before shows your console output while debugging. - While on a BreakPoint you can hover over the variables and objects of your code and see what is currently associated to them.