Still using console.log to debug your web application?

When it comes to debugging any web application most of the developers have this common practice to put console.log in their code.
Although few use debugger points, which is a good practice.
What if I tell you there is a way you can apply logs in your code without cluttering your code?

Here comes the Chrome Devtool Logpoints to your rescue.

Let’s use Logpoints

To demonstrate this I have created a small product inventory application, where we fetch the products and show them in a gallery to the customers.

Refer to the below code snippet

const fetchItems = async () => {
  const response = await fetch('https://fakestoreapi.com/products?limit=10');
  const data = await response.json();
  return data;
};

function App() {
  const [items, setItems] = useState();

  const refreshItems = () => {
    fetchItems().then(setItems);
  };

  useEffect(() => {
    refreshItems();
  }, []);
  
  return (
    <>
      <div className='header-actions'>
        <span className='btn-icon' onClick={refreshItems}>
          ↻
        </span>
      </div>
      <div className='all-item-wrapper'>
        {items.map((item) => (
          <Item key={item.id} {...item} />
        ))}
      </div>
    </>
  );
}

Now at some point, we all want to check the data content in fetchItems so that we can transform items of the list and pass them to Item component. Also in the above snippet of code, I have left an intentional bug and the application will crash (I was lazy to add ErrorBoundary 😅), let’s explore how logs can assist us in identifying this bug.

With our usual approach we would have added a few console.log in our application code and tried to debug it, but this time we will use Logpoints.

Let’s run the application and open the Source tab in Chrome Devtool
Add the Logpoint on desired lines, by using right click and opting forlogpoint… .

Use right-click on the desired line in the Source tab of Chrome Devtool

Added a few Logpoints to have log in console

And that’s it, we have configured logpoints at runtime without touching the code.
Logpoints are highlighted in pink color with two dots on the line.

Logpoint sample

Logpoint input is exactly same as our console.log function input. You can pass any comma separated arguments.

Now it is the moment of truth, Just run the application and as soon as the lines are executed, you will get the logs in the Console tab.

when we ran the app with the above code snippet, we got the below logs in the console

That’s the error we left intentionally in our code and it is clearly showing the log where items is undefined at the very first run.

So to handle this I have just added an optional chaining ?. before running a map over the items.

{items?.map((item) => (
          <Item key={item.id} {...item} />
        ))}

Let’s run the app again

Voila! we can see the desired logs.

Benefits of Logpoints over console.log

1. No code cluttering
2. No back and forth in code IDE and browser for debugging
3. No chances of forgetting the removal of console logs 😂 and having comments in your Merge/Pull Request.
4. No need to re-build of app, just to see your newly added console logs.
5. No unintentional human error as we are not touching the code, just to see object values.

There are more powerful tools available in Chrome like Breakpoints, Conditional breakpoints, Watchers, etc. We will cover those and many more aspects of programming in future blogs.

Happy programming at CodesandBox

Refer official doc for more details