DevTools: U.S. Web Design System (USWDS)

View which USWDS components are being used on a page and the active responsive breakpoints.

What is DevTools: U.S. Web Design System (USWDS)?

DevTools: U.S. Web Design System (USWDS) is a Chrome extension that allows developers and designers to easily identify and access the U.S. Web Design System components used on a page. It also displays the active responsive breakpoints, aiding in the creation of responsive designs using utility classes. Contribute to this open-source extension on GitHub.

Download

Stats

By: sawyerh

View on Chrome Web Store

Users: 45 ▲ 2

Rating: 5.00 (1)

Version: 1.0.1 (Last updated: 2023-08-16)

Creation date: 2023-08-16

Risk impact: Very low risk impact

Risk likelihood: Very low risk likelihood

Manifest version: 3

Permissions:

activeTab
scripting

Size: 975.87K

Email: br*****@sawyerh.com

Stats date:

Chrome-Stats Rank

# 80892 ▲ 419

Other rankings

#2214 in Developer Tools ▲ 1 #25 in system keyword 12 #68 in design keyword 35 ▼ 12 #133 in component keyword 31 ▼ 27 #211 in web keyword 88 ▲ 18

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.

Summary

Analyze keywords

A simple extension that helps developers and designers learn what U.S. Web Design System components are in active use on a page. From the tags it layers onto the page, users can click a tag to quickly access the component's official USWDS documentation.

The active breakpoints are also displayed in the page's corner, helping developers pick which breakpoint prefix to use when building a responsive design using utility classes.

Contribute to this extension, it's open source: https://github.com/sawyerh/uswds-dev-tools