The body section determines the structure of the page rendered to the screen: The Response tab shows the response data, a regular HTML-page. This way the browser knows the response to be a regular HTML-page, and to render it to the browser 'like a web page'. An important header Content-Type tells us that the response is a text file in utf-8-format, contents of which have been formatted with HTML.
the size of the response in bytes, and the exact time of the response. The request and the server response have several headers:
Sequence diagram for website mean stack code#
The upper part, General, shows that the browser made a request to the address (though the address has changed slightly since this picture was taken) using the GET method, and that the request was successful, because the server response had the Status code 200. On a small screen you might have to widen the console window to see these.Ĭlicking the first event reveals more information on what's happening:
Make sure that the Network tab is open, and check the Disable cache option as shown. Remember to always keep the Developer Console open when developing web applications. The console can also be opened via the context menu.
Sequence diagram for website mean stack windows#
On Windows or Linux, open the console by pressing F12 or ctrl-shift-i simultaneously. On macOS, open the console by pressing F12 or option-cmd-i simultaneously. The 1st rule of web development: Always keep the Developer Console open on your web browser. Open the example application in your browser. On the contrary, they demonstrate some old techniques of web development, which could even be considered bad practices nowadays.Ĭode will conform to contemporary best practices from part 1 onwards. The application exists only to demonstrate some basic concepts of the course, and are by no means examples of how web applications should be made. Before we start programming, we will go through some principles of web development by examining an example application at.