From 5089c107ba5dc10f3fd7ab1aa1936271a2e14662 Mon Sep 17 00:00:00 2001 From: Nanne Baars Date: Mon, 13 Dec 2021 20:20:54 +0100 Subject: [PATCH] Update documentation --- .../en/ChromeDevTools_Assignment.adoc | 4 ++-- .../en/ChromeDevTools_Assignment_Network.adoc | 6 ++--- .../en/ChromeDevTools_console.adoc | 18 +++++++------- .../en/ChromeDevTools_elements.adoc | 20 ++++++++-------- .../lessonPlans/en/ChromeDevTools_intro.adoc | 24 +++++++++---------- .../en/ChromeDevTools_sources.adoc | 16 ++++++------- 6 files changed, 44 insertions(+), 44 deletions(-) diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc index 99981c4ad..a1d8803e1 100644 --- a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc +++ b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment.adoc @@ -1,8 +1,8 @@ == Try It! Using the console Let us try it. Use the console in the dev tools and call the javascript function *webgoat.customjs.phoneHome()*. + -You should get a response in the console. Your result should look something like: +You should get a response in the console. Your result should look something like this: `phone home said {"lessonCompleted:true, ... ,"output":"phone home response is..."` Paste the random number, after that, in the text field below. -(Make sure you got the most recent number, since it is randomly generated each time you call the function) \ No newline at end of file +(Make sure you got the most recent number since it is randomly generated each time you call the function) diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment_Network.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment_Network.adoc index b274f0452..29e1324c4 100644 --- a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment_Network.adoc +++ b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_Assignment_Network.adoc @@ -1,6 +1,6 @@ == Try It! Working with the Network tab -In this assignment you need to find a specific HTTP request and read a randomized number from it. -To start click the first button, this wil generate an HTTP request. Try to find the specific HTTP request. +In this assignment, you need to find a specific HTTP request and read a randomized number. +To start, click the first button. This will generate an HTTP request. Try to find the specific HTTP request. The request should contain a field: `networkNum:` -Copy the number which is displayed afterwards, into the input field below and click on the check button. \ No newline at end of file +Copy the number displayed afterward into the input field below and click on the check button. diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc index 85d155aea..0780ef6bb 100644 --- a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc +++ b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_console.adoc @@ -1,17 +1,17 @@ == The Console tab -In the console tab you can see anything, which a loaded JavaScript file may have printed out to it. +In the console tab, you can see anything that a loaded JavaScript file may have printed out. Do not worry if you see something in red. While that is an error, it has probably resolved itself. -Through the console tab, it is also possible for you to run your own line of JavaScript code. +Through the console tab, it is also possible for you to run your line of JavaScript code. -Start by clearing console using the shortcut `CTRL+L`. +Start by clearing the console using the shortcut `CTRL+L.` -To run your own JavaScript, simply click inside of the console and write something like: -`console.log("Hello WebGoat!");` Hit enter. Hello WebGoat should now appear in your console. -The console also allows you to do some basic arithmetic. If you type for example `1+3` and hit -enter the console should display 4. +To run your JavaScript, click inside of the console and write something like: +`console.log("Hello WebGoat!");` Hit enter. `Hello WebGoat` should now appear in your console. +The console also allows you to do some basic arithmetic. If you type, for example, `1+3` and hit +enter, the console should display 4. Note: You may see an `undefined` in the console. You can safely ignore this statement, -it only means, that the JavaScript function you have called did not return anything, therefore `undefined`. +it only means that the JavaScript function you have called did not return anything, therefore `undefined.` -image::images/ChromeDev_Console_Ex.jpg[DeveloperToolsConsoleExample,500,500,style="lesson-image"] \ No newline at end of file +image::images/ChromeDev_Console_Ex.jpg[DeveloperToolsConsoleExample,500,500,style="lesson-image"] diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc index cfe66bab8..18477e950 100644 --- a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc +++ b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_elements.adoc @@ -1,22 +1,22 @@ == The Elements Tab -The elements tab allows you to look at the HTML and CSS code, that are used to define and style the website. +The elements tab allows you to look at the HTML and CSS code used to define and style the website. === HTML source -If you hover over one line you can see that a part of the website turns blue. That means that +If you hover over one line, you can see that a part of the website turns blue. That means that this particular HTML line defines this section of the website. -The elements tab allows you to make changes to every single HTML element. For example if you click inside -a paragraph (

...

) Tag you can edit the content of the website. If you have made your changes and then click enter -Chrome will actually update the website to show your edits. You can also change the HTML Tag used, -the classes and id's a tag has and much more. +The elements tab allows you to make changes to every single HTML element. For example, if you click inside +a paragraph (

...

) Tag, you can edit the content of the website. If you have made your changes and then click enter +Chrome will update the website to show your edits. You can also change the HTML Tag used, +the classes and id's a tag has, and much more. image::images/ChromeDev_Elements.jpg[DeveloperToolsElements,500,350,style="lesson-image"] === CSS source -Underneath the HTML source, you can find information about the CSS which is used to style the -Website. Like the HTML, you can also edit the CSS and therefore adjust the styling of the website. -You can edit specific values, or turn off individual styling. +You can find information about the CSS used to style the +website under the HTML source. Like the HTML, you can also edit the CSS and, therefore, adjust the website's styling. +You can edit specific values or turn off individual styling. -image::images/ChromeDev_Elements_CSS.jpg[DeveloperToolsElementsCSS,500,350,style="lesson-image"] \ No newline at end of file +image::images/ChromeDev_Elements_CSS.jpg[DeveloperToolsElementsCSS,500,350,style="lesson-image"] diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc index 3ce5e60fb..2689a0440 100644 --- a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc +++ b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_intro.adoc @@ -1,19 +1,19 @@ == Google Chrome Developer Tools -To complete certain assignments you sometimes may have to look at the JavaScript +To complete certain assignments, you sometimes may have to look at the JavaScript source code or run a JavaScript command on your own. -To do that Google Chrome has a set of tools which allows you to do that and much much more. -While these tools are not specific to Google Chrome, almost every modern browser has a set -of their own, our introduction will focus on the ones found in Google Chrome. -You can however still use the browser of your choice, like Firefox or Safari, although some steps of this tutorial -may be different for you. +To do that, Google Chrome has a set of tools that allow you to do that and much more. +While these tools are not specific to Google Chrome, almost every modern browser has a bunch +of its own. Our introduction will focus on the ones found in Google Chrome. +You can, however still use the browser of your choice, like Firefox or Safari, although some steps of this tutorial +maybe different for you. -Keep in mind that the following tutorial, is not there to teach everything there is about these tools. -This tutorial will only focus on the essential knowledge you need to complete certain assignments. -Also if you are already familiar with these Tools you can safely skip these lessons. +Keep in mind that the following tutorial is not there to teach everything about these tools. +This tutorial will only focus on the essential knowledge to complete specific assignments. +Also, if you are already familiar with these tools, you can safely skip these lessons. -To get started, *open the developer tools*. There are multiple ways to open them: +To get started: *open the developer tools*. There are multiple ways to open them: -1. Right click anywhere in the browser window and select the option _"Inspect"_. +1. Right-click anywhere in the browser window and select the option _"Inspect"_. 2. Go to the browser menu (three dots in the top right corner), then go to _"More tools"_ and select the option _"Developer tools"_. -3. Use the keyboard shortcut _Ctrl + Shift + I_ \ No newline at end of file +3. Use the keyboard shortcut _Ctrl + Shift + I_ diff --git a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc index cd0d2ba06..8bd4314bd 100644 --- a/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc +++ b/webgoat-lessons/chrome-dev-tools/src/main/resources/lessonPlans/en/ChromeDevTools_sources.adoc @@ -1,16 +1,16 @@ == The Sources tab -In the sources tab you can check out the file system and view all the HTML, CSS and JavaScript files that are used, to -create the website. Simply click on a file to view its contents. +In the sources tab, you can check out the file system and view all the HTML, CSS, and JavaScript files used to +create the website. Click on a file to view its contents. image::images/ChromeDev_Sources.jpg[DeveloperToolsSources,400,500,style="lesson-image"] == The Network tab -In the Network tab you can view HTTP requests and responses the website has performed. -If you want more detailed information on a particular request, just click on it. -In the Timeline above the blue dots represent when these requests and responses have been performed. -You can also see the Requests done in a specific time frame, simply by clicking and dragging on the timeline. Now the window -below, will only show the requests and responses done in that particular time frame. +In the Network tab, you can view HTTP requests and responses the website has performed. +Just click on it if you want more detailed information on a particular request. +The "Timeline" above the blue dots represents when these requests and responses have been performed. +You can also see the Requests done in a specific time frame simply by clicking and dragging on the timeline. The window +below will only show the requests and responses done in that time frame. -image::images/ChromeDev_Network.jpg[DeveloperToolsNetwork,400,500,style="lesson-image"] \ No newline at end of file +image::images/ChromeDev_Network.jpg[DeveloperToolsNetwork,400,500,style="lesson-image"]