DEV Community

Dr. House
Dr. House

Posted on

1 2

[utility script] functionally replace Devtools 'Copy JS path' with 'Copy jQuery path'

When working with jQuery on webpages, I regularly use the Devtools context menu option 'Copy JS path', this produces something like:

document.querySelector('element1 > element2')

then I always need to replace 'document.querySelector' with a '$' for jQuery to work... so tedious!

I wrote a small Autohotkey utility script which detects 'document.querySelector' when in the clipboard and automatically replaces it with a '$' - it's very simple and effective.

install Authotkey, save as 'clippie.ahk' (for example):

#Persistent
OnClipboardChange("ClipChanged")
return

ClipChanged(Type) {
StringReplace, clipboard, clipboard, document.querySelector, $, All
}

(minor note: if you ever need to copy/paste 'document.querySelector', just copy/paste 'document.querySelecto' and then manually add 'r' at the end)

Or, if you're brave, I compiled the script into an .exe you can download:
clippie - Copy jQuery path

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay