# Dev Tools

> The Dev Tools property in the Create Form activity allows users to debug their forms and experiment with CSS styles. When enabled, the Dev Tools developer tool opens at runtime.

The Dev Tools property in the Create Form activity allows users to debug their forms and experiment with CSS styles. When enabled, the Dev Tools developer tool opens at runtime.

This tutorial shows how to experiment with CSS styles in Dev Tools.

:::important
Customizations added in Dev Tools are temporary. To permanently apply the CSS styles to the form, you have to create a custom CSS class in an HTML Element component, where you input the code that you experiment with in Dev Tools.
:::

## Tutorial

To use Dev Tools:

1. In the **Properties** panel of the **Create Form** activity, check:
   1. **Dev Tools**
   2. **DisableSanitize**. This property improves the performance of the form.
2. Add form components in the **Form Designer**. For this example, drag and drop a **HTML Element** component. You use this component to customize the appearance of other form components
   1. In the **Display** tab of the HTML Element component, go to the **Content** section.
   2. Input a CSS `<style>`class that changes the appearance of other components. Write the `<style>` tag and then a name for the class.

      Remember the name of the CSS class because you will use it to apply CSS styles to other form components.
   3. Add properties to the CSS class that match your use-case For this example, add the `background-color` property and set it as `green`. See the CSS code below:
      ```
      <style> .customclass{background-color: green;} </style>
      ```
   4. Save the component.
3. Drag and drop a **Text Field** component in the **Form Designer**.
   1. In the **Display** tab, go to the **Custom CSS Class** field and input the name of the CSS class created in the **HTML Element**. For this example type `customclass`.
   2. Save the component and the form.
4. Run the file. The Dev Tools window opens.
   1. Click the following icon ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-indicate_screen_icom-b8773c42.png) and then select the **Text Field** component in the **Form Renderer**. The CSS class created shows in the **Styles** tab of Dev Tools. For this example, the `customclass` shows.
   
      ![docs image](https://dev-assets.cms.uipath.com/assets/images/activities/activities-docs-image-179460-223a2d8f.gif)

   2. Go to the CSS class created in Dev Tools and start experimenting with CSS styles in real-time. For this example, add a `border-style` property inside `customclass` and set it to `solid`.
   
   3. Add another `border-color` property and set it to `deeppink`.
5. After experimenting with CSS styles, you can apply them to your form permanently. Go to the **Content** section of the **HTML Element** component and add the properties you experimented with in the CSS class.

   For this example, add the `border-style` and `border-color` properties in `customclass`:

   ```
   <style> .customclass{background-color: green;
     border-style: solid;
     border-color: deeppink;}
   </style>
   ```
6. Save the component and the form.

## Sample workflow

To check the complete workflow or to have a future reference, download the [XAML example](https://documentationexamplerepo.blob.core.windows.net/examples/Activities/Dev_Tools_Sample.xaml)