Open Editor

English | 简体中文

🚀🚀🚀 A web devtools for fast find source code.

Whether you are a React developer, a Vue developer, or a React and Vue developer, this development tool can help you. It can save you a lot of time looking for code, allowing you to focus more on writing code. Whether in React or Vue, it can achieve exactly the same effect.

Valid only during development, requires Node.js version 14+.

Features

• 🌈 Support React、Nextjs、Vue、Nuxt。
• 🔥 Support Rollup、Vite、Webpack。
• 🕹️ Support combined shortcut keys.
• 🎯 Support precise positioning of line and column.
• 🚀 Support find component tree.
• 📱 Support mobile devices.
• 👽 Automatically opens available editors.

Usage

React

Requires React version 15+.

OpenEditor needs to be used with @babel/plugin-transform-react-jsx-source, which is a plugin for getting source code line and column information. Usually you don't have to pay attention to this thing because it is mainly built into the scaffolding tool. If you encounter the problem that open-editor cannot open the code editor, this will It will be a way to troubleshoot the problem.

Vue

Requires Vue version 2+.

OpenEditor needs to be used with unplugin-vue-source, which is a plugin for getting source code line and column information , if this plugin is missing, the source code file will only be opened in the code editor, but line and column cannot be located.

Use plugin

The example uses vite/react as a reference. In other cases, the only choice is different, and the usage is exactly the same.

First you need to install the plugin into the project.

npm i @open-editor/vite -D

Then add the plugin to the build configuration.

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import OpenEditor from '@open-editor/vite';

export default defineConfig({
  plugins: [
    react({
      babel: {
        retainLines: true,
      },
    }),
    OpenEditor({
      // options
    }),
  ],
});

Enable inspector

First you need to get the project running.

npm run dev

At this time, open the local server address of the project in the browser, and you will see a toggle button appearing in the upper right corner of the browser. This toggle button can be used to toggle the enabled status of the inspector.

If you think that the switch button blocks your user interface, you can long press the switch button, wait for the switch button to enter the draggable state, and then adjust the display position of the switch button by dragging it.

Enable the inspector by clicking (shortcut: ⌨️ option ⌥ + command ⌘ + O) the toggle button in the upper right corner of your browser, then, We can see the source code location information by moving the mouse over the element that needs to be inspected.

At this point, click on the element to automatically open the source code file in the code editor and locate the line and column.

At this time, you can also choose to long press (shortcut key: ⌨️ command ⌘ + 🖱 click) element to view the complete component tree.

Then click on the tree node to automatically open the source code file in the code editor and locate the line and column.

Exit inspector

Click again (shortcut key 1: ⌨️ option ⌥ + command ⌘ + O, shortcut key 2: ⌨️ esc, shortcut key 3: 🖱 right-click) the switch button in the upper right corner of the browser to exit the inspector.

enableinspector event

The default behavior of enable inspector can be changed by subscribing to the enableinspector event.

Prevent default behavior

window.addEventListener('enableinspector', (e) => {
  e.preventDefault();
});

Add additional handler

window.addEventListener('enableinspector', (e) => {
  console.log('enable inspector');
});

exitinspector event

The default behavior of exit inspector can be changed by subscribing to the exitinspector event.

Prevent default behavior

window.addEventListener('exitinspector', (e) => {
  e.preventDefault();
});

Add additional handler

window.addEventListener('exitinspector', (e) => {
  console.log('exit inspector');
});

openeditor event

The default behavior of opening an editor can be changed by subscribing to the openeditor event.

Prevent default behavior

window.addEventListener('openeditor', (e) => {
  e.preventDefault();
});

Redirect URL

window.addEventListener('openeditor', (e) => {
  (e as CustomEvent<URL>).detail.hostname = '127.0.0.1';
});

Packages

Source code	NPM version	Downloads
@open-editor/rollup
@open-editor/vite
@open-editor/webpack

Playgrounds

Source code	Online trial
rollup/react15	StackBlitz
rollup/vue2	StackBlitz
vite/react	StackBlitz
vite/vue	StackBlitz
vite/nuxt	StackBlitz
webpack/react	StackBlitz
webpack/nextjs	StackBlitz
webpack/vue	StackBlitz
webpack/nuxt	StackBlitz

Thanks

• react-dev-inspector
• vite-plugin-vue-inspector
• launch-editor