Core How-Tos

Right-click menu, shortcuts and the Elements tab

DevTools+ by URLflows isn't only in the toolbar panel. You can reach its most-used tools by right-clicking the page, by pressing a shortcut, or from its own tab inside DevTools.

Right-click an element

Right-click anything on a page and choose one of these:

  • Inspect this element: pins the inspector card on what you clicked, with its size, spacing, font, colors and contrast, and copy buttons.
  • Copy CSS selector, Copy XPath, Copy outer HTML, Copy text and Copy as Markdown: copy that element in the form you need.
  • Screenshot this element: an element grab of exactly that element, even when it's taller than the window.
  • Hide this element: hides it on that page, every time you come back. Bring it back from Hide page elements in the toolbar panel, or from Settings → Hidden Elements.

Right-click a link and you also get Copy link as Markdown, which copies [text](address) using the text you selected, or the link's own text.

The menu works on the main page only. On something inside an embedded frame, DevTools+ says so and does nothing. If it asks you to right-click the element again, the page changed under you after the click; right-click it once more and choose again.

Switch the menu off

Open Settings → Tools and clear Show the tools in the right-click menu under Right-click menu. The items leave the menu straight away. Settings → Resets → Right-click menu puts them back.

Keyboard shortcuts

DevTools+ suggests four shortcuts:

  • Alt+Shift+D: open the toolbar panel.
  • Alt+Shift+S: screen grab of the visible tab.
  • Alt+Shift+I: inspect an element.
  • Alt+Shift+C: copy a container.

Chrome owns shortcuts, not the extension. If another extension already uses one of these keys, Chrome leaves it unset.

These tools have no key to start with, but you can give each one a shortcut: Selection area grab, Element grab, Full page grab, Measure on the page, and switching Outline every element, Layout grid overlay, Edit page text and Turn off CSS on and off.

Set or change a shortcut

  1. Open Settings → Tools and scroll to Keyboard shortcuts. It lists every shortcut with the keys Chrome gave it, or Not set.
  2. Press Change shortcuts, or go to chrome://extensions/shortcuts yourself.
  3. Find DevTools+, click the pencil beside a command and press the keys you want.

Shortcuts don't work on Chrome's own pages or the Chrome Web Store, where Chrome keeps extensions out.

The DevTools+ tab in the Elements panel

Open DevTools, go to the Elements panel, and find the DevTools+ tab beside Styles (if the row is narrow, it may be under the » overflow). Select an element in the tree and the tab shows:

  • Size, Position on the page, Display, Margin, Padding, Border, Font, Size / line and Children.
  • Color: the text color on its background, and Contrast with a rating of AAA, AA, AA large only or Fails.
  • Copy: buttons for its Selector, XPath, JS path, HTML, Text and Styles.
  • Event listeners: the events the element itself listens for. When it has none, a parent may be handling its events.

If the tab doesn't appear, close DevTools and open it again. DevTools only picks up an extension's tab when it opens, so a DevTools window that was open before you installed DevTools+ won't have it.

Related guides

Next, read Inspect an element and copy a container, Choose and order your tools or Use the toolbar panel.