Update npm packages
Add --dump-dimensions option to rsx:debug for layout debugging Mark framework publish 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -140,6 +140,31 @@ SCREENSHOTS
|
||||
--screenshot-width=1024 --screenshot-path=/tmp/custom.png
|
||||
# Custom 1024px width
|
||||
|
||||
LAYOUT DEBUGGING
|
||||
|
||||
--dump-dimensions=<selector>
|
||||
Add data-dimensions attribute to all elements matching the CSS selector.
|
||||
The attribute contains JSON with layout information (all values rounded
|
||||
to nearest pixel):
|
||||
|
||||
- x, y: Absolute position on page
|
||||
- w, h: Element width and height
|
||||
- margin: Single value if uniform, or "top right bottom left" notation
|
||||
- padding: Single value if uniform, or "top right bottom left" notation
|
||||
|
||||
Example output in DOM:
|
||||
data-dimensions='{"x":0,"y":60,"w":250,"h":800,"margin":0,"padding":"20 15 20 15"}'
|
||||
|
||||
Examples:
|
||||
--dump-dimensions=".card"
|
||||
# Add dimensions to all .card elements
|
||||
|
||||
--dump-dimensions=".sidebar,.main-content"
|
||||
# Multiple selectors
|
||||
|
||||
Use with --dump-element to see the annotated HTML, or without --no-body
|
||||
to see the full page DOM with dimensions embedded.
|
||||
|
||||
JAVASCRIPT EVALUATION
|
||||
|
||||
--eval=<code>
|
||||
@@ -224,6 +249,10 @@ Capture mobile and desktop screenshots:
|
||||
php artisan rsx:debug /page --screenshot-width=mobile --screenshot-path=/tmp/mobile.png
|
||||
php artisan rsx:debug /page --screenshot-width=desktop-large --screenshot-path=/tmp/desktop.png
|
||||
|
||||
Debug layout issues by inspecting element dimensions:
|
||||
php artisan rsx:debug /page --dump-dimensions=".card,.sidebar" --dump-element=".main"
|
||||
# Shows .main HTML with data-dimensions on matching elements
|
||||
|
||||
IMPORTANT NOTES
|
||||
|
||||
• When using rsx:debug with grep and no output appears, re-run without grep
|
||||
|
||||
Reference in New Issue
Block a user