Skip to content

Commit 80c5105

Browse files
marcjmarcj
committed
feat(devtool): new chrome devtool to debug rpc connections
1 parent 9ffd941 commit 80c5105

26 files changed

+1713
-0
lines changed

‎packages/devtool/.gitignore‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
# See http://help.github.com/ignore-files/ for more about ignoring files.
2+
3+
# Compiled output
4+
dist/app
5+
!dist/manifest.json
6+
!dist/content.js
7+
!dist/inject.js
8+
!dist/devtools.js
9+
!dist/devtools.html
10+

‎packages/devtool/README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
# Deepkit Chrome Devtool

‎packages/devtool/angular.json‎

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
{
2+
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
3+
"version": 1,
4+
"newProjectRoot": "projects",
5+
"projects": {
6+
"api-console-gui": {
7+
"projectType": "application",
8+
"schematics": {
9+
"@schematics/angular:component": {
10+
"style": "scss"
11+
}
12+
},
13+
"root": "",
14+
"sourceRoot": "src",
15+
"prefix": "app",
16+
"architect": {
17+
"build": {
18+
"builder": "@angular-devkit/build-angular:application",
19+
"options": {
20+
"outputPath": "dist/app",
21+
"index": "src/index.html",
22+
"browser": "src/main.ts",
23+
"preserveSymlinks": true,
24+
"polyfills": [
25+
],
26+
"tsConfig": "tsconfig.app.json",
27+
"inlineStyleLanguage": "scss",
28+
"assets": [
29+
"src/favicon.ico",
30+
"src/assets"
31+
],
32+
"styles": [
33+
"@deepkit/desktop-ui/src/scss/all.scss",
34+
"@deepkit/desktop-ui/src/scss/icon.scss",
35+
"@deepkit/ui-library/src/styles/style-code.scss",
36+
"src/styles.scss"
37+
],
38+
"scripts": []
39+
},
40+
"configurations": {
41+
"production": {
42+
"outputHashing": "all",
43+
"optimization": {
44+
"styles": {
45+
"minify": true,
46+
"inlineCritical": false
47+
}
48+
}
49+
},
50+
"development": {
51+
"buildOptimizer": false,
52+
"optimization": false,
53+
"vendorChunk": true,
54+
"extractLicenses": false,
55+
"sourceMap": true,
56+
"namedChunks": true
57+
}
58+
},
59+
"defaultConfiguration": "production"
60+
},
61+
"serve": {
62+
"builder": "@angular-devkit/build-angular:dev-server",
63+
"configurations": {
64+
"production": {
65+
"buildTarget": "app:build:production"
66+
},
67+
"development": {
68+
"buildTarget": "app:build:development"
69+
}
70+
},
71+
"defaultConfiguration": "development"
72+
},
73+
"extract-i18n": {
74+
"builder": "@angular-devkit/build-angular:extract-i18n",
75+
"options": {
76+
"buildTarget": "app:build"
77+
}
78+
},
79+
"test": {
80+
"builder": "@angular-devkit/build-angular:karma",
81+
"options": {
82+
"polyfills": [
83+
"zone.js",
84+
"zone.js/testing"
85+
],
86+
"tsConfig": "tsconfig.spec.json",
87+
"inlineStyleLanguage": "scss",
88+
"assets": [
89+
"src/favicon.ico",
90+
"src/assets"
91+
],
92+
"styles": [
93+
"src/styles.scss"
94+
],
95+
"scripts": []
96+
}
97+
}
98+
}
99+
}
100+
},
101+
"cli": {
102+
"analytics": "3aa0b572-3d14-4946-b6c9-04eafb95c2cf"
103+
}
104+
}

‎packages/devtool/dist/content.js‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
const script = document.createElement('script');
2+
script.src = chrome.runtime.getURL('inject.js');
3+
script.onload = () => script.remove();
4+
(document.head || document.documentElement).appendChild(script);
5+
6+
const messages = [];
7+
const ports = [];
8+
9+
window.addEventListener('@deepkit', (event) => {
10+
messages.push(event.detail);
11+
12+
for (const port of ports) {
13+
port.port.postMessage(event.detail);
14+
}
15+
16+
if (messages.length > 2000) {
17+
messages.splice(0, 1000);
18+
}
19+
});
20+
21+
chrome.runtime.onConnect.addListener((port) => {
22+
console.log('Connected to Deepkit devtools', port);
23+
24+
function onMessage(message) {
25+
if (message.type === 'start') {
26+
messages.forEach((message) => {
27+
port.postMessage(message);
28+
});
29+
}
30+
}
31+
port.onMessage.addListener(onMessage);
32+
const entry = {
33+
port,
34+
onMessage,
35+
}
36+
ports.push(entry);
37+
38+
port.onDisconnect.addListener(() => {
39+
window.removeEventListener('@deepkit', receive);
40+
port.onMessage.removeListener(onMessage);
41+
ports.splice(ports.indexOf(entry), 1);
42+
});
43+
});

‎packages/devtool/dist/devtools.html‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<script src="devtools.js"></script>
5+
</head>
6+
</html>

‎packages/devtool/dist/devtools.js‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
const tabId = chrome.devtools.inspectedWindow.tabId;
2+
3+
chrome.runtime.onConnect.addListener(port => {
4+
if (+port.name !== tabId) return;
5+
6+
let portTab = chrome.tabs.connect(tabId, { name: 'dev' });
7+
port.onMessage.addListener(msg => {
8+
portTab.postMessage(msg);
9+
});
10+
11+
portTab.onMessage.addListener(msg => {
12+
port.postMessage(msg);
13+
});
14+
15+
portTab.onDisconnect.addListener(() => {
16+
port.disconnect();
17+
});
18+
});
19+
20+
chrome.devtools.panels.create(
21+
"Deepkit RPC",
22+
"",
23+
"app/browser/index.html",
24+
function(panel) {
25+
}
26+
);

‎packages/devtool/dist/inject.js‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
(function() {
2+
let socketIds = 0;
3+
4+
function arrayBufferToBase64(buffer) {
5+
let binary = '';
6+
const bytes = new Uint8Array(buffer);
7+
for (let i = 0; i < bytes.byteLength; i++) {
8+
binary += String.fromCharCode(bytes[i]);
9+
}
10+
return btoa(binary);
11+
}
12+
13+
14+
function pushMessage(message) {
15+
window.dispatchEvent(new CustomEvent('@deepkit', { detail: message }));
16+
}
17+
18+
const OriginalWebSocket = window.WebSocket;
19+
window.WebSocket = class WebSocket extends OriginalWebSocket {
20+
constructor(url, protocols) {
21+
super(url, protocols);
22+
const socket = socketIds++;
23+
24+
this.addEventListener('message', (event) => {
25+
if (event.data instanceof ArrayBuffer || event.data instanceof Uint8Array) {
26+
pushMessage({ type: 'received', socket, timestamp: Date.now(), data: arrayBufferToBase64(event.data) });
27+
}
28+
});
29+
30+
this.addEventListener('close', () => {
31+
pushMessage({ type: 'close', socket, timestamp: Date.now() });
32+
});
33+
34+
const originalSend = this.send;
35+
this.send = function(data) {
36+
if (data instanceof ArrayBuffer || data instanceof Uint8Array) {
37+
pushMessage({ type: 'sent', socket, timestamp: Date.now(), data: arrayBufferToBase64(data) });
38+
}
39+
return originalSend.apply(this, arguments);
40+
};
41+
42+
pushMessage({ type: 'client', socket, url, timestamp: Date.now() });
43+
}
44+
};
45+
})();

‎packages/devtool/dist/manifest.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"manifest_version": 3,
3+
"name": "Deepkit Devtool",
4+
"version": "1.2",
5+
"description": "Deepkit Chrome Devtools",
6+
"permissions": [
7+
"scripting",
8+
"storage"
9+
],
10+
"host_permissions": [
11+
"<all_urls>"
12+
],
13+
"devtools_page": "devtools.html",
14+
"web_accessible_resources": [
15+
{
16+
"resources": [
17+
"inject.js",
18+
"app/browser/*.css",
19+
"app/browser/*.js"
20+
],
21+
"matches": [
22+
"<all_urls>"
23+
]
24+
}
25+
],
26+
"content_scripts": [
27+
{
28+
"matches": [
29+
"<all_urls>"
30+
],
31+
"js": [
32+
"content.js"
33+
],
34+
"run_at": "document_start"
35+
}
36+
]
37+
}

‎packages/devtool/package.json‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
{
2+
"name": "@deepkit/devtool",
3+
"version": "1.0.2",
4+
"description": "Deepkit chrome devtool",
5+
"scripts": {
6+
"ng": "ng",
7+
"start": "NODE_OPTIONS=--preserve-symlinks ng serve",
8+
"build": "rm -rf .angular && NODE_OPTIONS=--preserve-symlinks ng build --configuration production",
9+
"build:dev": "NODE_OPTIONS=--preserve-symlinks ng build",
10+
"watch": "NODE_OPTIONS=--preserve-symlinks ng build --watch",
11+
"test": "NODE_OPTIONS=--preserve-symlinks ng test",
12+
"lint": "NODE_OPTIONS=--preserve-symlinks ng lint",
13+
"e2e": "NODE_OPTIONS=--preserve-symlinks ng e2e"
14+
},
15+
"repository": "https://github.com/deepkit/deepkit-framework",
16+
"author": "Marc J. Schmidt <[email protected]>",
17+
"license": "MIT",
18+
"private": true,
19+
"files": [
20+
"dist"
21+
],
22+
"devDependencies": {
23+
"@angular-devkit/build-angular": "^19.1.6",
24+
"@angular/animations": "^19.1.5",
25+
"@angular/cdk": "^19.1.3",
26+
"@angular/cli": "^19.1.6",
27+
"@angular/common": "^19.1.5",
28+
"@angular/compiler": "^19.1.5",
29+
"@angular/compiler-cli": "^19.1.5",
30+
"@angular/core": "^19.1.5",
31+
"@angular/forms": "19.1.5",
32+
"@angular/platform-browser": "^19.1.5",
33+
"@angular/platform-browser-dynamic": "^19.1.5",
34+
"@angular/router": "^19.1.5",
35+
"@deepkit/bson": "^1.0.2",
36+
"@deepkit/core": "^1.0.1",
37+
"@deepkit/core-rxjs": "^1.0.1",
38+
"@deepkit/desktop-ui": "^1.0.2",
39+
"@deepkit/event": "^1.0.2",
40+
"@deepkit/injector": "^1.0.2",
41+
"@deepkit/logger": "^1.0.2",
42+
"@deepkit/rpc": "^1.0.2",
43+
"@deepkit/stopwatch": "^1.0.2",
44+
"@deepkit/type": "^1.0.2",
45+
"@deepkit/type-compiler": "^1.0.2",
46+
"@deepkit/ui-library": "^1.0.1-alpha.56",
47+
"@types/jasmine": "~4.3.0",
48+
"@types/marked": "^4.0.3",
49+
"hammerjs": "^2.0.8",
50+
"jasmine-core": "~4.5.0",
51+
"karma": "~6.4.0",
52+
"karma-chrome-launcher": "~3.1.0",
53+
"karma-coverage": "~2.2.0",
54+
"karma-jasmine": "~5.1.0",
55+
"karma-jasmine-html-reporter": "~2.0.0",
56+
"object-inspect": "^1.11.0",
57+
"prismjs": "^1.24.1",
58+
"rxjs": "*",
59+
"tslib": "^2.3.0",
60+
"typescript": "~5.7.3"
61+
}
62+
}

‎packages/devtool/src/app/app.component.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
2+
3+
:host ::ng-deep dui-window-content.no-padding > .content {
4+
padding: 0 !important;
5+
}
6+
7+
.top-right {
8+
display: flex;
9+
align-items: center;
10+
position: absolute;
11+
right: 15px;
12+
top: -3px;
13+
14+
a, a:link {
15+
font-size: 10px;
16+
color: var(--color-text);
17+
text-decoration: none;
18+
display: inline-block;
19+
padding: 3px 5px;
20+
margin-right: 5px;
21+
border-radius: 3px;
22+
23+
}
24+
}
25+
26+
:host-context(.dui-theme-light) .top-right a:hover {
27+
background-color: #aaa;
28+
}
29+
30+
:host-context(.dui-theme-dark) .top-right a:hover {
31+
background-color: #111;
32+
}

0 commit comments

Comments
 (0)