CODEWITHSUNDEEP
javascriptfirefox-developer-tools
jdm
jdm

Reputation: 10140

Use external editor in Firefox devtools?

If I click on a filename with line number (script.js:100:4) in the Firefox developer tools, it takes me to an integrated editor. Is there a way to open an external editor (at the correct line) instead (for example, VS Code)?

There is a similar question for Chrome from 2013, where it was not (yet?) possible.

Upvotes: 2

Views: 254

Answers (2)

julaine
julaine

Reputation: 1724

Here is a (brittle, quick and dirty) python-script that automates the GUI-actions required to extract line-number and filename from a link in the debugger and use that information to open that location in intellij. To use it, fill in your projects base-path into the script, then run it in the background (python3 file.py) 1. Then, when you hover over a link in your firefox-devtool-console, press 'Alt+A' to open it in IDEA-ide.

import pyautogui
import re
import os.path
import keyboard
import pyperclip
import time
import traceback

DELAY = 0.001 # 1ms between GUI-actions to let them have an effect
PROJECT_PATH =  # fill in with 'C://Users/username/project'

def delay():
    time.sleep(DELAY)

def get_links():
    # this is unfortunately sensitive to the ordering of the elements in the right-click dropdown-menu
    # so this will depend on browser-version and language.
    # the first option you should 'click' is something like 'Copy link'
    # the second is 'copy message'
    # make sure the prints of this function match the comments in some way.
    pyautogui.rightClick()
    delay()
    pyautogui.press('up')
    delay()
    pyautogui.press('enter')
    delay()
    link = pyperclip.paste()
    print("link: ", link) # webpack://project-name/path/to/file.vue
    pyautogui.rightClick()
    delay()
    pyautogui.press('down')
    delay()
    pyautogui.press('down')
    delay()
    pyautogui.press('enter')
    delay()
    msg = pyperclip.paste()
    print("msg: ", msg) # log-message in browser file.vue:150:20
    return link, msg

def extract_path_line(link, msg):

    filename = os.path.basename(link) # file.vue
    m = re.search(rf"{filename}:(\d+):\d+", msg)
    assert m
    line_no = m.group(1)
    path = PROJECT_PATH + link.removeprefix("webpack://")

    print("path: ", path)
    print("line# :", line_no)

    return path, line_no

def open_in_idea(path, line_no):
    cmd = f"idea --line {line_no} {path}"
    print("executing:\n", cmd)
    os.system(cmd)


while True:
    # Wait for the 'Alt+A' keyboard shortcut
    keyboard.wait('alt+a')
    print("-----begin------")
    try:
        link, msg = get_links()
        path, line_no = extract_path_line(link, msg)
        open_in_idea(path, line_no)
        print("----success-----")
    except Exception:
        print(traceback.format_exc())
        print("-----failure----")

1 If it tells you ModuleNotFound, install it with pip

Upvotes: 0

Sebastian Zartner
Sebastian Zartner

Reputation: 20125

Unfortunately, there is no option yet to open the sources in an external editor. I've filed an enhancement request for that a long time ago.

Upvotes: 2

Related Questions