Open Editor

English | 简体中文

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

Whether you are a React developer, a Vue developer, or a developer who uses both React and Vue, this development tool can help you. It can save you a lot of time searching for code and allow you to focus more on writing code. It can achieve the same effect in both React and Vue.

↓↓↓ Click here to open StackBlitz

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

Features

• 🌈 Support React、Nextjs、Vue、Nuxt.
• 🔥 Support Rollup、Vite、Webpack.
• 🎢 Support cross-iframe interaction.
• 🕹️ 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 OpenEditor 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(),
    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 click (shortcut key: ⌨️ 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 (shortcut key: ⌨️ enter) 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 1: ⌨️ backspace, shortcut key 2: ⌨️ 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
rollup/vue2
vite/react
vite/vue
vite/nuxt
webpack/react
webpack/nextjs
webpack/vue

Thanks

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