{"id":174,"date":"2013-08-26T02:46:32","date_gmt":"2013-08-26T02:46:32","guid":{"rendered":"http:\/\/ramandv.com\/blog\/?p=174"},"modified":"2013-08-27T00:48:00","modified_gmt":"2013-08-27T00:48:00","slug":"angularjs-karma-testacular-debug-in-browser","status":"publish","type":"post","link":"http:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/","title":{"rendered":"AngularJs-Karma (testacular) &#8211; Debug in browser"},"content":{"rendered":"\n<!-- Quick Adsense WordPress Plugin: http:\/\/quickadsense.com\/ -->\n<div class=\"e9e85ee105af8a6a4a383deebf1fa216\" data-index=\"1\" style=\"float: none; margin:10px 0 10px 0; text-align:center;\">\n<script type=\"text\/javascript\"><!--\r\ngoogle_ad_client = \"ca-pub-4917982260456644\";\r\n\/* ramandv.com-ad1 *\/\r\ngoogle_ad_slot = \"9226290554\";\r\ngoogle_ad_width = 728;\r\ngoogle_ad_height = 90;\r\n\/\/-->\r\n<\/script>\r\n<script type=\"text\/javascript\"\r\nsrc=\"http:\/\/pagead2.googlesyndication.com\/pagead\/show_ads.js\">\r\n<\/script>\n<\/div>\n<h2>Karma &#8211; AngularJS Unit test debugging<\/h2>\n<ul>\n<li>\n<p>In karma.conf.js file, use your favorite browser<\/p>\n<pre><code> browsers = ['Chrome'];\n<\/code><\/pre>\n<\/li>\n<li>\n<p>In the spec file, add the statement &#8220;debugger&#8221; wherever you want to debug<\/p>\n<pre><code> it('my awesome test', function () {\n     debugger; \/\/This is like setting a breakpoint\n     ...\n  });\n<\/code><\/pre>\n<\/li>\n<li>\n<p>Run karma.<\/p>\n<\/li>\n<li>\n<p>In the newly opened Chrome Browser, open the console and refresh the page. The execution will stop at the position you added debugger. Now you can add additional breakpoints using the devtools also, if you want \ud83d\ude09<\/p>\n<\/li>\n<\/ul>\n<h2>Karma &#8211; AngularJS e2e test debugging<\/h2>\n<ul>\n<li>\n<p>In the karma config, enable<\/p>\n<pre><code> \/\/set log_level to debug\n LOG_LEVEL = debug;\n<\/code><\/pre>\n<\/li>\n<li>\n<p>In the e2e test scenarios, add &#8220;pause()&#8221; , check the more info at <a href=\"http:\/\/docs.angularjs.org\/guide\/dev_guide.e2e-testing\">http:\/\/docs.angularjs.org\/guide\/dev_guide.e2e-testing<\/a><\/p>\n<\/li>\n<li>\n<p>Further debugging<\/p>\n<p><a href=\"https:\/\/groups.google.com\/forum\/#!msg\/angular\/eUEVKUsif8U\/W4rnLAVF8P0J\">https:\/\/groups.google.com\/forum\/#!msg\/angular\/eUEVKUsif8U\/W4rnLAVF8P0J<\/a><\/p>\n<p>As the application runs in an iframe, if you access the angular object from the JavaScript console, it&#8217;s the scenario runner&#8217;s one, not the application&#8217;s one.<\/p>\n<p>You can refer to the angular object of the iframe window object using this verbose syntax :<\/p>\n<pre><code> document.getElementsByTagName('iframe')[0].contentWindow.angular.element(\"#app\")\n<\/code><\/pre>\n<p>Adding these two functions in the scenarios.js file will help :<\/p>\n<pre><code>function appWindow() {\n    return document.getElementsByTagName('iframe')[0].contentWindow;\n}\nfunction appAngular() {\n    return appWindow().angular;\n}\n<\/code><\/pre>\n<p>Now appWindow() and appAngular() will return respectively the application&#8217;s window and angular object. For instance :<\/p>\n<pre><code>appAngular().element(\"#content\").scope()\n<\/code><\/pre>\n<\/li>\n<\/ul>\n\n<div style=\"font-size: 0px; height: 0px; line-height: 0px; margin: 0; padding: 0; clear: both;\"><\/div>","protected":false},"excerpt":{"rendered":"<p>Karma &#8211; AngularJS Unit test debugging In karma.conf.js file, use your favorite browser browsers = [&#8216;Chrome&#8217;]; In the spec file, add the statement &#8220;debugger&#8221; wherever you want to debug it(&#8216;my awesome test&#8217;, function () { debugger; \/\/This is like setting &hellip; <a href=\"http:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"spay_email":"","jetpack_publicize_message":"","jetpack_is_tweetstorm":false},"categories":[7],"tags":[15,14],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v17.0 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"AngularJs-Karma (testacular) - Debug in browser - Articles for Developers\" \/>\n<meta property=\"og:description\" content=\"Karma &#8211; AngularJS Unit test debugging In karma.conf.js file, use your favorite browser browsers = [&#039;Chrome&#039;]; In the spec file, add the statement &#8220;debugger&#8221; wherever you want to debug it(&#039;my awesome test&#039;, function () { debugger; \/\/This is like setting &hellip; Continue reading &rarr;\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/\" \/>\n<meta property=\"og:site_name\" content=\"Articles for Developers\" \/>\n<meta property=\"article:published_time\" content=\"2013-08-26T02:46:32+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-08-27T00:48:00+00:00\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"ramandv\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/#website\",\"url\":\"http:\/\/www.ramandv.com\/blog\/\",\"name\":\"Articles for Developers\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.ramandv.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/#webpage\",\"url\":\"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/\",\"name\":\"AngularJs-Karma (testacular) - Debug in browser - Articles for Developers\",\"isPartOf\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#website\"},\"datePublished\":\"2013-08-26T02:46:32+00:00\",\"dateModified\":\"2013-08-27T00:48:00+00:00\",\"author\":{\"@id\":\"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"AngularJs-Karma (testacular) &#8211; Debug in browser\"}]},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658\",\"name\":\"ramandv\",\"url\":\"http:\/\/www.ramandv.com\/blog\/author\/ramandv\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/","og_locale":"en_US","og_type":"article","og_title":"AngularJs-Karma (testacular) - Debug in browser - Articles for Developers","og_description":"Karma &#8211; AngularJS Unit test debugging In karma.conf.js file, use your favorite browser browsers = ['Chrome']; In the spec file, add the statement &#8220;debugger&#8221; wherever you want to debug it('my awesome test', function () { debugger; \/\/This is like setting &hellip; Continue reading &rarr;","og_url":"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/","og_site_name":"Articles for Developers","article_published_time":"2013-08-26T02:46:32+00:00","article_modified_time":"2013-08-27T00:48:00+00:00","twitter_misc":{"Written by":"ramandv","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebSite","@id":"http:\/\/www.ramandv.com\/blog\/#website","url":"http:\/\/www.ramandv.com\/blog\/","name":"Articles for Developers","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.ramandv.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/#webpage","url":"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/","name":"AngularJs-Karma (testacular) - Debug in browser - Articles for Developers","isPartOf":{"@id":"http:\/\/www.ramandv.com\/blog\/#website"},"datePublished":"2013-08-26T02:46:32+00:00","dateModified":"2013-08-27T00:48:00+00:00","author":{"@id":"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658"},"breadcrumb":{"@id":"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.ramandv.com\/blog\/angularjs-karma-testacular-debug-in-browser\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"AngularJs-Karma (testacular) &#8211; Debug in browser"}]},{"@type":"Person","@id":"http:\/\/www.ramandv.com\/blog\/#\/schema\/person\/ca1ede7143462f244081566e6ff97658","name":"ramandv","url":"http:\/\/www.ramandv.com\/blog\/author\/ramandv\/"}]}},"jetpack_featured_media_url":"","jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6YZCe-2O","_links":{"self":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/174"}],"collection":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/comments?post=174"}],"version-history":[{"count":6,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions"}],"predecessor-version":[{"id":242,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/posts\/174\/revisions\/242"}],"wp:attachment":[{"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/media?parent=174"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/categories?post=174"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.ramandv.com\/blog\/wp-json\/wp\/v2\/tags?post=174"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}