TruePx Docs / Start
Getting started
Install TruePx, turn it on in a tab, and learn the dock, the side panel and the keyboard shortcuts. Five minutes, and you know where everything is.
Install#
- Open TruePx in the Chrome Web Store and click Add to Chrome.
- Click the puzzle-piece icon in Chrome’s toolbar and pin TruePx, so its icon is always one click away.
TruePx needs desktop Chrome 116 or newer. Installing it asks for no access to your sites: it can only read a tab after you turn it on there. See permissions for the details.
Turn it on#
Open the page you want to check, then do any one of these:
- Click the TruePx icon in the toolbar.
- Press Alt Shift S (on a Mac: ⌥ ⇧ S).
- Right-click anywhere on the page and choose TruePx.
The dock appears at the bottom of the page and the page starts answering your mouse: hover anything to see its size and spacing. Do the same again (icon, shortcut or menu) to turn TruePx off: the dock, overlays and highlights go away and links work normally again. Changes you made in Edit mode stay on the page until you reload it (see saved edits).
TruePx works on one tab at a time and only where you turn it on. Other tabs, and the same site in another tab, are untouched.
A red “!” on the icon means TruePx couldn’t start on this tab. Hover the icon to read why. Chrome doesn’t let any extension run on its own pages (chrome:// addresses, the new-tab page, the Chrome Web Store) or on other extensions’ pages. On a normal website, reload the tab and try again. More in Troubleshooting.
The dock#
The dock is the bar of buttons at the bottom of the page. It has two modes, switched with the pair of buttons near its right end: Inspect (the square with corner handles) for measuring and reading, and Edit (the pencil) for changing the page.
Hover any dock button to see its name and its key. From left to right in Inspect mode:
| Button | Key | What it does |
|---|---|---|
| Select Parent | ⌥⇧↑ | Selects the element that contains the selected one. Click it repeatedly to climb towards the page’s <body>. |
| Select Child | ⌥⇧↓ | Steps back down to the element you climbed from. It’s active only after Select Parent. |
| Inspector | 1 | A floating card with the hovered element’s size, colors and font. More |
| X-Ray | 2 | Outlines every element, colored by how deeply it’s nested. More |
| Grid overlay | 3 | The button opens the grid settings; the 3 key shows or hides the grid. More |
| Rulers | 4 | Pixel rulers along the top and left with a crosshair at the pointer. More |
| Breakpoints | 5 | A line at each screen width where the page’s CSS changes layout. More |
| Color Picker | 6 | Pick any pixel on screen; its HEX value is copied. More |
| Find by selector | 7 | Highlights every element that matches a CSS selector. More |
| Screenshot | 8 | Saves a PNG of the selected (or hovered) element. More |
| Responsive preview | 9 | Shows the page at phone, tablet and desktop sizes side by side. More |
| Side panel | 0 | Opens the side panel for this tab. More |
| Simulate color vision deficiency | Shows the page as people with color blindness see it. More | |
| Overlay design mockup | Lays a design image over the page to compare. More | |
| Pin a note for your agent | Click an element and write a note on it. More | |
| Quit | Turns TruePx off on this tab. | |
| Hide Dock | Folds the dock into one small button; click that button (Show Dock) to bring it back. Tools and keys keep working while it’s hidden. | |
| Pause Inspection | P | Stops the hover highlights so you can click, scroll and use the page normally. Press again to resume. More |
| Inspect / Edit | Switches the dock between the two modes. | |
| AI agent (dot) | Opens the AI agent settings. The dot is green while an agent is connected. More |
In Edit mode the measuring tools (Inspector, X-Ray, Grid, Rulers, Breakpoints, Color Picker, Find) make room for editing tools: Edit Text, Copy, Cut, Paste, Duplicate, Delete, Undo and Redo. They’re explained in Edit the page.
On a narrow window the dock shrinks to fit the screen width.
Hover, select and release#
- Hover any element to see its tag, class and size, its padding (green) and its margin (orange). More
- Click an element to select (lock) it. Its label turns red, the side panel shows it, and hovering another element now shows the distance between the two.
- Click it again, or press Esc, to release it.
While TruePx is on, clicks select elements instead of following links or pressing buttons. To use the page itself (open a menu, follow a link), pause inspection first.
Pause inspection#
Press P or click the pause button beside the Inspect/Edit switch. Hover highlights stop and clicks go to the page again, so you can open a menu, play a carousel or follow a link. Everything else stays: the dock, the grid, the rulers and the side panel. Press P again to resume. A short hint points at Pause the first few times you open the side panel or the responsive preview.
The side panel#
Open it with the Side panel button on the dock, or press 0. It sits beside the page, Chrome-style, and belongs to this tab. It has four tabs:
- Element: everything about the element you selected.
- Page: the page as a whole: weight, colors, fonts, assets, technologies and pins.
- SEO: search preview, SEO issues, links, headings, structured data and more.
- Audit: accessibility, launch and privacy, performance, content and layout checks.
A number on the SEO or Audit tab counts the errors and warnings from its last run. In Edit mode, the panel shows the CSS and Changes tabs instead.
To give the page the full width of the browser, or to put the panel on a second screen, click Open in a window (the square with an arrow, right of the tabs). The panel moves into its own small window at the right of your screen and keeps following this tab. The dock’s Side panel button then brings that window to the front. Click Back to the side panel in the window to dock it again. Turning TruePx off, or closing the tab, closes the window.
When nothing is selected, the Element tab shows the main shortcuts as a reminder.
Keyboard shortcuts#
The number keys and P work while TruePx is on and you aren’t typing in a field.
| Keys | Action |
|---|---|
| Alt Shift S | Turn TruePx on or off in this tab |
| Alt Shift ↑ | Select Parent |
| Alt Shift ↓ | Select Child (back down after Select Parent) |
| 1 | Inspector |
| 2 | X-Ray |
| 3 | Show or hide the grid overlay |
| 4 | Rulers |
| 5 | Breakpoints |
| 6 | Color Picker |
| 7 | Find by selector |
| 8 | Screenshot |
| 9 | Responsive preview |
| 0 | Side panel |
| P | Pause or resume inspection |
| Space | Pin the Inspector card in place (while the Inspector is on) |
| Esc | Close the topmost thing: a pin you’re placing, then the Find box, then the grid settings, then the selection |
On a Mac, Alt is ⌥ (Option). In Edit mode, ⌘/Ctrl with C, X, V, D, Z and Shift Z, and Delete, act on the selected element; see Edit the page.
Esc never turns TruePx off and never closes the responsive preview. Use Quit, the toolbar icon or the shortcut to turn it off.
To change the three Chrome shortcuts (turn on, select parent, select child), open chrome://extensions/shortcuts.
Where to next#
- Measure spacing and distances: Measure & layout.
- Read an element’s CSS: Element tab.
- Check a page before launch: Audit tab and SEO tab.