From e8811fa4219672b492f5dd0f509751254f051012 Mon Sep 17 00:00:00 2001 From: Anton Kosyakov Date: Tue, 3 Sep 2019 05:35:29 +0000 Subject: [PATCH 1/3] [dev] fix #6024: document how to profile Signed-off-by: Anton Kosyakov --- doc/Developing.md | 39 +++++++++++++++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) diff --git a/doc/Developing.md b/doc/Developing.md index 69e534e095e3d..3941345bdc119 100644 --- a/doc/Developing.md +++ b/doc/Developing.md @@ -34,6 +34,11 @@ For Windows instructions [click here](#building-on-windows). - [Debug the Electron example's backend](#debug-the-electron-examples-backend) - [Debug the Electron example's frontend](#debug-the-electron-examples-frontend) - [Debug IPC servers](#debug-ipc-servers) + - [**Profiling**](#profiling) + - [Profile the frontend process](#profile-the-frontend-process) + - [Profile the backend process](#profile-the-backend-process) + - [Profile IPC servers](#profile-ipc-servers) + - [Profile the plugin host](#profile-the-plugin-host) - [**Testing**](#testing) - [**Code coverage**](#code-coverage) - [**Building on Windows**](#building-on-windows) @@ -251,6 +256,40 @@ Let assume you have to work for instance in the `@theia/navigator` extension. Bu In order to look up `server-name` run the backend server with `--log-level=debug` flag to enable logging of IPC servers instantiation. You should be able to see message of `[${server-name}: ${server-PID}]: IPC started` format, like `[nsfw-watcher: 37557] IPC started`. +## Profiling + + - Use Chrome devtools to profile both the frontend and backend (Node.js). + - For Node.js: open chrome://inspect, click the configure button and ensure target host and port are listed. + - Learn how to get and understand CPU measurements: https://developers.google.com/web/tools/chrome-devtools/evaluate-performance/ + - Learn how to get and understand Memory measurements: https://developers.google.com/web/tools/chrome-devtools/memory-problems/ + - Before taking the memory snapshot always collect garbage. + - Make sure that Chrome extensions don't distort measurements by disabling them. + - For frontend: React extension is leaking components. + - Make maesurements before and after improvements to provide them as evidence on a pull request. + - Also document how to reproduce improved measurements in `How to test` section of a pull request description. + - If objects don't have a proper class, i.e. plain JSON, then find one of them in the first snapshot + and check that it is garbage collected in the diff between snapshots. + +### Profile the frontend process + + - In Browser: open the devtools. + - In Electron: Help -> Toggle Electron Developer Tools. + +### Profile the backend process + + - Pass `--inspect` arg to the backend server: https://nodejs.org/en/docs/inspector/#command-line-options. + +### Profile IPC servers + + - Pass `--${server-name}-inspect` arg to the backend server. + - For example `--nfsw-watcher-inspect=0` to inspect nfsw watcher processes with dynamic port allocation. + - All variations of `--inspect` flag are supported: https://nodejs.org/en/docs/inspector/#command-line-options. + +### Profile the plugin host + + - Pass `--hosted-plugin-inspect` arg to the backend server. + - All variations of `--inspect` flag are supported: https://nodejs.org/en/docs/inspector/#command-line-options. + ## Testing See the [testing](Testing.md) documentation. From 3997d853e0ae77a7c0e59443431181c813535121 Mon Sep 17 00:00:00 2001 From: Anton Kosyakov Date: Tue, 3 Sep 2019 06:05:50 +0000 Subject: [PATCH 2/3] [dev] fix #6081: how to debug the plugin host Signed-off-by: Anton Kosyakov --- .vscode/launch.json | 19 +++++++++++++++++-- doc/Developing.md | 10 ++++++++++ 2 files changed, 27 insertions(+), 2 deletions(-) diff --git a/.vscode/launch.json b/.vscode/launch.json index 0768794112228..6f3facdbdc819 100644 --- a/.vscode/launch.json +++ b/.vscode/launch.json @@ -58,8 +58,8 @@ "--port=3000", "--no-cluster", "--app-project-path=${workspaceRoot}/examples/browser", - "--no-app-auto-install", - "--plugins=local-dir:plugins" + "--plugins=local-dir:plugins", + "--hosted-plugin-inspect=9339" ], "env": { "NODE_ENV": "development" @@ -75,6 +75,21 @@ "internalConsoleOptions": "openOnSessionStart", "outputCapture": "std" }, + { + "type": "node", + "request": "attach", + "name": "Attach to Plugin Host", + "port": 9339, + "timeout": 60000, + "stopOnEntry": false, + "smartStep": true, + "sourceMaps": true, + "internalConsoleOptions": "openOnSessionStart", + "outFiles": [ + "${workspaceRoot}/packages/plugin-ext/lib/**/*.js", + "${workspaceRoot}/plugins/**/*.js" + ] + }, { "type": "node", "request": "launch", diff --git a/doc/Developing.md b/doc/Developing.md index 3941345bdc119..66c909a14b9fb 100644 --- a/doc/Developing.md +++ b/doc/Developing.md @@ -34,6 +34,7 @@ For Windows instructions [click here](#building-on-windows). - [Debug the Electron example's backend](#debug-the-electron-examples-backend) - [Debug the Electron example's frontend](#debug-the-electron-examples-frontend) - [Debug IPC servers](#debug-ipc-servers) + - [Debug the plugin host](#debug-the-plugin-host) - [**Profiling**](#profiling) - [Profile the frontend process](#profile-the-frontend-process) - [Profile the backend process](#profile-the-backend-process) @@ -256,6 +257,15 @@ Let assume you have to work for instance in the `@theia/navigator` extension. Bu In order to look up `server-name` run the backend server with `--log-level=debug` flag to enable logging of IPC servers instantiation. You should be able to see message of `[${server-name}: ${server-PID}]: IPC started` format, like `[nsfw-watcher: 37557] IPC started`. +### Debug the plugin host + + - Pass `--hosted-plugin-inspect=9339` arg to the backend server from the command line. + - Instead you can run `Launch Backend` launch configuration which is already preconfigured. + - Open the debug view and run the `Attach to Plugin Host` launch configuration. + - It connects to the plugin host if at least one extension is detected, otherwise it timeouts after 60s. + - If you want to debug the activation then enable `stopOnEntry` flag. + - Open the browser page. + ## Profiling - Use Chrome devtools to profile both the frontend and backend (Node.js). From 4f3640714a9e2bc65cfe15c83e9f8b0a73f59c90 Mon Sep 17 00:00:00 2001 From: Anton Kosyakov Date: Tue, 3 Sep 2019 06:08:24 +0000 Subject: [PATCH 3/3] =?UTF-8?q?[dev]=C2=A0fix=20#6079:=20remove=20referenc?= =?UTF-8?q?es=20to=20VS=20Code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Anton Kosyakov --- doc/Developing.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/doc/Developing.md b/doc/Developing.md index 66c909a14b9fb..dbd86573efa4d 100644 --- a/doc/Developing.md +++ b/doc/Developing.md @@ -225,22 +225,22 @@ Let assume you have to work for instance in the `@theia/navigator` extension. Bu ### Debug the browser example's backend - - In VS Code: start the debug tab and run the `Launch Backend` configuration. + - Open the debug view and run the `Launch Backend` configuration. ### Debug the browser example's frontend - Start the backend by using `yarn run start`. - In a browser: Open http://localhost:3000/ and use the dev tools for debugging. - - In VS Code: start the debug tab and run the `Launch Frontend` configuration. + - Open the debug view and run the `Launch Frontend` configuration. ### Debug the browser example's frontend and backend at the same time - - In VS Code: Start the debug tab and run the `Launch Backend` configuration. + - Open the debug view and run the `Launch Backend` configuration. - Then run the `Launch Frontend` configuration. ### Debug the Electron example's backend - - In VS Code: Start the debug tab and run the `Launch Electron Backend` configuration. + - Open the debug view and run the `Launch Electron Backend` configuration. ### Debug the Electron example's frontend @@ -275,7 +275,7 @@ You should be able to see message of `[${server-name}: ${server-PID}]: IPC start - Before taking the memory snapshot always collect garbage. - Make sure that Chrome extensions don't distort measurements by disabling them. - For frontend: React extension is leaking components. - - Make maesurements before and after improvements to provide them as evidence on a pull request. + - Make measurements before and after improvements to provide them as evidence on a pull request. - Also document how to reproduce improved measurements in `How to test` section of a pull request description. - If objects don't have a proper class, i.e. plain JSON, then find one of them in the first snapshot and check that it is garbage collected in the diff between snapshots.