https://github.com/robinradic/chrome-radic-vuejs

https://github.com/robinradic/chrome-radic-vuejs

Last synced: 4 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/robinradic/chrome-radic-vuejs
• Owner: RobinRadic
• Created: 2017-10-09T05:26:52.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2021-10-06T08:35:29.000Z (over 4 years ago)
• Last Synced: 2025-08-30T14:39:38.813Z (10 months ago)
• Language: SCSS
• Size: 9.57 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
# Vue3 Element Inspector

It adds a sidebar tab in the elements inspection panel that shows the currently selected elements Vue properties.

![screenshot.png](screenshot.png) 

## Installation

	$ npm install

## Usage

Run `$ gulp --watch` and load the `dist`-directory into chrome.

## Entryfiles (bundles)

There are two kinds of entryfiles that create bundles.

1. All ts-files in the root of the `./app/scripts` directory

2. All css-,scss- and less-files in the root of the `./app/styles` directory

## Tasks

### Build

    $ gulp

| Option         | Description                                                                                                                                           |

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

| `--watch`      | Starts a livereload server and watches all assets. 
To reload the extension on change include `livereload.js` in your bundle.                      |

| `--production` | Minifies all assets                                                                                                                                   |

| `--verbose`    | Log additional data to the console.                                                                                                                   |

| `--vendor`     | Compile the extension for different vendors (chrome, firefox, opera, edge)  Default: chrome                                                                 |

| `--sourcemaps` | Force the creation of sourcemaps. Default: !production                                                                                                |

### pack

Zips your `dist` directory and saves it in the `packages` directory.

    $ gulp pack --vendor=firefox

### Version

Increments version number of `manifest.json` and `package.json`,

commits the change to git and adds a git tag.

    $ gulp patch      // => 0.0.X

or

    $ gulp feature    // => 0.X.0

or

    $ gulp release    // => X.0.0

## Globals

The build tool also defines a variable named `process.env.NODE_ENV` in your scripts. It will be set to `development` unless you use the `--production` option.

**Example:** `./app/background.ts`

```typescript

if(process.env.NODE_ENV === 'development'){

  console.log('We are in development mode!');

}

```