Inspector Introduction

Effortlessly kickstart your journey with our beginner-friendly guides!

• The screens captured by Demoboost consist of HTML code. Our editor functions by saving the current HTML code of the captured screen
• We can manipulate the HTML code using the Inspector tool, and the changes will persist on the screen after saving. This enables us to make nearly any customization we can think of, provided we have the necessary skills in HTML, CSS
• The inspector is a very advanced tool, and this guide will only scratch the surface. For more in-depth information, visit the official documentation:

https://developer.chrome.com/docs/devtools/dom/

Step 1: Open up the demo in the editor

Step 2: Right-click on the element you'd like to customize and click on Inspect

Step 3: The inspector window will show up

• The large panel on the left-hand side is the DOM Explorer, which provides a view of all the HTML elements comprising the current web page
• The panel on the left is the Styles panel. It allows us to manipulate the styles of the currently selected element in the DOM explorer.

Step 4: Each HTML node can be expanded to view its children element

Step 5: For example, let's use the Styles panel to change the selected text's color to red. This can be done using the color CSS property.

Step 6: You can also perform other operations on elements, such as duplicating them - right-click the element to gain access to such options.

Step 7: You can even add new HTML elements by right-clicking an element and choosing the Edit as HTML option. This will allow you to append HTML code to the edited element, creating a new one. For example, you can add a text input field.