vue devtools integrated in chromium devtools

This commit is contained in:
Fabio Di Stasio 2022-04-28 10:34:44 +02:00
parent 1174bab0cc
commit 9f0ec5e0ce
7 changed files with 64 additions and 8 deletions

2
.gitignore vendored
View File

@ -1,6 +1,8 @@
.DS_Store .DS_Store
dist dist
build build
misc/*
!misc/.gitkeep
node_modules node_modules
thumbs.db thumbs.db
NOTES.md NOTES.md

2
.vscode/launch.json vendored
View File

@ -28,7 +28,7 @@
"sourceMaps": true, "sourceMaps": true,
"type": "node", "type": "node",
"timeout": 1000000 "timeout": 1000000
}, }
], ],
"compounds": [ "compounds": [
{ {

0
misc/.gitkeep Normal file
View File

View File

@ -8,7 +8,6 @@
"scripts": { "scripts": {
"debug": "npm run rebuild:electron && npm run debug-runner", "debug": "npm run rebuild:electron && npm run debug-runner",
"debug-runner": "node scripts/devRunner.js --remote-debug", "debug-runner": "node scripts/devRunner.js --remote-debug",
"devtools": "npx vue-devtools",
"compile": "npm run compile:main && npm run compile:workers && npm run compile:renderer", "compile": "npm run compile:main && npm run compile:workers && npm run compile:renderer",
"compile:main": "webpack --mode=production --config webpack.main.config.js", "compile:main": "webpack --mode=production --config webpack.main.config.js",
"compile:workers": "webpack --mode=production --config webpack.workers.config.js", "compile:workers": "webpack --mode=production --config webpack.workers.config.js",
@ -19,7 +18,8 @@
"rebuild:electron": "rimraf ./dist && npm run postinstall", "rebuild:electron": "rimraf ./dist && npm run postinstall",
"release": "standard-version", "release": "standard-version",
"release:pre": "npm run release -- --prerelease alpha", "release:pre": "npm run release -- --prerelease alpha",
"postinstall": "electron-builder install-app-deps", "devtools:install": "node scripts/devtoolsInstaller",
"postinstall": "electron-builder install-app-deps && npm run devtools:install",
"test": "npm run compile && npm run test:dry", "test": "npm run compile && npm run test:dry",
"test:dry": "xvfb-maybe -- playwright test", "test:dry": "xvfb-maybe -- playwright test",
"lint": "eslint . --ext .js,.vue && stylelint \"./src/**/*.{css,scss,sass,vue}\"", "lint": "eslint . --ext .js,.vue && stylelint \"./src/**/*.{css,scss,sass,vue}\"",
@ -29,6 +29,9 @@
}, },
"author": "Fabio Di Stasio <fabio286@gmail.com>", "author": "Fabio Di Stasio <fabio286@gmail.com>",
"main": "./dist/main.js", "main": "./dist/main.js",
"antares": {
"devtoolsId": "nhdogjmejiglipccpnnnanhbledajbpd"
},
"build": { "build": {
"appId": "com.fabio286.antares", "appId": "com.fabio286.antares",
"artifactName": "${productName}-${version}-${os}_${arch}.${ext}", "artifactName": "${productName}-${version}-${os}_${arch}.${ext}",
@ -148,7 +151,6 @@
"@typescript-eslint/eslint-plugin": "^5.18.0", "@typescript-eslint/eslint-plugin": "^5.18.0",
"@typescript-eslint/parser": "^5.18.0", "@typescript-eslint/parser": "^5.18.0",
"@vue/compiler-sfc": "^3.2.33", "@vue/compiler-sfc": "^3.2.33",
"@vue/devtools": "^6.1.4",
"all-contributors-cli": "^6.20.0", "all-contributors-cli": "^6.20.0",
"babel-loader": "^8.2.3", "babel-loader": "^8.2.3",
"chalk": "^4.1.2", "chalk": "^4.1.2",
@ -180,6 +182,7 @@
"tree-kill": "^1.2.2", "tree-kill": "^1.2.2",
"ts-loader": "^9.2.8", "ts-loader": "^9.2.8",
"typescript": "^4.6.3", "typescript": "^4.6.3",
"unzip-crx-3": "^0.2.0",
"vue-eslint-parser": "^8.3.0", "vue-eslint-parser": "^8.3.0",
"vue-loader": "^16.8.3", "vue-loader": "^16.8.3",
"webpack": "^5.60.0", "webpack": "^5.60.0",

View File

@ -0,0 +1,47 @@
// @ts-check
const fs = require('fs');
const path = require('path');
const https = require('https');
const unzip = require('unzip-crx-3');
const { antares } = require('../package.json');
const extensionID = antares.devtoolsId;
const destFolder = path.resolve(__dirname, `../misc/${extensionID}`);
const filePath = path.resolve(__dirname, `${destFolder}${extensionID}.crx`);
const fileUrl = `https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3D${extensionID}%26uc&prodversion=32`;
const fileStream = fs.createWriteStream(filePath);
const downloadFile = url => {
return new Promise((resolve, reject) => {
const request = https.get(url);
request.on('response', response => {
if (response.statusCode && response.statusCode >= 300 && response.statusCode < 400 && response.headers.location) {
return downloadFile(response.headers.location)
.then(resolve)
.catch(reject);
}
response.pipe(fileStream);
response.on('close', () => {
console.log('Devtools download completed!');
resolve();
});
response.on('error', reject);
});
request.on('error', reject);
request.end();
});
};
(async () => {
try {
await downloadFile(fileUrl);
await unzip(filePath, destFolder);
fs.unlinkSync(filePath);
}
catch (error) {
console.log(error);
}
})();

View File

@ -106,6 +106,14 @@ else {
mainWindow.webContents.send('unhandled-exception', error); mainWindow.webContents.send('unhandled-exception', error);
}); });
}); });
app.on('browser-window-created', (event, window) => {
if (isDevelopment) {
const { antares } = require('../../package.json');
const extensionPath = path.resolve(__dirname, `../../misc/${antares.devtoolsId}`);
window.webContents.session.loadExtension(extensionPath, { allowFileAccess: true }).catch(console.error);
}
});
} }
function createAppMenu () { function createAppMenu () {

View File

@ -1,6 +1,5 @@
'use strict'; 'use strict';
import devtools from '@vue/devtools';
import { createApp, configureCompat } from 'vue'; import { createApp, configureCompat } from 'vue';
import '@mdi/font/css/materialdesignicons.css'; import '@mdi/font/css/materialdesignicons.css';
import 'leaflet/dist/leaflet.css'; import 'leaflet/dist/leaflet.css';
@ -23,6 +22,3 @@ createApp(App)
.use(pinia) .use(pinia)
.use(i18n) .use(i18n)
.mount('#app'); .mount('#app');
if (process.env.NODE_ENV === 'development')
devtools.connect();