front end! 7 quick debugging tools for bug discovery

Posted Jun 16, 20206 min read


This article has been authorized by the original author

Like it and see it again, develop a habit

This article GitHub has been included, more classification of previous high praise articles, also sorted out A lot of my documents, and tutorial materials. Welcome Star and Perfect, everyone can refer to the test site for review in the interview, I hope we have something together.

If you are engaged in front-end development, it should be very difficult to understand the debugging code. Especially for JavaScript, a small bug can sometimes take hours to debug. For different browsers, operating systems and devices, errors are inevitable.

This article mainly lists some debugging tools, you can choose according to the situation.

Development tools in a web browser

Any modern Web browser is equipped with powerful tools to debug applications. If you use the console statement cconsole.log(), use the pop-up window of alert(), you can also use the debugger statement to suspend code execution, which is very helpful for our debugging.

We can also use the network checker or CSS style checker to make debugging easier and smoother.

Any modern web browser is equipped with powerful tools to help debug your application. It can be as simple as using the console statement of console.log(), the pop-up window of alert(), and even the use of debugger statements to suspend code execution. These tools are very helpful for our debugging tasks, especially the debugger statements.



Almost all front-end applications send and receive JSON responses and requests. The application can do many things by requesting the API, such as authentication, user data transmission, and even some simple things, such as getting the current weather of the location.

Postman is one of the best tools for debugging interfaces. It is suitable for MacOS, Windows and Linux systems, and can quickly and easily send REST, SOAP and GraphQL requests directly.

Using Postman, we can adjust the request, analyze the response and debug the problem. This is helpful when you are unsure whether the problem is at the front end or the back end.


CSS Lint


CSSLint is a tool to help you find problems in CSS code. It can do basic syntax checks and use a set of preset rules to check problems in code. The rules can be extended.


JSON Formatter & Validator


It is difficult to find keys with incorrect syntax or incorrect key values in unformatted JSON because it is difficult to read. For compressed JSON files, it is difficult to find the errors, so we need a formatting tool.

JSON Formatter & Validator tool is a tool for formatting JSON. Just enter the compressed JSON format to get the correct format. The tool can also verify JSON to RFC standards.




No matter how perfect the test program is, bugs will inevitably exist. Some bugs will not appear every time. The code that runs well during the test may break when a user uses it, but when the program crashes in front of the user, You can't see the error, of course you will say:"Hey, I have a log". But to be honest, the program generates a large number of logs every day and distributed on various servers, and if you have multiple services under maintenance, you can't see the number of logs. When a user can t stand it one day, when you call to roar, you will find the log again and you will find that the log is actually useless:lack of context, don t know what the user s operation caused, and there are too many exceptions(never For the sake of reading the log) I don t know how to get started and so on.

Sentry is here to help us solve this problem, it is a real-time event logging and aggregation platform. It is specifically used to monitor errors and extract all the information needed to perform appropriate post-mortem operations without the hassle of using standard user feedback loops.

Sentry is a logging platform, which is divided into a client and a server. The client(currently the client has Python, PHP, C#, Ruby and other languages) is embedded In the middle of your application, if the program is abnormal, it sends a message to the server. The server records the message in the database and provides a web program for easy viewing. Sentry is written by Python, with open source code, excellent performance, and easy to expand. Currently well-known users include Disqus, Path, mozilla, Pinterest, etc.




JSHint is a Javascript code analysis and detection tool, which can not only help us detect JS code errors and potential problems, but also help us regulate code development.

JSHint Scan a program written in JavaScript and report common errors and potential bugs. Potential problems may be syntax errors, errors caused by implicit type conversion, leaking variables, or other complete problems.

JSHint Scans programs written in JavaScript and reports common errors and potential errors. Potential problems may be syntax errors, errors due to implicit type conversion, variable leaks, or other complete causes.

Here is a sample function, use it to view the operation of JSHint:




Now there are more and more browsers with their own cores, and their characteristics are also very different. If, as a front-end siege engineer, you want to check the compatibility of various browsers under different operating systems and mobile platforms, it is quite painful. Seeing that there are various environments configured with virtual machines installed on their own computers, and such environments are built on their own computers, and then tested one by one, but after all, human energy is limited. We can t install so many systems on the same computer, then Multi-browser. Fortunately, a BrowserStack is the gospel of the front end.

BrowserStack is an online cloud testing tool that provides website browser compatibility testing, so that development testers do not have to prepare many virtual machines or mobile phone simulators.

BrowserStack is an online cloud application that provides website browser compatibility testing and supports more than 100 browsers on 9 major operating systems. Support local testing and integration with Visual Studio. Or you can also go directly to to test online. Register now and you can try it for free for three months and three months The latter is charged, and if you want to use it and don t want to pay it as a developer of Tianchao after three months, you know.


Author:Mahdhi Rezvi Translator:Front Ash Source:medium

The bugs that may exist after the code is deployed cannot be known in real time. In order to solve these bugs afterwards, a lot of time is spent on log debugging. Here, I recommend a useful BUG monitoring tool Fundebug .

communicate with

The article is continuously updated every week, you can read WeChat search "Great Move World" for the first time to read and reminder(one or two earlier than the blog), this article GitHub has been included, a lot of my documents have been compiled, welcome Star and perfect, everyone can refer to the test site for review during the interview, and pay attention to the public number, reply welfare in the background, you can see the benefits ,You know.