How to debug Flutter dependencies on VS code

Sometimes we need to debug some code on our dependencies. It is even most important when you work with multi-repo applications (I could write an article in the future about it). Someone could introduce a bug in a dependency that you depend on or you just want to know how things going under the hood.

It's very easy to do it but I see that not all people know.

So, let's get started.

To know what are all of your dependencies that your project depends on, go to dependencies in VS Code.

In this example, I'm using the default Flutter application.

On the bottom, you will see three kinds of dependencies:

• direct dependencies
• dev dependencies
• transitive dependencies

For this post, I will focus only on direct and transitive dependencies.

Direct dependencies, as its name says, are all of the direct dependencies that you import at the pubspec file in your project.

A default application comes only with two direct dependencies:

Transitive dependencies are all of the dependencies that the packages that you've imported dependent on. You could see that a list of transitive dependencies is much longer than the direct dependencies.

Most of these packs you’ve probably never seen, but under the hood, they’re all imported.

Once we know the difference between these two types of dependencies, let’s debug them all.

To debug, for instance, the path package, you only just need to go to that dependency.

Open the file that you want to set a breakpoint. For instance, set the breakpoint at line 73.

When you run your app as debug, every time the code pass here, you will be able to know what is happening.

And that’s all! :). Very simple! And very useful when you need to know how the code behaves behind the scenes.

Thanks!