Debugging skills are essential for front-end developers as we create products for various browsers, using different languages, and especially with different screen sizes. Therefore, as front-end engineers, we must continuously develop and improve our debugging skills.
There are several tools and techniques that can be used to debug front-end issues. ome of the most common include:
Browser Developer Tools
For example, when debugging HTML/CSS, you can check the style section and computed section to see what is causing an issue.
- Style applied
- Causing HTML to have "strange" behaviour
- Size of HTML
Keep in mine, we must to know how to read error. Take a example,
TypeError: Failed to fetch
It appears that some of our code has failed to fetch data, which may be related to the Workbox library used for Progressive Web Applications (PWA). If we encounter errors in our PWA settings, we can assume that this is the cause. Additionally, if we use Safari, we may encounter some "strange" or "unique" errors.
Another things is, if we use Safari than we will encounter some "strange" or "uniq" error like i got yesterday.
Console in browser just giving not enough information and print
TypeError: c.split("+").at is not a function. (In 'c.split("+").at(-1)', 'c.split("+").at' is undefined)
Network tab in chrome allow you to view and debug network requests and responses for a website. We can easily identify and troubleshoot issues with
- API / Data Request
- JS, CSS / other media / file
- Inspect Network Header Request, Cookies and Payload from request
To easily disable caching and test different network speeds, we can use Chrome Dev Tools and the Throttling feature. This is important as caching can make debugging more difficult if changes have been made to our web application.
React Developer Tools
React Developer Tools is a browser extension that allows developers to inspect and debug React components in a website or application. It allows developers to easily view the component hierarchy and props, as well as the state and context of a React application.
This can be extremely helpful for identifying and troubleshooting issues with the structure, layout, and functionality of a React application. Additionally, React Developer Tools allows developers to interact with the components in real-time, by changing the props and state, and seeing the effect on the application.
Lighthouse is a tool that can be used to analyze the performance, accessibility, best practices, and SEO of a website.
Using Lighthouse will generate report to giving us insight about our website, and we can take action. Example regarding First Contentful Paint, Loading Time and other things. Not only generate report, lighthouse giving advice cause of the problem and how we solve problem.
Sentry is an error tracking and monitoring tool that allows developers to identify and troubleshoot issues in their applications. Sentry is an tools for production to help identify and fix issues that may not be immediately visible in development.
Debugging code as a front-end developer can be quite challenging in today's environment, especially with the many new features and tools available. However, new updates and features are continually being released to improve debugging. Some examples that are not mentioned in this article include the Debugger in Chrome and Elastic APM. It is hoped that this article will help to improve the debugging skills of front-end developers.