Carbon Devtools V10

A basic set of tools for teams building live Carbon pages for Carbon v10.

What is Carbon Devtools V10?

"Carbon Devtools V10" is a Chrome extension designed for designers, developers, and QA teams working with Carbon pages. It features a grid overlay for quick layout checks, tools to identify color, spacing, and typography tokens, and a comprehensive inventory of all Carbon components on live pages. This simple toolset aids in visualizing and understanding how the Carbon Design System is implemented, making collaboration more efficient and effective.

Download

Extension stats

By: Carbon

View on Chrome Web Store

Users: 1,000+

Rating: 5.00 (1)

Version: 2.8.4 (Last updated: 2024-08-16)

Creation date: 2020-07-22

Risk impact: Low risk impact

Risk likelihood: Very low risk likelihood

Manifest version: 3

Permissions:

activeTab
storage
scripting

Host permissions:

https://*.mybluemix.net/*
https://*.carbondesignsystem.com/*

Size: 285.70K

Email: ca*****@us.ibm.com

URLs: Privacy policy

Ranking

# 30595 ▼ 138

Other rankings

#286 in Developer Tools ▲ 1 #101 in component keyword 11 ▲ 1 #106 in grid keyword 23 #163 in identify keyword 6 ▼ 10 #198 in usage keyword 14 ▼ 11

Other platforms

Not available on Firefox

Not available on Edge

Want to check extension ranking and stats more quickly for other Chrome extensions? Install Chrome-Stats extension to view Chrome-Stats data as you browse the Chrome Web Store.

Extension summary

Analyze keywords

Carbon Devtools provides designers, developers, and QA teams collaborating to build Carbon pages with a simple toolset. The tool helps visualize Carbon's 2x grid over any live page, and provides basic insights into the usage of components and patterns on a given page to help users understand how the Carbon Design System is being used.

Align to grid Use the grid overlay to lay the 2x and mini unit grids on top of your live page to quickly check its alignment and layout.

Identify tokens Switch between a number of options like color, spacing, and typography to quickly identify Carbon’s usage.

Component list Quickly get an inventory of all the Carbon components being used within a live page.