Dev tools: add content on YAML tab (#32449)

* Dev tools: add content on YAML tab

* Apply suggestions from code review

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>

* Apply suggestions from code review

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>

* Use bullet items for options rather than numbered list

---------

Co-authored-by: Joakim Sørensen <joasoe@gmail.com>

source/_docs/tools/dev-tools.markdown

@@ -10,8 +10,8 @@ The dashboard contains a section called **Developer tools**.
 Screenshot of Home Assistant's developer tools.
 </p>
 
-| Section    |Description                                                          |
-| ---------- |---------------------------------------------------------------------|
+| Section    | Description                                                         |
+| ---------- | ------------------------------------------------------------------- |
 | YAML       | Lets you validate the configuration and trigger a reload or restart |
 | States     | Sets the representation of an entity                                |
 | Services   | Calls services from integrations                                    |
@@ -24,7 +24,27 @@ Screenshot of Home Assistant's developer tools.
 
 The Developer Tools is meant for **all** (not just for the developers) to quickly try out things - like calling services, updating states, raising events, and publishing messages in MQTT). It is also a necessary tool for those who write custom automations and scripts by hand. The following describes each of the sections in detail.
 
-## States
+## YAML tab
+
+The YAML tab provides buttons to trigger a check of configuration files and to reload the configuration. Reloading is needed to apply changes that you've made to the configuration.
+
+It is almost the same as the option under **Settings** > three dot menu (top right) > **Restart Home Assistant** > **Quick reload**. The only difference is that **Quick reload** reloads all the configuration, whereas this YAML tab allows you to only reload one specific configuration at a time.
+
+### Reloading the YAML configuration
+
+For configuration changes to become effective, the configuration must be reloaded. Most integrations in Home Assistant (that do not interact with {% term devices %} or {% term services %}) can reload changes made to their configuration in `configuration.yaml` without needing to restart Home Assistant.
+
+1. Go to {% my server_controls title="**Developer Tools** > **YAML**" %} and scroll down to the YAML configuration reloading section (alternatively, hit ["c"](/docs/tools/quick-bar/) anywhere in the UI and search for "reload").
+   - You are presented with a list of integrations, such as **Automations** or **Conversation**.
+
+    ![Reload configuration changes](/images/docs/configuration/reloading_config.png)
+
+2. Depending on what you find in the list, you can proceed with either reloading or you need to restart Home Assistant:
+   - If the integration is listed, select it to reload the settings.
+     - For example, if you've changed the [General settings](/docs/configuration/basic/), you can select **Location & customizations** to apply those changes.
+   - If the integration is not listed, you need to **Restart** Home Assistant for changes to take effect.
+
+## States tab
 
 This section shows all the available entities, their corresponding state and the attribute values. The state and the attribute information is what Home Assistant sees at run time. To update the entity with a new state, or a new attribute value, click on the entity, scroll to the top, and modify the values, and click on “SET STATE” button.
 
@@ -35,7 +55,7 @@ For example, changing the `light.bedroom` state from `off` to `on` does not turn
 The table containing all entities can be filtered for each column. The used search is a wildcard search meaning that if you input "office" in the entity column filter, every entity whose ID matches "\*office\*" will be shown. You can also add your own wildcards in the search input (e.g., "office\*light").
 The attribute filter supports separate filters for attribute names and values, separated by a colon ":". So the filter "location:3" will result in the table showing all entities that have an attribute name that contains "location" and whose attribute value contains "3".
 
-## Services
+## Services tab
 
 This section is used to call Services that are available in the ServiceRegistry.
 
@@ -48,6 +68,7 @@ A Service may also require additional input to be passed. It is commonly referre
 When an entity is selected from the Entity dropdown, it automatically populates service data with the corresponding `entity_id`. The service data YAML can then be modified to pass additional \[optional\] parameters. The following is an illustration on how to call a `light.turn_on` service.
 
 To turn on a light bulb, use the following steps:
+
 1.	Select `light.turn_on` from the Service dropdown
 2.	Select the entity (typically the light bulb) from the Entity dropdown (if no entity_id is selected, it turns on ALL lights)
 3.	If an entity is selected, the service data is populated with basic YAML that will be passed to the service. Additional data can also be passed by updating the YAML as below.
@@ -58,7 +79,7 @@ brightness: 255
 rgb_color: [255, 0, 0]
 ```
 
-## Template editor
+## Template editor tab
 
 The template editor provides a way to quickly test templates prior to placing them into automations and scripts. A code editor is on the left side and your real-time output is displayed in the preview on the right side.
 
@@ -66,7 +87,7 @@ By default, this will contain sample code that illustrates how templates can be
 
 For more information about Jinja2, visit [Jinja2 documentation](https://jinja.palletsprojects.com/en/latest/templates/), and also read templating document [here](/docs/configuration/templating).
 
-## Events
+## Events tab
 
 In the Events section, you can either fire an event on the event bus or subscribe to an event type in order to view the event data JSON.
 
@@ -118,7 +139,7 @@ Event 0 fired 9:53 AM:
 }
 ```
 
-## Statistics
+## Statistics tab
 
 The **Statistics** tab shows a list of long-term statistic entities. If the long term statistics is not working for an entity, a **Fix Issue** link is shown. Select it to view a description of the issue. There might also be an option to fix the issue.
 
@@ -130,15 +151,16 @@ icon. Use date & time to search for the incorrect data point and adjust the valu
 
 ![Screenshot showing adjusting the long-term statistic history value](/images/blog/2022-04/adjust-statistics.png)
 
-## Assist
+## Assist tab
 
 The **Assist** tab lets you see how Home Assistant's Assist processes a sentence.
 
 If no matching intent is found, then Assist is unable to interpret the sentence. If a matching intent was found, information is provided on the action that will be performed on which entities. The example below shows how the following sentence was parsed: *what lights are on in the office*. 
+
 - Assist found a matching intent: *HassGetState*.
 - It found entities matching the domain: *lights*.
 - The lights have the state *on*.
-- The lights are in the area *office*. 
+- The lights are in the area *office*.
 - The targets are the narrowed-down entities in scope.
 
 ![Example use of assist developer tools](/images/docs/developer-tools/Assist.png)