angular/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.

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 to open a new browser tab and re-run the tests.
2.  Open the browser's **Developer Tools**. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
3.  Pick the **Sources** section.
4.  Press `Control/Command-P`, and then start typing the name of your test file to open it.
5.  Set a breakpoint in the test.
6.  Refresh the browser, and notice how it stops at the breakpoint.

<div class="lightbox">

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

</div>

<!-- links -->

<!-- external links -->

<!-- end links -->

@reviewed 2022-02-28
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 18:14:34 +00:00			`# Debugging tests`

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

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

docs: improve markdown (#45325) The purpose of the changes is to clean all markdown to match a single pedantic style. * To ensure all changes in style are properly separated. * To ensure all styled content aligns to nearest 4-character-tab. * To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements. * To ensure all markdown exists outside of html tags. * To ensure all images use the Angular style for `<img>` elements. * To ensure that all smart punctuation is replaced or removed. ```text ’, ’, “, ”, –, —, … ``` * To ensure all content does not conflict with the following reserved characters. ```text @, $, , &, #, \|, <, >, ``` To ensure all content displays using html entities. The following changes were made to files in the following directory. ```text aio/content ``` The target files were markdown files. The list of excluded files: ```text .browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf, ``` PR Close #45325 2022-03-10 16:48:09 +00:00			`1. Reveal the Karma browser window.`
			`See [Set up testing](guide/testing#set-up-testing) if you need help with this step.`

docs: correct debugging task step (#46832) Also remove lint errors. Fix: #42781 PR Close #46832 2022-07-13 22:24:35 +00:00			`1. Click the DEBUG button to open a new browser tab and re-run the tests.`
			2. Open the browser's Developer Tools. On Windows, press `Ctrl-Shift-I`. On macOS, press `Command-Option-I`.
			`3. Pick the Sources section.`
			4. Press `Control/Command-P`, and then start typing the name of your test file to open it.
			`5. Set a breakpoint in the test.`
			`6. Refresh the browser, and notice how it stops at the breakpoint.`
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 18:14:34 +00:00
			`<div class="lightbox">`
docs: improve markdown (#45325) The purpose of the changes is to clean all markdown to match a single pedantic style. * To ensure all changes in style are properly separated. * To ensure all styled content aligns to nearest 4-character-tab. * To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements. * To ensure all markdown exists outside of html tags. * To ensure all images use the Angular style for `<img>` elements. * To ensure that all smart punctuation is replaced or removed. ```text ’, ’, “, ”, –, —, … ``` * To ensure all content does not conflict with the following reserved characters. ```text @, $, , &, #, \|, <, >, ``` To ensure all content displays using html entities. The following changes were made to files in the following directory. ```text aio/content ``` The target files were markdown files. The list of excluded files: ```text .browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf, ``` PR Close #45325 2022-03-10 16:48:09 +00:00
			`<img alt="Karma debugging" src="generated/images/guide/testing/karma-1st-spec-debug.png">`

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 18:14:34 +00:00			`</div>`
docs: improve markdown (#45325) The purpose of the changes is to clean all markdown to match a single pedantic style. * To ensure all changes in style are properly separated. * To ensure all styled content aligns to nearest 4-character-tab. * To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements. * To ensure all markdown exists outside of html tags. * To ensure all images use the Angular style for `<img>` elements. * To ensure that all smart punctuation is replaced or removed. ```text ’, ’, “, ”, –, —, … ``` * To ensure all content does not conflict with the following reserved characters. ```text @, $, , &, #, \|, <, >, ``` To ensure all content displays using html entities. The following changes were made to files in the following directory. ```text aio/content ``` The target files were markdown files. The list of excluded files: ```text .browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf, ``` PR Close #45325 2022-03-10 16:48:09 +00:00
			`<!-- links -->`

			`<!-- external links -->`

			`<!-- end links -->`

			`@reviewed 2022-02-28`