mirror of
https://github.com/elastic/kibana.git
synced 2025-04-25 10:23:14 -04:00
# Backport This will backport the following commits from `main` to `8.x`: - [[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-major","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"}}]}] BACKPORT--> Co-authored-by: Nick Peihl <nick.peihl@elastic.co>
330 lines
11 KiB
Text
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.
|
|

|
|
|
|
### 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
|