DevTools
You can access DivMagic directly from your browser's development tools. This section will guide you on how to use this feature.
TODO: Upload DevTools Video
How to use DivMagic with DevTools
Open Developer Console: Navigate to your browser's developer console by right-clicking on your page and selecting 'Inspect' or simply using the shortcut
Locate DivMagic Tab: Once inside the developer console, find the 'DivMagic' tab located next to the other tabs like 'Elements', 'Console', etc.
Select an Element: Navigate to the webpage you want to copy from, and use the DivMagic tab in the dev tools to select and capture any desired element.
Copy & Convert: Once an element is selected, you can copy its styles, transform it into reusable CSS, Tailwind CSS, React, or JSX code, and more — all from within the DevTools.
If DevTools tab does not show up on your browser, make sure you enabled it from the popup and open a new tab and try again
Permissions Update
With the addition of DevTools, we've updated the extension permissions. This allows the extension to add the DevTools panel seamlessly on all websites you visit and across multiple tabs.
⚠️Note
When enabling DevTools Panel from the extension popup, Chrome and Firefox will display a warning that says the extension can 'read and change all your data on the websites you visit'. While the wording is alarming, we assure you that:
Minimal Data Access: We only access the bare minimum of data required to provide you the DivMagic service.
Data Security: All data accessed by the extension remains on your local machine and is not sent to any external servers. The elements you copy are generated on your device and are not sent to any server.
Privacy First: We're committed to safeguarding your privacy and security. For more details, you can view our Privacy Policy.
We appreciate your understanding and trust. If you have any concerns or questions, feel free to reach out to our support team.
Last updated