The Carbon Devtools web extension is a plugin tool for browsers that provides designers, developers, QA teams and anyone collaborating to build and validate Carbon pages with a simple set of tools.
Use the grid overlay feature to lay the 2x and mini unit grid on top of your page to quickly check the alignment of your page's layout. breakpoints.
Switch between a number of speccing options like color, spacing, and typography to identify what Carbon tokens are being used for a given component or element on the page.
Quickly get an inventory of all the Carbon supported components being used on a given page. Search for a specific component, and click on it to find where it's located on the page.
Identify what Carbon breakpoint you're browser is actively using, and quickly resize your browser to see how your page responds at various supported
- Go to Carbon Devtools on the Chrome Web Store.
- Click the "Add to Chrome" button.
- Once installed you can click to open it next to the Chrome Omnibox.
This extension works for all chromium based browsers, and thus can be applied to Microsoft Edge, Brave, and Opera as well.
- Go to Carbon Devtools on the Firefox browser add-ons.
- Click the "+ Add to Firefox" button.
- Once installed you can click to open it from your toolbar.
fork,cloneandyarn installdependenciesyarn buildoryarn watchto build extension
/extension
- Google getting started
- Firefox your first web extension
Once you have your local version of the extension built and installed how do we continue working as we update the extension?
yarn watchoryarn buildworks in most cases and automatically updates the extension.- Every once in a while you might need to refresh the extension using the refresh button.
We're always looking for contributors to help us fix bugs, build new features, or help us improve the project documentation. If you're interested, definitely check out our Contributing Guide! 👀
Licensed under the Apache 2.0 License.