Hi, Alex here from rebeloper.com and welcome back to the channel and welcome
back to this awesome and lengthy tutorial series on DuckUI. SwiftUI in
UIKit, you heard that right SwiftUI in UIKit, well kind of and today we
are going to talk about debugging.
In the previous video I have talked about the
smart print statement that is inside DuckUI and that is a log and if you don't
know what DuckUI is go ahead and take a look at the beginning of this playlist
and yeah just take a look at all of those that come before this video
because some things that I'm talking about I'm assuming that you already
watched the previous episodes. So debugging, well in the previous episode
we were debugging via the console so we were logging out and this looks really
awesome and it is very informative. You can see we are in the main thread we are
not on the main thread. Go ahead and take a look at the previous episode, but
sometimes we want to debug on the simulator or on our device on our views.
So in Xcode 11 there is border kind of a blue border that you can see what you
are taking looking at the code and yeah we want to have that in DuckUI too.
So we have debug and today I'm going to show you how that looks. So first of
all let's remove all of these logs. They are super use useful but we are not
going to use them today. So I am just going to create that this on a simple
view but you can use them on label, UIButton and so on. So let simple view
equals UIView and in the setup views with safe area I'm just going to stack
it vertically. Let see vertical stack and let's see I'm just going to inset this.
Insetting by, let's see 24 why not. Filling parent and layout in our
container. If this sounds kind of unfamiliar then go ahead and take a look
at the previous videos about stacks and what this D_ViewController is all about and
how easy it is to use it in your project and how helpful it is of course and yeah
you can see that I have written 1, 2, 3, and finally a simple view. 4 lines of
code and I will have that simple view on the screen but now that the view is
white I just want to add a background to it so we can see our background color
let's see the color and this D_Color is super awesome go ahead and check out the
previous videos about color with DuckUI and I want to use this light let's see
the orange, okay. Let's hit command R and with these four lines of code we have a
simple view on our view controller. So how awesome is that.
There we go. We have that with inserting of course and that is super awesome we
do have inserting here and yeah that's just it.
Now we don't really want to see this set background all the time because yeah we
want to have that as white. So what do We do? Well basically we add a debug.
So let's use debug. Let's hit command R and see how super awesome this debug
tool is. There we go, we have a background color to it. It's an alpha value so we can
quite look through it if there are views on this and we have this nice
border to it with some corner radiuses, it looks really, really awesome. So let me
just for fun let's add a new label here. So let label equals UILabel
and I would just simply add a text to it
I don't want change anything but let's see DuckUI is great, okay and yeah again
how awesome is that let's just have our label here and yeah
that should be it. Or rather yet let's put it to the top because I want to show you
a problem and the solution to that. So here we have our label, let's add a comma
there. Hit command R again. These are just six lines of code and already have two
views on there. So DuckUI is great and here we have. So let's add the debug to.
Okay! let's hit command R and see how that it is DuckUI is great and now you
already know that this label is stretching all the way to the right till
here and that is super awesome. Now I didn't want to put this to the bottom
because you can't really see it on the bottom but if we do add our view let's
say a height. Set height. Let's say 200 and then we do
have a spacer here. It will push everything up and then we can add this
label right at the bottom of our simple view and yeah you just, you just move it
around and yeah I just copy and pasted that but let me just show you how I
used to do it. So command, alt and square bases moving it up, moving it out.
And you have written with just a single tap of button, you just move
your elements all of this is because of the stack and DuckUI, yeah. Go ahead and
check it out if you like it. Now one final thing and I promise you this is
everything because yeah now you know debug, you basically know how to do it.
I just want to add vertical view with for this label, a horizontal view sorry.
So stack the axis. let's have this as a horizontal. Okay and there we go, let's
add our comma there. Let's just go to that line, so let me just move that a little
bit up so you can see just holding on command, alt and square braces just
moving it up and removing or we are not going to remove because I am just going
to add another spacer here and maybe add some insetting there. Let's say
UIEdgedInsets. Yeah I'm going wild here but yeah this is how powerful you can
just simply build out your UIs and yeah let's see what is the problem here
maybe there isn't any problems. Let's see maybe the debug needs to be added in
front of the in setting, yeah. So let's build and run, oh spacer needs to be
initialized. Let's hit command R and see what we have built. Well basically we
have insetted a label and added a spacer here and now you can see that under the
debug we are not having all of the screen to the right filled up with the
label. So yeah that's how simple it is and now you you can simply debug your
code where are your views what they are covering and so on with the debug.
One thing you need to remember that this debug is basically returning a UIView.
So yeah you can call it on any UIView but it
going to return a UIView. So even if we have our label here like we can add a
text color or text as you can see we kind of cannot have a text here under
the debug because it is a UIView. It does not have a text property. So there
you go, now you have you know about it. So that is it for debug and debugging
visually with DuckUI. I hope you enjoyed this video. If you did go ahead
and give a thumbs up, subscribe to the channel and hit that notification bell.
And now it is your turn go ahead and do comment down below let me know how do
you debug your views or do you just simply add a background color as I used
to have it or you would try to prefer to use DuckUIs debug and I will see
you in the comments down below and as usual in the next one.