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 2978c2568..ca98c8d3d 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,5 +1,6 @@ == Try It! Using the Console -In this Assignment your task is to, call a Webgoat-specific JavaScript function, called -*webgoat.customjs.phoneHome()* - +Let's 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. +Paste the phoneHome number in below. +(Make sure you got the most recent number, since it's randomly generated each time you call the function) \ No newline at end of file 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 8e72ad73f..d04e02ae6 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 @@ -12,5 +12,8 @@ Keep in mind that the following tutorial, is not there to teach everything there 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. -To get started open the developer tools by right clicking anywhere and clicking "inspect" -or click the three vertical on the top right, go to more tools and then Developer tools. \ No newline at end of file +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"_. +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 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 d606e5d71..1e93c00d4 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 @@ -10,7 +10,7 @@ image::images/ChromeDev_Sources.jpg[DeveloperToolsSources,400,500,style="lesson- 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 tine frame, simply by clicking and dragging on the timeline. Now the Window +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. image::images/ChromeDev_Network.jpg[DeveloperToolsNetwork,400,500,style="lesson-image"] \ No newline at end of file