DEV Community

Alvin Bellero
Alvin Bellero

Posted on

🌟 Extensions Dump: Key Tracer!

#vscode #extensions #productivity #developers

Hey there, developers! 👋

Back with another Extensions Dump — where I spotlight the VSCode extensions I have been building and why they exist in the first place.

This one is a throwback. I built Key Tracer a while back, quietly published it, and never really gave it the introduction it deserved. So here we are. Let me fix that. 😄

Let's go gif

🔍 Key Tracer: Never Lose Your Place in a JSON File Again

If you have ever worked with a deeply nested JSON file — config files, API responses, translation files, massive package.json schemas — you know the pain.

You are staring at a value buried five levels deep and you need to know its exact key path. So you squint. You mentally count the brackets. You scroll up and down. You get it wrong the first time. You try again.

Key Tracer makes that entire experience disappear.

Just hover over any JSON key and the full path shows up instantly. One click and it is in your clipboard. Done.

👉 Key Tracer on VSCode Marketplace

✨ What It Does

Given a JSON file like this:

{
  "app": {
    "settings": {
      "theme": {
        "color": "indigo"
      }
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Hover over "color" and you get:

Full Path: app.settings.theme.color  [Copy Path]
Enter fullscreen mode Exit fullscreen mode

Click Copy Path and app.settings.theme.color lands straight in your clipboard. No manual typing. No counting brackets. No mistakes.

🚀 Features

  • 🔍 Hover to reveal — shows the full dot notation path of any JSON key instantly
  • 📋 One-click copy — copy the full path to clipboard right from the hover tooltip
  • ⚙️ Custom delimiter — not a fan of dots? Change the separator to /, ->, ::, or whatever fits your project
  • 🎯 Deep nesting? No problem — accurately resolves paths no matter how many levels in you go
  • 🧪 Comprehensive test coverage — built with Mocha and a custom VS Code API mock so it actually behaves

📦 Installation

Two ways to get it:

Option 1 — VS Code Quick Open:

Ctrl+P
Enter fullscreen mode Exit fullscreen mode

Then paste:

ext install AlvinJamesBellero.key-tracer
Enter fullscreen mode Exit fullscreen mode

Option 2 — Extensions panel:

  1. Open Extensions (Cmd+Shift+X or Ctrl+Shift+X)
  2. Search for Key Tracer
  3. Hit Install
  4. Open any JSON file and start hovering 🎉

📖 Key Tracer on the VS Code Marketplace

⚙️ Configuring the Delimiter

By default Key Tracer uses a dot . as the path separator. But if your project uses a different convention, you can change it:

  1. Open Settings (Cmd+, or Ctrl+,)
  2. Search for Key Tracer
  3. Update the Delimiter field to whatever you need

So if you prefer parent/child/target over parent.child.target, you are covered.

💡 When Does This Actually Help?

More than you would think. Here are the situations where I reach for it constantly:

i18n / translation files — these get deeply nested fast. Knowing the exact key path when referencing it in your component matters.

API response debugging — pasting a large JSON response into VS Code and needing to reference a specific nested field path in your code.

Config files — environment configs, feature flag configs, anything with deeply layered structure.

Sending paths to a teammate — "hey can you check app.settings.theme.color?" is a lot cleaner than "it is like... four levels in, under settings, then theme."

Nod gif

🚀 Give It a Try

Key Tracer is free, lightweight, and does exactly one thing well. If you spend any meaningful time in JSON files, it will save you a few mental cycles every single day. Those add up.

Install it, hover over something deeply nested, and let me know what you think. Feedback, feature ideas, and bug reports all go straight to the GitHub repo.

And if it saves you from squinting at brackets at 2am, a ⭐ on the marketplace goes a long way. 😄

👉 Install Key Tracer — marketplace.visualstudio.com

Top comments (0)