mirrors/django-components
1
0
Fork 0
mirror of https://github.com/django-components/django-components.git synced 2025-08-04 06:18:17 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: extension defaults + docs + API cleanup (#1215)

Browse source
This commit is contained in:
Juro Oravec 2025-05-26 23:36:19 +02:00 • committed by GitHub
parent 7df8019544
commit bb129aefab
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
16 changed files with 858 additions and 144 deletions
Download patch file Download diff file Expand all files Collapse all files

22
docs/guides/other/troubleshooting.md
View file

@ -4,20 +4,30 @@ As larger projects get more complex, it can be hard to debug issues. Django Comp
Django Components provides a visual debugging feature that helps you understand the structure and boundaries of your components and slots. When enabled, it adds a colored border and a label around each component and slot on your rendered page.
To enable component and slot highlighting, set
[`debug_highlight_components`](../../../reference/settings/#django_components.app_settings.ComponentsSettings.debug_highlight_components)
and/or [`debug_highlight_slots`](../../../reference/settings/#django_components.app_settings.ComponentsSettings.debug_highlight_slots)
to `True` in your `settings.py` file:
To enable component and slot highlighting for all components and slots, set `highlight_components` and `highlight_slots` to `True` in [extensions defaults](../../../reference/settings/#django_components.app_settings.ComponentsSettings.extensions_defaults) in your `settings.py` file:
```python
from django_components import ComponentsSettings
COMPONENTS = ComponentsSettings(
debug_highlight_components=True,
debug_highlight_slots=True,
extensions_defaults={
"debug_highlight": {
"highlight_slots": True,
"highlight_components": True,
},
},
)
```
Alternatively, you can enable highlighting for specific components by setting `Component.DebugHighlight.highlight_components` to `True`:
```python
class MyComponent(Component):
class DebugHighlight:
highlight_components = True
highlight_slots = True
```
Components will be highlighted with a **blue** border and label:
![Component highlighting example](../../images/debug-highlight-components.png)