Javascript & React Debugging Tools That Will Make Your Code Easier

I recently had an amazing opportunity at one of my dream companies to work at, and I thought to blog about my experience of what went well and what I should be working on for future opportunities.

I advanced to the 4th interview in the process. And every step in the interview got me to learn more about the company and get more experience in the process.

This is how I prepared for a job interview at one of my dream companies:

1- Make your research, and I don’t mean look up the about page, go through every product of the company, learn about its platform and what stack they use, if you have time learn something you are missing on the requirements.

2- Be yourself, you may have heard this 100 times before, but take it from me, if you see yourself working there someday then just be yourself and shine.

3- Prepare 10 questions for each interview, Yeah you heard me, I had a 60 minutes interview where I was told to ask the team questions after a short code review that lasted only for 10 minutes. Fortunately, I was prepared.

4- Go through your resume and projects, I forget easily things I’ve done in my previous jobs, problem-solving is something that every company is looking for, but when you do it daily, you may forget. Best prepare and remember as much as you can for behavioral interviews.

5- Use Pramp, pramp was helpful to me to practice both technical and behavioral interviews, and it’s free.

6- Be kind and humble, but that shouldn’t be a piece of advice lol, you should have that naturally as a human being. You’ll spend so many hours with this new team someday regularly.

Now let me tell you what I missed to mention in the interview and what I lacked that I am working on.

DEBUGGING TOOLS, , yes I spent innumerable hours debugging and problem-solving during a Bootcamp and afterward. But I dug deeper and looked up all the debugging tools that will make your code easier.

1- The Console Object

More than 67% of Javascript developers use Console.log() which comes in handy and fast. But there is more in the console object that benefits more with debugging such as:

• console.table() is really nice to debugging arrays, check this out

• Console.dir() is great to debug elements on Javascript dom.

And it’s even much better on Node compared to Console.log()

• Debugger — One of the greatest debugging tools, it has the same function as setting a breakpoint in the code. The following example shows code where a debugger statement has been inserted, to invoke a debugger (if one exists) when the function is called.

function potentiallyBuggyCode() {
    debugger;
    // do potentially buggy stuff to examine, step through, etc.
}

When the debugger is invoked, execution is paused at the debugger statement. It is like a breakpoint in the script source.

Benefits of using the debugger:

Script Blackboxing which is the ability to mark a <script> in Web Inspector so that it is ignored by the JavaScript debugger, meaning that any JavaScript execution pauses that would happen in that <script> are instead deferred until JavaScript execution has continued outside of that <script> .

Breakpoints are one of the most important debugging techniques in your developer’s toolbox. You set breakpoints wherever you want to pause debugger execution. For example, you may want to see the state of code variables or look at the call stack at a certain breakpoint. If you are trying to resolve a warning or issue while using breakpoints.

Last but not least, The Chrome Debugger extension on VSC:

Normally to debug a bug on your app, you would add the console.log() for an example in your code, then you’d go to the browser, open the console and check what output you are getting then go back to IDE and change things to go back to the browser and check again — It’s OVERWHELMING and looks like this:

But with the Chrome debugger extension, you can do all of that on the VSC.

First, this is how to install the extension:

After installing the extension you would hit the debugger icon and add a configuration, when you add a chrome launch configuration, make sure to change the URL to the localhost port your app is running on.

And once you add the configuration, you’ll be able to run the app on chrome by pressing play. You’ll have a page on chrome loaded with the debugger to debug.

Once you add a breakpoint anywhere in your app, the debugger starts working and you can view all the variables and bugs on your VSC without having to go back and forth to the webpage, isn’t that AMAZING??!!!!

I hope this was helpful,

Best,

Mokhtar