Update Documents

Author: AkiKurisu

Documentation~/docs/flow_debugging.md

@@ -1,17 +1,30 @@
 # Debugging
 
-To enable and disable debug mode, click `debug` button in the upper right corner.
+Ceres provides powerful debugging capabilities to help you troubleshoot your visual scripts.
 
-Then, you can click `Next Frame` to execute the graph node by node.
+### Enable Debug Mode
+To enable and disable debug mode, click the `debug` button in the upper right corner. Then, you can click `Next Frame` to execute the graph node by node.
 
-## Use Breakpoint
-
-You can right click node and `Add Breakpoint`, and click `Next Breakpoint` in toolbar to execute the graph breakpoint by breakpoint.
+### Breakpoints
+You can right click any node and select `Add Breakpoint`, then click `Next Breakpoint` in the toolbar to execute the graph breakpoint by breakpoint.
 
 ![Debug](../resources/Images/flow_debugger.png)
 
-## Use Graph Tracker
+### Port Debugging
+
+Ceres editor can display the current value of an input port when the mouse hovers over the port of the node at the current breakpoint.
+
+![Port Debug](../resources/Images/port_debug.png)
+
+### Graph Tracker
+`FlowGraphTracker` is a class that can be used to track the execution of the graph for advanced debugging scenarios.
+
+For more details, you can see the sample [FlowGraphDependencyTracker](https://github.com/AkiKurisu/Ceres/blob/main/Runtime/Flow/Models/FlowGraphTracker.cs).
+
+### Hot Reload
+
+Ceres supports hot reloading of `FlowGraphObject`. When you modify a `FlowGraphObject` in playing mode, the changes can be reflected immediately.
 
-`FlowGraphTracker` is a class that can be used to track the execution of the graph.
+To enable hot reload, you need toggle the `Hot Reload` option in Flow Editor's toolbar and then try to save your graph in playing mode.
 
-For more details, you can see the sample [FlowGraphDependencyTracker](https://github.com/AkiKurisu/Ceres/blob/main/Runtime/Flow/Models/FlowGraphTracker.cs).
+![Hot Reload](../resources/Images/hot_reload.png)

Documentation~/resources/Images/hot_reload.png

@@ -288,6 +288,14 @@ Ceres editor can display the current value of an input port when the mouse hover
 ### Graph Tracker
 `FlowGraphTracker` is a class that can be used to track the execution of the graph for advanced debugging scenarios.
 
+### Hot Reload
+
+Ceres supports hot reloading of `FlowGraphObject`. When you modify a `FlowGraphObject` in playing mode, the changes can be reflected immediately.
+
+To enable hot reload, you need toggle the `Hot Reload` option in Flow Editor's toolbar and then try to save your graph in playing mode.
+
+![Hot Reload](./Documentation~/resources/Images/hot_reload.png)
+
 ## Advanced Features
 
 ### Port Implicit Conversion