[7.x] [Docs] Adds docs on how to run Kibana with the APM agent locally (

#84700) (#85200)

Co-authored-by: Vignesh Shanmugam <vignesh.shanmugam22@gmail.com>

Co-authored-by: Vignesh Shanmugam <vignesh.shanmugam22@gmail.com>

docs/developer/getting-started/debugging.asciidoc

@@ -15,7 +15,17 @@ For information about how to debug unit tests, refer to <<debugging-unit-tests>>
 https://github.com/elastic/apm-agent-nodejs[Elastic APM Node.js Agent]
 built-in for debugging purposes.
 
-Its default configuration is meant to be used by core {kib} developers
+With an application as varied and complex as Kibana has become, it's not practical or scalable to craft all possible performance measurements by hand ahead of time. As such, we need to rely on tooling to help us catch things we may otherwise have missed.
+
+For example, say you implement a brand new feature, plugin or service but don't quite know how it will impact Kibana's performance as a whole. APM allows us to not only spot that something is slow, but also hints at why it might be performing slowly. For example, if a function is slow on specific types of inputs, we can see where the time is spent by viewing the trace for that function call in the APM UI.
+
+image::images/apm_example_trace.png[]
+
+The net of metrics captured by APM are both a wide and deep because the entire application is instrumented at runtime and we simply take a sample of these metrics. This means that we don't have to know what we need to measure ahead of time, we'll instead just get (most) of the data we're likely going to need by default.
+
+This type of data can help us identify unknown bottlenecks, spot when a performance regression may have been introduced, and inform how the performance of Kibana is changing between releases. Using APM allows us to be proactive in getting ahead of potential performance regressions before they are released.
+
+The default APM configuration is meant to be used by core {kib} developers
 only, but it can easily be re-configured to your needs. In its default
 configuration it’s disabled and will, once enabled, send APM data to a
 centrally managed {es} cluster accessible only to Elastic
@@ -27,11 +37,8 @@ APM config option. To activate the APM agent, use the
 https://www.elastic.co/guide/en/apm/agent/nodejs/current/configuration.html#active[`active`]
 APM config option.
 
-All config options can be set either via environment variables, or by
-creating an appropriate config file under `config/apm.dev.js`. For
-more information about configuring the APM agent, please refer to
-https://www.elastic.co/guide/en/apm/agent/nodejs/current/configuring-the-agent.html[the
-documentation].
+All config options can be set by
+creating an appropriate config file under `config/apm.dev.js`. 
 
 Example `config/apm.dev.js` file:
 
@@ -56,4 +63,70 @@ ELASTIC_APM_ACTIVE=true yarn start
 Once the agent is active, it will trace all incoming HTTP requests to
 {kib}, monitor for errors, and collect process-level metrics. The
 collected data will be sent to the APM Server and is viewable in the APM
-UI in {kib}.
+UI in {kib}.
+
+[discrete]
+=== Running Kibana with the APM Agent Locally
+
+The easiest and recommended way of running Kibana with the APM agent locally is to use the solution provided by the https://github.com/elastic/apm-integration-testing[apm-integration-testing] repo. You’ll need https://www.docker.com/community-edition[Docker] and https://docs.docker.com/compose/install/[Docker Compose] to use the tool.
+
+[discrete]
+==== Quick start guide
+
+. Clone the https://github.com/elastic/apm-integration-testing[elastic/apm-integration-testing] repo.
+. Change into the apm-integration-testing repo: 
++
+[source,bash]
+----
+cd apm-integration-testing
+----
+
+. Run {es} and the APM servers without running Kibana:
++
+[source,bash]
+----
+./scripts/compose.py start master --no-kibana
+----
+
+. Change into the {kib} repo:
++
+[source,bash]
+----
+cd ../kibana
+----
+
+. Change the elasticsearch credentials in your `kibana.yml` configuration file to match those needed by elasticsearch and the APM server (see the apm-integration-testing repo's https://github.com/elastic/apm-integration-testing#logging-in[README] for users provided to test different scenarios).
+. Make sure that the APM agent is active and points to the local APM server by adding the following configuration settings to to a config file under `config/apm.dev.js`:
++
+Example `config/apm.dev.js` file:
++
+[source,js]
+----
+module.exports = {
+  active: true,
+  serverUrl: 'http://127.0.0.1:8200', // supports `http://localhost:8200`
+  centralConfig: false,
+  breakdownMetrics: false,
+  transactionSampleRate: 0.1,
+  metricsInterval: '120s'
+};
+----
+
+. Start Kibana with APM active using: 
++
+[source,bash]
+----
+yarn start
+----
+
+. After Kibana starts up, navigate to the APM app, where you should see some transactions.
+
+image::images/apm_ui_transactions.png[]
+
+You can now continue doing what you want to in Kibana (e.g. install sample data sets, issue queries in dashboards, build new visualizations etc).
+Once you're finished, you can stop Kibana normally, then stop the {es} and APM servers in the apm-integration-testing clone with the following script:
+
+[source,bash]
+----
+./scripts/compose.py stop
+----