Скачать или смотреть AngularJS Tutorial about Debugging Angular Applications

Even though Angular 2 is still young, there are plenty of debugging techniques and methods you can use.

This guide gives a comprehensive overview of the various ways you can debug an Angular 2 applications. To make the most out of Angular 2 debugging, it is recommended that you use Google Chrome as most of the examples presented here rely on the Chrome Developer Tools

Enabling and disabling debugging
Angular 2 applications have development mode enabled by default. Development mode enables errors to be displayed in the console and the usage of breakpoints. When you open your console in debugging mode, you would normally see this message pop up:

Angular 2 is running in the development mode. Call enableProdMode() to enable the production mode
Before you deploy your application and put it on a live server, make sure you disable development mode. To do so, you need to import the function in the file where you're bootstrapping the application:

//main.ts

import { enableProdMode } from '@angular/core';

enableProdMode();
bootstrap(AppComponent, [
//providers, etc
]);
Before you dive in this guide, make sure your application has production mode disabled so that you can have access to the all the methods described below.

Console
If you like being old school, there is a neat way to debug your Angular 2 application from the console. To start off, you can use the Chrome Developer Tools (Devtools for brevity) to get the refernce of an element you have selected by using $0
lthough not always necessary nor a first step, we can get access to the Angular properties that are attached to any DOM element. We can use these properties to peek into how the data is flowing in our application.

We should never rely on fetching element properties from a DOM element during the lifecycle of an application. The techniques are presented as techniques for debugging purposes.

To fetch these properties from the DOM, we need to find the DOM element in which we’re interested. If we have the full jQuery library available, we can use the jQuery selector syntax: $("selector").

We don’t need to rely on jQuery, however, to target and fetch elements from the DOM. Instead, we can use the document.querySelector() method.

Note that the document.querySelector() is not available on all browsers and is generally good for non-complex element selections, whereas Sizzle (the library jQuery uses) or jQuery support more complex selections.

We can retrieve the $rootScope from the DOM by selecting the element where the ngApp directive is placed and wrapping it in an Angular element (using the angular.element() method).

With an Angular element, we can call various methods to inspect our Angular app from inside the DOM. To do so, we need to select the element from the DOM. Using only JavaScript and Angular, we can do so in this way:

var rootEle = document.querySelector("html");
var ele = angular.element(rootEle);
With this element, we can fetch various parts of our application.

scope()
We can fetch the $scope from the element (or its parent) by using the scope() method on the element:

var scope = ele.scope();
Using the element’s scope, we can inspect any scope properties, such as custom variables that we set on the scope in our controllers. We can peek into the elements looking into its $id, its $parent object, the $watchers that are set on it and even manually walk up the scope chain.

controller()
We can fetch the current element’s controller (or its parent) by using the controller() method:

var ctrl = ele.controller();
// or
var ctrl = ele.controller('ngModel');
injector()
We can fetch the injector of the current element (or the containing element) by using the injector() method on the selected element.

var injector = ele.injector();
With this injector, we can then then instantiate any Angular object inside of our app, such as services, other controllers, or any other object.