{
  "id": "guide/test-debugging",
  "title": "Debugging tests",
  "contents": "\n\n\n<div class=\"github-links\">\n  <a href=\"https://github.com/angular/angular/edit/master/aio/content/guide/test-debugging.md?message=docs%3A%20describe%20your%20change...\" aria-label=\"Suggest Edits\" title=\"Suggest Edits\"><i class=\"material-icons\" aria-hidden=\"true\" role=\"img\">mode_edit</i></a>\n</div>\n\n\n<div class=\"content\">\n  <h1 id=\"debugging-tests\">Debugging tests<a title=\"Link to this heading\" class=\"header-link\" aria-hidden=\"true\" href=\"guide/test-debugging#debugging-tests\"><i class=\"material-icons\">link</i></a></h1>\n<p>If your tests aren't working as you expect them to, you can inspect and debug them in the browser.</p>\n<div class=\"alert is-helpful\">\n<p>  For the sample app that the testing guides describe, see the <live-example name=\"testing\" embedded-style=\"\" nodownload=\"\">sample app</live-example>.</p>\n<p>  For the tests features in the testing guides, see <live-example name=\"testing\" stackblitz=\"specs\" nodownload=\"\">tests</live-example>.</p>\n</div>\n<p>Debug specs in the browser in the same way that you debug an application.</p>\n<ol>\n<li>Reveal the Karma browser window. See <a href=\"guide/testing#set-up-testing\">Set up testing</a> if you need help with this step.</li>\n<li>Click the <strong>DEBUG</strong> button; it opens a new browser tab and re-runs the tests.</li>\n<li>Open the browser's “Developer Tools” (<code>Ctrl-Shift-I</code> on Windows; <code>Command-Option-I</code> in macOS).</li>\n<li>Pick the \"sources\" section.</li>\n<li>Open the <code>1st.spec.ts</code> test file (Control/Command-P, then start typing the name of the file).</li>\n<li>Set a breakpoint in the test.</li>\n<li>Refresh the browser, and it stops at the breakpoint.</li>\n</ol>\n<div class=\"lightbox\">\n  <img src=\"generated/images/guide/testing/karma-1st-spec-debug.png\" alt=\"Karma debugging\" width=\"700\" height=\"150\">\n</div>\n\n  \n</div>\n\n<!-- links to this doc:\n - guide/testing\n-->\n<!-- links from this doc:\n - guide/test-debugging#debugging-tests\n - guide/testing#set-up-testing\n - https://github.com/angular/angular/edit/master/aio/content/guide/test-debugging.md?message=docs%3A%20describe%20your%20change...\n-->"
}