markit 作者: Aswin E
Markit is a QA annotation tool for browsers. Draw, measure element distances, inspect CSS styles, select DOM elements, and capture annotated screenshots — all locked to the page and scroll-stable. Built for QA engineers.
也可在 Firefox for Android™ 使用也可在 Firefox for Android™ 使用
掃描 QR Code，即可在 Firefox for Android 當中開啟此擴充套件
擴充套件後設資料
關於此擴充套件
Core Tools
✏ Draw Mode
Brush, rectangle, arrow, and text tools to annotate directly on any webpage. Adjustable brush size and 8 colour options. All strokes are stored in document coordinates so they stay fixed to the page content regardless of scroll position.
⬡ Element Selector
Click any element on the page to capture its CSS selector, outer HTML, dimensions, and position. All captures appear in a side panel with copy-to-clipboard and JSON export.
🔍 Style Inspector
Hover over any element to see a floating card with its computed CSS properties — filtered intelligently by element type. Images show object-fit and dimensions, text shows font and colour, containers show layout and spacing. Click to pin the card to the page; it stays locked in place while scrolling.
📐 Measure Tool
Click two elements to measure the distance between them. Shows horizontal gap, vertical gap, or edge alignment differences (like Figma redlines). Measurements are drawn on the canvas and scroll with the page.
📸 Screenshot
Captures the current viewport with all annotations, measurements, and pinned inspector cards composited on top. Also downloads a companion JSON file with captured element metadata when elements have been selected.
✂ Crop Screenshot
Drag to select any region of the page for a cropped capture. Rule-of-thirds guides appear during selection. Annotations within the crop area are included.
Key Behaviours
Scroll-stable annotations — all drawings, shapes, text, measurements, and pinned cards are stored in page (document) coordinates and re-render on every scroll, staying locked to the content they were drawn on
Single active mode — only one tool is active at a time (Draw / Selector / Inspector / Measure); switching tools cleanly exits the previous mode
Draggable toolbar — the left-side toolbar can be dragged anywhere on the screen; snaps back to the edge if dropped near the left
Undo / Clear — undo restores previous canvas state and clears all selector/inspector captures simultaneously
Viewport-safe — uses dvh units and visualViewport API so the toolbar and canvas behave correctly on all screen sizes and zoom levels
✏ Draw Mode
Brush, rectangle, arrow, and text tools to annotate directly on any webpage. Adjustable brush size and 8 colour options. All strokes are stored in document coordinates so they stay fixed to the page content regardless of scroll position.
⬡ Element Selector
Click any element on the page to capture its CSS selector, outer HTML, dimensions, and position. All captures appear in a side panel with copy-to-clipboard and JSON export.
🔍 Style Inspector
Hover over any element to see a floating card with its computed CSS properties — filtered intelligently by element type. Images show object-fit and dimensions, text shows font and colour, containers show layout and spacing. Click to pin the card to the page; it stays locked in place while scrolling.
📐 Measure Tool
Click two elements to measure the distance between them. Shows horizontal gap, vertical gap, or edge alignment differences (like Figma redlines). Measurements are drawn on the canvas and scroll with the page.
📸 Screenshot
Captures the current viewport with all annotations, measurements, and pinned inspector cards composited on top. Also downloads a companion JSON file with captured element metadata when elements have been selected.
✂ Crop Screenshot
Drag to select any region of the page for a cropped capture. Rule-of-thirds guides appear during selection. Annotations within the crop area are included.
Key Behaviours
Scroll-stable annotations — all drawings, shapes, text, measurements, and pinned cards are stored in page (document) coordinates and re-render on every scroll, staying locked to the content they were drawn on
Single active mode — only one tool is active at a time (Draw / Selector / Inspector / Measure); switching tools cleanly exits the previous mode
Draggable toolbar — the left-side toolbar can be dragged anywhere on the screen; snaps back to the edge if dropped near the left
Undo / Clear — undo restores previous canvas state and clears all selector/inspector captures simultaneously
Viewport-safe — uses dvh units and visualViewport API so the toolbar and canvas behave correctly on all screen sizes and zoom levels
由 1 位評論者給出 0 分
權限與資料
更多資訊