kibana/dev_docs/tutorials/debugging.mdx
Kibana Machine a01e0d097f
[9.0] [Dev Docs] Add VS Code configurations to Dev Docs Debugging Tutorial (#212807) (#213415)
# Backport

This will backport the following commits from `main` to `9.0`:
- [[Dev Docs] Add VS Code configurations to Dev Docs Debugging Tutorial
(#212807)](https://github.com/elastic/kibana/pull/212807)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Nick
Peihl","email":"nick.peihl@elastic.co"},"sourceCommit":{"committedDate":"2025-03-06T15:14:19Z","message":"[Dev
Docs] Add VS Code configurations to Dev Docs Debugging Tutorial
(#212807)\n\n## Summary\n\nAdds to the Dev Docs Debugging tutorial
suggested configurations for VS\nCode users for debugging Kibana server
code, Jest unit tests, and\nfunctional tests.\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[x] The PR description includes the appropriate Release Notes
section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"d2412a5f98f341cf59e02e7340d718493d0492e7","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Team:Docs","release_note:skip","DevDocs","backport:prev-minor","v9.1.0"],"title":"[Dev
Docs] Add VS Code configurations to Dev Docs Debugging
Tutorial","number":212807,"url":"https://github.com/elastic/kibana/pull/212807","mergeCommit":{"message":"[Dev
Docs] Add VS Code configurations to Dev Docs Debugging Tutorial
(#212807)\n\n## Summary\n\nAdds to the Dev Docs Debugging tutorial
suggested configurations for VS\nCode users for debugging Kibana server
code, Jest unit tests, and\nfunctional tests.\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[x] The PR description includes the appropriate Release Notes
section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"d2412a5f98f341cf59e02e7340d718493d0492e7"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/212807","number":212807,"mergeCommit":{"message":"[Dev
Docs] Add VS Code configurations to Dev Docs Debugging Tutorial
(#212807)\n\n## Summary\n\nAdds to the Dev Docs Debugging tutorial
suggested configurations for VS\nCode users for debugging Kibana server
code, Jest unit tests, and\nfunctional tests.\n\n\n###
Checklist\n\nCheck the PR satisfies following conditions. \n\nReviewers
should verify this PR satisfies this list as well.\n\n- [x] Any text
added follows [EUI's
writing\nguidelines](https://elastic.github.io/eui/#/guidelines/writing),
uses\nsentence case text and includes
[i18n\nsupport](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)\n-
[x] The PR description includes the appropriate Release Notes
section,\nand the correct `release_note:*` label is applied per
the\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"d2412a5f98f341cf59e02e7340d718493d0492e7"}},{"url":"https://github.com/elastic/kibana/pull/213410","number":213410,"branch":"8.16","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/213411","number":213411,"branch":"8.17","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/213412","number":213412,"branch":"8.18","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/213413","number":213413,"branch":"8.x","state":"OPEN"}]}]
BACKPORT-->

Co-authored-by: Nick Peihl <nick.peihl@elastic.co>
2025-03-06 18:20:39 +01:00

330 lines
11 KiB
Text

---
id: kibDevTutorialDebugging
slug: /kibana-dev-docs/tutorials/debugging
title: Debugging in development
description: Learn how to debug Kibana while running from source
date: 2025-02-28
tags: ['kibana', 'onboarding', 'dev', 'tutorials', 'debugging']
---
There are multiple ways to go about debugging Kibana when running from source.
## Debugging using Chrome DevTools
You will need to run Node using `--inspect` or `--inspect-brk` in order to enable the inspector. Additional information can be found in the [Node.js docs](https://nodejs.org/en/docs/guides/debugging-getting-started/).
Once Node is running with the inspector enabled, you can open `chrome://inspect` in your Chrome browser. You should see a remote target for the inspector running. Click "inspect". You can now begin using the debugger.
Next we will go over how to exactly enable the inspector for different aspects of the codebase.
### Jest Unit Tests
You will need to run Jest directly from the Node script:
`node --inspect-brk node_modules/.bin/jest --runInBand --config [JestConfig] [TestPathPattern]`
Additional information can be found in the [Jest troubleshooting documentation](https://jestjs.io/docs/troubleshooting).
### Functional Test Runner
`node --inspect-brk scripts/functional_test_runner`
### Development Server
`node --inspect-brk scripts/kibana`
## Debugging using VS Code
See [Debug code with Visual Studio Code](https://code.visualstudio.com/docs/editor/debugging) and [Node.js debugging in VS Code](https://code.visualstudio.com/docs/nodejs/nodejs-debugging) for more information.
### Kibana Server
There are two options for debugging server code in Kibana: Attach to process or Launch Kibana from VS Code.
#### Attach to process
1. Create or modify your `.vscode/launch.json` file with the following configuration. See the [Visual Studio Code debug configuration documentation](https://code.visualstudio.com/docs/editor/debugging-configuration) for more information.
```json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "attach",
"name": "kibana-9229",
"port": 9229,
"presentation": {
"hidden": true,
"group": "Kibana Debug",
"order": 1
},
"skipFiles": ["<node_internals>/**", "**/node_modules/**"]
},
{
"type": "node",
"request": "attach",
"name": "kibana-9230",
"port": 9230,
"presentation": {
"hidden": true,
"group": "Kibana Debug",
"order": 1
},
"skipFiles": ["<node_internals>/**", "**/node_modules/**"]
},
{
"type": "node",
"request": "attach",
"name": "kibana-9231",
"port": 9231,
"presentation": {
"hidden": true,
"group": "Kibana Debug",
"order": 1
},
"skipFiles": ["<node_internals>/**", "**/node_modules/**"]
}
],
"compounds": [
{
"name": "Debug Kibana Server",
"description": "Attaches to Kibana server in debug mode. Requires first starting Kibana with `yarn debug`",
"configurations": ["kibana-9229", "kibana-9230", "kibana-9231"],
"restart": true,
"presentation": {
"hidden": false,
"group": "Kibana Debug",
"order": 1
},
"stopAll": true
}
]
}
```
2. Start Elasticsearch with `yarn es snapshot`.
3. Start Kibana with `yarn debug` or `node --inspect scripts/kibana --dev`.
4. In VS Code, click the "Run and debug" icon in the sidebar.
5. Select "Debug Kibana Server" from the dropdown menu.
6. Click the green play button to start debugging.
#### Launch Kibana from VS Code
1. Create or modify your `.vscode/launch.json` file with the following configuration.
```json
{
"version": "0.2.0",
"inputs": [
{
"id": "runExamples",
"type": "pickString",
"description": "Run developer examples?",
"default": "No",
"options": [
{
"label": "No",
"value": ""
},
{
"label": "Yes",
"value": "--run-examples"
}
]
}
],
"configurations": [
{
"type": "node",
"request": "launch",
"name": "Launch and Debug Kibana",
"runtimeExecutable": "node",
"runtimeArgs": [
"--nolazy",
"--inspect=127.0.0.1:9229",
"scripts/kibana",
"--dev",
"${input:runExamples}"
],
"autoAttachChildProcesses": true
}
]
}
```
2. Start Elasticsearch with `yarn es snapshot`, but don't start Kibana and kill any running instances of Kibana.
3. In VS Code, click the "Run and debug" icon in the sidebar.
4. Select "Launch and Debug Kibana" from the dropdown menu.
5. Click the green play button to start debugging. You can choose whether or not to run the developer examples.
### Jest Unit Tests
Install the [Jest extension for VS Code](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest).
If necessary, add the following to your `.vscode/settings.json` file.
```jsonc
// self managed
"jest.jestCommandLine": "yarn test:jest --runInBand"
```
See the [Jest extension for VS Code documentation](https://marketplace.visualstudio.com/items?itemName=Orta.vscode-jest) for information on how to run and debug your unit tests.
### Functional Test Runner
1. Create or modify your `.vscode/launch.json` file with the following configuration
```json
{
"version": "0.2.0",
"inputs": [
{
"id": "grep",
"type": "promptString",
"description": "Grep pattern to filter tests"
},
{
"id": "ftConfig",
"type": "promptString",
"description": "Path to the functional tests config file"
},
{
"id": "ftHeadless",
"type": "pickString",
"description": "Run functional tests in headless mode?",
"options": [
{
"label": "No - tests run in Chrome",
"value": "0"
},
{
"label": "Yes - tests run in headless mode",
"value": "1"
}
]
}
],
"configurations": [
{
"type": "node",
"request": "launch",
"name": "FT Server",
"program": "${workspaceFolder}/scripts/functional_tests_server",
"internalConsoleOptions": "openOnFirstSessionStart",
"outputCapture": "std",
"presentation": {
"hidden": false,
"group": "Functional tests",
"order": 0
},
"args": ["--config", "${input:ftConfig}", "--debug"],
"skipFiles": ["<node_internals>/**", "**/node_modules/**"]
},
{
"type": "node",
"request": "launch",
"name": "FT Runner",
"env": {
"TEST_BROWSER_HEADLESS": "${input:ftHeadless}"
},
"program": "${workspaceFolder}/scripts/functional_test_runner",
"internalConsoleOptions": "openOnSessionStart",
"outputCapture": "std",
"presentation": {
"hidden": false,
"group": "Functional tests",
"order": 1
},
"args": ["--config", "${input:ftConfig}", "--grep", "${input:grep}", "--verbose"],
"skipFiles": ["<node_internals>/**", "**/node_modules/**"]
}
]
}
```
2. Click the "Run and debug" icon in the sidebar.
3. Select "FT Server" from the dropdown menu and click the green play button to start the functional test server.
4. When prompted, enter the relative path to your functional test config file.
5. Monitor the "DEBUG CONSOLE" tab until the functional test server is ready.
6. Select "FT Runner" from the dropdown menu and click the green play button to start the functional test runner.
7. When prompted, choose to run your tests in headless mode or in a Chrome browser.
8. The path to the functional tests config file should be the same as in step 4.
9. When prompted, optionally enter a grep pattern to filter tests. Leave blank to run all tests.
## Debugging using logging
When running Kibana, it's sometimes helpful to enable verbose logging.
`yarn start --verbose`
Using verbose logging usually results in much more information than you're interested in. The [logging documentation](https://www.elastic.co/guide/en/kibana/current/logging-settings.html) covers ways to change the log level of certain types.
In the following example of a configuration stored in `config/kibana.dev.yml` we are logging all Elasticsearch queries and any logs created by the Management plugin.
```
logging:
appenders:
console:
type: console
layout:
type: pattern
highlight: true
root:
appenders: [default, console]
level: info
loggers:
- name: plugins.management
level: debug
- name: elasticsearch.query
level: debug
```
## Debugging Kibana with APM
Kibana is integrated with APM's node and RUM agents.
To learn more about how APM works and what it reports, refer to the [documentation](https://www.elastic.co/guide/en/apm/guide/current/index.html).
We currently track the following types of transactions from Kibana:
Frontend (APM RUM):
- `http-request`- tracks all outgoing API requests
- `page-load` - tracks the inidial loading time of kibana
- `app-change` - tracks application changes
Backend (APM Node):
- `request` - tracks all incoming API requests
- `kibana-platform` - tracks server initiation phases (preboot, setup and start)
- `task-manager` - tracks the operation of the task manager, including claiming pending tasks and marking them as running
- `task-run` - tracks the execution of individual tasks
### Enabling APM on a local environment
In some cases, it is beneficial to enable APM on a local development environment to get an initial undesrtanding of a feature's performance during manual or automatic tests.
1. Create a secondary monitoring deployment to collect APM data. The easiest option is to use [Elastic Cloud](https://cloud.elastic.co/deployments) to create a new deployment.
2. Open the Kibana from the monitoring deployment (_not_ your local Kibana), go to `Integrations` and enable the Elastic APM integration.
3. Scroll down and copy the server URL and secret token. You may also find them in your cloud console under APM & Fleet.
4. Create or open `config\kibana.dev.yml` on your local development environment.
5. Add the following settings:
```
elastic.apm.active: true
elastic.apm.serverUrl: <serverUrl>
elastic.apm.secretToken: <secretToken>
```
6. Once you run kibana and start using it, two new services (kibana, kibana-frontend) should appear under the APM UI on the APM deployment.
![APM UI](./apm_ui.png)
### Enabling APM via environment variables
It is possible to enable APM via environment variables as well.
They take precedence over any values defined in `kibana.yml` or `kibana.dev.yml`
Set the following environment variables to enable APM:
- ELASTIC_APM_ACTIVE
- ELASTIC_APM_SERVER_URL
- ELASTIC_APM_SECRET_TOKEN or ELASTIC_APM_API_KEY