I recently went on a hunt for Angular (formerly known as Angular 2) profiling tools. Angular is a fantastic framework, but the component hierarchies can get a little crazy. Fortunately, there’s a way to tame the complexity. After some Google searching, I came across Augury. Augury is a debugging and profiling tool created by Google and Rangle.io.
Augury is simple to install. First, install the Augury Chrome Extension (Sorry Firefox lovers, no soup for you.) There is no step 2.
Once installed, Augury shows up as a new tab in your Chrome Developer Tools. If you have an Angular app running in debug mode (it doesn’t work on prod mode), the tab will show several visualizations of your application. The first one is the component tree, which lays out the components for whatever page you are on. Click a component to see the properties and events for it. You can also manipulate the underlying models and trigger events. Additionally, each component is has a link to its source code. If you want to set a breakpoint, just click and you’ll be right there.
You can also get a visualization of injected services by clicking on the Injector Graph. It’ll help you figure out where your dependencies come from.
If your application is using routing, click on the routing tree tab to get a visualization of the routing structure.You can click into the routes to see what url triggers them, along with other route information. If you happen to use lazy loading, those routes are marked as “lazy loaded” until you access them.
If you want to see a breakdown of your application’s module structure, click the NgModules tab. This is a good way to get a high level overview of your application.
Overall, Augury makes it easier to reason about your Angular applications. By visualizing the component trees, routing, and module structures, you get a high level overview of your application’s structure. Additionally, the extra debugging features add a layer of easy to the already fantastic Chrome Developer tools. I’ve added this to my day-to-day Angular tool belt and urge you to do the same.
There are lots of different ways to learn new things. Many of these methods are easy to integrate into your life. We all have a limited amount of time, so I like to use learning methods that capitalize on otherwise wasted time. My primary target is the time I spend in the car. Additionally, there’s so many inexpensive ways to learn new skills. Here’s a few of the ways you can learn some new skills.
The easiest one is to read books. Books are cheap and accessible. If you don’t have a lot of time to read, get yourself an Audible subscription. Most books are also available in audio form.
College courses are nice, but there are better options. The Great Courses publishes classes taught by leading professors. I like to listen to them on my way to work. You can also access college level courses through moocs like EdX, Coursera, and iTunes U. Additionally, Udemy has a wide variety of inexpensive courses (wait for their $10 sales).
In order for your hard-won knowledge to be useful, you need to remember it. One method I use to learn better is to keep a commonplace book. A commonplace book is a collection of notes and quotations from the things you’ve read. This used be a common practice, but it’s coming back as people discover how useful it is. I record notes on anything interesting that I read. I also collect scraps of articles and interesting quotations. I keep these in a OneNote notebook that I can refer to. I also review things I’ve read before and add to my commonplace file. This cycle of note taking and review helps me get more out of what I read.
Organizations / Clubs
There’s a meetup for everything. Go find a group of people you can learn from. It’s often easier to talk to someone than to scour the Internet for resources. I’m looking into more agile groups to expand my business skills.
This is one of the best ways to pick up new skills. If it’s a “maker” skill, like design or programming, build something. Side projects are a great way to learn something new. If it’s not a “maker” skill, like psychology, make something with the knowledge. Write a blog post or a talk. I never feel like I’m proficient until I use my knowledge to make something.
If you want to be more successful, learn a new skill. Each new skill makes you a more useful person. If you want to be more creative, diversify yourself. Diverse knowledge gives you more resources to draw from. If you want to win at work, be a jack of all trades, master of one. There are lots of learning resources at your disposal. Put them to work for you.
If you want to improve it, you need to measure it. We use profiling tools to get the insight required to find and destroy application bottlenecks. I’m a big fan of local profiling tools that you can install and run from within your application. My favorites are Miniprofiler and Glimpse. Unfortunately, many of the tools that are available on regular ASP.NET are not available for ASP.NET Core. In this post, we’re going to explore our options for local profiling in ASP.NET Core. Currently, it’s slim pickings, but there are a few tools available.
For standard ASP.NET (non-core) Applications, there are a variety of profiling tools available. Some of those tools cost money and others are free. Unfortunately, most of them lack ASP.NET Core support. This is, in part, because ASP.NET Core is new. Additionally, our good friends at Microsoft have thrown the community a few curve-balls with the last few versions of the .NET Core. Most companies don’t want to waste their time building tools if the framework is going to have a ton of breaking changes. This is especially true for free tools.
Here’s the status of a few popular tools (as of January 2017):
The folks at Stack Overflow are waiting for a more stable version .NET Core to build their .NET core version of Miniprofiler. They said they will build a new version, but they only want to do it once.
JetBrains has not released a .NET Core version of dotTrace, though they claim some functionality with the current version. I’ve never tried this one, so I have no idea if it’s worth waiting for.
I love Glimpse. It’s one of my favorite profiling tools. The folks behind Glimpse put out a Beta version of Glimpse about a year ago. It lacked full functionality and no longer works. They appear to be working on the new version now. Their GitHub repo has recent check ins, so I’m hoping a new version appears soon.
This is Microsoft’s default solution for application performance monitoring. It’s meant to be used in conjunction with Azure, but you can run it locally and use Visual Studio to look at the results. Once hooked up to Azure, you can use this as a general application performance monitoring (APM) tool. It’s installed by default in new ASP.NET Core Projects (look at the startup.cs), so Microsoft really wants you to use it. I kicked the tires a bit. Prefix is a competent option for ASP.NET Core.
Application Insights in action:
Stackify prefix is a free tool you can install on your PC that monitors your ASP.NET applications. You’ll need to also install it in your project, but once you do so, you get access to detailed information about your application’s requests. They have a paid version of the Prefix and a related APM product, so there’s some commercial backing here. I’ve tried out Prefix a few times and the tool is adequate for local profiling. It gives you the data you need, but I’m not a huge fan of the development experience. That being said, the tool gives you access to lots of data and works on .NET Core.
Stackify Prefix in action:
I’m still waiting for a new version of Glimpse (or Miniprofiler), but Stackify Prefix and Application Insights are good tools. I miss the easy to use inline monitoring of Glimpse, but Prefix and Application Insights have their advantages. Not only are they supported on .NET core, they also hook into more robust monitoring systems. You will be well served by either option. Go forth and monitor your apps, it’ll save you a lot of pain down the road.