https://github.com/varharrie/vue-inspector-plugin

A webpack plugin implements automatically open corresponding file in vscode when click element in browser.
https://github.com/varharrie/vue-inspector-plugin

Last synced: about 1 month ago
JSON representation

A webpack plugin implements automatically open corresponding file in vscode when click element in browser.

• Host: GitHub
• URL: https://github.com/varharrie/vue-inspector-plugin
• Owner: varHarrie
• License: mit
• Created: 2022-10-22T02:26:24.000Z (about 2 years ago)
• Default Branch: main
• Last Pushed: 2024-03-05T08:37:01.000Z (9 months ago)
• Last Synced: 2024-10-15T16:05:44.215Z (about 1 month ago)
• Language: TypeScript
• Size: 3.04 MB
• Stars: 2
• Watchers: 2
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# vue-inspector-plugin

A plugin implements automatically open corresponding file in vscode when click element in browser.

## Compatibility

|           | vue 2 | vue 3 |

| --------- | ----- | ----- |

| vite      | ✅    | ✅    |

| webpack 4 | ✅    | ✅    |

| webpack 5 | ✅    | ✅    |

## Installation

```bash

npm install --save-dev vue-inspector-plugin

```

## Usage

- Vite

```js

// vite.config.js

import { defineConfig } from 'vite';

import VueInspector from 'vue-inspector-plugin/vite';

import Vue from '@vitejs/plugin-vue';

export default defineConfig({

  plugins: [Vue(), VueInspector()],

});

```

- Webpack

```js

// vue.config.js

const VueInspector = require('vue-inspector-plugin/webpack').default;

module.exports = {

  chainWebpack(config) {

    config.plugin('VueInspector').use(VueInspector());

  },

};

```

## Options

- rootDir: The directory where `src` resides, defaults to `process.cwd()`.

- modifierKey: The modifier key that should be pressed at the same time when clicking, defaults to `ctrl`.

## Snapshot

![snapshot](./assets/snapshot.gif)