They are here! After a long search for some dev tools that work with Angular apps, a new Chrome extension for Angular dev tools has appeared. The Angular team put a lot of effort into this.
In other words, the new Dev Tools extension allows you to view your application layout as a tree structure. You can click on each component to view its properties and see exactly where that component is on the page. There is also a profiler that analyzes the change detection cycle within the application. Let’s take a closer look.
Demonstration of Development Tools
Let’s start with where the developer tools are available. You can add developer tools to your browser through the Chrome Extension Store.
After installing the dev tools, open the Chrome dev tools panel, find the Angular option and click on it.
This will show you the developer tools starting with the root component of your app.
Since the demo application is very simple, there is nothing here, but the left half of the window shows the application components in a tree view. Currently, they are all integrated into an app-root component. The properties of the selected component are displayed on the right. In this case, all you see is the change detection policy and view wrapper. Next, let’s look at the other components that contain more information.
Open the app-root node of the tree so we can see the app-nav component. Then click on the app-nav component. The component properties are displayed on the right. At the top, you will again see the encapsulation of the view and the change detection policy. Here are the component class member variables: In this case, the set of links displayed in the navigation. Open each link and see the properties it contains.
It’s a simple situation, but it shows the potential power of development tools. Being able to check a component’s properties and values is very valuable.
Let’s take a look at some components of the app. This time the app-todos component and the app-todo component.
This component has two properties: the injected _json service and the todos$ observable. Json service help us to read excelJs file in angular. When we clicked on the app-todos component, but there is nothing underneath. Need to have a to-do list? To see it, you need to click on the gear just above the search component entry.
Clicking on the gear will open a small menu of options. The menu items are “Enable Sync API”, “Dark Mode”, and “Show Feedback Node”. What we pay attention to here is the option to show annotation nodes. When this option is selected, the app-todo component is displayed. Select the to-do component and see how it looks.
This component is similar to some of the other components we’ve seen before, but the component shows more properties. You can see the inputs and outputs and the properties available on these elements. For the todo input, you can check the value of each attribute. Being able to drill into a component to see the value of an attribute is very informative and valuable.
The last development tool they would like to highlight is the profiler. It allows you to click on an application to view information about a specific change detection cycle. These tools show how long it took, which components were affected, and how much was affected in a particular cycle. This profiler is very useful if your application is slow and you don’t know where the hangs are. Here is an image of the analyzer in action.
Click the Analyzer tab next to a component to display the analyzer start page. Then click on the gray button to the left of the tab information. This will start recording and updating the tool.
After you start recording, click around the app. Each change detection cycle is recorded by the profiler and displayed by default in a bar graph. Click on one of the bars to view detailed information about that cycle.
How to debug with Chrome DevTools?
Console
The console serves at least two purposes. Ability to view application log and runtime errors and run custom JS code. Developers can use console.log() to log messages, check the values of certain variables, or ensure that code is executed in the correct order. Warnings and most runtime errors are also displayed here. Refer to the console JS object to see what you can do.
Network panel
This will log network activity for the whole app. All uploaded or downloaded assets can be viewed in the network panel. These resources are listed in a time series and include information such as HTTP response code, load time, initiator, status, size, etc.
DOM checking
You can force state (like hover) by inspecting a specific DOM node and changing its content, properties, or type.
DevTools lets you use the node in the console or store it as a“ global variable in case you need to reference it again. But perhaps the most useful trick is to pause the JavaScript while updating the DOM node. You do this by adding jumps to property changes, node deletions, or subtree changes.
Author BIO
Shashank Suryavanshi, Senior Front-End Developer at Devstringx Technologies, a top Angular Js development company in india.. He has 07 Years of experience in Angular and React Web development. Based on his experience in IT industry he is very technical and is good in handling complex logic and attractive UI for web applications. he enjoys connecting with people and keeping himself updated with the latest technology.
