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…
.
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 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
- No code cluttering
- No back and forth in code IDE and browser for debugging
- No chances of forgetting the removal of console logs 😂 and having comments in your Merge/Pull Request.
- No need to re-build of app, just to see your newly added console logs.
- 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