Forem: Omar Dulaimi

I built FireScope: a Chrome DevTools panel for Firestore (open-source)

Omar Dulaimi — Sat, 13 Sep 2025 13:53:15 +0000

Hey folks 👋

I’ve been using this little tool privately for about a year and finally shipped it: FireScope — a Chrome DevTools panel for Firestore.

It watches your app’s Firestore traffic in real time, shows queries/params at a glance, and lets you export code (Angular/Node/Flutter/JSON). No setup — install it and open DevTools → FireScope.

Chrome Web Store: https://chromewebstore.google.com/detail/firescope/dpjiajgeckamnpncihnhldkehaghaffd
GitHub (open-source): https://github.com/omar-dulaimi/firescope

TL;DR

✅ Live capture of Firestore requests (reads/writes/queries)
✅ Clear details: method, path, params, body
✅ One-click export to Angular / Node / Flutter / JSON
✅ Collections view for quick navigation
✅ Lives in Chrome DevTools → FireScope
🧩 Open-source — feedback & PRs welcome

This fills a gap I kept hitting as a Firestore/Firebase dev: I want to see exactly what my app sends and quickly prototype the same call in code.

Who is it for?

You debug Firestore a lot and want a focused view (not the noisy Network tab).
You share reproducible snippets with teammates.
You like pasting a ready export and tweaking it.

Screenshots

Quick Start

Install from the Chrome Web Store.
Open your app and press F12 for DevTools.
Switch to the “FireScope” panel.
Interact with your app (reads/writes/queries).
Click any request for details or Export.

Not seeing anything? Trigger a Firestore action (load a page that reads data or press a button that writes).

What you can export

Angular (service-friendly snippets)
Node (server-side helpers)
Flutter (Dart snippets)
JSON (raw shape you can keep in docs/tests)

Exports are a starting point you paste and tweak.

Privacy

FireScope runs fully in your browser. It inspects your tab’s Firestore network activity via DevTools — no servers, no tracking.

Troubleshooting

FireScope panel missing? Close/reopen DevTools, then reload the page.
Empty list? Perform an action that hits Firestore (read/write/query).
Still stuck? Open an issue on GitHub with a short repro.

Roadmap / Ideas

More export targets (React, Svelte, Next.js server actions, etc.)
Filters & search, pin a session
“Copy as test” templates
Shortcuts and better empty states

Have an idea? Drop an issue on GitHub.

Links & Feedback

Install: https://chromewebstore.google.com/detail/firescope/dpjiajgeckamnpncihnhldkehaghaffd
Source: https://github.com/omar-dulaimi/firescope

I’d love your thoughts. Try it on a real project, tell me what’s missing, and if you hit any rough edges, please open an issue. PRs are super welcome 🙏

Thanks for reading!

DRZL — Adapter‑based codegen for Drizzle ORM (oRPC routers, services, and validators)

Omar Dulaimi — Sun, 07 Sep 2025 00:46:34 +0000

TL;DR: DRZL is a developer toolkit for Drizzle ORM. It analyzes your schema and generates router code (adapter‑based), typed services, and runtime validators (Zod/Valibot/ArkType). It’s template‑driven, so you can swap adapters (currently oRPC) and grow into tRPC/Express/Nest/Next.js‑style stacks with custom templates.

What is DRZL?

DRZL is an adapter‑agnostic code generation toolchain for Drizzle ORM. It consists of:

Analyzer — normalizes your Drizzle schema into a portable Analysis that generators can consume.
Generators — build reusable code from the Analysis:
- Routers (adapter‑based) — currently ships with oRPC, with templates for different styles.
- Validation — Zod, Valibot, and ArkType schemas (insert/update/select) + index barrel.
- Service — typed services that can be Drizzle‑aware or stubbed.
Templates — swap or customize router implementations (standard/minimal, oRPC + Service, or your own).

👉 Docs & examples: https://use-drzl.github.io/drzl/

Quickstart

1) Install the CLI

pnpm add -D @drzl/cli
# npm i -D @drzl/cli
# yarn add -D @drzl/cli
# bun add -d @drzl/cli

2) Add a single config (oRPC + Zod + Service)

// drzl.config.ts
import { defineConfig } from '@drzl/cli/config';

export default defineConfig({
  schema: 'src/db/schemas/index.ts',
  outDir: 'src/api',
  generators: [
    // 1) Zod validators
    { kind: 'zod', path: 'src/validators/zod', schemaSuffix: 'Schema' },

    // 2) Routers (oRPC adapter), reusing Zod schemas
    {
      kind: 'orpc',
      template: '@drzl/template-orpc-service',
      includeRelations: true,
      outputHeader: { enabled: true },
      validation: {
        useShared: true,
        library: 'zod',
        importPath: 'src/validators/zod',
        schemaSuffix: 'Schema',
      },
    },

    // 3) Typed services (Drizzle‑aware or stub)
    {
      kind: 'service',
      path: 'src/services',
      dataAccess: 'drizzle', // or 'stub'
      dbImportPath: 'src/db/connection',
      schemaImportPath: 'src/db/schemas',
    },
  ],
});

3) Install the generators/template you reference

pnpm add -D @drzl/generator-zod @drzl/generator-service @drzl/template-orpc-service
# If you prefer Valibot or ArkType:
# pnpm add -D @drzl/generator-valibot @drzl/generator-service @drzl/template-orpc-service
# pnpm add -D @drzl/generator-arktype @drzl/generator-service @drzl/template-orpc-service

The oRPC generator ships with the CLI. Validation + Service generators are separate packages so you install only what you use.

4) Generate

pnpm drzl generate -c drzl.config.ts
# npx drzl generate -c drzl.config.ts
# yarn drzl generate -c drzl.config.ts
# bunx drzl generate -c drzl.config.ts

This writes validators to src/validators/*, routers to src/api, and services to src/services.

(Optional) Watch mode

pnpm drzl watch -c drzl.config.ts --pipeline all --debounce 200

(Optional) No‑config oRPC quickstart

pnpm dlx drzl generate:orpc src/db/schemas/index.ts -o src/api --template standard --includeRelations

Adapter‑based by design

DRZL is adapter‑agnostic: router generation is driven by small, composable templates. Today it targets oRPC. You can write your own templates to target other stacks (tRPC, Express, NestJS, Next.js, Prisma, etc.), or use community/premium templates as they become available.

Key ideas:

Templates define file paths, exported names, imports/prelude, and the code for each procedure.
Validation reuse: generators can wire shared Zod/Valibot/ArkType schemas into handlers (inputs/outputs).
Typed outputs: the generator adds .output(...) typing where applicable.

Examples

Relations example — relation‑aware generation patterns.
Validation mix — reuse shared validators across routers/services.

(See the site for live examples and code.)

Licenses & ownership

You own the generated output — use/modify/distribute under your project’s license.
A short output header is added by default; you can disable (outputHeader.enabled = false) or customize it.

Roadmap & support

More adapter templates (community + premium) for deeper integrations.
Custom templates available as a paid service if you need a specific stack/pattern.
DRZL is open‑core; contributions, issues, and stars are welcome.

—

Links

Docs: https://use-drzl.github.io/drzl/
Getting Started: https://use-drzl.github.io/drzl/guide/getting-started.html
CLI Overview: https://use-drzl.github.io/drzl/cli.html
Generators: oRPC, Service, Zod, Valibot, ArkType
Templates: Standard, oRPC + Service, Custom
Adapters: Overview & Router Adapters

If you ship something with DRZL, I’d love to see it!

Stop losing your breakpoints: Meet Breakpoint Bookmarks for VS Code

Omar Dulaimi — Fri, 22 Aug 2025 11:20:25 +0000

If you've ever stopped mid‑debug to chase a different bug, you know the pain: you come back and all your carefully placed breakpoints are gone. You try to remember where they were, what conditions you had, which logs you set… and momentum dies.

I built Breakpoint Bookmarks to fix that. It lets you save your current breakpoints to a named “flow”, switch between flows instantly, and restore everything exactly where it was—conditions, logpoints, function breakpoints and all.

TL;DR — Install it, hit Save, and stop babysitting your breakpoints.

Quick demo

Save your current session

Load a saved flow

What it does

One‑click save & restore of all your active breakpoints (source & function)
Unlimited flows — create one per bug, feature, or customer issue
Works with anything VS Code can debug (JS/TS, Python, Java, C#, Go, Rust, PHP, Ruby…)
Friendly UI: a dedicated sidebar with inline actions (Save, Load, Edit, Delete)
Type‑safe & reliable: built in TypeScript, tested, and cross‑platform

Install (10 seconds)

From the Command Palette (Ctrl/Cmd+P):

ext install OmarDulaimi.breakpoint-bookmarks

Or via CLI:

code --install-extension OmarDulaimi.breakpoint-bookmarks

Marketplace page: https://marketplace.visualstudio.com/items?itemName=OmarDulaimi.breakpoint-bookmarks

Repo: https://github.com/omar-dulaimi/breakpoint-bookmarks

How to use it

1) Set up your breakpoints as usual (conditions, hit counts, logpoints, function breakpoints—go wild).

2) Open the Breakpoint Bookmarks view (Activity Bar → “Breakpoint Bookmarks”).

3) Click Save to snapshot your current session to a named flow.

4) Later, click Load on any flow to restore the entire session—exact lines, conditions, and messages.

5) Use Edit to tweak the JSON by hand (power users, this is for you).

6) Delete a flow when it’s no longer useful.

Pro tip: Keep a “Happy‑path” flow you can load anytime you need a clean baseline.

Settings you might care about

// Settings → search for “breakpoint bookmark”
{
  // Use relative paths so flows work across machines & teammates
  "breakpointBookmark.useRelativePaths": true,

  // When loading a flow, clear any pre‑existing breakpoints first
  "breakpointBookmark.clearPreviousBreakpoints": true,

  // Pick a custom folder for the saved JSON files
  "breakpointBookmark.saveLocation": ".vscode/breakpoint-flows"
}

Real‑world uses

Multiple parallel bugs — keep one flow per issue, jump between them in seconds.
Feature flags & envs — flows for “staging”, “canary”, “prod‑sim”.
Onboarding — hand new folks a “Debug 101” flow for the codebase.
Customer escalations — save the exact breakpoints used to reproduce a ticket.
Pairing & reviews — share a flow in the repo so everyone can follow the same trail.

What’s new lately

Function breakpoints are fully supported (alongside file/line breakpoints)
Cleaner sidebar UI with hover actions and a top‑bar Save button
Better Windows path handling and cross‑platform behavior
Backward‑compatible with older bookmark files

(Changelog lives in the repo if you like the gory details.)

Roadmap — tell me what to ship next

I have a few ideas cooking, but I’d rather build what you need:

Shared/team flows out of the box (auto‑discover in workspace)
Branch‑aware flows (auto‑switch based on current git branch)
“Save only changes since last load”
Diff/merge flows, and search across flows
CLI to automate flows in CI/repros
API for other extensions to read/write flows

Have a better idea? Open an issue or drop a comment — I read everything.

Issues & feature requests: https://github.com/omar-dulaimi/breakpoint-bookmarks/issues
Pull requests welcome: https://github.com/omar-dulaimi/breakpoint-bookmarks/pulls

If this saves you time ❤️

A star or review goes a long way. If it’s really helping your day‑to‑day, you can also sponsor development — even a tiny amount helps me ship faster and keep docs & fixes flowing.

GitHub Sponsors: https://github.com/sponsors/omar-dulaimi

Thanks for reading — and happy debugging. If you write about how you’re using flows in your team, I’ll gladly link it from the repo.

Full JavaScript Internationalization CheatSheet!

Omar Dulaimi — Sun, 21 Aug 2022 19:33:00 +0000

Did you know that 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 can do 𝗶𝗻𝘁𝗲𝗿𝗻𝗮𝘁𝗶𝗼𝗻𝗮𝗹𝗶𝘇𝗮𝘁𝗶𝗼𝗻 𝗻𝗮𝘁𝗶𝘃𝗲𝗹𝘆 ?

Well, this cheatsheet will help you discover and learn all about the different objects and constructors this global object(𝗜𝗻𝘁𝗹) provides.

A lot of details can be found on the official docs, so be sure to check them out.

Make sure to follow me for more, as I'm positive you liked my 𝗘𝗦𝟮𝟬𝟮𝟮 cheatsheet before.

PDF Version Here: https://www.linkedin.com/feed/update/urn:li:activity:6966873641892347904

How to change access and modification times in Nodejs?

Omar Dulaimi — Thu, 18 Aug 2022 13:05:17 +0000

How to create symbolic links in Nodejs?

Omar Dulaimi — Wed, 17 Aug 2022 19:31:35 +0000

How to copy a file in Nodejs?

Omar Dulaimi — Tue, 16 Aug 2022 13:26:26 +0000

How to append contents to a file in Nodejs?

Omar Dulaimi — Mon, 15 Aug 2022 15:43:38 +0000

How to append contents to a file in Nodejs?

I hope you like the new format, it's so much more readable!

What is the best way to read directories in Nodejs?

Omar Dulaimi — Sun, 14 Aug 2022 19:04:00 +0000

Different ways to read directories in Nodejs!
Which way do you use? Why?

Let me know what you think in the comments

Make sure to check my profile for more tips from the Nodejs world

How to create unique temporary directories in Nodejs?

Omar Dulaimi — Sat, 13 Aug 2022 21:48:21 +0000

𝗡𝗼𝗱𝗲𝗷𝘀 provides an awesome method that lets you create unique temporary directories.

This is really useful when you need to store some data temporarily then delete them later.

𝗡𝗼𝗱𝗲𝗷𝘀 helps you further, by concatenating 6 unique characters to the 𝗽𝗿𝗲𝗳𝗶𝘅 you pick. This results in creating unique directories every single time without worrying about collisions.

Library authors will benefit of this tip as well of course.

Just make sure to avoid trailing 𝗫 characters in the 𝗽𝗿𝗲𝗳𝗶𝘅, due to some platform inconsistencies.

Did you learn something new today?

Like and share this post, and follow me for more!

Full ES2022 Cheatsheet!

Omar Dulaimi — Sat, 13 Aug 2022 00:46:00 +0000

PDF version here(High Quality): https://www.linkedin.com/posts/activity-6942202973657702401-ZX6Y

How to change ownership of a file in Nodejs?

Omar Dulaimi — Fri, 12 Aug 2022 23:36:00 +0000

As for our last permissions and access related methods, today we talk about the 𝗰𝗵𝗼𝘄𝗻 method.

It lets you change the ownership of a file. Just like you're used to on your terminal:

𝗰𝗵𝗼𝘄𝗻 <𝗨𝘀𝗲𝗿><:><𝗚𝗿𝗼𝘂𝗽> <𝗙𝗶𝗹𝗲>

𝗡𝗼𝗱𝗲𝗷𝘀 provides support for it natively; so you won't have to spawn a process to access this API.

You can check the updated values with this basic list command:

𝗹𝘀 -𝗹 <𝗙𝗜𝗟𝗘>

Did you learn something new today?

Like and share this post, and follow me for more!