Debugging adventures

Get Help and Help Others
1

At the moment, I have two open topics (Redwood application debugging issues 90 views) and Development tools usage poll 74 views) both, gaining relatively low attention. So this topic introduces a bit more interesting content - while all three serve the same purpose: raise the level of debugging sophistication, a discipline that can lower productivity of a developer by a lot.

In order to create a good collection of bugs that took a lot of time and by the consequence make good cases for using the state of the art debugging tools, I will add the first addition to this collection - a typo that kept me annoyed for a few days (not full days, as I got mad on myself how the heck can I spend more than a few minutes on such trivial issue). The biggest problem for me is not being used to React programming, so the still most often used debugging tool (console.log) seems not easy to use (where to place it).

Case 1

Trying to help verify that the Redwood Tutorial accuracy is as high as the usefulness of the document (great job @cannikin), I kept typing the code and verifying its function after each section. So, I added the section Routing Params and tried to run the app:

image
image1168×705 70.7 KB

What to do here? The most obvious tack would be to have a peek at the app’s URL - but since I use Chrome with many tabs open, narrowing the URL field, that did not occur to me.

The second best thing would be to use the React Components section of the Chrome Developer Tools

image
image1373×1117 82.2 KB

This wasn’t too inviting for someone who never saw the UI for debugging React app

At this point I looked at the URL:

http://localhost:8910/blog-post%7Bid:Int%7D?id=1

By now, any React developer with his/her salt would know what caused this behavior - but as I am a greenhorn (novice), i will show you in my next update what was the problem, that I found just by starring into the code.

2

Since nobody dared to guess what caused the above-described behavior I will explain it now. I defined the route as:

<Route path="/blog-post{id}" page={BlogPostPage} name="blogPost" /

instead of:

<Route path="/blog-post/{id}" page={BlogPostPage} name="blogPost" /

Note the missing / (path separator) between blog-post and {id}. Can anyone suggest a debugging approach that would lead me to this discovery ?

3

Case 2

See the whole Discord thread here.

I very much look forward to its end, so I can repost the key problem definition and seek for someone who would tell all of us how to debug it using the latest VSCode

4

So, path is a string … so even though there are braces, "/blog-post{id}" is a valid string … just improperly formatted for crafting a parameterized route.

The only way I could see testing or debugging this is if you had and clicked on a

<Link to={routes.blogPost({ id: 123 })}>Click to view post</Link>

I think you’d see in the url the location: localhost:8910/blog-post{id} and then some url encoded chars and the id.

You could then realize that your path was wrong.

5

Thanks, @dthyresson - you are correct in your interpretation of this situation. I cited it here as an illustration of a difficult to debug case.