This article will help you master your browser’s DevTools, so you can edit websites, tweets and more

Inspect Element

this is an essential tool for editing websites

How To Open

use CMD + SHIFT + C on macOS or CTRL + SHIFT + C on Windows or Linux
alternatively, you can right-click and press Inspect

The Dev Tools Menu

The menu is split up into many tabs:
Inspector and Console are the main ones we will be using
Inspector lets you view the HTML of a page and edit the changes live
Console allows you to view logs and use JavaScript commands note:this may look slightly different on other browsers, but the functionality will be the same

Using Inspect

I will be using example.com for this example, but this will work on any website or HTML document

• Step 1
  open the dev tools
• Step 2
  I would recommend making sure that this icon is highlighted
  
  this icon allows you to hover over an element and then click on it to jump to it in the inspect menu

Document Design mode

• step 1 open the Console tab

• step 2
  type document.designMode = "on" and press enter

this enables document design mode, you can now start editing a page by simply clicking text, you can also delete elements by selecting them

Example

YouTube Sub Count

• Step 1
  go to a YouTube Channel, e.g. https://www.youtube.com/@RobotDaniel10
• Step 2
  open the dev tools and go to the Console Tab
• Step 3
  type document.designMode = "on" and press enter
• Step 4
  find the sub count and click on the number
• Step 5
  you should now have a text cursor on the number, you can now edit the text