angular-docs-cn/aio/content/guide/test-debugging.md

# Debugging tests

If your tests aren't working as you expect them to, you can inspect and debug them in the browser.

<div class="alert is-helpful">

  For the sample app that the testing guides describe, see the <live-example name="testing" embedded-style noDownload>sample app</live-example>.

  For the tests features in the testing guides, see <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>.

</div>


Debug specs in the browser in the same way that you debug an application.

1. Reveal the Karma browser window. See [Set up testing](guide/testing#set-up-testing) if you need help with this step.
1. Click the **DEBUG** button; it opens a new browser tab and re-runs the tests.
1. Open the browser's “Developer Tools” (`Ctrl-Shift-I` on Windows; `Command-Option-I` in macOS).
1. Pick the "sources" section.
1. Open the `1st.spec.ts` test file (Control/Command-P, then start typing the name of the file).
1. Set a breakpoint in the test.
1. Refresh the browser, and it stops at the breakpoint.

<div class="lightbox">
  <img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">
</div>

<hr>
docs: break testing doc into multiple docs (#37957) This commit breaks up the testing document into nine total documents, with each document focusing on an existing section of the current testing documentation. There are no content changes. PR Close #37957 2020-06-30 14:14:34 -04:00			`# Debugging tests`

			`If your tests aren't working as you expect them to, you can inspect and debug them in the browser.`

			`<div class="alert is-helpful">`

docs: fix live examples in testing guides (#38038) In #37957, parts of the testing guide were broken out into separate guides. As part of that work, the `<live-example>` tags were also copied to the new guides. These `<live-example>` tags did not specify the targeted example project via the `name` attribute, thus they were implicitly targeting the example with the same name as the guide they were in. See the [Docs style guide][1] for more info. However, there is only one example project (`testing/`) and all `<live-example>` tags were supposed to target that. This worked fine on the `testing.md` guide, but it broke on other guides (which tried to target non-existing example projects based on their names). This commit fixes it by explicitly specifying which example is targeted by the `<live-example>` tags. It also removes the `embedded-style` attribute that has no effect. [1]: https://angular.io/guide/docs-style-guide#live-examples Fixes #38036 PR Close #38038 2020-07-14 12:17:56 +03:00			`For the sample app that the testing guides describe, see the <live-example name="testing" embedded-style noDownload>sample app</live-example>.`
docs: break testing doc into multiple docs (#37957) This commit breaks up the testing document into nine total documents, with each document focusing on an existing section of the current testing documentation. There are no content changes. PR Close #37957 2020-06-30 14:14:34 -04:00
docs: fix live examples in testing guides (#38038) In #37957, parts of the testing guide were broken out into separate guides. As part of that work, the `<live-example>` tags were also copied to the new guides. These `<live-example>` tags did not specify the targeted example project via the `name` attribute, thus they were implicitly targeting the example with the same name as the guide they were in. See the [Docs style guide][1] for more info. However, there is only one example project (`testing/`) and all `<live-example>` tags were supposed to target that. This worked fine on the `testing.md` guide, but it broke on other guides (which tried to target non-existing example projects based on their names). This commit fixes it by explicitly specifying which example is targeted by the `<live-example>` tags. It also removes the `embedded-style` attribute that has no effect. [1]: https://angular.io/guide/docs-style-guide#live-examples Fixes #38036 PR Close #38038 2020-07-14 12:17:56 +03:00			`For the tests features in the testing guides, see <live-example name="testing" stackblitz="specs" noDownload>tests</live-example>.`
docs: break testing doc into multiple docs (#37957) This commit breaks up the testing document into nine total documents, with each document focusing on an existing section of the current testing documentation. There are no content changes. PR Close #37957 2020-06-30 14:14:34 -04:00
			`</div>`


			`Debug specs in the browser in the same way that you debug an application.`

			`1. Reveal the Karma browser window. See [Set up testing](guide/testing#set-up-testing) if you need help with this step.`
			`1. Click the DEBUG button; it opens a new browser tab and re-runs the tests.`
			1. Open the browser's “Developer Tools” (`Ctrl-Shift-I` on Windows; `Command-Option-I` in macOS).
			`1. Pick the "sources" section.`
			1. Open the `1st.spec.ts` test file (Control/Command-P, then start typing the name of the file).
			`1. Set a breakpoint in the test.`
			`1. Refresh the browser, and it stops at the breakpoint.`

			`<div class="lightbox">`
			`<img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">`
			`</div>`

			`<hr>`