diff --git a/doc/tools/devtools_guide.md b/doc/tools/devtools_guide.md
index ade44ee1..cd8e8e71 100644
--- a/doc/tools/devtools_guide.md
+++ b/doc/tools/devtools_guide.md
@@ -82,6 +82,22 @@ in the sources tab as well.
 
 <img src="screenshots/function_menu.png"/>
 
+Using the right-click context menu on a property also allows to observe variables. Observed variables will
+be sent to a dedicated section of the details window and their value will be refreshed every 200ms. These
+variables are only shown when they are found and their access path will be kept in memory inside the
+browser so that it will always persist until the user decides to stop observing the variable. As in the
+browser's devtools, observed objects are displayed in reduced form and cannot be interacted with. It is
+still possible to send them to the console or remove them from the list using right-click.
+
+<img src="screenshots/observe_variables.png"/>
+
+The last section of the details window is filled with the component's lifecycle hooks. Using right click on
+them allows to place breakpoints inside the hook (either on its instance or class, hooks like mounted and
+willStart cannot have instance-based breakpoints because they will never trigger). Conditions in conditional
+breakpoints will be evaluated in the context of the component's definition.
+
+<img src="screenshots/hooks.png"/>
+
 There are several icons available to perform several of the actions described before in the components
 tree context menu and all these actions are also available by opening the menu by right-clicking on the
 component's name. Using the left click on the component's name will focus it in the components tree.
diff --git a/doc/tools/screenshots/crm.png b/doc/tools/screenshots/crm.png
index 5afe7456..e6b59b2e 100644
Binary files a/doc/tools/screenshots/crm.png and b/doc/tools/screenshots/crm.png differ
diff --git a/doc/tools/screenshots/darkmode.png b/doc/tools/screenshots/darkmode.png
index 946a35c8..c7e65fb7 100644
Binary files a/doc/tools/screenshots/darkmode.png and b/doc/tools/screenshots/darkmode.png differ
diff --git a/doc/tools/screenshots/edit.png b/doc/tools/screenshots/edit.png
index a7540f76..96f8e9ca 100644
Binary files a/doc/tools/screenshots/edit.png and b/doc/tools/screenshots/edit.png differ
diff --git a/doc/tools/screenshots/function_menu.png b/doc/tools/screenshots/function_menu.png
index f37bdf83..7425f232 100644
Binary files a/doc/tools/screenshots/function_menu.png and b/doc/tools/screenshots/function_menu.png differ
diff --git a/doc/tools/screenshots/hooks.png b/doc/tools/screenshots/hooks.png
new file mode 100644
index 00000000..a3800d1d
Binary files /dev/null and b/doc/tools/screenshots/hooks.png differ
diff --git a/doc/tools/screenshots/iframes.png b/doc/tools/screenshots/iframes.png
index 19e9642a..00401218 100644
Binary files a/doc/tools/screenshots/iframes.png and b/doc/tools/screenshots/iframes.png differ
diff --git a/doc/tools/screenshots/menu.png b/doc/tools/screenshots/menu.png
index 77b2f0fc..69b5a064 100644
Binary files a/doc/tools/screenshots/menu.png and b/doc/tools/screenshots/menu.png differ
diff --git a/doc/tools/screenshots/multi_apps.png b/doc/tools/screenshots/multi_apps.png
index db3d2ada..af84fd8f 100644
Binary files a/doc/tools/screenshots/multi_apps.png and b/doc/tools/screenshots/multi_apps.png differ
diff --git a/doc/tools/screenshots/observe_variables.png b/doc/tools/screenshots/observe_variables.png
new file mode 100644
index 00000000..58d73689
Binary files /dev/null and b/doc/tools/screenshots/observe_variables.png differ
diff --git a/doc/tools/screenshots/picker.png b/doc/tools/screenshots/picker.png
index a8a9786c..f9919ec8 100644
Binary files a/doc/tools/screenshots/picker.png and b/doc/tools/screenshots/picker.png differ
diff --git a/doc/tools/screenshots/states.png b/doc/tools/screenshots/states.png
index 8bec3d53..e964ce37 100644
Binary files a/doc/tools/screenshots/states.png and b/doc/tools/screenshots/states.png differ