It lets you inspect the UI to quickly figure out what code is rendering what you see. You can just click the provided link to open the source in VS Code.
Get it from the chrome web store!
https://github.com/dankoster/figment/assets/9935523/d72555a0-1849-4c75-8424-01de6b23144f
This tool has no dependencies. It's all browser APIs and Vanilla JavaScript with TypeScript to help keep things on the rails. Every bit of functionality was written by me because I'm just tinkering, it's just for fun, and I learn best by making something I find useful. If you would like a feature that doesn't exist, just let me know and I'll take a look. Or you can submit a PR.
I'm currently tinkering with a Figma integration to help correlate React components with Figma designs.
1) Open a page on localhost that is using a dev build of React or React Native. Production React will likely be minified and not include source file mappings. I am currently limiting this tool (in the manifest) to only function for localhost. 2) Toggle enabled/disabled
ALT-f
(⌥-f
on Mac) (configure here: chrome://extensions/shortcuts)The context menu that pops up will show you the element/component you are inspecting as well as all of it's parent element/components. A link to the source code will be provided for each element/component where React has provided that information.
https://github.com/dankoster/figment/assets/9935523/06e3b9c8-fa9a-45bc-abfa-69e04ef011f8
vscode://file:line:character
)We're keeping it simple and using just JavaScript, HTML, and CSS. I have intentionally avoided dependencies except for git and TypeScript. We really don't need a package manager or build tool for a project of this size.
1) Clone the repo locally: git clone https://github.com/dankoster/figment.git
1) Navigate to the folder that was created by git: cd figment
1) Run the terminal command: mkdir -p dist && cp -rv ./assets/* ./dist && tsc
mkdir -p dist
makes the dist foldercp -rv ./assets/* ./dist
verbosely copies the contents of the assets folder into disttsc
compiles the typescript to the dist folder
1) Open chrome://extensions/
in your chromium browser
1) Turn on "Developer Mode"
1) Click the "Load unpacked" button
1) Choose the figment/dist
folder
1) Find the figment extension in your browser extensions toolbar and pin it
1) Have fun hacking!tsc -w
to watch for changes while workingcp -rv ./assets/* ./dist
to copy asset files into dist (or use the included Deno script to watch and copy those asset files when they change... deno run --allow-read --allow-write watchAndCopy.ts ./assets ./dist
)