Tooling

• Developer tools in the browser
• Burp Suite
• DVWA
• OWASP Juice Shop

More details on the Quickstart page #Tooling

HTML

See Quickstart page #HTML

JavaScript

See Quickstart page #JavaScript

The Browser Environment

developer tools

Inspector

Console

Network

Storage

Some useful JS functions

try it out!
... right there in the browser console

              alert("hey there!")
              // or even simpler:
              alert(1)

              document.body

              document.getElementById("try-it-out")

              window.location
              // and then let's change it
              window.location = 'https://tantemalkah.at'

              // this can be quite useful, but not very versatile in the console
              // because everything you set here is gone after a reload
              window.onload
            

Clickable commands in HTML tags

Using the onclick property of HTML tags

              <p onclick="alert('are you sure you should have clicked that?')">...some text here...

            

Here is an example.
Wouldn't you just want to click on this nice paragraph here?
It seems so deliciously clickable. With a bit of extra CSS crust.
A bit of border around it, color and changing the mouse cursor.
All just to make it more clickable.
Come on, click this shiny big button.

More references

• Firefox DevTools User Docs
• Chrome DevTools
• Introduction to the DOM @ MDN Web Docs