ScrapeStudioElement Highlighter
Element Highlighter
The Element Highlighter is a core feature of ScrapeStudio that helps you identify and select the exact component you want to capture.
How It Works
When you activate Capture Mode, the Element Highlighter becomes active and follows your cursor as you move it around the page:
- Hover Detection: As you move your cursor, the highlighter detects elements under it
- Visual Feedback: Elements are highlighted with a colored border and background
- Selection: Click to select the highlighted element for capture
- Navigation: Use keyboard shortcuts to navigate between elements
Pro Tip
Use the keyboard to navigate between elements:
- Arrow Up: Select parent element
- Arrow Down: Select first child element
- Arrow Left/Right: Navigate between siblings
Highlight Customization
You can customize how elements are highlighted in the Settings panel:
| Prop | Type | Default |
|---|---|---|
color | string (hex color) | #6A78FC |
borderStyle | string (solid, dashed, dotted) | solid |
opacity | number | 0.1 |
Advanced Selection Techniques
DOM Navigation
The Element Highlighter allows you to navigate the DOM tree to find the exact element you want:
- Parent Selection: Press Arrow Up to select the parent of the current element
- Child Selection: Press Arrow Down to select the first child of the current element
- Sibling Navigation: Press Arrow Left/Right to navigate between siblings
Element Information
When an element is highlighted, you can see additional information about it:
- Element Type: The HTML tag name (div, button, etc.)
- Class Names: CSS classes applied to the element
- Dimensions: Width and height of the element
- Position: Position on the page
Troubleshooting
If you're having trouble with the Element Highlighter:
Last updated on